foundation-rails 5.5.1.2 → 5.5.2.0

data/vendor/assets/stylesheets/foundation/components/_top-bar.scss

@@ -2,10 +2,10 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "grid";
-@import "buttons";
-@import "forms";
+@import 'global';
+@import 'grid';
+@import 'buttons';
+@import 'forms';
 
 //
 // Top Bar Variables
@@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg: $topbar-bg !default;
-$topbar-link-bg-hover: $oil !default;
+$topbar-link-bg-hover: $jet !default;
 $topbar-link-bg-color-hover: $charcoal !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
@@ -42,7 +42,7 @@ $topbar-link-text-transform: none !default;
 $topbar-link-padding: ($topbar-height / 3) !default;
 $topbar-back-link-size: rem-calc(18) !default;
 $topbar-link-dropdown-padding: rem-calc(20) !default;
-$topbar-button-font-size: 0.75rem !default;
+$topbar-button-font-size: .75rem !default;
 $topbar-button-top: 7px !default;
 
 // Style the top bar dropdown elements
@@ -50,11 +50,11 @@ $topbar-dropdown-bg: $oil !default;
 $topbar-dropdown-link-color: $white !default;
 $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
 $topbar-dropdown-link-bg: $oil !default;
-$topbar-dropdown-link-bg-hover: $oil !default;
+$topbar-dropdown-link-bg-hover: $jet !default;
 $topbar-dropdown-link-weight: $font-weight-normal !default;
 $topbar-dropdown-toggle-size: 5px !default;
 $topbar-dropdown-toggle-color: $white !default;
-$topbar-dropdown-toggle-alpha: 0.4 !default;
+$topbar-dropdown-toggle-alpha: .4 !default;
 
 $topbar-dropdown-label-color: $monsoon !default;
 $topbar-dropdown-label-text-transform: uppercase !default;
@@ -76,7 +76,7 @@ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-
 $topbar-transition-speed: 300ms !default;
 // Using rem-calc for the below breakpoint causes issues with top bar
 $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
-$topbar-media-query: $medium-up !default;
+$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
 
 // Top-bar input styles
 $topbar-input-height: rem-calc(28) !default;
@@ -93,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 // Accessibility mixins for hiding and showing the menu dropdown items
 @mixin topbar-hide-dropdown {
   // Makes an element visually hidden by default, but visible when focused.
-  display: block;
   @include element-invisible();
+  display: block;
 }
 
 @mixin topbar-show-dropdown {
-  display: block;
   @include element-invisible-off();
+  display: block;
   position: absolute !important; // Reset the position from static to absolute
 }
 
@@ -120,67 +120,76 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       width: 100%;
       background: $topbar-bg;
 
