From 77dd8931f2dea50bdefd615a76f19779bf094dbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
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 f7659105..ae0202b0 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 52655515..d50bbf07 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 a5265489..e59770d7 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
--
GitLab