filters section almost ok

src/page-job-offers.pug

@@ -1,7 +1,7 @@
 div.grid-layer
   div.grid-layer-main.containerV
-    h2 Nouvelles offres
-      span Tu trouveras ici des offres de missions
+    h2 New offers
+      span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
       data-fields='date, user-thumb, title, description, skills',
@@ -18,10 +18,10 @@ div.grid-layer
   div.grid-layer-links.containerV
     sib-link(next="job-offer-create").containerH.containerCenter.action-link
       div.icon-plus
-      div Poster une offre
+      div Post a new offer
     sib-link().containerH.containerCenter.how-link
       div.icon-idea
-      div.grow Comment trouver une offre ?
+      div.grow How To find a new offer?
     sib-link().containerH.containerCenter.how-link
       div.icon-idea
-      div.grow Comment programmer des notifications ?
+      div.grow How to set notification?

src/styles/content.scss

@@ -319,33 +319,6 @@ hdapp-available {
     grid-row-end: end;
   }
 }
-#offers-list > sib-form > form {
-  background-color: orangered;
-  //display: grid;
-  //grid-template-columns: 1fr 1fr;
-  //grid-gap: 20px;
-
-  sib-form-label-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  label {
-    //flex-basis: 5em;
-    //flex-shrink: 0;
-    display: block;
-  }
-
-  input, select {
-    //flex-grow: 1;
-    //min-width: 0;
-    //box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-  }
-
-  input[type="submit"] {
-    display: none;
-  }
-}
 
 #member-profile,
 #profiles-list {

src/styles/filters.scss

@@ -0,0 +1,56 @@
+#offers-list > sib-form > form {
+  border-bottom: 1px solid $color-grey1;
+  display: grid;
+  grid-gap: 0px 24px;
+  grid-template-columns: 33% auto;
+  padding-bottom: 3em;
+
+
+  label {
+    display: block;
+  }
+
+  input, select {
+    border-style: none;
+    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+    margin-top: 1em;
+  }
+
+  input[type="submit"] {
+    display: none;
+  }
+
+  select {
+    background: white;
+    display: inline-block;
+    padding: 0.5em 12.5em 0.5em 1em;
+
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    background-image:
+      linear-gradient(45deg, transparent 50%, $color-grey 50%),
+      linear-gradient(135deg, $color-grey 50%, transparent 50%),
+      linear-gradient(to right, white, white);
+    background-position: 
+      calc(100% - 20px) calc(1em + 2px),
+      calc(100% - 15px) calc(1em + 2px),
+      calc(100% - 2.5em) 0.5em;
+    background-repeat: no-repeat;
+    background-size:
+      5px 6px,
+      5px 6px,
+      1px 1.5em;
+  }
+
+  sib-form-label-text {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#
+
+
+

src/styles/form.scss

@@ -64,11 +64,12 @@ sib-form.block {
   }
 }
 
+//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres.
 sib-form {
   // text like
   textarea,
   input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
-    padding: 0.5em;
+    padding: 0.7em;
     border: none;
     @extend %shadow;
   }
@@ -105,14 +106,3 @@ sib-form {
     }
   }
 }
-
-sib-form-label-text,sib-form-dropdown{
-  //display: flex;
-  //flex-wrap: nowrap;
-}
-
-select{
-  background-color: $color-white;
-  border-style: none;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15)
-}

src/styles/index.scss

@@ -8,6 +8,7 @@
 @import 'main';
 @import 'form';
 @import 'content';
+@import 'filters';
 @import 'right-panel';
 
 // @import 'members';

src/styles/main.scss

@@ -280,67 +280,15 @@ sib-trigger.back {
   grid-template-columns: [start]auto[middle]25%[end];
   grid-template-rows: [start]13em[middle]auto[end];
 }
-.grid-layer-main{
-  background: green;
+.grid-layer-main {
   grid-column-start: start;
   grid-column-end: end;
   grid-row-start: start;
   grid-row-end: end;
 }
-.grid-layer-links{
-  background: pink;
+.grid-layer-links {
   grid-column-start: middle;
   grid-column-end: end;
   grid-row-start: start;
   grid-row-end: middle;
 }
-
-
-
-
-
-#offers-list > sib-form > form {
-  select {
-    background: white;
-    display: inline-block;
-    line-height: 1.5em;
-    padding: 0.5em 12.5em 0.5em 1em;
-
-    box-sizing: border-box;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-
-    background-image:
-      linear-gradient(45deg, transparent 50%, gray 50%),
-      linear-gradient(135deg, gray 50%, transparent 50%),
-      linear-gradient(to right, white, white);
-    background-position: 
-      calc(100% - 20px) calc(1em + 2px),
-      calc(100% - 15px) calc(1em + 2px),
-      calc(100% - 2.5em) 0.5em;
-    background-size:
-      5px 6px,
-      5px 6px,
-      1px 1.5em;
-    background-repeat: no-repeat;
-  }
-}
-
-sib-form-label-text {
-  background: aqua;
-}
-
-form {
-  background-color: orangered;
-  display: grid;
-  grid-template-columns: 33% auto;
-  grid-gap: 24px;
-
-  label {
-    display: block;
-  }
-
-  input, select {
-    margin-top: 1em;
-  }
-}

src/styles/variables.scss

@@ -1,6 +1,7 @@
 // colors
 $color-white: #fff;
 $color-black: #36383b;
+$color-grey1: #d7dbe0;
 $color-grey: #898f95;
 $color-grey-mid: #abaaba;
 $color-grey-light4: #b4b9c0;