fastlane-plugin-polidea 0.1.0

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_tabs.scss

@@ -0,0 +1,123 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+@import "grid";
+@import "type";
+
+//
+// @variables
+//
+
+$include-html-tabs-classes: $include-html-classes !default;
+
+$tabs-navigation-padding: rem-calc(16) !default;
+$tabs-navigation-bg-color: $silver !default;
+$tabs-navigation-active-bg-color: $white !default;
+$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
+$tabs-navigation-font-color: $jet !default;
+$tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
+$tabs-navigation-font-size: rem-calc(16) !default;
+$tabs-navigation-font-family: $body-font-family !default;
+
+$tabs-content-margin-bottom: rem-calc(24) !default;
+$tabs-content-padding: $column-gutter/2 !default;
+
+$tabs-vertical-navigation-margin-bottom: 1.25rem !default;
+
+@include exports("tab") {
+  @if $include-html-tabs-classes {
+    .tabs {
+      @include clearfix;
+      margin-bottom: 0 !important;
+      margin-left: 0;
+      dd, .tab-title {
+        position: relative;
+        margin-bottom: 0 !important;
+        list-style: none;
+        float: $default-float;
+        > a {
+          display: block;
+          background: {
+            color: $tabs-navigation-bg-color;
+          }
+          color: $tabs-navigation-font-color;
+          padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
+          font-family: $tabs-navigation-font-family;
+          font-size: $tabs-navigation-font-size;
+          &:hover {
+            background: {
+              color: $tabs-navigation-hover-bg-color;
+            }
+          }
+        }
+        &.active a {
+          background: {
+            color: $tabs-navigation-active-bg-color;
+          }
+          color:$tabs-navigation-active-font-color;
+          }
+      }
+      &.radius {
+        dd:first-child, .tab:first-child {
+          a { @include side-radius($default-float, $global-radius); }
+        }
+        dd:last-child, .tab:last-child {
+          a { @include side-radius($opposite-direction, $global-radius); }
+        }
+      }
+      &.vertical {
+        dd, .tab-title {
+          position: inherit;
+          float: none;
+          display: block;
+          top: auto;
+        }
+      }
+    }
+
+    .tabs-content {
+      @include clearfix;
+      margin-bottom: $tabs-content-margin-bottom;
+      width: 100%;
+      > .content {
+        display: none;
+        float: $default-float;
+        padding: $tabs-content-padding 0;
+        width: 100%;
+        &.active { display: block; float: none; }
+        &.contained { padding: $tabs-content-padding; }
+      }
+      &.vertical {
+        display: block;
+        > .content { padding: 0 $tabs-content-padding; }
+      }
+    }
+    @media #{$medium-up} {
+      .tabs {
+        &.vertical {
+          width: 20%;
+          max-width: 20%;
+          float: $default-float;
+          margin: 0 0 $tabs-vertical-navigation-margin-bottom;
+        }
+      }
+      .tabs-content {
+        &.vertical {
+          width: 80%;
+          max-width: 80%;
+          float: $default-float;
+          margin-#{$default-float}: -1px;
+          padding-#{$default-float}: 1rem;
+        }
+      }
+    }
+    .no-js {
+      .tabs-content > .content {
+        display: block;
+        float: none;
+      }
+    }
+  }
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_thumbs.scss

