_header.scss in blacklight-spotlight-0.5.0

- old
+ new

@@ -1,121 +1,214 @@
-$masthead-height: 120px;
+$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;
   left: 0;
   right: 0;
   display: block;
   width: auto;
   height: inherit;
 }
 
-#exhibit-masthead, #exhibit-navbar {
+@mixin masthead-navigation-menu() {
+  border: 0;
+  border-radius: 0;
+
+  ul.nav.navbar-nav {
+    > li {
+      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,
+#exhibit-navbar {
   z-index: 1;
 }
 
 #exhibit-navbar {
+  z-index: 100;
+
   &.page-masthead {
-    background-color: $gray;
+    @include masthead-navigation-menu();
+    background-color: rgba(0, 0, 0, 0.5);
+    border-bottom: 1px solid $gray;
     margin-bottom: 0;
-    border: 0;
-    border-radius: 0;
+    margin-top: 0;
+
     .navbar-nav {
       float: right;
     }
-    .navbar-brand, .navbar-nav li {
+
+    .navbar-brand,
+    .navbar-nav li {
       color: $gray-lighter;
-      &.active a {color: $gray;}
-      a {color: $gray-lighter;}
+
+      &.active a {
+        color: $gray;
+      }
+
+      a {
+        color: $gray-lighter;
+      }
     }
   }
+
+  .navbar-form {
+    text-align: right;
+  }
 }
 
+#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;
+}
+
 .navbar + .navbar {
   margin-top: 0;
 }
 
 #header-navbar {
   margin-bottom: 0;
 }
 
 #exhibit-masthead {
-  margin-bottom: 0;
-  padding: 0 0 24px 0;
-  position: static;
   height: $masthead-height;
+  margin-bottom: -50px;
+  padding: 0;
+  position: static;
+
   & > .container {
-    // Maintains the site title and subtitle at slightly below
-    // vertically-centered, even if height of masthead is changed.
     position: relative;
-    top: 60%;
+    top: 33%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
   }
+
   &.with-page-masthead {
     margin-bottom: $padding-base-vertical;
+    margin-top: -51px;
+
+    > .container {
+      top: 60%;
+    }
+
+    .navbar-brand {
+      font-size: $font-size-large;
+      text-shadow: 1px 1px 0 $black;
+    }
+
     .search-title {
       text-align: center;
+
       small {
-        text-transform: uppercase ;
+        text-transform: uppercase;
       }
     }
   }
+
   .site-title {
     font-size: 30px;
   }
+
   small {
     display: block;
     padding-top: $padding-base-vertical;
     @extend .hidden-xs;
   }
 
   &.with-image {
-    .site-title, .search-title {
+    .site-title,
+    .search-title {
       color: $white;
-      text-shadow: 0 1px 0 $black;
+      text-shadow: 1px 1px 0 $black;
     }
+
     small {
       color: $white;
     }
-  }
 
-  .more-exhibits {
-    @extend .navbar-right;
-  }
+    .more-exhibits {
+      a {
+        color: $gray-lighter;
+        background: rgba(0, 0, 0, 0.4);
+        border-top-left-radius: $border-radius-base;
+        border-top-right-radius: $border-radius-base;
+      }
 
-  &.with-image .more-exhibits {
-    a {
-      color: $gray-lighter;
-      background: rgba(0, 0, 0, 0.4);
-      border-top-left-radius: $border-radius-base;
-      border-top-right-radius: $border-radius-base;
-    }
-    a:hover, a:focus, a:active {
-      background: rgba(0, 0, 0, 0.6);
-    }
+      a:hover,
+      a:focus,
+      a:active {
+        background: rgba(0, 0, 0, 0.6);
+      }
 
-    .dropdown-menu a {
-      background: none;
-      color: $gray;
-      &:hover, &:focus, &:active {
-        background-color: $gray-lighter;
+      .dropdown-menu a {
+        background: none;
+        color: $gray;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $gray-lighter;
+        }
       }
     }
   }
 
+  .more-exhibits {
+    @extend .navbar-right;
+  }
+
   &.with-page-masthead {
-    .site-title {margin-top: $padding-large-vertical * 3;}
+    .site-title {
+      margin-top: $padding-large-vertical * 3;
+    }
 
     .more-exhibits {
       @extend .navbar-left;
       padding-top: $padding-base-vertical;
 
       .dropdown-menu {
-        right: auto;
         left: 0;
+        right: auto;
       }
     }
   }
 
   // This is to add a background image to the masthead, in a way that
@@ -133,10 +226,11 @@
     margin-top: -$masthead-image-blur;
     overflow: hidden;
     // Add right border to image to hide lighter blurred edge
     border-right: 1px solid $black;
   }
+
   // Include gradient to improve text legibility,
   // especially on light background images.
   .background-container-gradient {
     @include masthead-background-containers();
     background:
@@ -146,22 +240,31 @@
        rgba(0, 0, 0, 0.5)
      );
   }
 }
 
+// Margin between bottom of masthead and start of page content.
+// Need to apply bottom margin to different element, depending on
+// whether it is a regular masthead or a browse category masthead
+#exhibit-masthead + #exhibit-navbar,
+#exhibit-navbar + #exhibit-masthead {
+  margin-bottom: $padding-large-vertical * 2.5;
+}
+
 .col-md-4 {
   .submit-search-text {
     // hide 'search' label
-      // copied from .sr-only, sadly can't seem to use @extend in a media
-      // query like this, have to copy.
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0,0,0,0);
-      border: 0;
+    // copied from .sr-only, sadly can't seem to use @extend in a media
+    // query like this, have to copy.
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
   }
+
   .glyphicon-search {
     line-height: $line-height-computed;
   }
 }