foundation-rails 5.5.3.2 → 6.6.2.0

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

@@ -1,745 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-@import 'grid';
-@import 'buttons';
-@import 'forms';
-
-//
-// Top Bar Variables
-//
-$include-html-top-bar-classes: $include-html-classes !default;
-
-// Background color for the top bar
-$topbar-bg-color: $oil !default;
-$topbar-bg: $topbar-bg-color !default;
-
-// Height and margin
-$topbar-height: rem-calc(45) !default;
-$topbar-margin-bottom: 0 !default;
-
-// Controlling the styles for the title in the top bar
-$topbar-title-weight: $font-weight-normal !default;
-$topbar-title-font-size: rem-calc(17) !default;
-
-// Set the link colors and styles for top-level nav
-$topbar-link-color: $white !default;
-$topbar-link-color-hover: $white !default;
-$topbar-link-color-active: $white !default;
-$topbar-link-color-active-hover: $white !default;
-$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: $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;
-$topbar-link-font-family: $body-font-family !default;
-$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: .75rem !default;
-$topbar-button-top: 7px !default;
-
-// Style the top bar dropdown elements
-$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: $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: .4 !default;
-
-$topbar-dropdown-label-color: $monsoon !default;
-$topbar-dropdown-label-text-transform: uppercase !default;
-$topbar-dropdown-label-font-weight: $font-weight-bold !default;
-$topbar-dropdown-label-font-size: rem-calc(10) !default;
-$topbar-dropdown-label-bg: $oil !default;
-
-// Top menu icon styles
-$topbar-menu-link-transform: uppercase !default;
-$topbar-menu-link-font-size: rem-calc(13) !default;
-$topbar-menu-link-weight: $font-weight-bold !default;
-$topbar-menu-link-color: $white !default;
-$topbar-menu-icon-color: $white !default;
-$topbar-menu-link-color-toggled: $jumbo !default;
-$topbar-menu-icon-color-toggled: $jumbo !default;
-$topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon
-
-// Transitions and breakpoint styles
-$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: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})" !default;
-
-// Top-bar input styles
-$topbar-input-height: rem-calc(28) !default;
-
-// Divider Styles
-$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
-$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
-
-// Sticky Class
-$topbar-sticky-class: ".sticky" !default;
-$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
-$topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li
-
-// 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.
-  @include element-invisible();
-  display: block;
-}
-
-@mixin topbar-show-dropdown {
-  @include element-invisible-off();
-  display: block;
-  position: absolute !important; // Reset the position from static to absolute
-}
-
-@include exports("top-bar") {
-
-  @if $include-html-top-bar-classes {
-
-    // Used to provide media query values for javascript components.
-    // This class is generated despite the value of $include-html-top-bar-classes
-    // to ensure width calculations work correctly.
-    meta.foundation-mq-topbar {
-      font-family: "/" + unquote($topbar-media-query) + "/";
-      width: $topbar-breakpoint;
-    }
-
-    /* Wrapped around .top-bar to contain to grid width */
-    .contain-to-grid {
-      width: 100%;
-      background: $topbar-bg;
-
-      .top-bar {
-        margin-bottom: $topbar-margin-bottom;
-      }
-    }
-
-    // Wrapped around .top-bar to make it stick to the top
-    .fixed {
-      position: fixed;
-      top: 0;
-      width: 100%;
-      z-index: 99;
-      #{$default-float}: 0;
-
-      &.expanded:not(.top-bar) {
-        height: auto;
-        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 {
-          margin-top: $topbar-height;
-          z-index: 98;
-        }
-      }
-    }
-
-    .top-bar {
-      background: $topbar-bg;
-      height: $topbar-height;
-      line-height: $topbar-height;
-      margin-bottom: $topbar-margin-bottom;
-      overflow: hidden;
-      position: relative;
-
-      // Topbar Global list Styles
-      ul {
-        list-style: none;
-        margin-bottom: 0;
-      }
-
-      .row {
-        max-width: none;
-      }
-
-      form,
-      input, 
-      select {
-        margin-bottom: 0;
-      }
-
-      input, 
-      select {
-        font-size: $topbar-button-font-size;
-        height: $topbar-input-height;
-        padding-bottom: .35rem;
-        padding-top: .35rem;
-      }
-
-      .button, button {
-        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;
-
-        // Corrects a slight misalignment when put next to an input field
-        @media #{$small-only} {
-          position: relative;
-          top: -1px;
-        }
-      }
-
-      // Title Area
-      .title-area {
-        margin: 0;
-        position: relative;
-      }
-
-      .name {
-        font-size: $rem-base;
-        height: $topbar-height;
-        margin: 0;
-
-        h1, h2, h3, h4, p, span {
-          font-size: $topbar-title-font-size;
-          line-height: $topbar-height;
-          margin: 0;
-
-          a {
-            color: $topbar-link-color;
-            display: block;
-            font-weight: $topbar-title-weight;
-            padding: 0 $topbar-link-padding;
-            width: 75%;
-          }
-        }
-      }
-
-      // Menu toggle button on small devices
-      .toggle-topbar {
-        position: absolute;
-        #{$topbar-menu-icon-position}: 0;
-        top: 0;
-
-        a {
-          color: $topbar-link-color;
-          display: block;
-          font-size: $topbar-menu-link-font-size;
-          font-weight: $topbar-menu-link-weight;
-          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 {
-          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;
-            position: relative;
-          }
-        }
-      }
-
-      // Change things up when the top-bar is expanded
-      &.expanded {
-        background: transparent;
-        height: auto;
-
-        .title-area {
-          background: $topbar-bg;
-        }
-
-        .toggle-topbar {
-          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,
-                          0 7px 0 1px $topbar-menu-icon-color-toggled,
-                          0 14px 0 1px $topbar-menu-icon-color-toggled;
-            }
-          }
-        }
-
-        // 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;
-            }
-          }
-        }
-      }
-    }
-
-    // Right and Left Navigation that stacked by default
-    .top-bar-section {
-      #{$default-float}: 0;
-      position: relative;
-      width: auto;
-      @include single-transition($default-float, $topbar-transition-speed);
-
-      ul {
-        display: block;
-        font-size: $rem-base;
-        height: auto;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-      }
-
-      .divider,
-      [role="separator"] {
-        border-top: $topbar-divider-border-top;
-        clear: both;
-        height: 1px;
-        width: 100%;
-      }
-
-      ul li {
-      background: $topbar-dropdown-bg;
-
-        > a {
-          color: $topbar-link-color;
-          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-#{$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-#{$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;
-          }
-        }
-
-        // 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;
-          }
-        }
-      }
-
-      // Add some extra padding for list items contains buttons
-      .has-form {
-        padding: $topbar-link-padding;
-      }
-
-      // Styling for list items that have a dropdown within them.
-      .has-dropdown {
-        position: relative;
-
-        > a {
-          &:after {
-            @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;
-            top: 50%;
-            #{$opposite-direction}: 0;
-          }
-        }
-
-        &.moved {
-          position: static;
-
-          > .dropdown {
-            @include topbar-show-dropdown();
-            width: 100%;
-          }
-
-          > a:after {
-            display: none;
-          }
-        }
-      }
-
-      // Styling elements inside of dropdowns
-      .dropdown {
-        @include topbar-hide-dropdown();
-        padding: 0;
-        position: absolute;
-        top: 0;
-        z-index: 99;
-        #{$default-float}: 100%;
-
-        li {
-          height: auto;
-          width: 100%;
-
-          a {
-            font-weight: $topbar-dropdown-link-weight;
-            padding: 8px $topbar-link-padding;
-            &.parent-link {
-              font-weight: $topbar-link-weight;
-            }
-          }
-
-          &.title h5,
-          &.parent-link {
-            // Back Button
-            margin-bottom: 0;
-            margin-top: 0;
-            font-size: $topbar-back-link-size;
-            a {
-              color: $topbar-link-color;
-              // line-height: ($topbar-height / 2);
-              display: block;
-              &:hover { background:none; }
-            }
-          }
-
-          &.has-form {
-            padding: 8px $topbar-link-padding;
-          }
-
-          .button,
-          button {
-            top: auto;
-          }
-        }
-
-        label {
-          color: $topbar-dropdown-label-color;
-          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;
-        }
-      }
-    }
-
-    .js-generated { display: block; }
-
-
-    // Top Bar styles intended for screen sizes above the breakpoint.
-    @media #{$topbar-media-query} {
-      .top-bar {
-        @include clearfix;
-        background: $topbar-bg;
-        overflow: visible;
-
-        .toggle-topbar { display: none; }
-
-        .title-area { float: $default-float; }
-        .name h1 a,
-        .name h2 a,
-        .name h3 a,
-        .name h4 a,
-        .name h5 a,
-        .name h6 a { width: auto; }
-
-        input,
-        select,
-        .button,
-        button {
-          font-size: rem-calc(14);
-          height: $topbar-input-height;
-          position: relative;
-          top: (($topbar-height - $topbar-input-height) / 2);
-        }
-
-        .has-form > .button,
-        .has-form > button {
-          font-size: rem-calc(14);
-          height: $topbar-input-height;
-          position: relative; 
-          top: (($topbar-height - $topbar-input-height) / 2);
-        }
-
-        &.expanded {
-          background: $topbar-bg;
-        }
-      }
-
-      .contain-to-grid .top-bar {
-        margin: 0 auto;
-        margin-bottom: $topbar-margin-bottom;
-        max-width: $row-width;
-      }
-
-      .top-bar-section {
-        @include single-transition(none,0,0);
-        #{$default-float}: 0 !important;
-
-        ul {
-          display: inline;
-          height: auto !important;
-          width: auto;
-
-          li {
-            float: $default-float;
-            .js-generated { display: none; }
-          }
-        }
-
-        li {
-          &.hover {
-            > a:not(.button) {
-              background-color: $topbar-link-bg-color-hover;
-              @if ($topbar-link-bg-hover) {
-                background: $topbar-link-bg-hover;
-              }
-              color: $topbar-link-color-hover;
-            }
-          }
-
-          &:not(.has-form) {
-            a:not(.button) {
-              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) {
-                  background: $topbar-link-bg-hover;
-                }
-              }
-            }
-          }
-
-          &.active:not(.has-form) {
-            a:not(.button) {
-              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;
-              }
-            }
-          }
-        }
-
-        .has-dropdown {
-          @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);
-                margin-top: -($topbar-dropdown-toggle-size / 2);
-                top: ($topbar-height / 2);
-              }
-            }
-          }
-
-          &.moved { position: relative;
-            > .dropdown {
-              @include topbar-hide-dropdown();
-            }
-          }
-
-          &.hover, &.not-click:hover {
-            > .dropdown {
-              @include topbar-show-dropdown();
-            }
-          }
-
-          > a:focus + .dropdown {
-            @include topbar-show-dropdown();
-          }
-
-          .dropdown li.has-dropdown {
-            > a {
-              @if ($topbar-dropdown-arrows) {
-                &:after {
-                  border: none;
-                  content: "\00bb";
-                  top: rem-calc(3);
-
-                  #{$opposite-direction}: 5px;
-                }
-              }
-            }
-          }
-        }
-
-        .dropdown {
-          #{$default-float}: 0;
-          background: transparent;
-          min-width: 100%;
-          top: auto;
-
-          li {
-            a {
-              background: $topbar-dropdown-link-bg;
-              color: $topbar-dropdown-link-color;
-              line-height: $topbar-height;
-              padding: 12px $topbar-link-padding;
-              white-space: nowrap;
-            }
-
-            &:not(.has-form):not(.active) {
-              > a:not(.button) {
-                background: $topbar-dropdown-link-bg;
-                color: $topbar-dropdown-link-color;
-              }
-
-              &:hover > a:not(.button) {
-                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;
-                }
-              }
-            }
-
-            label {
-              background: $topbar-dropdown-label-bg;
-              white-space: nowrap;
-            }
-
-            // Second Level Dropdowns
-            .dropdown {
-              #{$default-float}: 100%;
-              top: 0;
-            }
-          }
-        }
-
-        > ul > .divider,
-        > ul > [role="separator"] {
-          border-#{$opposite-direction}: $topbar-divider-border-bottom;
-          border-bottom: none;
-          border-top: none;
-          clear: none;
-          height: $topbar-height;
-          width: 0;
-        }
-
-        .has-form {
-          background: $topbar-link-bg;
-          height: $topbar-height;
-          padding: 0 $topbar-link-padding;
-        }
-
-        // Position overrides for ul.right and ul.left
-        .#{$opposite-direction} {
-          li .dropdown {
-            #{$default-float}: auto;
-            #{$opposite-direction}: 0;
-
-            li .dropdown { #{$opposite-direction}: 100%; }
-          }
-        }
-        .#{$default-float} {
-          li .dropdown {
-            #{$opposite-direction}: auto;
-            #{$default-float}: 0;
-
-            li .dropdown { #{$default-float}: 100%; }
-          }
-        }
-      }
-
-      // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
-      // background & text color on hover.
-      .no-js .top-bar-section {
-        ul li {
-          // Apply the hover link color when it has that class
-          &:hover > a {
-            background-color: $topbar-link-bg-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;
-          }
-        }
-
-        .has-dropdown {
-          &:hover {
-            > .dropdown {
-              @include topbar-show-dropdown();
-            }
-          }
-
-          > a:focus + .dropdown {
-            @include topbar-show-dropdown();
-          }
-        }
-      }
-    }
-  }
-}