ui(job-offer-create): CSS on form + multiple-select reviewed
This commit is contained in:
Gaëlle Morin
parent
6ba87b0d27
commit
77dd8931f2
|
|
@ -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"
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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 > * {
|
||||
|
|
@ -291,4 +411,5 @@ sib-form {
|
|||
input[type='reset'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
sib-multiple[name*='skills'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.skill {
|
||||
background-color: $color-43-100-50;
|
||||
border: 1px solid $color-43-100-50;
|
||||
border-radius: 2em;
|
||||
color: $color-0-0-100;
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
margin: 0.4rem 1rem 0.4rem 0;
|
||||
padding: 0.5rem 2rem;
|
||||
background-color: $color-43-100-50;
|
||||
border: 1px solid $color-43-100-50;
|
||||
border-radius: 2em;
|
||||
color: $color-0-0-100;
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
margin: 0.4rem 1rem 0.4rem 0;
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
Loading…
Reference in New Issue