update(job-offer-create): css improved

src/page-job-offer-create.pug

@@ -19,13 +19,12 @@
     class-title='field form-label is-light is-expanded'
     label-title='Title*'
     
-    class-title-text='small-margin'
     widget-title-text='title-text'
     
     class-description='field form-label is-light is-expanded'
     label-description='Description*'
+    widget-description='sib-form-textarea'
     
-    class-description-text='large-margin'
     widget-description-text='description-text'
     
     class-skills='form-label is-dark'
@@ -37,6 +36,6 @@
     label-closingDate='Publication end date:*'
     widget-closingDate='sib-form-date'
     
-    next="job-offers"
+    next='job-offers'
   )
 

src/styles/base/form.scss

@@ -41,26 +41,31 @@
       display: flex;
       flex-direction: column;
 
-      input {
+      input,
+      textarea {
         -webkit-tap-highlight-color: $color-244-73-62;
         background-color: $color-222-57-95;
-        border: none;
+        box-sizing: border-box;
+        border: 2px solid $color-222-57-95;
         color: $color-233-18-29;
         /*flex: 1 1 0;  Problem on Firefox for input type date*/
         margin-top: 0.8rem;
         min-width: 0;
-        padding: 1.2rem;
+        padding: 1rem;
+      }
+
+      input:not([type="search"]),
+      textarea {
+        border: 2px solid $color-222-57-95;
 
         &:focus,
         &:active {
-          border-color: transparent;
           border-bottom: 2px solid $color-244-73-62;
         }
       }
     }
 
-    input[type='submit'] {
-      margin-top: 6rem;
+    input[type="submit"] {
       background-color: $color-233-18-29;
       border: none;
       border-radius: 100em;
@@ -68,6 +73,7 @@
       float: right;
       font-size: 1.4rem;
       font-weight: bold;
+      margin-top: 6rem;
       padding: 0.85rem 2.55rem;
       text-transform: uppercase;
     }
@@ -92,17 +98,18 @@
     /* WIDGETS */
 
     sib-form-date {
-
-      input[type='date'] {
-        color: $color-213-4-50;
-        font-size: 1.4rem;
-        margin-top: 1.6rem;
-        max-width: 48.75vw;
+      input[type="date"] {
         background-image: url("/images/calendar.svg");
         background-position: right 12px top 50%;
         background-repeat: no-repeat;
-        background-size: 14px;
+        background-size: 1.4rem;
+        color: $color-213-4-50;
         cursor: default;
+        font-size: 1.4rem;
+        margin-top: 1.6rem;
+        max-width: 50vw;
+        padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
+        padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
         position: relative;
 
         &::-webkit-calendar-picker-indicator {
@@ -114,17 +121,17 @@
 
         &::-webkit-clear-button {
           cursor: pointer;
-          margin-right: 3px;
+          margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+          margin-right: 5px;
         }
 
         &::-webkit-inner-spin-button {
-          display: none
+          display: none;
         }
       }
     }
 
     sib-multiple-select {
-
       sib-form-auto-completion > label {
         display: flex;
         flex-direction: column;
@@ -146,7 +153,7 @@
 
             .ss-add {
               font-size: 1.8rem;
-              margin: 0 12px 0 0;
+              margin: 0 18px 0 0;
 
               span.ss-plus {
                 background: $color-244-73-62;
@@ -191,7 +198,7 @@
       }
     }
 
-  /*
+    /*
     input {
       -webkit-appearance: none;
       align-items: center;
@@ -344,7 +351,7 @@
     }
   */
     /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-  /*
+    /*
     sib-form-multiple-dropdown {
 
       button {