diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index ffc0691..81916a7 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -46,9 +46,9 @@ sib-router(default-route='circle-profile') div.box-button sib-ac-checker(permission='acl:Delete', bind-resources) sib-delete( + class='button text-bold text-uppercase button-blue bordered with-icon icon-trash' bind-resources data-label='Delete Circle' - class='button reversed-btn right-btn' ) sib-widget(name='join-leave-circle-button') @@ -58,9 +58,9 @@ sib-router(default-route='circle-profile') data-src="${value['@id']}" ) sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' data-src="${value['@id']}" data-label='Leave circle' - class='btn-margin-left' ) sib-display( @@ -71,18 +71,19 @@ sib-router(default-route='circle-profile') widget-members='join-leave-circle-button' ) - sib-form.btn-margin-left( - bind-resources - nested-field='members' - fields='user' - label-user='' - range-user=`${endpoints.users}` - widget-user='sib-form-dropdown' + button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-close.test + sib-form( + bind-resources + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' - set-user-id-select="user" + set-user-id-select="user" - submit-button='Join Circle' - ) + submit-button='Join Circle' + ) #circle-edit(hidden) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index b3c3889..d9a3834 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -82,52 +82,6 @@ } } - .button, - input[type='submit'], - sib-delete button { - border-radius: 100em; - cursor: pointer; - font-size: 1.4rem; - font-weight: bold; - padding: 0.55rem 2.5rem; - text-transform: uppercase; - } - - input[type='submit'] { - background-color: $color-233-18-29; - border: none; - color: $color-0-0-100; - margin-left: auto; - margin-top: 3.2rem; - } - - .blue-button { - background: $color-244-73-62; - color: white; - } - - .yellow-button { - background: $color-43-100-50; - color: white; - } - - .reversed-btn, sib-delete.reversed-btn button { - background-color: transparent; - border: 1px solid #6157e5; - color: #6157e5; - } - - sib-delete.right-btn { - border: none; - border-radius: 0; - margin: 0; - padding: 0; - } - - .btn-margin-left { - margin-left: 2.2rem; - } - sib-form[set-user-id-select] { input[type="submit"] { @@ -177,13 +131,24 @@ } >input[type='submit'] { - background-color: transparent; + @extend + .button, + .btn-margin-left, + .text-bold, + .text-uppercase, + .button-blue, + .bordered; + margin-top: auto; + margin-bottom: auto; + + + /*background-color: transparent; border: 1px solid $color-244-73-62; color: $color-244-73-62; align-self: flex-end; margin-bottom: 0.6rem; margin-left: 4.2rem; - margin-top: 0; + margin-top: 0;*/ } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4655bb7..56d0d11 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -231,6 +231,10 @@ a, font-size: 1.4rem; } + &.btn-margin-left { + margin-left: 2.2rem; + } + &.small { *, @@ -277,8 +281,8 @@ a, font-size: 1.6rem; margin-right: 1rem; - &.icon-plus { - @include icon('plus'); + &.icon-arrow-right { + @include icon('trash'); } &.icon-close { @@ -288,6 +292,14 @@ a, &.icon-edit { @include icon('pencil'); } + + &.icon-plus { + @include icon('plus'); + } + + &.icon-trash { + @include icon('trash'); + } } &.button-yellow { @@ -348,6 +360,10 @@ a, } } + &.test { + display: flex; + } + &.reversed { &.button-yellow { background-color: hsl(43, 100%, 50%); diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index aa97566..d75cd84 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -37,12 +37,12 @@ .form-label.is-dark>label { margin-top: 0; - >div:first-child { + /*>div:first-child { @extend h3; font-weight: bold; margin: 0 0 1.4rem; text-transform: uppercase; - } + }*/ } }