studio - revises button styling/states for primary nav

cms/static/sass/elements/_controls.scss

@@ -136,6 +136,26 @@
 // ====================
 
 // layout-based buttons
+.btn-nav-primary {
+  @extend .btn-nav-simple;
+  background: $white;
+  border-color: $white;
+  color: $gray;
+
+  &:hover, &:active {
+    background: $white;
+    color: $blue-s1;
+  }
+
+  &.current, &.active {
+    background: $white;
+    color: $gray-d4;
+
+    &:hover, &:active {
+      color: $blue-s1;
+    }
+  }
+}
 
 // ====================
 

cms/static/sass/elements/_header.scss

@@ -42,7 +42,6 @@
       @extend .t-action2;
       display: inline-block;
       vertical-align: middle;
-      margin-right: ($baseline);
       font-weight: 600;
 
       &:last-child {
@@ -56,17 +55,18 @@
 
     .title {
       @extend .t-action2;
-
-      &:hover {
-        @extend .fake-link;
-      }
+      @extend .btn-nav-primary;
+      @include transition(all 0.25s ease-in-out 0);
 
       .label, .icon-caret-down {
 
       }
 
+      .label {
+
+      }
+
       .icon-caret-down {
-        @include transition(opacity 0.25s ease-in-out 0);
         opacity: 0.25;
       }
 
@@ -98,6 +98,9 @@
 
   // specific elements - course name/info
   .info-course {
+    margin-right: ($baseline/4);
+    border-right: 1px solid $gray-l3;
+    padding: ($baseline/2) $baseline ($baseline/2) 0;
 
     .course-org, .course-number {
       @extend .text-sr;
@@ -111,8 +114,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       font-weight: 600;
-      color: $gray-d1;
-
+      color: $gray;
     }
 
     // entire link
@@ -162,22 +164,24 @@
 // CASE: user signed in
 .is-signedin {
 
-  .branding {
-    width: flex-grid(2, 12);
-    margin-right: flex-gutter();
-  }
+  .wrapper-header {
 
-  .info-course {
-    width: flex-grid(3, 12);
-    margin-right: flex-gutter();
-  }
+    .branding {
+      width: flex-grid(2, 12);
+      margin-right: flex-gutter();
+    }
 
-  .nav-course {
-    width: flex-grid(4, 12);
-  }
+    .info-course {
+      width: flex-grid(3, 12);
+    }
 
-  .nav-account {
-    width: flex-grid(3, 12);
+    .nav-course {
+      width: flex-grid(4, 12);
+    }
+
+    .nav-account {
+      width: flex-grid(3, 12);
+    }
   }
 }
 
@@ -186,11 +190,22 @@
 // CASE: user not signed in
 .not-signedin {
 
-  .branding {
-    width: flex-grid(2, 12);
-  }
+  .wrapper-header {
 
-  .nav-pitch {
-    width: flex-grid(10, 12);
+    nav > ol > .nav-item {
+      margin-right: $baseline;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .branding {
+      width: flex-grid(2, 12);
+    }
+
+    .nav-pitch {
+      width: flex-grid(10, 12);
+    }
   }
 }

cms/static/sass/elements/_navigation.scss

@@ -28,8 +28,7 @@ nav {
   .title {
 
     .label, .icon-caret-down {
-      display: inline-block;
-      vertical-align: middle;
+
     }
 
     .icon-caret-down {

cms/templates/widgets/header.html

@@ -93,7 +93,7 @@
 
       <ol>
         <li class="nav-item nav-account-help nav-dd">
-          <a href="#" class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></a>
+          <h3 class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></h3>
 
           <div class="wrapper wrapper-nav-sub">
             <div class="nav-sub">
@@ -113,8 +113,7 @@
         </li>
 
         <li class="nav-item nav-account-user nav-dd">
-          <span class="sr">Currently signed in as:</span>
-          <a href="#" class="title"><span class="label account-username">${ user.username }</span> <i class="icon-caret-down"></i></a>
+          <h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down"></i></h3>
 
           <div class="wrapper wrapper-nav-sub">
             <div class="nav-sub">

common/static/sass/_mixins.scss

@@ -190,6 +190,27 @@
   }
 }
 
+// simple nav button styling - should we move this elsewhere?
+.btn-nav-simple {
+  @extend .btn;
+  @extend .btn-pill;
+  padding:($baseline/4) ($baseline/2);
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  text-align: center;
+
+  &:hover, &:active {
+    @extend .fake-link;
+    border-color: $gray-l3;
+  }
+
+  &.current, &.active {
+    @include box-shadow(inset 0 1px 2px 1px $shadow);
+    border-color: $gray-l2;
+  }
+}
+
 // UI archetypes - well
 .ui-well {
   @include box-shadow(inset 0 1px 2px 1px $shadow);