Merge branch 'gm-form-css' into 'staging'

CSS on job-offer-create form

See merge request startinblox/applications/sib-app!44

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/`,
+    data-src=`${sdn}/sources/job-offers/`
-    range-skills=`${sdn}/skills/`,
+    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:*',
+    class-skills='form-label is-dark'
-    multiple-skills='sib-multiple-select',
+    label-skills='The required skills for this mission:*'
-    widget-skills='sib-form-auto-completion',
+    multiple-skills='sib-multiple-select'
+    widget-skills='sib-form-auto-completion'
     
     next="job-offers"
   )

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;
   }
-}
+}
+*/

src/styles/components/skills.scss

@@ -1,16 +1,16 @@
 sib-multiple[name*='skills'] {
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .skill {
-    background-color: $color-43-100-50;
+  background-color: $color-43-100-50;
-    border: 1px solid $color-43-100-50;
+  border: 1px solid $color-43-100-50;
-    border-radius: 2em;
+  border-radius: 2em;
-    color: $color-0-0-100;
+  color: $color-0-0-100;
-    display: block;
+  display: block;
-    font-size: 1.4rem;
+  font-size: 1.4rem;
-    font-weight: bold;
+  font-weight: bold;
-    margin: 0.4rem 1rem 0.4rem 0;
+  margin: 0.4rem 1rem 0.4rem 0;
-    padding: 0.5rem 2rem;
+  padding: 0.5rem 2rem;
 }