Merge pull request #161 from dobtco/page_header

Improved page header styles
dobtco · Sep 10, 2015 · dd34a1f · dd34a1f
2 parents 32ed0fb + 30e863d
commit dd34a1f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 29 deletions.
diff --git a/spec/dummy/app/views/home/headers.rb b/spec/dummy/app/views/home/headers.rb
@@ -19,7 +19,7 @@ def main
               a 'Stages'
             }
 
-            li {
+            li.active {
               a 'Contacts'
             }
 
@@ -33,7 +33,7 @@ def main
             li {
               a {
                 i(class: 'fa fa-pencil')
-                text 'Edit campaign'
+                text 'Edit'
               }
             }
 
@@ -74,10 +74,10 @@ def main
         }
         div.page_header_tertiary {
           ul {
-            li {
+            li.active {
               a {
                 i(class: 'fa fa-pencil')
-                text 'Edit campaign'
+                text 'Edit'
               }
             }
 
@@ -88,16 +88,16 @@ def main
             }
           }
 
-          a.button.info.icon_r(href: '#') {
-            text 'View campaign'
+          a.button.mini.info.icon_r(href: '#') {
+            text 'View '
             i(class: 'fa fa-long-arrow-right')
           }
         }
       }
     }, sub: true
 
     docs 'Pagination', %{
-      div.page_header.with_back_arrow {
+      div.page_header.with_back_arrow.with_pagination {
         a.page_header_back_arrow(title: 'All responses', 'data-toggle' => 'tooltip') {
           i(class: 'fa fa-arrow-circle-o-left')
         }
@@ -108,7 +108,7 @@ def main
 
         div.page_header_secondary {
           ul {
-            li {
+            li.active {
               a 'Responses'
             }
 

diff --git a/vendor/assets/stylesheets/dvl/components/page_header.scss b/vendor/assets/stylesheets/dvl/components/page_header.scss
@@ -1,12 +1,12 @@
 .page_header {
   @include cf();
   border-bottom: 1px solid $lightGray;
-  padding-bottom: $rhythm;
   margin-bottom: $lineHeight;
   position: relative;
   h2 {
     float: left;
-    margin: 0 ($rhythm * 4) 0 0;
+    margin-right: $rhythm * 4;
+    margin-bottom: $rhythm;
     a {
       color: $black;
       text-decoration: none;
@@ -28,10 +28,10 @@
       top: $rhythm / 2;
     }
   }
-
-  &.with_back_arrow {
-    padding-left: $rhythm * 5;
+  .pagination_compact {
+    margin-bottom: $rhythm;
   }
+
   > .button,
   > form .button {
     float: left;
@@ -51,15 +51,29 @@
       }
     }
   }
+
+  // Modifiers
+
+  &.with_back_arrow {
+    padding-left: $rhythm * 5;
+  }
+
+  @media screen and (min-width: $lapWidth) {
+    &.with_pagination {
+      h2 {
+        padding-right: ($rhythm * 10) + ($lineHeight * 4);
+      }
+    }
+  }
 }
 
 .page_header_back_arrow {
-  font-size: 2rem;
+  font-size: 1.75rem;
   position: absolute;
   opacity: 0.7;
-  @include topCenter($fontLineHeightH2Mobile, 2rem);
+  @include topCenter($fontLineHeightH2Mobile, 1.75rem);
   @media screen and (min-width: $lapWidth) {
-    @include topCenter($fontLineHeightH2, 2rem);
+    @include topCenter($fontLineHeightH2, 1.75rem);
   }
   left: 0;
   margin-top: 2px; // Optical adjustment
@@ -71,14 +85,41 @@
 .page_header_secondary,
 .page_header_tertiary {
   ul {
-    margin-top: $rhythm;
+    margin-top: $rhythm * 0.5;
+    a,
+    li > span {
+      padding-bottom: $rhythm * 1.5;
+      display: inline-block;
+      line-height: $lineHeight;
+    }
+    a {
+      @media screen and (min-width: $lapWidth) {
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: none;
+          box-shadow: 0 1px 0 $linkSelectedColor;
+        }
+      }
+      &:hover,
+      &:focus {
+        color: rgba($linkSelectedColor,0.7);
+      }
+      &:active {
+        color: $linkSelectedColor;
+      }
+    }
     li {
       display: inline;
+      @include font_smoothing;
       > span {
-        color: $darkerGray;
+        color: $darkestGray;
       }
       &.active a {
-        color: $darkestGray;
+        color: $linkSelectedColor;
+        @media screen and (min-width: $lapWidth) {
+          box-shadow: 0 1px 0 $linkSelectedColor;
+        }
         &:hover {
           text-decoration: none;
         }
@@ -107,40 +148,36 @@
 
 .page_header_tertiary {
   float: left;
+  clear: left;
   ul,
   .button {
     float: left;
   }
   ul {
     font-size: $fontSmall;
-    line-height: 1.8;
   }
   .button {
-    clear: left;
-    margin-top: $rhythm;
+    margin-top: $rhythm / 2;
+    margin-left: $rhythm * 3;
   }
   li {
-    margin-left: $rhythm * 2;
+    margin-left: $rhythm * 3;
     &:first-child {
       margin-left: 0;
     }
     a {
       color: $darkerGray;
-
       // Add a space in between icon & text
       > i {
         margin-right: 0.25rem;
       }
     }
     &.active a {
-      color: $black;
+      color: $bodyFontColor;
     }
   }
   @media screen and (min-width: $lapWidth) {
     float: right;
-    .button {
-      margin: 0 0 0 $rhythm * 2;
-      clear: none;
-    }
+    clear: none;
   }
 }
diff --git a/vendor/assets/stylesheets/dvl/core/includes.scss b/vendor/assets/stylesheets/dvl/core/includes.scss
@@ -32,6 +32,7 @@ $logoBlue: #009ade;
 $blueGray: #6a6e75;
 $lighterBlueGray: #6a6e75;
 $linkColor: #2e8ad0;
+$linkSelectedColor: #0d2438;
 $bodyFontColor: $darkestGray;
 $darkBlue: #5bb7d9;