zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/modules/_clearing.scss

@@ -1,61 +0,0 @@
-//-------------------------
-// Clearing Styles
-//-------------------------
-.clearing-blackout { background: $clearingOldBrowserBg; background: $clearingBg; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999;
-  .clearing-close { display: block; }
-}
-
-.clearing-container { position: relative; z-index: 999; height: 100%; overflow: hidden; }
-
-.visible-img { height: $clearingActiveImgHeight; position: relative;
-  img { position: absolute; left: 50%; top: 50%; margin-left: -50%; max-height: 100%; max-width: 100%; }
-  .clearing-caption { color: $clearingCaptionFontColor;  margin-bottom: 0; text-align: center; position: absolute; bottom: 0; background: $clearingCaptionOldBrowserBg; background: $clearingCaptionBg; width: 100%; padding: 10px 100px; }
-}
-
-.clearing-close { z-index: 999; position: absolute; top: 10px; right: 20px; font-size: 30px; line-height: 1; color: $clearingCloseColor; display: none;
-  &:hover, &:focus { color: #ccc; }
-}
-.clearing-main-left, .clearing-main-right { position: absolute; top: 50%; margin-top: -16px; }
-.clearing-main-left.disabled, .clearing-main-right.disabled { opacity: 0.5; }
-.clearing-main-left:active, .clearing-main-right:active { margin-top: -15px; }
-.clearing-main-left { left: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,right); }
-.clearing-main-right { right: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,left); }
-
-ul[data-clearing].block-grid.three-up > li:nth-child(3n+1) { clear: none; }
-
-ul[data-clearing] li { cursor: pointer; display: block;
-  &.clearing-feature ~ li { display: none; }
-}
-
-.clearing-assembled .clearing-container {
-  .carousel { background: $clearingCarouselOldBrowserBg; background: $clearingCarouselBg; height: $clearingCarouselHeight; margin-top: 5px; }
-  .visible-img { background: $clearingImgOldBrowserBg; background: $clearingImgBg; overflow: hidden; }
-  ul[data-clearing] { z-index: 999; width: 200%; height: 100%; margin-left: 0; position: relative; left: 0;
-    li { display: block; width: $clearingCarouselThumbWidth; height: inherit; padding: 0; float: left; overflow: hidden; background: #222; margin-right: 1px; position: relative;
-      &.fix-height {
-        img { min-height: 100%; height: 100%; max-width: none; }
-      }
-      img { cursor: pointer !important; min-width: 100% !important; }
-      &.visible { border-top: $clearingCarouselThumbActiveBorder; }
-    }
-  }
-}
-
-/* Overrides clear:both; when using block-grid with Clearing. Also overrided .th styling when Clearing is open */
-ul.block-grid[data-clearing] { overflow: visible; }
-.clearing-blackout {
-  ul.block-grid[data-clearing] {
-    @for $i from 1 through $blockGridElements {
-      &.#{convert-number-to-word($i)}-up {
-        &>li {
-          @if $i > 1 { &:nth-child(#{$i}n+1) { clear: none; } }
-        }
-      }
-    }
-  }
-  .th img { border: none; @include box-shadow(0 0 0 0 rgba(#000,0)); @include border-radius(0); }
-    &:hover, &:focus {
-      img { @include box-shadow(0 0 0 0 rgba(0,0,0,0)); }
-    }
-}
-

data/scss/foundation/components/modules/_joyride.scss

@@ -1,33 +0,0 @@
-#joyRideTipContent { display: none; }
-
-/* Default styles for the container */
-.joyride-tip-guide { display: none; position: absolute; background: $tipBgIE8; background: $tipBg; color: $tipFontColor; width: $tipDefaultWidth; z-index: 101; top: 0; left: 0; font-family: inherit; font-weight: normal; @include border-radius($tipBorderRadius); }
-.joyride-content-wrapper { padding: $tipPadding; }
-
-/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
-.joyride-tip-guide {
-  span.joyride-nub { display: block; position: absolute; left: 22px; width: 0; height: 0; border: solid $tipNubSize;
-    &.top { border-color: $tipBgIE8; border-color: $tipBg; border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; top: -($tipNubSize*2); bottom: none; }
-    &.bottom { border-color: $tipBgIE8; border-color: $tipBg !important; border-bottom-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; bottom: -($tipNubSize*2); bottom: none; }
-    &.right { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; top: 22px; bottom: none; left: auto; right: -($tipNubSize*2); }
-    &.left { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; top: 22px; left: -($tipNubSize*2); right: auto; bottom: none; }
-  }
-}
-
-/* Typography */
-.joyride-tip-guide h1,
-.joyride-tip-guide h2,
-.joyride-tip-guide h3,
-.joyride-tip-guide h4,
-.joyride-tip-guide h5,
-.joyride-tip-guide h6 { line-height: 1.25; margin: 0; font-weight: $tipHeaderWeight; color: $tipFontColor }
-.joyride-tip-guide p { margin: 0 0 18px 0; font-size: $tipFontSize; line-height: 1.3; }
-
-.joyride-timer-indicator-wrap { width: $tipTimerWidth; height: $tipTimerHeight; border: $tipTimerBorder; position: absolute; right: 17px; bottom: 16px; }
-.joyride-timer-indicator { display: block; width: 0; height: inherit; background: $tipTimerColor; }
-
-.joyride-close-tip { position: absolute; right: 10px; top: 10px; color: $tipCloseColor !important; text-decoration: none; font-size: $tipCloseSize; font-weight: $tipCloseWeight; line-height: .5 !important;
-  &:hover, &:focus { color: #eee !important; }
-}
-
-.joyride-modal-bg { position: fixed; height: 100%; width: 100%; background: transparent; background: $tipScreenFill; z-index: 100; display: none; top: 0; left: 0; cursor: pointer; }

data/scss/foundation/components/modules/_mqueries.scss

@@ -1,458 +0,0 @@
-  /* Visibility Classes ---------------------- */
-  /*                                           */
-  /* Standard (large) display targeting */
-  .show-for-small,
-  .show-for-medium,
-  .show-for-medium-down,
-  .hide-for-large,
-  .hide-for-large-up,
-  .show-for-xlarge,
-  .show-for-print { display: none !important; }
-
-  .hide-for-small,
-  .hide-for-medium,
-  .hide-for-medium-down,
-  .show-for-large,
-  .show-for-large-up,
-  .hide-for-xlarge,
-  .hide-for-print { display: inherit !important; }
-
-  /* Very large display targeting */
-  @media only screen and (min-width: $screenXlarge) {
-    .hide-for-small,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .hide-for-large,
-    .show-for-large-up,
-    .show-for-xlarge { display: inherit !important; }
-
-    .show-for-small,
-    .show-for-medium,
-    .show-for-medium-down,
-    .show-for-large,
-    .hide-for-large-up,
-    .hide-for-xlarge { display: none !important; }
-  }
-
-  /* Medium display targeting */
-  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
-    .hide-for-small,
-    .show-for-medium,
-    .show-for-medium-down,
-    .hide-for-large,
-    .hide-for-large-up,
-    .hide-for-xlarge { display: inherit !important; }
-
-    .show-for-small,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .show-for-large,
-    .show-for-large-up,
-    .show-for-xlarge { display: none !important; }
-  }
-
-  /* Small display targeting */
-  @media only screen and (max-width: $screenSmall - 1) {
-    .show-for-small,
-    .hide-for-medium,
-    .show-for-medium-down,
-    .hide-for-large,
-    .hide-for-large-up,
-    .hide-for-xlarge { display: inherit !important; }
-
-    .hide-for-small,
-    .show-for-medium,
-    .hide-for-medium-down,
-    .show-for-large,
-    .show-for-large-up,
-    .show-for-xlarge { display: none !important; }
-  }
-
-  /* Orientation targeting */
-  .show-for-landscape,
-  .hide-for-portrait { display: inherit !important; }
-  .hide-for-landscape,
-  .show-for-portrait { display: none !important; }
-
-  @media screen and (orientation: landscape) {
-    .show-for-landscape,
-    .hide-for-portrait { display: inherit !important; }
-    .hide-for-landscape,
-    .show-for-portrait { display: none !important; }
-  }
-
-  @media screen and (orientation: portrait) {
-    .show-for-portrait,
-    .hide-for-landscape { display: inherit !important; }
-    .hide-for-portrait,
-    .show-for-landscape { display: none !important; }
-  }
-
-  /* Touch-enabled device targeting */
-  .show-for-touch { display: none !important; }
-  .hide-for-touch { display: inherit !important; }
-  .touch .show-for-touch { display: inherit !important; }
-  .touch .hide-for-touch { display: none !important; }
-
-  /* Specific overrides for elements that require something other than display: block */
-
-  table.show-for-xlarge,
-  table.show-for-large,
-  table.hide-for-small,
-  table.hide-for-medium { display: table !important; }
-
-  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
-    .touch table.hide-for-xlarge,
-    .touch table.hide-for-large,
-    .touch table.hide-for-small,
-    .touch table.show-for-medium { display: table !important; }
-  }
-
-  @media only screen and (max-width: $screenSmall - 1) {
-    table.hide-for-xlarge,
-    table.hide-for-large,
-    table.hide-for-medium,
-    table.show-for-small { display: table !important; }
-  }
-
-
-  /* 1280 tablet ------------ */
-  @media only screen and (max-device-width: 1280px) {
-
-    /* NavBar --- */
-    /*            */
-    .touch .nav-bar li.has-flyout>a { padding-#{$defaultOpposite}: 36px !important; }
-
-  }
-
-  /* Covering almost all ----- */
-  @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
-    .flex-video { padding-top: 0; }
-  }
-
-  /* Between Medium and Small */
-  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
-
-    /* NavBar --- */
-    /*            */
-    .touch .nav-bar li {
-      a { font-size: ms(0) - 1; }
-      &.has-flyout {
-        &>a.flyout-toggle { padding: ($navBarHeight / 2) !important; }
-        &>a { padding-#{$defaultOpposite}: ($navBarHeight - 4) !important; }
-      }
-    }
-
-    /* Clearing --- */
-    /*              */
-    .clearing-main-right, .clearing-main-left {
-      height: 100%;
-      width: 40px;
-      top: 0;
-      border: none;
-      &:before { position: absolute; top: 50%; }
-    }
-    .clearing-main-left {
-      left: 0;
-      &:before { left: 5px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,right); }
-    }
-    .clearing-main-right {
-      height: 100%;
-      right: 0;
-      &:before { @include cssTriangle($clearingArrowSize,$clearingArrowColor,left); }
-    }
-
-  }
-
-  /* Small Devices ------------ */
-  @media only screen and (max-width: $screenSmall - 1) {
-
-    /* Global Misc --- */
-    /*                 */
-    .left, .right { float: none; }
-    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
-
-    /* The Grid --- */
-    /*              */
-    .row { width: auto; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; }
-    .column, .columns { width: auto !important; float: none;  }
-    .column:last-child, .columns:last-child { float: none; }
-    [class*="column"] + [class*="column"]:last-child { float: none; }
-    .column:before, .columns:before, .column:after, .columns:after { content:""; display:table; }
-    .column:after, .columns:after { clear: both; }
-
-    // Placeholder classes for mobile grid overrides
-    %no-default-margin { margin-#{$defaultFloat}: 0 !important; }
-    %default-auto { #{$defaultFloat}: auto; }
-    %opposite-auto { #{$defaultOpposite}: auto; }
-
-    @for $i from 1 through $totalColumns - 2 {
-      .offset-by-#{convert-number-to-word($i)} { @extend %no-default-margin; }
-    }
-    @for $i from 2 through $totalColumns - 2 {
-      .push-#{convert-number-to-word($i)} { @extend %default-auto; }
-      .pull-#{convert-number-to-word($i)} { @extend %opposite-auto; }
-    }
-
-    /* Mobile 4-column Grid */
-    @for $i from 1 through $mobileTotalColumns {
-      .row {
-        .mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
-          &:last-child { float: $defaultOpposite; }
-          &.end { float: $defaultFloat; }
-        }
-        &.collapse {
-          .mobile-#{convert-number-to-word($i)} { padding: 0; }
-        }
-      }
-    }
-    @for $i from 1 through $mobileTotalColumns - 1 {
-      .push-#{convert-number-to-word($i)}-mobile { #{$defaultFloat}: gridCalc($i, $mobileTotalColumns); }
-      .pull-#{convert-number-to-word($i)}-mobile { #{$defaultOpposite}: gridCalc($i, $mobileTotalColumns); }
-    }
-
-    /* Block Grids --- */
-    /*                 */
-    .block-grid.mobile {
-      &>li { float: none; width: 100%; margin-#{$defaultFloat}: 0; }
-    }
-
-    .block-grid {
-      &>li { clear: none; }
-      @for $i from 1 through $blockGridElements {
-        &.mobile-#{convert-number-to-word($i)}-up>li {
-          width: 100%/$i;
-          @if $i > 1 { &:nth-child(#{$i}n+1) { clear: both; } }
-        }
-      }
-    }
-
-    /* Forms --- */
-    /*           */
-
-    /* Label alignment */
-    label.right { text-align: left; }
-    /* Extend width of all inputs */
-    @for $i from 1 through $totalColumns {
-      input[type="text"].#{convert-number-to-word($i)},
-      input[type="password"].#{convert-number-to-word($i)},
-      input[type="date"].#{convert-number-to-word($i)},
-      input[type="datetime"].#{convert-number-to-word($i)},
-      input[type="email"].#{convert-number-to-word($i)},
-      input[type="number"].#{convert-number-to-word($i)},
-      input[type="search"].#{convert-number-to-word($i)},
-      input[type="tel"].#{convert-number-to-word($i)},
-      input[type="time"].#{convert-number-to-word($i)},
-      input[type="url"].#{convert-number-to-word($i)},
-      textarea.#{convert-number-to-word($i)} {
-        width: 100% !important;
-      }
-    }
-
-    // /* Typography --- */
-    // /*                */
-
-    // Coming Soon
-
-    /* Buttons --- */
-    /*             */
-
-    /* Basic overrides */
-    .button { display: block; }
-    button.button, input[type="submit"].button, input[type="reset"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
-    /* Button Groups */
-    .button-group {
-      button.button, input[type="submit"].button { width: auto; padding: $btnBase ($btnBase * 2) ($btnBase + 1);
-        &.large  { padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
-        &.medium { padding: $btnBase ($btnBase * 2) ($btnBase + 1); }
-        &.small  { padding: ($smallBtnBase) ($smallBtnBase * 2) ($smallBtnBase + 1); }
-        &.tiny   { padding: ($tinyBtnBase) ($tinyBtnBase * 2) ($tinyBtnBase + 1); }
-      }
-      &.even button.button, &.even input[type="submit"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
-    }
-
-    /* Navbar --- */
-    /*            */
-    .nav-bar { height: auto;
-      &>li { float: none; display: block; border-right: none; }
-      &>li>a.main { text-align: $defaultFloat; border-top: 1px solid #ddd; border-#{$defaultOpposite}: none; }
-      &>li:first-child>a.main { border-top: none; }
-      &>li.has-flyout>a.flyout-toggle { position: absolute; #{$defaultOpposite}: 0; top: 0; padding: ($navBarHeight / 2)+2; z-index: 2; display: block; }
-      &>li.has-flyout.is-touch>a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
-      &>li.has-flyout>a.flyout-toggle:hover span { border-top-color: #141414; }
-      &.vertical>li.has-flyout>.flyout { left: 0; }
-    }
-    .flyout { position: relative; width: 100% !important; top: auto; margin-#{$defaultOpposite}: -2px; border-width: 1px 1px 0 1px;
-      &.right { float: none; right: auto; #{$defaultFloat}: -1px; }
-      &.small, &.large { width: 100% !important; }
-      p:last-child { margin-bottom: 18px; }
-    }
-
-    /* Reveal --- */
-    /*            */
-    .reveal-modal-bg { position: absolute; }
-    .reveal-modal,
-    .reveal-modal.small,
-    .reveal-modal.medium,
-    .reveal-modal.large,
-    .reveal-modal.xlarge { width: 80%; top: 15px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -40%; padding: 20px; height: auto; }
-
-    /* Clearing --- */
-    /*              */
-    .clearing-container { margin: 0; }
-    .clearing-close { z-index: 99; font-size: ms(4); top: 0px; right: 5px; }
-    .clearing-caption { position: fixed; bottom: 0; left: 0; padding: 10px !important; line-height: 1.3; }
-    .clearing-main-right, .clearing-main-left { display: none; }
-    .clearing-blackout.clearing-assembled {
-      .visible-img, .clearing-container { height: 100%; }
-      ul[data-clearing] { display: none; }
-    }
-
-    /* Joyride --- */
-    /*             */
-    .joyride-tip-guide { width: 95% !important; left: 2.5% !important; @include border-radius($tipBorderRadius); }
-    .joyride-tip-guide-wrapper { width: 100%; }
-
-    /* Tabs --- */
-    /*          */
-    .tabs.mobile { width: auto; margin: 20px -20px 40px; border-bottom: solid 1px #ccc; height: auto; margin: 20px -15px 0px -15px;
-      dt, li, dd { float: none; height: auto; }
-      dd a, li a { font-size: ms(0) + 1; display: block; width: auto; height: auto; padding: 18px 20px; margin: 0; color: #555; line-height: 1; border: none; border-#{$defaultFloat}: none; border-#{$defaultOpposite}: none; border-top: 1px solid #ccc; background: #fff; }
-      dd a.active, li a.active { border: none; background: $mainColor; color: #fff; margin: 0; position: static; top: 0; height: auto; }
-      dd:first-child a.active, li:first-child a.active { margin: 0; }
-      &+.tabs-content.contained { margin-#{$defaultFloat}:-15px; margin-#{$defaultOpposite}:-15px; }
-      .section-title { padding-#{$defaultFloat}: 20px !important; }
-    }
-
-    .contained.mobile { margin-bottom: 0; }
-    .contained.tabs.mobile dd a, .contained.tabs.mobile li a { padding: 18px 20px; }
-    .tabs.mobile + ul.contained { margin-#{$defaultFloat}: -20px; margin-#{$defaultOpposite}: -20px; border-width: 0 0 1px 0; }
-
-    /* UI Elements --- */
-    /*                 */
-    /* Tooltips */
-    .tooltip {
-      font-size: $tooltipFontSizeScreenSm;
-      line-height: 1.4;
-      padding: 7px 10px 9px 10px;
-      left: 50% !important;
-      max-width: 80% !important;
-      margin-left: -40%;
-      font-size: 110%;
-    }
-    .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub {
-      border-color: transparent transparent $tooltipBackgroundColor transparent;
-      border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBgOpacityScreenSm) transparent;
-      top: -12px;
-      left: 10px;
-    }
-  }
-
-  /* Topbar Specific Breakpoint that you can customize */
-  @media only screen and (max-width: $topBarBreakPoint) {
-
-    .top-bar { margin-bottom: 0; overflow: hidden; height: $topBarHeightMobile; background: $topBarDropBgColor;
-      .js-generated { display: block; }
-
-      /* Override contain to grid stuff for breakpoint */
-      .contain-to-grid & { width: auto; }
-
-      /* Setting up the sliding area */
-      section { left: 0; position: relative; width: auto; @include single-transition(left,300ms,0); }
-      ul { width: 100%; height: 100%; margin-bottom: 0; display: block;
-        &>li { float: none;
-          &.active, &:hover { background: darken($topBarDropBgColor, 5%); }
-          /* Branding and name */
-          &.name { height: $topBarHeightMobile;
-            h1 { line-height: 1;
-              a { color: $topBarLinkColor; display: block; line-height: $topBarHeightMobile !important; padding-left: $topBarHeightMobile / 3; height: $topBarHeightMobile; }
-            }
-          }
-          &:hover, &.active { a { color: $topBarDropLinkColor; } }
-          a:not(.button) { color: $topBarDropLinkColor; }
-
-          /* Dropdown Toggle */
-          &.toggle-topbar { cursor: pointer; display: block; height: $topBarHeightMobile; position: absolute; right: 0; top: 0; width: 50%;
-            a { @include cssTriangle($topBarNavToggleSize, $topBarNavToggleColor, top); padding: 0; position: absolute; top: 50%; right: $topBarHeightMobile / 2; margin-top: -($topBarNavToggleSize / 2); }
-            @if $topBarBreakPoint == 9999px { a { right: ($topBarHeight / 2) + ($columnGutter / 2);} }
-            &:hover { background: inherit; }
-          }
-          &.toggle-topbar a { padding: 0 !important; }
-
-          /* Divider for breakpoint */
-          &.divider { border-bottom: solid 1px lighten($topBarDropBgColor, 10%); border-top: solid 1px darken($topBarDropBgColor, 15%); clear: both; height: 1px !important; margin: 8px 0 !important; width: 100%; }
-
-          /* Search Overrides for breakpoint size */
-          &.search { padding: 0 $topBarHeight / 2;
-            form { width: 100%;
-              input[type=text] { width: 75%; }
-              .button { top: -1px; width: 25%; }
-            }
-          }
-
-          /* Dropdown Level 1 */
-          &.has-dropdown {
-            a { padding-right: $topBarHeight * .75;
-              &:after { @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; }
-            }
-            &:hover >.dropdown { display: block; visibility: hidden; }
-            .dropdown { visibility: hidden; z-index: 0 !important; }
-            &.moved { position: static;
-              &>.dropdown { top: 0; visibility: visible;
-                li {
-                  label { margin-bottom: 6px; padding-top: 6px !important; font-size: ms(0) - 3; }
-                  &:not(.title) { padding-bottom: 0;
-                    a { padding: 8px $topBarHeightMobile / 2; font-size: ms(0); }
-                  }
-                  a, label { padding: 0 $topBarHeight / 2; }
-                  a:hover { background: lighten($topBarBgColor, 10%); display: block; }
-                  &.divider { border-bottom: solid 1px rgba(255,255,255,0.1); margin-top: 8px !important; margin-bottom: 8px !important; }
-                }
-              }
-              .back.title { padding-bottom: 0;
-                a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, right); }
-                h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; position: relative;
-                  a { background: transparent; padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; }
-                }
-              }
-            }
-          }
-
-          /* Dropdown Level 2 */
-          &.has-dropdown .dropdown li { background: transparent;
-            &.has-dropdown {
-              .dropdown { left: 100% !important; top: 0; right: auto !important; }
-              &>a { padding-right: $topBarHeight * .75;
-                &:after { content: ""; margin-right: $topBarHeightMobile / 3; @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
-                li a {
-                  &:hover { background: lighten($topBarBgColor, 10%); }
-                }
-              }
-              &.moved { position: static;
-                .dropdown { top: 0; visibility: visible; }
-              }
-              &:hover { display: block; }
-            }
-          }
-        }
-        &.left, &.right { float: none; width: 100%;
-          &>li { display: block; float: none; margin: 0 !important;
-            &.has-dropdown {
-              .dropdown { left: 100% !important; top: 0; right: auto !important; }
-            }
-          }
-        }
-      }
-      section > ul li a:not(.button) { padding-left: $topBarHeightMobile / 2 !important; }
-
-      /* When the Small Nav is Showing */
-      &.expanded { height: 100%;
-        ul li.toggle-topbar a { @include cssTriangle($topBarNavToggleSize, darken($topBarNavToggleColor, 20%), bottom); top: auto; bottom: 50%; margin-bottom: -($topBarNavToggleSize / 2); }
-      }
-    }
-    .top-bar ul li.has-button { padding: 5px $topBarHeightMobile / 3; }
-    .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; }
-    .top-bar ul > li.has-button {
-      a.button { margin: 0; }
-    }
-  }