-      .top-bar { margin-bottom: $topbar-margin-bottom; }
+      .top-bar {
+        margin-bottom: $topbar-margin-bottom;
+      }
     }
 
     // Wrapped around .top-bar to make it stick to the top
     .fixed {
-      width: 100%;
-      #{$default-float}: 0;
       position: fixed;
       top: 0;
+      width: 100%;
       z-index: 99;
+      #{$default-float}: 0;
 
       &.expanded:not(.top-bar) {
-        overflow-y: auto;
         height: auto;
-        width: 100%;
         max-height: 100%;
+        overflow-y: auto;
+        width: 100%;
 
         .title-area {
           position: fixed;
           width: 100%;
           z-index: 99;
         }
+
         // Ensure you can scroll the menu on small screens
         .top-bar-section {
-          z-index: 98;
           margin-top: $topbar-height;
+          z-index: 98;
         }
       }
     }
 
     .top-bar {
-      overflow: hidden;
+      background: $topbar-bg;
       height: $topbar-height;
       line-height: $topbar-height;
-      position: relative;
-      background: $topbar-bg;
       margin-bottom: $topbar-margin-bottom;
+      overflow: hidden;
+      position: relative;
 
       // Topbar Global list Styles
       ul {
-        margin-bottom: 0;
         list-style: none;
+        margin-bottom: 0;
       }
 
-      .row { max-width: none; }
+      .row {
+        max-width: none;
+      }
 
       form,
-      input { margin-bottom: 0; }
+      input, 
+      select {
+        margin-bottom: 0;
+      }
 
-      input { 
-        height: $topbar-input-height; 
-        padding-top: .35rem; 
-        padding-bottom: .35rem; 
-        font-size: $topbar-button-font-size; 
+      input, 
+      select {
+        font-size: $topbar-button-font-size;
+        height: $topbar-input-height;
+        padding-bottom: .35rem;
+        padding-top: .35rem;
       }
 
       .button, button {
-        padding-top: .35rem + rem-calc(1);
-        padding-bottom: .35rem + rem-calc(1);
-        margin-bottom: 0;
         font-size: $topbar-button-font-size;
+        margin-bottom: 0;
+        padding-bottom: .35rem + rem-calc(1);
+        padding-top: .35rem + rem-calc(1);
         // position: relative;
         // top: -1px;
 
@@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
       // Title Area
       .title-area {
-        position: relative;
         margin: 0;
+        position: relative;
       }
 
       .name {
+        font-size: $rem-base;
         height: $topbar-height;
         margin: 0;
-        font-size: $rem-base;
-        // @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
 
         h1, h2, h3, h4, p, span {
-          line-height: $topbar-height;
           font-size: $topbar-title-font-size;
+          line-height: $topbar-height;
           margin: 0;
+
           a {
-            font-weight: $topbar-title-weight;
             color: $topbar-link-color;
-            width: 75%;
             display: block;
+            font-weight: $topbar-title-weight;
             padding: 0 $topbar-link-padding;
+            width: 75%;
           }
         }
       }
@@ -225,59 +234,50 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
         a {
           color: $topbar-link-color;
-          text-transform: $topbar-menu-link-transform;
+          display: block;
           font-size: $topbar-menu-link-font-size;
           font-weight: $topbar-menu-link-weight;
-          position: relative;
-          display: block;
-          padding: 0 $topbar-link-padding;
           height: $topbar-height;
           line-height: $topbar-height;
+          padding: 0 $topbar-link-padding;
+          position: relative;
+          text-transform: $topbar-menu-link-transform;
         }
 
         // Adding the class "menu-icon" will add the 3-line icon people love and adore.
         &.menu-icon {
-          top: 50%;
           margin-top: -16px;
+          top: 50%;
 
           a {
+            @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
+
             @if $text-direction == rtl {
               text-indent: -58px;
             }
+            color: $topbar-menu-link-color;
             height: 34px;
             line-height: 33px;
             padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
-            color: $topbar-menu-link-color;
             position: relative;
-
-            & {
-              // @include hamburger icon
-              //
-              // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
-              // $width - Width of hamburger icon
-              // $left - If false, icon will be centered horizontally || explicitly set value in rem
-              // $top - If false, icon will be centered vertically || explicitly set value in rem
-              // $thickness - thickness of lines in hamburger icon, set value in px
-              // $gap - spacing between the lines in hamburger icon, set value in px
-              // $color - icon color
-              // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
-              // $offcanvas - Set to false of @include in topbar
-              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
-            }
           }
         }
       }
 
       // Change things up when the top-bar is expanded
       &.expanded {
-        height: auto;
         background: transparent;
+        height: auto;
 
-        .title-area { background: $topbar-bg; }
+        .title-area {
+          background: $topbar-bg;
+        }
 
         .toggle-topbar {
-          a { color: $topbar-menu-link-color-toggled;
-      span::after {
+          a {
+            color: $topbar-menu-link-color-toggled;
+
+            span::after {
               // Shh, don't tell, but box-shadows create the menu icon :)
               // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
               box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
@@ -286,6 +286,21 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             }
           }
         }
+
+        // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
+        @media screen and (-webkit-min-device-pixel-ratio:0) {
+          .top-bar-section {
+            .has-dropdown.moved > .dropdown,
+            .dropdown {
+              clip: initial;
+            }
+
+            // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
+            .has-dropdown:not(.moved) > ul {
+              padding: 0;
+            }
+          }
+        }
       }
     }
 
@@ -297,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       @include single-transition($default-float, $topbar-transition-speed);
 
       ul {
-        padding: 0;
-        width: 100%;
-        height: auto;
         display: block;
         font-size: $rem-base;
+        height: auto;
         margin: 0;
+        padding: 0;
+        width: 100%;
       }
 
       .divider,
@@ -315,54 +330,60 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
       ul li {
         background: $topbar-dropdown-bg;
-        & > a {
-          display: block;
-          width: 100%;
+
+        > a {
           color: $topbar-link-color;
-          padding: 12px 0 12px 0;
-          padding-#{$default-float}: $topbar-link-padding;
+          display: block;
           font-family: $topbar-link-font-family;
           font-size: $topbar-link-font-size;
           font-weight: $topbar-link-weight;
+          padding-#{$default-float}: $topbar-link-padding;
+          padding: 12px 0 12px $topbar-link-padding;
           text-transform: $topbar-link-text-transform;
+          width: 100%;
 
           &.button {
             font-size: $topbar-link-font-size;
-            padding-#{$opposite-direction}: $topbar-link-padding;
             padding-#{$default-float}: $topbar-link-padding;
+            padding-#{$opposite-direction}: $topbar-link-padding;
             @include button-style($bg:$primary-color);
           }
+
           &.button.secondary { @include button-style($bg:$secondary-color); }
           &.button.success { @include button-style($bg:$success-color); }
           &.button.alert { @include button-style($bg:$alert-color); }
           &.button.warning { @include button-style($bg:$warning-color); }
+          &.button.info { @include button-style($bg:$info-color); }
         }
 
         > button {
           font-size: $topbar-link-font-size;
-          padding-#{$opposite-direction}: $topbar-link-padding;
           padding-#{$default-float}: $topbar-link-padding;
+          padding-#{$opposite-direction}: $topbar-link-padding;
           @include button-style($bg:$primary-color);
 
           &.secondary { @include button-style($bg:$secondary-color); }
           &.success { @include button-style($bg:$success-color); }
           &.alert { @include button-style($bg:$alert-color); }
           &.warning { @include button-style($bg:$warning-color); }
+          &.info { @include button-style($bg:$info-color); }
         }
 
         // Apply the hover link color when it has that class
         &:hover:not(.has-form) > a {
           background-color: $topbar-link-bg-color-hover;
+          color: $topbar-link-color-hover;
+
           @if ($topbar-link-bg-hover) {
             background: $topbar-link-bg-hover;
           }
-          color: $topbar-link-color-hover;
         }
 
         // Apply the active link color when it has that class
         &.active > a {
           background: $topbar-link-bg-active;
           color: $topbar-link-color-active;
+
           &:hover {
             background: $topbar-link-bg-active-hover;
             color: $topbar-link-color-active-hover;
@@ -371,17 +392,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       }
 
       // Add some extra padding for list items contains buttons
-      .has-form { padding: $topbar-link-padding; }
+      .has-form {
+        padding: $topbar-link-padding;
+      }
 
       // Styling for list items that have a dropdown within them.
       .has-dropdown {
         position: relative;
 
-        & > a {
+        > a {
           &:after {
-            @if ($topbar-arrows){
+            @if ($topbar-arrows) {
               @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
             }
+
             margin-#{$opposite-direction}: $topbar-link-padding;
             margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
             position: absolute;
@@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
           }
         }
 
-        &.moved { position: static;
-          & > .dropdown {
+        &.moved {
+          position: static;
+
+          > .dropdown {
             @include topbar-show-dropdown();
             width: 100%;
           }
-          & > a:after {
+
+          > a:after {
             display: none;
           }
         }
@@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
       // Styling elements inside of dropdowns
       .dropdown {
+        @include topbar-hide-dropdown();
         padding: 0;
         position: absolute;
-        #{$default-float}: 100%;
         top: 0;
         z-index: 99;
-        @include topbar-hide-dropdown();
+        #{$default-float}: 100%;
 
         li {
-          width: 100%;
           height: auto;
+          width: 100%;
 
           a {
             font-weight: $topbar-dropdown-link-weight;
@@ -422,7 +449,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             }
           }
 
-          &.title h5, &.parent-link {
+          &.title h5,
+          &.parent-link {
             // Back Button
             margin-bottom: 0;
             margin-top: 0;
@@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               &:hover { background:none; }
             }
           }
-          &.has-form { padding: 8px $topbar-link-padding; }
-          .button, button { top: auto; }
+
+          &.has-form {
+            padding: 8px $topbar-link-padding;
+          }
+
+          .button,
+          button {
+            top: auto;
+          }
         }
 
         label {
-          padding: 8px $topbar-link-padding 2px;
-          margin-bottom: 0;
-          text-transform: $topbar-dropdown-label-text-transform;
           color: $topbar-dropdown-label-color;
-          font-weight: $topbar-dropdown-label-font-weight;
           font-size: $topbar-dropdown-label-font-size;
+          font-weight: $topbar-dropdown-label-font-weight;
+          margin-bottom: 0;
+          padding: 8px $topbar-link-padding 2px;
+          text-transform: $topbar-dropdown-label-text-transform;
         }
       }
     }
@@ -455,8 +490,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
     // Top Bar styles intended for screen sizes above the breakpoint.
     @media #{$topbar-media-query} {
       .top-bar {
-        background: $topbar-bg;
         @include clearfix;
+        background: $topbar-bg;
         overflow: visible;
 
         .toggle-topbar { display: none; }
@@ -470,21 +505,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         .name h6 a { width: auto; }
 
         input,
+        select,
         .button,
         button {
           font-size: rem-calc(14);
-          position: relative;
           height: $topbar-input-height;
+          position: relative;
           top: (($topbar-height - $topbar-input-height) / 2);
         }
 
-        &.expanded { background: $topbar-bg; }
+        &.expanded {
+          background: $topbar-bg;
+        }
       }
 
       .contain-to-grid .top-bar {
-        max-width: $row-width;
-        margin: 0 auto;
         margin-bottom: $topbar-margin-bottom;
+        margin: 0 auto;
+        max-width: $row-width;
       }
 
       .top-bar-section {
@@ -492,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         #{$default-float}: 0 !important;
 
         ul {
-          width: auto;
-          height: auto !important;
           display: inline;
+          height: auto !important;
+          width: auto;
 
           li {
             float: $default-float;
@@ -512,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               color: $topbar-link-color-hover;
             }
           }
+
           &:not(.has-form) {
             a:not(.button) {
-              padding: 0 $topbar-link-padding;
-              line-height: $topbar-height;
               background: $topbar-link-bg;
+              line-height: $topbar-height;
+              padding: 0 $topbar-link-padding;
               &:hover {
                 background-color: $topbar-link-bg-color-hover;
                 @if ($topbar-link-bg-hover) {
@@ -525,12 +564,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               }
             }
           }
+
           &.active:not(.has-form) {
             a:not(.button) {
-              padding: 0 $topbar-link-padding;
-              line-height: $topbar-height;
-              color: $topbar-link-color-active;
               background: $topbar-link-bg-active;
+              color: $topbar-link-color-active;
+              line-height: $topbar-height;
+              padding: 0 $topbar-link-padding;
               &:hover {
                 background: $topbar-link-bg-active-hover;
                 color: $topbar-link-color-active-hover;
@@ -540,8 +580,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         }
 
         .has-dropdown {
-          @if($topbar-arrows){
-            & > a {
+          @if $topbar-arrows {
+            > a {
               padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
               &:after {
                 @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
@@ -552,30 +592,30 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
           }
 
           &.moved { position: relative;
-            & > .dropdown {
+            > .dropdown {
               @include topbar-hide-dropdown();
             }
           }
 
           &.hover, &.not-click:hover {
-            & > .dropdown {
+            > .dropdown {
               @include topbar-show-dropdown();
             }
           }
+
           > a:focus + .dropdown {
             @include topbar-show-dropdown();
           }
 
           .dropdown li.has-dropdown {
-            & > a {
-              @if ($topbar-dropdown-arrows){
+            > a {
+              @if ($topbar-dropdown-arrows) {
                 &:after {
                   border: none;
                   content: "\00bb";
-                  top: 1rem;
-                  margin-top: -1px;
+                  top: rem-calc(3);
+
                   #{$opposite-direction}: 5px;
-                  line-height: 1.2;
                 }
               }
             }
@@ -584,28 +624,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
         .dropdown {
           #{$default-float}: 0;
-          top: auto;
           background: transparent;
           min-width: 100%;
+          top: auto;
 
           li {
             a {
+              background: $topbar-dropdown-link-bg;
               color: $topbar-dropdown-link-color;
               line-height: $topbar-height;
-              white-space: nowrap;
               padding: 12px $topbar-link-padding;
-              background: $topbar-dropdown-link-bg;
+              white-space: nowrap;
             }
 
             &:not(.has-form):not(.active) {
-              & > a:not(.button) {
-                color: $topbar-dropdown-link-color;
+              > a:not(.button) {
                 background: $topbar-dropdown-link-bg;
+                color: $topbar-dropdown-link-color;
               }
 
               &:hover > a:not(.button) {
-                color: $topbar-dropdown-link-color-hover;
                 background-color: $topbar-link-bg-color-hover;
+                color: $topbar-dropdown-link-color-hover;
                 @if ($topbar-dropdown-link-bg-hover) {
                   background: $topbar-dropdown-link-bg-hover;
                 }
@@ -613,8 +653,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             }
 
             label {
-              white-space: nowrap;
               background: $topbar-dropdown-label-bg;
+              white-space: nowrap;
             }
 
             // Second Level Dropdowns
@@ -625,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
           }
         }
 
-        & > ul > .divider,
-        & > ul > [role="separator"] {
+        > ul > .divider,
+        > ul > [role="separator"] {
+          border-#{$opposite-direction}: $topbar-divider-border-bottom;
           border-bottom: none;
           border-top: none;
-          border-#{$opposite-direction}: $topbar-divider-border-bottom;
           clear: none;
           height: $topbar-height;
           width: 0;
@@ -637,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
         .has-form {
           background: $topbar-link-bg;
-          padding: 0 $topbar-link-padding;
           height: $topbar-height;
+          padding: 0 $topbar-link-padding;
         }
 
         // Position overrides for ul.right and ul.left
@@ -682,10 +722,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
         .has-dropdown {
           &:hover {
-            & > .dropdown {
+            > .dropdown {
               @include topbar-show-dropdown();
             }
           }
+
           > a:focus + .dropdown {
             @include topbar-show-dropdown();
           }