css fix bugs: menu + header(wip)

src/page-members.pug

@@ -22,6 +22,7 @@ div.grid-layer
       widget-foaf:hompage='hdapp-hyperlink',
       widget-roles='sib-display-lookuplist',
       widget-skills='sib-display-lookuplist',
+      
       search-range-roles=`${sdn}/role/`,
       search-range-skills=`${sdn}/skills/`,
       search-fields='name, roles, skills',
@@ -30,7 +31,7 @@ div.grid-layer
       search-label-roles='Filter by role',
       search-label-skills='Search by skills',
       search-widget-name='sib-form-placeholder-text',
-      search-widget-roles='sib-form-placeholder-text',
+      
       search-widget-skills='sib-form-placeholder-text',
       next='member')
   div.grid-layer-links.containerV

src/styles/filters.scss

@@ -19,7 +19,6 @@
     width: 95%;
     -moz-appearance: none;
     -webkit-appearance: none;
-    
   }
 
   input[type="submit"] {

src/styles/header.scss

@@ -63,24 +63,28 @@
 }
 
 #profile {
-  > * {
+  div {
-    vertical-align: middle;
+    display: flex;
-  }
+    flex-direction: row-reverse;
-
+    > * {
-  img {
+      vertical-align: middle;
-    width: 48px;
+    }
-    height: 48px;
+  
-    object-fit: cover;
+    img {
-    object-position: center;
+      width: 48px;
-    border-radius: 100%;
+      height: 48px;
-    margin-right: 1rem;
+      object-fit: cover;
-  }
+      object-position: center;
-
+      border-radius: 100%;
-  span {
+      margin-right: 1rem;
-    color: $color-black;
+    }
-    font-size: 16px;
+  
-    font-weight: 600;
+    span {
-    letter-spacing: 0.38px;
+      color: $color-black;
-    padding: 0 0.5rem;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.38px;
+      padding: 0 0.5rem;
+    }
   }
 }

src/styles/job-offers.scss

@@ -6,17 +6,17 @@
     grid-row-start: start;
     grid-row-end: middle;
   }
-
+  
   > div {
     grid-column-start: start;
     grid-column-end: end;
     grid-row-start: middle;
     grid-row-end: end;
-
+    
     &:first-of-type {
       margin-top: 3em;
     }
-
+    
     > sib-display {
       @extend %frame;
       display: block;
@@ -30,7 +30,7 @@
         display: block;
         font-weight: bold;
       }
-
+      
       label {
         display: none;
       }
@@ -38,6 +38,29 @@
   }
 }
 
+[name='creation'] {
+  margin-top: 20px;
+}
+
+[name='description'] {
+  line-height: 1.6;
+}
+
+[name='status'] {
+  float: right;
+  display: flex;
+  align-items: center;
+  margin: -0.25em;
+  
+  > * {
+    margin: 0.25em;
+  }
+  
+  strong {
+    @extend %status-open;
+  }
+}
+
 [name='user-thumb'] {
   align-items: center;
   color: $color-black-light;
@@ -66,26 +89,3 @@
     padding: calc(16px - 0.8em) 0.7em;
   }
 }
-
-[name='status'] {
-  float: right;
-  display: flex;
-  align-items: center;
-  margin: -0.25em;
-
-  > * {
-    margin: 0.25em;
-  }
-
-  strong {
-    @extend %status-open;
-  }
-}
-
-[name='creation'] {
-  margin-top: 20px;
-}
-
-[name='description'] {
-  line-height: 1.6;
-}

src/styles/menu.scss

@@ -88,7 +88,7 @@ sib-router {
         // transform: perspective(1000px) translateZ(1px) scale(0.8);
       }
 
-      .menu-notification > div {
+      .menu-notification > sib-display > div:first-child {
         background-color: $color-purple-dark;
         color: $color-yellow-light;
         font-size: 12px;
@@ -149,7 +149,8 @@ sib-router {
       letter-spacing: 0.17px;
       font-size: 16px;
     }
-/*
+
+    /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
     .menu-notification {
       //flex-basis: 3em;
       width: 2em;
@@ -160,19 +161,21 @@ sib-router {
       justify-content: center;
       align-items: center;
 
-      > div {
+      > sib-display {
-        color: $color-black;
+        > div:first-of-type {
-        display: flex;
+          color: $color-black;
-        justify-content: center;
+          display: flex;
-        align-items: center;
+          justify-content: center;
-        width: 1.7em;
+          align-items: center;
-        height: 1.7em;
+          width: 1.7em;
-        border-radius: 100%;
+          height: 1.7em;
-        background-color: $color-yellow-light;
+          border-radius: 100%;
-        font-size: 12px;
+          background-color: $color-yellow-light;
+          font-size: 12px;
+        }
       }
     }
-*/
+
     &[id-prefix] {
       display: none;
     }