Copy bootstrap's approach to navbar styling to style the transparent …

…navbar over a masthead image
projectblacklight · Dec 3, 2015 · 3f8ebf1 · 3f8ebf1
1 parent 69a90d1
commit 3f8ebf1
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 47 deletions.
diff --git a/app/assets/stylesheets/spotlight/_header.scss b/app/assets/stylesheets/spotlight/_header.scss
@@ -1,7 +1,5 @@
 $masthead-height: 180px;
 $masthead-image-blur: 1px;
-$menu-link-background-color-active: rgba(255, 255, 255, 0.3);
-$menu-link-background-color-hover: rgba(255, 255, 255, 0.15);
 
 @mixin masthead-background-containers() {
   position: absolute;
@@ -12,7 +10,9 @@ $menu-link-background-color-hover: rgba(255, 255, 255, 0.15);
   height: inherit;
 }
 
-@mixin masthead-navigation-menu() {
+@mixin transparent-masthead-navigation-menu() {
+  @extend .navbar-transparent;
+
   border: 0;
   border-radius: 0;
 
@@ -21,39 +21,14 @@ $menu-link-background-color-hover: rgba(255, 255, 255, 0.15);
       text-transform: uppercase;
 
       a {
-        color: $gray-lighter;
         letter-spacing: 1.2px;
       }
     }
 
-    a:hover {
-      background-color: $menu-link-background-color-hover;
-    }
-
-    > .active > a {
-      background-color: $menu-link-background-color-active;
-      color: $white;
-    }
-
     .dropdown-menu {
       text-transform: none;
-
-      > li a {
-        color: $black;
-
-        &:hover {
-          background-color: $gray-lighter;
-        }
-      }
     }
   }
-
-  // Curated Features menu link when it has dropdown menu
-  .navbar-nav > .open > a,
-  .navbar-nav > .open > a:hover,
-  .navbar-nav > .open > a:focus {
-    background-color: $menu-link-background-color-hover;
-  }
 }
 
 #exhibit-masthead,
@@ -65,28 +40,14 @@ $menu-link-background-color-hover: rgba(255, 255, 255, 0.15);
   z-index: 100;
 
   &.page-masthead {
-    @include masthead-navigation-menu();
-    background-color: rgba(0, 0, 0, 0.5);
-    border-bottom: 1px solid $gray;
+    @include transparent-masthead-navigation-menu();
+    border-bottom: 1px solid $navbar-transparent-border;
     margin-bottom: 0;
     margin-top: 0;
 
     .navbar-nav {
       float: right;
     }
-
-    .navbar-brand,
-    .navbar-nav li {
-      color: $gray-lighter;
-
-      &.active a {
-        color: $gray;
-      }
-
-      a {
-        color: $gray-lighter;
-      }
-    }
   }
 
   .navbar-form {
@@ -95,9 +56,9 @@ $menu-link-background-color-hover: rgba(255, 255, 255, 0.15);
 }
 
 #exhibit-masthead.with-image + #exhibit-navbar.navbar-default {
-  @include masthead-navigation-menu();
-  background-color: rgba(0, 0, 0, 0.2);
-  border-top: 1px solid $gray;
+  @include transparent-masthead-navigation-menu();
+  background-color: $navbar-transparent-bg;
+  border-top: 1px solid $navbar-transparent-border;
 }
 
 .navbar + .navbar {

diff --git a/app/assets/stylesheets/spotlight/_navbar.scss b/app/assets/stylesheets/spotlight/_navbar.scss
@@ -0,0 +1,46 @@
+// Default navbar
+.navbar-transparent {
+  background-color: $navbar-transparent-bg;
+  border-color: $navbar-transparent-border;
+
+  .navbar-brand {
+    color: $navbar-transparent-brand-color;
+    &:hover,
+    &:focus {
+      color: $navbar-transparent-brand-hover-color;
+      background-color: $navbar-transparent-brand-hover-bg;
+    }
+  }
+
+  .navbar-text {
+    color: $navbar-transparent-color;
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: $navbar-transparent-link-color;
+
+      &:hover,
+      &:focus {
+        color: $navbar-transparent-link-hover-color;
+        background-color: $navbar-transparent-link-hover-bg;
+      }
+    }
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $navbar-transparent-link-active-color;
+        background-color: $navbar-transparent-link-active-bg;
+      }
+    }
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $navbar-transparent-link-disabled-color;
+        background-color: $navbar-transparent-link-disabled-bg;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/spotlight/_spotlight.scss b/app/assets/stylesheets/spotlight/_spotlight.scss
@@ -2,6 +2,7 @@
 @import "spotlight/mixins";
 @import "bootstrap/variables";
 
+@import "spotlight/navbar";
 @import "spotlight/sir-trevor_overrides";
 @import "spotlight/attachments";
 @import "spotlight/pages";

diff --git a/app/assets/stylesheets/spotlight/_variables.scss b/app/assets/stylesheets/spotlight/_variables.scss
@@ -9,3 +9,24 @@ $exhibit-card-border: $well-border !default;
 $exhibit-card-gutter: $padding-large-horizontal !default;
 $exhibit-card-image-size: 273px !default;
 $exhibit-card-shadow: inset 2px 2px 5px -2px $exhibit-card-border !default;
+
+$navbar-transparent-color: $gray !default;
+$navbar-transparent-bg: rgba(0, 0, 0, 0.2) !default;
+$navbar-transparent-border: $gray !default;
+$navbar-transparent-link-color: $gray-lighter !default;
+$navbar-transparent-link-hover-color: $gray-lighter !default;
+$navbar-transparent-link-hover-bg: rgba(255, 255, 255, 0.15) !default;
+$navbar-transparent-link-active-color: $gray-lighter !default;
+$navbar-transparent-link-active-bg: rgba(255, 255, 255, 0.3) !default;
+$navbar-transparent-link-disabled-color: #ccc !default;
+$navbar-transparent-link-disabled-bg: transparent !default;
+
+// Navbar brand label
+$navbar-transparent-brand-color: $navbar-transparent-link-color !default;
+$navbar-transparent-brand-hover-color: darken($navbar-transparent-brand-color, 10%) !default;
+$navbar-transparent-brand-hover-bg: transparent !default;
+
+// Navbar toggle
+$navbar-transparent-toggle-hover-bg: $navbar-default-toggle-hover-bg !default;
+$navbar-transparent-toggle-icon-bar-bg: $navbar-default-toggle-icon-bar-bg !default;
+$navbar-transparent-toggle-border-color: $navbar-default-toggle-border-color !default;