circle-info buttons styled + form buttons refactored

This commit is contained in:
Gaëlle Morin 2019-10-30 11:47:39 +01:00
parent 4aa69a1605
commit fda9e3dd22
4 changed files with 69 additions and 57 deletions

View File

@ -6,7 +6,7 @@ sib-router(default-route='circle-profile')
include templates/hd-circle-team.pug include templates/hd-circle-team.pug
.content-box__info .content-box__info
sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources)
sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members sib-link(class="button blue-button", next="circle-edit", bind-resources) Edit and add Members
sib-display.block( sib-display.block(
bind-resources bind-resources
@ -43,44 +43,46 @@ sib-router(default-route='circle-profile')
widget-team='circle-team-template' widget-team='circle-team-template'
) )
sib-ac-checker(permission='acl:Delete', bind-resources) div.box-button
sib-delete( sib-ac-checker(permission='acl:Delete', bind-resources)
sib-delete(
bind-resources
data-label='Delete Circle'
class='button reversed-btn right-btn'
)
sib-widget(name='join-leave-circle-button')
template
sib-ac-checker(
permission="acl:Delete"
data-src="${value['@id']}"
)
sib-delete(
data-src="${value['@id']}"
data-label='Leave circle'
class='btn-margin-left'
)
sib-display(
bind-resources bind-resources
data-label='Delete Circle' fields='members'
class='right-btn reversed-btn'
multiple-members=''
widget-members='join-leave-circle-button'
) )
sib-widget(name='join-leave-circle-button') sib-form.btn-margin-left(
template bind-resources
sib-ac-checker( nested-field='members'
permission="acl:Delete" fields='user'
data-src="${value['@id']}" label-user=''
) range-user=`${endpoints.users}`
sib-delete( widget-user='sib-form-dropdown'
data-src="${value['@id']}"
data-label='Leave circle'
)
sib-display( set-user-id-select="user"
bind-resources
fields='members'
multiple-members='' submit-button='Join Circle'
widget-members='join-leave-circle-button' )
)
sib-form.block.team-form(
bind-resources
nested-field='members'
fields='user'
label-user=''
range-user=`${endpoints.users}`
widget-user='sib-form-dropdown'
set-user-id-select="user"
submit-button='Join Circle'
)
#circle-edit(hidden) #circle-edit(hidden)

View File

@ -2,10 +2,6 @@
&.with-form { &.with-form {
sib-form {
padding-bottom: 2.55rem;
}
h1 { h1 {
color: $color-233-18-29; color: $color-233-18-29;
font-weight: bold; font-weight: bold;
@ -86,20 +82,30 @@
} }
} }
input[type='submit'], .right-btn, sib-delete.right-btn button { .button,
background-color: $color-233-18-29; input[type='submit'],
border: none; sib-delete button {
border-radius: 100em; border-radius: 100em;
color: $color-0-0-100;
cursor: pointer; cursor: pointer;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;
margin-left: auto;
margin-top: 3.2rem;
padding: 0.55rem 2.5rem; padding: 0.55rem 2.5rem;
text-transform: uppercase; 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;
}
.reversed-btn, sib-delete.reversed-btn button { .reversed-btn, sib-delete.reversed-btn button {
background-color: transparent; background-color: transparent;
border: 1px solid #6157e5; border: 1px solid #6157e5;
@ -113,6 +119,10 @@
padding: 0; padding: 0;
} }
.btn-margin-left {
margin-left: 2.2rem;
}
sib-form[set-user-id-select] { sib-form[set-user-id-select] {
input[type="submit"] { input[type="submit"] {
@ -163,9 +173,8 @@
>input[type='submit'] { >input[type='submit'] {
background-color: transparent; background-color: transparent;
border: 1px solid #6157e5; border: 1px solid $color-244-73-62;
color: #6157e5; color: $color-244-73-62;
font-size: 1.4rem;
align-self: flex-end; align-self: flex-end;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
margin-left: 4.2rem; margin-left: 4.2rem;

View File

@ -107,13 +107,13 @@ sib-delete {
@include icon('close'); @include icon('close');
background-color: $color-233-18-29; background-color: $color-233-18-29;
border: none; border: none;
border-radius: 100em; /*border-radius: 100em;*/
color: $color-0-0-100; color: $color-0-0-100;
cursor: pointer; /*cursor: pointer;*/
font-size: 1.4rem; /*font-size: 1.4rem;*/
font-weight: bold; /*font-weight: bold;*/
padding: 0.55rem 2.5rem; /*padding: 0.55rem 2.5rem;*/
text-transform: uppercase; /*text-transform: uppercase;*/
&::before { &::before {
font-size: 1.6rem; font-size: 1.6rem;

View File

@ -19,13 +19,14 @@
.circle-edit-button { .circle-edit-button {
align-self: flex-end; align-self: flex-end;
position: absolute; position: absolute;
>sib-link {
background: $color-244-73-62;
}
} }
} }
.box-button {
display: flex;
justify-content: flex-end;
}
.block { .block {
>form { /* peut-être à mettre dans main.scss */ >form { /* peut-être à mettre dans main.scss */