tabs design

Signed-off-by: Shane Miller <[email protected]>
crossplane · Aug 4, 2023 · b134e9f · b134e9f
1 parent f81f1b0
commit b134e9f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 21 deletions.
diff --git a/themes/geekboot/assets/scss/_nav-tabs.scss b/themes/geekboot/assets/scss/_nav-tabs.scss
@@ -3,35 +3,39 @@
     margin-top: 2rem;
 }
 
-.nav-tabs {
+// Override Bootstrap Tab styles
+.nav-tabs{
 
-    padding-left: 2rem;
+    border-bottom: none;
+    font-weight: bold;
+
+    @include media-breakpoint-down(xl) {
+      li {
+        display: block !important;
+        margin: 0px;
+      }
 
-    li {
-        margin-bottom: 0 !important;
     }
 
-   .nav-link {
-        color: var(--body-font-color);
+    &:not(.nav-link){
+      margin-bottom: 12px !important;
     }
 
-    .nav-link.active {
-        background-color: var(--nav-tab-background-color) !important;
-        color: var(--active-tab-color) !important;
-        border-bottom-color: var(--body-background) !important;
-        text-align: left;
-        &:hover{
-            color: var(--active-tab-color) !important;
+    // Remove tab outline and background.
+    .nav-link {
+        --bs-nav-tabs-link-active-bg: none;
+        border-top: none;
+        border-left: none;
+        border-right: none;
+
+        @include media-breakpoint-down(xl) {
+            padding-left: 12px !important;
         }
-    }
 
-    .nav-link:not(:active){
-        isolation: isolate;
-        // maintain the default border color
-        border-color: var(--bs-nav-tabs-link-hover-border-color);
+        // Override bootstrap hover behaviors.
         &:hover{
-            color: var(--inactive-tab-hover-color);
+            border-bottom-width: 0;
         }
     }
-
-}
+    
+}
diff --git a/themes/geekboot/assets/scss/dark-mode.scss b/themes/geekboot/assets/scss/dark-mode.scss
@@ -99,4 +99,27 @@
     .bd-footer {
         border-top: 1px solid #{$fog-850};
     }
+
+    // Tab colors
+    .nav-tabs{
+        &:not(.nav-link){
+          border-bottom: 2px solid #{$fog-800};
+        }
+
+        // Active tab style
+        .active, .active:hover {
+          color: #{$aqua-400} !important;
+          border-bottom: 2px solid #{$aqua-400} !important;
+        }
+
+        // Dim the text of non-active tabs
+        .nav-link {
+            color: #{$fog-400};
+
+            // Make the text light on hover
+            &:hover{
+                color: #{$fog-0};
+            }
+        }
+    }
 }
diff --git a/themes/geekboot/assets/scss/light-mode.scss b/themes/geekboot/assets/scss/light-mode.scss
@@ -98,4 +98,28 @@
         --bs-table-accent-bg: #{$fog-50};
         color: #{$fog-1000};
     }
+
+    // Tab Colors
+    .nav-tabs{
+
+        &:not(.nav-link){
+            border-bottom: 2px solid #{$fog-200};
+        }
+
+        // Active tab style
+        .active, .active:hover {
+            color: #{$aqua-600} !important;
+            border-bottom: 2px solid #{$aqua-600} !important;
+        }
+
+        // Dim the text of non-active tabs
+        .nav-link {
+            color: #{$fog-600};
+
+            // Make the text dark on hover
+            &:hover{
+                color: #{$fog-1000};
+            }
+        }
+    }
 }