Improve header dropdown style

basecamp · Sep 20, 2024 · 67c56a8 · 67c56a8
1 parent fb577b4
commit 67c56a8
Showing 1 changed file with 68 additions and 28 deletions.
diff --git a/_sass/modules/_header.scss b/_sass/modules/_header.scss
@@ -2,7 +2,7 @@
 
   display: flex;
   flex-direction: column;
-  padding: var(--space-medium);
+  padding: 0.8em;
 
   nav {
 
@@ -39,10 +39,6 @@
         line-height: 1em;
         padding: 0.6em 0.9em;
         text-decoration: none;
-        transition:
-          background var(--transition),
-          color var(--transition)
-        ;
       }
 
     }
@@ -51,73 +47,88 @@
 
       align-items: center;
       display: none;
-      font-size: var(--font-size-xx-small);
-      letter-spacing: -0.01em;
+      font-size: var(--font-size-x-small);
       list-style: none;
-      margin-right: -1.2em;
       padding: 0;
 
       > li {
 
+        display: flex;
+        font-size: 80%;
+        justify-content: center;
+        letter-spacing: -0.01em;
         margin: 0;
         position: relative;
 
         > a {
+
+          align-items: center;
           border-radius: 2.5em;
           color: var(--color-blue);
           display: flex;
+          gap: 0.6em;
           letter-spacing: -0.01em;
           line-height: 1em;
-          margin-bottom: 0.3em;
-          margin-top: 0.3em;
-          padding: 0.8em 1.2em 0.7em 1.2em;
+          margin-bottom: 0.5em;
+          margin-top: 0.5em;
+          padding: 0.9em 1.3em 0.75em 1.3em;
           text-align: center;
           text-decoration: none;
-          transition:
-            background var(--transition),
-            color var(--transition)
-          ;
+
+          svg {
+            height: 0.75em;
+            width: 0.75em;
+          }
+
         }
 
         ol {
 
           background: var(--color-white);
-          border-radius: 0.3em;
+          border-radius: 0.6em;
           box-shadow:
             0 0 0 1px rgba(var(--rgb-black), 0.075),
             0 10px 30px -15px rgba(var(--rgb-black), 0.125),
             0 20px 20px -30px rgba(var(--rgb-black), 0.125)
           ;
           display: none;
-          font-size: 90%;
+          gap: 0.3em;
           list-style: none;
           margin: 0;
-          padding: 1em 0;
+          opacity: 0;
+          padding: 0.5em;
           position: absolute;
+          top: 100%;
+          visibility: hidden;
           z-index: 1;
 
           li {
 
             margin: 0;
 
             a {
-              color: var(--color-grey-light);
-              display: block;
-              font-weight: 400;
-              padding: 0.35em 1.6em 0.3em 1.6em;
+              border-radius: 0.3em;
+              color: var(--color-grey);
+              display: flex;
+              padding: 0.55em 0.8em 0.45em 0.8em;
+              text-align: center;
               text-decoration: none;
               white-space: nowrap;
             }
 
             &.selected a {
-              color: var(--color-grey);
-              font-weight: 500;
+              background: var(--color-blue);
+              color: var(--color-white);
             }
 
           }
 
         }
 
+        &:last-child {
+          margin-right: -1.3em;
+        }
+
       }
 
     }
@@ -141,6 +152,11 @@
 
         a.release {
 
+          transition:
+            background var(--transition),
+            color var(--transition)
+          ;
+
           &:focus,
           &:hover {
             background: var(--color-blue);
@@ -155,6 +171,11 @@
 
         > a {
 
+          transition:
+            background var(--transition),
+            color var(--transition)
+          ;
+
           &:focus,
           &:hover {
             background: var(--color-base-darker);
@@ -163,12 +184,13 @@
 
         }
 
-        ol li a {
+        ol li:not(.selected) a {
+
+          transition: background var(--transition);
 
           &:focus,
           &:hover {
-            color: var(--color-grey);
-            text-decoration: underline;
+            background: var(--color-base-dark);
           }
 
         }
@@ -182,7 +204,11 @@
           }
 
           ol {
-            display: block;
+            animation: dropdown var(--transition-slow);
+            display: flex;
+            flex-direction: column;
+            opacity: 1;
+            visibility: visible;
           }
 
         }
@@ -205,3 +231,17 @@
   }
 
 }
+
+@keyframes dropdown {
+
+  0% {
+    opacity: 0;
+    transform: translateY(-0.3em);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+}