feat(controls): styled custom header dropdown with helptext and smart positioning (#13)

assets/stylesheets/global/header.css

@@ -27,22 +27,11 @@
     justify-content: space-between;
     align-items: center;
 
-    margin-bottom: calc(var(--grid-gutter) / 2);
-
     @media (--breakpoint-desktop) {
       flex: 0 1 auto;
       flex-direction: row;
       margin-bottom: 0;
     }
-
-    & div + div {
-      margin: calc(var(--grid-gutter) / 2) 0 0;
-
-
-      @media (--breakpoint-desktop) {
-        margin: 0 0 0 calc(var(--grid-gutter) / 2);
-      }
-    }
   }
 
   @element upper-second {
@@ -56,14 +45,6 @@
       flex: 0 1 auto;
       flex-direction: row;
     }
-
-    & div + div {
-      margin: calc(var(--grid-gutter) / 2) 0 0;
-
-      @media (--breakpoint-desktop) {
-        margin: 0 0 0 calc(var(--grid-gutter) / 2);
-      }
-    }
   }
 
   @element upper-link {
@@ -73,6 +54,11 @@
 
   @element upper-copy {
     display: inline-flex;
+    margin: 0 0 calc(var(--grid-gutter) / 2);
+
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
   }
 
   @element upper-icon {
@@ -107,6 +93,10 @@
       height: auto;
       margin-right: calc(var(--grid-gutter) / 2);
     }
+
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
   }
 
   @element logo {
@@ -134,52 +124,98 @@
 
     @media (--breakpoint-desktop) {
       flex: 0 0 auto;
+      flex-direction: row;
+    }
+  }
+
+  @element controls_group {
+    flex: 0 0 auto;
+    position: relative;
+
+    display: flex;
+    margin: 0 0 calc(var(--grid-gutter) / 2);
+    padding: 0 calc(var(--grid-gutter) / 2);
+
+    border: none;
+    background: var(--color-palette-blue-medium);
+    border-radius: var(--border-radius);
+    color: inherit;
+
+    &:last-child {
+      margin: 0;
     }
 
-    & form {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
+  }
 
-      @media (--breakpoint-desktop) {
-        justify-content: flex-end;
-      }
+  @element controls_label {
+    position: relative;
+    z-index: 1;
+    font-family: var(--font-medium);
+    cursor: pointer;
+  }
 
-      & .group {
-        flex: 0 0 auto;
-        display: flex;
-        padding: 0 calc(var(--grid-gutter) / 2);
-        margin: 0;
+  @element controls_dropdown {
+    position: absolute;
+    z-index: 2;
+    box-sizing: border-box;
 
-        border: none;
-        background: var(--color-palette-blue-medium);
-        border-radius: var(--border-radius);
-        color: inherit;
+    width: 260px;
+    max-width: 90vw;
+    margin: calc(var(--grid-gutter) / 2 - 4px) 0 0;
 
-        & + .group {
-          margin-left: var(--grid-gutter)
-        }
+    opacity: 0;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
 
-        & select,
-        & label {
-          flex: 0 0 auto;
-          display: inline-block;
-          margin-top: 0;
-          margin-bottom: 0;
+    transition: 0.3s opacity ease;
+    pointer-events: none;
 
-          color: inherit;
-          font-weight: normal;
-          font-family: var(--font-medium);
-          font-size: 0.8em;
+    @modifier active {
+      opacity: 1;
+      pointer-events: all;
 
-          background: transparent;
-          border: none;
-        }
+      &:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: -5px;
+        width: 10px;
+        height: 10px;
 
-        & select {
-          margin-top: 2px;
-        }
+        background-color: inherit;
+        transform: translateX(-50%) rotate(45deg);
       }
     }
   }
+
+  @element controls_help_text {
+    padding: calc(var(--grid-gutter) / 2);
+    color: var(--color-text-grey);
+  }
+
+  @element controls_button {
+    box-sizing: border-box;
+    height: auto;
+    width: 100%;
+    margin: 0;
+
+    border-radius: 0;
+    background: var(--header-dropdown-bg);
+
+    color: var(--header-dropdown-btn-color);
+    font-size: 1em;
+
+    &:hover {
+      background: var(--header-dropdown-bg-hover);
+      color: var(--header-dropdown-btn-color);
+    }
+
+    @modifier active {
+      background: var(--header-dropdown-bg-active);
+    }
+  }
 }

assets/stylesheets/layout/layout-sidebar.css

@@ -40,8 +40,9 @@
     padding-top: calc(var(--grid-gutter) / 4);
 
     @media (--breakpoint-desktop) {
-      flex: 0 1 auto;
-      width: var(--layout-sidebar-content-width);
+      flex: 0 1 var(--layout-sidebar-content-width);
+      width: 100%;
+      box-sizing: border-box;
       margin-left: var(--grid-gutter);
     }
 

assets/stylesheets/variables.css

@@ -58,6 +58,11 @@
   --cta-bg-hover: var(--color-palette-blue-medium);
   --cta-radius: 3px;
 
+  --header-dropdown-btn-color: #263545;
+  --header-dropdown-bg: #fff;
+  --header-dropdown-bg-active: #d3dce0;
+  --header-dropdown-bg-hover: #e5ebed;
+
   --module-copy-emphasized-bg: #8091a5;
   --module-copy-emphasized-color: #c3cfd5;
   --module-copy-emphasized-headlines-color: #fff;