@@ -0,0 +1,66 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _thumbs.scss
+// @dependencies _globals.scss
+//
+
+//
+// @variables
+//
+
+$include-html-media-classes: $include-html-classes !default;
+
+// We use these to control border styles
+$thumb-border-style: solid !default;
+$thumb-border-width: 4px !default;
+$thumb-border-color: $white !default;
+$thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
+
+// Radius and transition speed for thumbs
+$thumb-radius: $global-radius !default;
+$thumb-transition-speed: 200ms !default;
+
+//
+// @mixins
+//
+
+// We use this to create image thumbnail styles.
+//
+// $border-width - Width of border around thumbnail. Default: $thumb-border-width.
+// $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow.
+// $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover.
+@mixin thumb(
+  $border-width:$thumb-border-width, 
+  $box-shadow:$thumb-box-shadow, 
+  $box-shadow-hover:$thumb-box-shadow-hover) {
+  line-height: 0;
+  display: inline-block;
+  border: $thumb-border-style $border-width $thumb-border-color;
+  max-width: 100%;
+  box-shadow: $box-shadow;
+
+  &:hover,
+  &:focus {
+    box-shadow: $box-shadow-hover;
+  }
+}
+
+
+@include exports("thumb") {
+  @if $include-html-media-classes {
+
+    /* Image Thumbnails */
+    .th {
+      @include thumb;
+      @include single-transition(all,$thumb-transition-speed,ease-out);
+
+      &.radius { @include radius($thumb-radius); }
+    }
+  }
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_toolbar.scss

@@ -0,0 +1,70 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+// toolbar styles
+
+.toolbar {
+	background: $oil;
+	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	&.label-bottom .tab .tab-content {
+		i, img { margin-bottom: 10px; }
+	}
+
+	&.label-right .tab .tab-content {
+		i, img { margin-right: 10px; display: inline-block;}
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right .tab .tab-content {
+		text-align: left;
+	}
+
+	&.vertical {
+		height: 100%;
+		width: auto;
+
+		.tab {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+	
+	.tab {
+		text-align: center;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: 20px;
+		float: left;
+
+		&:hover {
+			background: rgba($white, 0.1);
+		}
+	}
+}		
+		
+.toolbar .tab-content {
+	font-size: 16px;
+	text-align: center;
+
+	label { color: $iron; }
+
+	i {
+		font-size: 30px;
+		display: block;
+		margin: 0 auto;
+		color: $iron;
+		vertical-align: middle;
+	}
+
+	img {
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_tooltips.scss

@@ -0,0 +1,142 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// Tooltip Variables
+//
+$include-html-tooltip-classes: $include-html-classes !default;
+
+$has-tip-border-bottom: dotted 1px $iron !default;
+$has-tip-font-weight: $font-weight-bold !default;
+$has-tip-font-color: $oil !default;
+$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
+$has-tip-font-color-hover: $primary-color !default;
+$has-tip-cursor-type: help !default;
+
+$tooltip-padding: rem-calc(12) !default;
+$tooltip-bg: $oil !default;
+$tooltip-font-size: rem-calc(14) !default;
+$tooltip-font-weight: $font-weight-normal !default;
+$tooltip-font-color: $white !default;
+$tooltip-line-height: 1.3 !default;
+$tooltip-close-font-size: rem-calc(10) !default;
+$tooltip-close-font-weight: $font-weight-normal !default;
+$tooltip-close-font-color: $monsoon !default;
+$tooltip-font-size-sml: rem-calc(14) !default;
+$tooltip-radius: $global-radius !default;
+$tooltip-rounded: $global-rounded !default;
+$tooltip-pip-size: 5px !default;
+$tooltip-max-width: 300px !default;
+
+@include exports("tooltip") {
+  @if $include-html-tooltip-classes {
+
+    /* Tooltips */
+    .has-tip {
+      border-bottom: $has-tip-border-bottom;
+      cursor: $has-tip-cursor-type;
+      font-weight: $has-tip-font-weight;
+      color: $has-tip-font-color;
+
+      &:hover,
+      &:focus {
+        border-bottom: $has-tip-border-bottom-hover;
+        color: $has-tip-font-color-hover;
+      }
+
+      &.tip-left,
+      &.tip-right { float: none !important; }
+    }
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      z-index: 999;
+      font-weight: $tooltip-font-weight;
+      font-size: $tooltip-font-size;
+      line-height: $tooltip-line-height;
+      padding: $tooltip-padding;
+      max-width: $tooltip-max-width;
+      #{$default-float}: 50%;
+      width: 100%;
+      color: $tooltip-font-color;
+      background: $tooltip-bg;
+
+      &>.nub {
+        display: block;
+        #{$default-float}: $tooltip-pip-size;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: solid $tooltip-pip-size;
+        border-color: transparent transparent $tooltip-bg transparent;
+        top: -($tooltip-pip-size * 2);
+        pointer-events: none;
+
+        &.rtl {
+          left: auto;
+          #{$opposite-direction}: $tooltip-pip-size;
+        }
+      }
+
+      &.radius {
+        @include radius($tooltip-radius);
+      }
+      &.round {
+        @include radius($tooltip-rounded);
+        &>.nub {
+          left: 2rem;
+        }
+      }
+
+      &.opened {
+        color: $has-tip-font-color-hover !important;
+        border-bottom: $has-tip-border-bottom-hover !important;
+      }
+    }
+
+    .tap-to-close {
+      display: block;
+      font-size: $tooltip-close-font-size;
+      color: $tooltip-close-font-color;
+      font-weight: $tooltip-close-font-weight;
+    }
+
+    @media #{$small} {
+      .tooltip {
+        &>.nub {
+          border-color: transparent transparent $tooltip-bg transparent;
+          top: -($tooltip-pip-size * 2);
+        }
+        &.tip-top>.nub {
+          border-color: $tooltip-bg transparent transparent transparent;
+          top: auto;
+          bottom: -($tooltip-pip-size * 2);
+        }
+
+        &.tip-left,
+        &.tip-right { float: none !important; }
+
+        &.tip-left>.nub {
+          border-color: transparent transparent transparent $tooltip-bg;
+          right: -($tooltip-pip-size * 2);
+          left: auto;
+          top: 50%;
+          margin-top: -$tooltip-pip-size;
+        }
+        &.tip-right>.nub {
+          border-color: transparent $tooltip-bg transparent transparent;
+          right: auto;
+          left: -($tooltip-pip-size * 2);
+          top: 50%;
+          margin-top: -$tooltip-pip-size;
+        }
+
+      }
+    }
+
+  }
+}

data/lib/fastlane/plugin/polidea/templates/installation-page/sass/foundation/components/_top-bar.scss

@@ -0,0 +1,676 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+@import "grid";
+@import "buttons";
+
+//
+// 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: 45px !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;
+
+// Style the top bar dropdown elements
+$topbar-dropdown-bg: $oil !default;
+$topbar-dropdown-link-color: $white !default;
+$topbar-dropdown-link-bg: $oil !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;
+
+// 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: #272727 !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: $h5-font-size !default;
+$topbar-link-dropdown-padding: 20px;
+$topbar-button-font-size: 0.75rem !default;
+$topbar-button-top: 7px !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;
+
+// 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: $medium-up !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
+
+// 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();
+}
+
+@mixin topbar-show-dropdown {
+  display: block;
+  @include element-invisible-off();
+  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 {
+      width: 100%;
+      #{$default-float}: 0;
+      position: fixed;
+      top: 0;
+      z-index: 99;
+
+      &.expanded:not(.top-bar) {
+          overflow-y: auto;
+          height: auto;
+          width: 100%;
+          max-height: 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;
+        }
+      }
+    }
+
+    .top-bar {
+      overflow: hidden;
+      height: $topbar-height;
+      line-height: $topbar-height;
+      position: relative;
+      background: $topbar-bg;
+      margin-bottom: $topbar-margin-bottom;
+
+      // Topbar Global list Styles
+      ul {
+        margin-bottom: 0;
+        list-style: none;
+      }
+
+      .row { max-width: none; }
+
+      form,
+      input { margin-bottom: 0; }
+
+      input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
+
+      .button, button {
+        padding-top: .35rem + rem-calc(1);
+        padding-bottom: .35rem + rem-calc(1);
+        margin-bottom: 0;
+        font-size: $topbar-button-font-size;
+          // 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 {
+        position: relative;
+        margin: 0;
+      }
+
+      .name {
+        height: $topbar-height;
+        margin: 0;
+        font-size: $rem-base;
+
+        h1 {
+          line-height: $topbar-height;
+          font-size: $topbar-title-font-size;
+          margin: 0;
+          a {
+            font-weight: $topbar-title-weight;
+            color: $topbar-link-color;
+            width: 75%;
+            display: block;
+            padding: 0 $topbar-link-padding;
+          }
+        }
+      }
+
+      // Menu toggle button on small devices
+      .toggle-topbar {
+        position: absolute;
+        #{$opposite-direction}: 0;
+        top: 0;
+
+        a {
+          color: $topbar-link-color;
+          text-transform: $topbar-menu-link-transform;
+          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;
+        }
+
+        // Adding the class "menu-icon" will add the 3-line icon people love and adore.
+        &.menu-icon {
+          top: 50%;
+          margin-top: -16px;
+
+          a {
+            @if $text-direction == rtl {
+              text-indent: -58px;
+            }
+            height: 34px;
+            line-height: 33px;
+            padding: 0 $topbar-link-padding+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 is set the same as $color because the values are changed on line 264
+              // $offcanvas - Set to false of @include in topbar
+              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
+            }
+          }
+        }
+      }
+
+      // Change things up when the top-bar is expanded
+      &.expanded {
+        height: auto;
+        background: transparent;
+
+        .title-area { background: $topbar-bg; }
+
+        .toggle-topbar {
+          a { color: $topbar-menu-link-color-toggled;
+            &::after {
+              // Shh, don't tell, but box-shadows create the menu icon :)
+              box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
+                          0 16px 0 1px $topbar-menu-icon-color-toggled,
+                          0 22px 0 1px $topbar-menu-icon-color-toggled;
+            }
+          }
+        }
+      }
+    }
+
+    // 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 {
+        padding: 0;
+        width: 100%;
+        height: auto;
+        display: block;
+        font-size: $rem-base;
+        margin: 0;
+      }
+
+      .divider,
+      [role="separator"] {
+        border-top: $topbar-divider-border-top;
+        clear: both;
+        height: 1px;
+        width: 100%;
+      }
+
+      ul li {
+        background: $topbar-dropdown-bg;
+        & > a {
+          display: block;
+          width: 100%;
+          color: $topbar-link-color;
+          padding: 12px 0 12px 0;
+          padding-#{$default-float}: $topbar-link-padding;
+          font-family: $topbar-link-font-family;
+          font-size: $topbar-link-font-size;
+          font-weight: $topbar-link-weight;
+          text-transform: $topbar-link-text-transform;
+
+
+          &.button {
+            font-size: $topbar-link-font-size;
+            padding-#{$opposite-direction}: $topbar-link-padding;
+            padding-#{$default-float}: $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 {
+          font-size: $topbar-link-font-size;
+          padding-#{$opposite-direction}: $topbar-link-padding;
+          padding-#{$default-float}: $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); }
+        }
+
+        // Apply the hover link color when it has that class
+        &:hover:not(.has-form) > 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;
+          &: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 {
+        padding: 0;
+        position: absolute;
+        #{$default-float}: 100%;
+        top: 0;
+        z-index: 99;
+        @include topbar-hide-dropdown();
+
+        li {
+          width: 100%;
+          height: auto;
+
+          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;
+            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 {
+          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;
+        }
+      }
+    }
+
+    .js-generated { display: block; }
+
+
+    // Top Bar styles intended for screen sizes above the breakpoint.
+    @media #{$topbar-media-query} {
+      .top-bar {
+        background: $topbar-bg;
+        @include clearfix;
+        overflow: visible;
+
+        .toggle-topbar { display: none; }
+
+        .title-area { float: $default-float; }
+        .name h1 a { width: auto; }
+
+        input,
+        .button,
+        button {
+          font-size: rem-calc(14);
+          position: relative;
+          top: $topbar-button-top;
+        }
+
+        &.expanded { background: $topbar-bg; }
+      }
+
+      .contain-to-grid .top-bar {
+        max-width: $row-width;
+        margin: 0 auto;
+        margin-bottom: $topbar-margin-bottom;
+      }
+
+      .top-bar-section {
+        @include single-transition(none,0,0);
+        #{$default-float}: 0 !important;
+
+        ul {
+          width: auto;
+          height: auto !important;
+          display: inline;
+
+          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) {
+              padding: 0 $topbar-link-padding;
+              line-height: $topbar-height;
+              background: $topbar-link-bg;
+              &: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) {
+              padding: 0 $topbar-link-padding;
+              line-height: $topbar-height;
+              color: $topbar-link-color-active;
+              background: $topbar-link-bg-active;
+              &: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 {
+              &:after {
+                border: none;
+                content: "\00bb";
+                top: 1rem;
+                margin-top: -1px;
+                #{$opposite-direction}: 5px;
+                line-height: 1.2;
+              }
+            }
+          }
+
+        }
+
+        .dropdown {
+          #{$default-float}: 0;
+          top: auto;
+          background: transparent;
+          min-width: 100%;
+
+          li {
+            a {
+              color: $topbar-dropdown-link-color;
+              line-height: $topbar-height;
+              white-space: nowrap;
+              padding: 12px $topbar-link-padding;
+              background: $topbar-dropdown-link-bg;
+            }
+
+            &:not(.has-form):not(.active) {
+              & > a:not(.button) {
+                color: $topbar-dropdown-link-color;
+                background: $topbar-dropdown-link-bg;
+              }
+
+              &:hover > a:not(.button) {
+                color: $topbar-link-color-hover;
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
+              }
+            }
+
+            label {
+              white-space: nowrap;
+              background: $topbar-dropdown-label-bg;
+            }
+
+            // Second Level Dropdowns
+            .dropdown {
+              #{$default-float}: 100%;
+              top: 0;
+            }
+          }
+        }
+
+        & > ul > .divider,
+        & > ul > [role="separator"] {
+          border-bottom: none;
+          border-top: none;
+          border-#{$opposite-direction}: $topbar-divider-border-bottom;
+          clear: none;
+          height: $topbar-height;
+          width: 0;
+        }
+
+        .has-form {
+          background: $topbar-link-bg;
+          padding: 0 $topbar-height / 3;
+          height: $topbar-height;
+        }
+
+        // Position overrides for ul.right and ul.left
+        .right {
+          li .dropdown {
+            #{$default-float}: auto;
+            #{$opposite-direction}: 0;
+
+            li .dropdown { #{$opposite-direction}: 100%; }
+          }
+        }
+        .left {
+          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();
+          }
+        }
+      }
+    }
+  }
+}