From 77dd8931f2dea50bdefd615a76f19779bf094dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 31 May 2019 20:37:14 +0200 Subject: [PATCH] ui(job-offer-create): CSS on form + multiple-select reviewed --- src/page-job-offer-create.pug | 25 +++--- src/styles/base/form.scss | 133 ++++++++++++++++++++++++++++-- src/styles/components/skills.scss | 22 ++--- 3 files changed, 153 insertions(+), 27 deletions(-) diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug index f765910..ae0202b 100644 --- a/src/page-job-offer-create.pug +++ b/src/page-job-offer-create.pug @@ -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" ) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 5265551..d50bbf0 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -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; } -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/src/styles/components/skills.scss b/src/styles/components/skills.scss index a526548..e59770d 100644 --- a/src/styles/components/skills.scss +++ b/src/styles/components/skills.scss @@ -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; } \ No newline at end of file