From 0b0314dc3c8e262b84050a86ab7f826528bd580c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 26 Jun 2019 12:42:34 +0200
Subject: [PATCH] feature: Header dropdown & css

---
 src/styles/base/header.scss | 353 +++++++++++++++++++-----------------
 1 file changed, 184 insertions(+), 169 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 23ffd76..360531f 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -1,207 +1,222 @@
 #header {
-  max-height: 51px;
-  height: 51px;
+  max-height: 83px;
+  height: 83px;
   align-items: center;
   background-color: $color-0-0-100;
   color: $color-216-4-22;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
-  padding: 1.6rem 0.64rem;
+  // padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
 
   > *:not(sib-widget) {
     padding: 0 2.5rem;
   }
-}
 
-#logo {
-  flex: 1 1 0;
-}
-
-#search-bar {
-  position: relative;
-  
-  #search-input {
-    border-radius: 10em;
-    padding: 0.64rem 1.28rem;
-    border: 1px solid $color-215-9-73;
-    height: 3.8rem;
-    width: 28rem;
-    -webkit-appearance: textfield;
-  
-    & ~ #close-search-icon,
-    & ~ #search-icon {
-      color: $color-215-9-73;
-      display: block;
-      font-size: 1.7rem;
-      margin: auto;
-      position: absolute;
-      right: 3.7rem;
-      top: 50%;
-      transform: translateY(-50%);
-      -webkit-text-stroke: 1px $color-215-9-73;
-    }
-  
-    & ~ #close-search-icon {
-      opacity: 0;
-    }
-  
-    &:focus {
-      & ~ #close-search-icon {
-        opacity: 1;
-      }
+  #logo {
+    flex: 1 1 0;
+  }
   
+  #search-bar {
+    position: relative;
+    
+    #search-input {
+      border-radius: 10em;
+      padding: 0.64rem 1.28rem;
+      border: 1px solid $color-215-9-73;
+      height: 3.8rem;
+      width: 28rem;
+      -webkit-appearance: textfield;
+    
+      & ~ #close-search-icon,
       & ~ #search-icon {
-        visibility: hidden;
-      }
-    }
-  }
-}
-
-details {
-  // cursor: pointer;
-
-  summary {
-
-    &::-moz-list-bullet {
-      list-style-type: none;
-    }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-}
-
-details {
-  position: relative;
-
-  .sib-notifications__button {
-    @include icon('bell');
-    font-size: 3rem;
-
-    &::before {
-      margin-left: 0;
-    }
-
-    img {
-      display: none;
-    }
-
-    .sib-notifications__counter {
-      left: 2.1rem;
-      position: absolute;
-      top: -3px;
-    }
-  }
-
-  .sib-notifications__list {
-    position: absolute;
-    right: 0;
-    top: 5.6rem;
-  }
-}
-
-details#user-controls {
-
-  summary:focus {
-    background-color: $color-233-18-29;
-    color: $color-0-0-100;
-    outline: none;
-  }
-
-  #user-controls__profile {
-    div {
-      display: flex;
-      flex-direction: row-reverse;
-      
-      > * {
-        vertical-align: middle;
+        color: $color-215-9-73;
+        display: block;
+        font-size: 1.7rem;
+        margin: auto;
+        position: absolute;
+        right: 3.7rem;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-text-stroke: 1px $color-215-9-73;
       }
     
-      img {
-        border-radius: 100%;
-        height: 4.8rem;
-        margin-right: 2rem;
-        object-fit: cover;
-        object-position: center;
-        width: 4.8rem;
+      & ~ #close-search-icon {
+        opacity: 0;
       }
-
-      sib-display-value[name='first_name'] {
-        @include icon('arrow-down');
-        align-items: center;
-        display: flex;
-        flex-direction: row-reverse;
-        font-size: 1.8rem;
-        font-weight: 600;
-
-        &::before {
-          margin-left: 1.5rem;
+    
+      &:focus {
+        & ~ #close-search-icon {
+          opacity: 1;
+        }
+    
+        & ~ #search-icon {
+          visibility: hidden;
         }
       }
     }
   }
-
-  #user-controls__panel {
-    height: 0;
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    
-    > nav {
-      background-color: $color-0-0-100;
-      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+  
+  details {
+    margin-right: 2.5rem;
+  
+    summary {
+  
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+  
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  
+  details {
+    position: relative;
+  
+    .sib-notifications__button {
+      @include icon('bell');
+      font-size: 3rem;
+  
+      &::before {
+        margin-left: 0;
+      }
+  
+      img {
+        display: none;
+      }
+  
+      .sib-notifications__counter {
+        left: 2.1rem;
+        position: absolute;
+        top: -3px;
+      }
+    }
+  
+    .sib-notifications__list {
       position: absolute;
       right: 0;
-      top: 0;
-      width: 208px;
-      
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        
-        li {
-          border-bottom: 1px solid $color-213-20-91;
-          margin-right: 0;
-          padding: 1.6rem 1.3rem;
-
-          sib-link {
-            color: $color-213-4-50;
-            display: block;
-          }
-        }
-      }
-
-      button {
-        color: $color-213-4-50;
-        padding: 1.6rem 1.3rem;
-        text-align: left;
-        width: 100%;
-      }
+      top: 5.6rem;
     }
   }
+  
+  details#user-controls {
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-  &[open] {
-    background-color: $color-233-18-29;
-    color: $color-0-0-100;
-
+    summary {
+      padding: 16px;
+      cursor: pointer;
+      &:focus {
+        background-color: $color-233-18-29;
+        color: $color-0-0-100;
+        outline: none;
+      }
+    }
+  
     #user-controls__profile {
-
       div {
-
+        display: flex;
+        flex-direction: row-reverse;
+        
+        > * {
+          vertical-align: middle;
+        }
+      
+        img {
+          border-radius: 100%;
+          height: 4.8rem;
+          margin-right: 2rem;
+          object-fit: cover;
+          object-position: center;
+          width: 4.8rem;
+        }
+  
         sib-display-value[name='first_name'] {
-          @include icon('close');
-
+          @include icon('arrow-down');
+          align-items: center;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 1.8rem;
+          font-weight: 600;
+  
           &::before {
             margin-left: 1.5rem;
           }
         }
       }
     }
+  
+    #user-controls__panel {
+      height: 0;
+      position: absolute;
+      right: 0;
+      z-index: 1;
+      width: 100%;
+      top: 83px;
+      
+      > nav {
+        background-color: $color-0-0-100;
+        box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+        
+        ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          
+          li {
+  
+            sib-link {
+              color: $color-213-4-50;
+              display: block;
+              border-bottom: 1px solid $color-213-20-91;
+              margin-right: 0;
+              padding: 1.6rem 1.3rem;
+              &:hover {
+                color: $color-244-73-62;
+              }
+            }
+          }
+        }
+  
+        button {
+          color: $color-213-4-50;
+          padding: 1.6rem 1.3rem;
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  
+    &[open] {
+      background-color: $color-233-18-29;
+      color: $color-0-0-100;
+  
+      #user-controls__profile {
+  
+        div {
+  
+          sib-display-value[name='first_name'] {
+            @include icon('close');
+  
+            &::before {
+              margin-left: 1.5rem;
+            }
+          }
+        }
+      }
+    }
   }
-}
-
+  
+}
\ No newline at end of file