ui(job-offer-create): CSS on form + multiple-select reviewed

This commit is contained in:
Gaëlle Morin 2019-05-31 20:37:14 +02:00
parent 6ba87b0d27
commit 77dd8931f2
3 changed files with 153 additions and 27 deletions

View File

@ -11,22 +11,27 @@
p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
sib-form.block(
data-src=`${sdn}/sources/job-offers/`,
range-skills=`${sdn}/skills/`,
data-src=`${sdn}/sources/job-offers/`
range-skills=`${sdn}/skills/`
data-fields='title, title-text, description, description-text, skills',
data-fields='title, title-text, description, description-text, skills'
label-title='Title*',
class-title='field form-label is-light is-expanded'
label-title='Title*'
widget-title-text='title-text',
class-title-text='small-margin'
widget-title-text='title-text'
label-description='Description*',
class-description='field form-label is-light is-expanded'
label-description='Description*'
widget-description-text='description-text',
class-description-text='large-margin'
widget-description-text='description-text'
label-skills='The required skills for this mission:*',
multiple-skills='sib-multiple-select',
widget-skills='sib-form-auto-completion',
class-skills='form-label is-dark'
label-skills='The required skills for this mission:*'
multiple-skills='sib-multiple-select'
widget-skills='sib-form-auto-completion'
next="job-offers"
)

View File

@ -23,13 +23,12 @@
}
p.center {
margin-bottom: 6.8rem;
text-align: center;
}
[name$='-text'] {
font-size: 1.5rem;
margin-bottom: 2em;
margin-bottom: 2rem;
}
div[name^='block-'] {
@ -37,6 +36,124 @@
flex-direction: column;
}
label {
display: flex;
flex-direction: column;
input {
-webkit-appearance: none;
background-color: $color-222-57-95;
border: none;
color: $color-233-18-29;
flex: 1 1 0;
margin-top: 0.8rem;
min-width: 0;
padding: 1.2rem;
}
}
input[type='submit'] {
margin-top: 6rem;
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
color: $color-0-0-100;
float: right;
font-size: 1.4rem;
font-weight: bold;
padding: 0.85rem 2.55rem;
text-transform: uppercase;
}
/* CLASSES Peut-être à sortir de .content-box */
.form-label {
font-weight: 600;
&.is-dark label > div {
color: $color-216-4-22;
}
&.is-light label > div {
color: $color-244-10-70;
text-transform: uppercase;
}
}
.large-margin>p{
margin-bottom: 3rem;
}
.small-margin>p {
margin-bottom: 2.2rem;
}
/* WIDGETS */
sib-multiple-select {
sib-form-auto-completion > label {
display: flex;
flex-direction: column;
.ss-main {
margin-top: 1.6rem;
width: 70%;
.ss-multi-selected {
align-items: center;
background-color: $color-222-57-95;
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
height: 4.2rem;
.ss-values {
background: transparent;
position: absolute;
top: 6rem;
width: 100%;
}
.ss-disabled {
color: transparent;
}
.ss-add {
@include icon('plus');
color: $color-244-73-62;
font-size: 1.8rem;
margin: 0px 12px 0 38px;
position: absolute;
span.ss-plus {
align-self: center;
background: transparent;
&::after {
background: transparent;
}
}
}
.ss-values {
.ss-value {
@extend .skill;
display: flex;
.ss-value-delete {
font-weight: normal;
}
}
}
}
}
}
}
/*
input {
-webkit-appearance: none;
align-items: center;
@ -187,9 +304,9 @@
box-sizing: border-box;
}
}
*/
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
/*
sib-form-multiple-dropdown {
button {
@ -227,8 +344,9 @@
font-weight: bold;
text-transform: uppercase;
}
*/
}
/*
.is-horizontal {
display: flex;
}
@ -269,7 +387,9 @@
}
}
}
*/
}
/*
sib-form {
form > * {
@ -292,3 +412,4 @@ sib-form {
display: none;
}
}
*/