feature(header): issue #95 Add notifications component

Add it in dependencies
Add styles

src/styles/header.scss

@@ -73,47 +73,31 @@
 }
 
 details {
-  summary::-webkit-details-marker {
-    display: none;
-  }
+  position: relative;
 
-  #notifications-button {
-    cursor: pointer;
+  .sib-notifications__button {
+    @include icon('bell');
     font-size: 3rem;
-    list-style-type: none;
-    position: relative;
-    @include icon(bell);
-    
-    .menu-notification {
-      //flex-basis: 3em;
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 0;
-      flex-shrink: 0;
-      justify-content: center;
-      left: 0.3rem;
-      position: absolute;
-      top: -0.3rem;
-      width: 2em;
 
-      @extend %notification;
+    &::before {
+      margin-left: 0;
+    }
+
+    img {
+      display: none;
+    }
+
+    .sib-notifications__counter {
+      left: 2.1rem;
+      position: absolute;
+      top: -3px;
     }
   }
 
-  #notifications {
-    bottom: 0;
-    height: 0;
-    left: 0;
+  .sib-notifications__list {
     position: absolute;
     right: 0;
-    z-index: 1;
-  
-    > div {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
+    top: 5.6rem;
   }
 }
 

src/styles/main.scss

@@ -13,6 +13,7 @@
 :root {
   font-size: 62.5%;
   font-family: Open Sans, sans-serif;
+  --sib-notifications-theme: #{$color-46-100-50};
   
   body {
     //box-sizing: border-box;

src/styles/menu-left.scss

@@ -93,7 +93,9 @@
   
         > sib-display {
           
-          @extend %notification;
+          > div:first-of-type {
+            @extend %notification;
+          }
         }
       }
 

src/styles/variables.scss

@@ -6,6 +6,7 @@ $color-white:            hsl(0, 0%,100%);
 $color-selective-yellow: hsl(43, 100%, 50%);
 $color-mikado-yellow:    hsl(45, 95%, 54%);
 $color-mustard:          hsl(46, 100%, 67%);
+$color-46-100-50:        hsl(46, 100%, 50%);
 
 $color-rolling-stone:    hsl(210, 4%, 50%);
 $color-taupe-gray:       hsl(210, 5%, 56%);
@@ -101,18 +102,15 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 }
 
 %notification {
-
-  > div:first-of-type {
-    align-items: center;
-    background-color: $color-mustard;
-    border-radius: 100%;
-    color: $color-dark-lava;
-    display: flex;
-    font-size: 1.3rem;
-    height: 1.7em;
-    justify-content: center;
-    width: 1.7em;
-  }
+  align-items: center;
+  background-color: $color-mustard;
+  border-radius: 100%;
+  color: $color-dark-lava;
+  display: flex !important;
+  font-size: 1.3rem;
+  height: 1.7em;
+  justify-content: center;
+  width: 1.7em;
 }
 
 %shadow {