forever_style_guide 3.5.0 → 3.6.0

data/app/assets/stylesheets/forever_style_guide/modules/_nav-offcanvas.scss

@@ -1,77 +0,0 @@
-// https://github.com/iamphill/Bootstrap-Offcanvas
-$offcanvas-width:                 270px !default;
-$offcanvas-animation-time:        .15s !default;
-
-@media (max-width: $grid-float-breakpoint-max) {
-  .offcanvas-stop-scrolling {
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .navbar-default {
-    .navbar-offcanvas {
-      background-color: $nav-bg-color;
-    }
-  }
-
-  .navbar-offcanvas {
-    position: fixed;
-    width: 100%;
-    max-width: $offcanvas-width;
-    left: -$offcanvas-width;
-    top: 0;
-    bottom: 0;
-    z-index: $zindex-navbar-fixed + 1; // Make sure offcanvas nav is 'above' fixed header
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    transition: left $offcanvas-animation-time ease-in;
-
-    .nav > li {
-      width: 100%;
-      overflow: hidden;
-    }
-    &.in {
-      box-shadow: 0 0 20px rgba(0, 0, 0, .3);
-    }
-    &.offcanvas-transform {
-      &.in {
-        left: 0;
-      }
-    }
-  }
-}
-
-// Show and hide items relative to custom toggle breakpoint
-.visible-grid-float-breakpoint {
-  @media (min-width: $grid-float-breakpoint) {
-    display: none !important;
-  }
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: block !important;
-  }
-}
-.hidden-grid-float-breakpoint {
-  @media (min-width: $grid-float-breakpoint) {
-    display: block !important;
-  }
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: none !important;
-  }
-}
-.col-grid-float-3 {
-  @media (min-width: $grid-float-breakpoint) {
-    width: 25%;
-    float: left;
-  }
-}
-.col-grid-float-6 {
-  @media (min-width: $grid-float-breakpoint) {
-    width: 50%;
-    float: left;
-  }
-}
-.col-grid-float-push-6 {
-  @media (min-width: $grid-float-breakpoint) {
-    float: right;
-  }
-}

data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss

@@ -1,254 +0,0 @@
-$navigation-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
-$nav-height: 50px;
-$nav-horizontal-spacing: 8px;
-$nav-icon-padding: 4px;
-
-$logo-height-lg: 28px;
-$logo-max-width-lg: 175px;
-$logo-vertical-align-lg: 5px;
-
-$logo-height-sm: 22px;
-$logo-max-width-sm: 138px;
-$logo-vertical-align-sm: 6px;
-
-$logo-height-xs: 26px;
-$logo-max-width-xs: 162px;
-$logo-vertical-align-xs: 6px;
-
-$hover-border-size: 4px;
-$navigation-link-hover-transition: color 0.15s ease-in-out;
-
-$deals-icon-horizontal-position: -3px;
-$deals-icon-vertical-position: -5px;
-
-// animation on hover
-@mixin nav_hover_border() {
-  &::before {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: $hover-border-size;
-    width: 100%;
-    background-color: $color-secondary;
-    content: "";
-    transform: scaleX(0);
-    @include transition(transform 0.15s ease-in-out);
-  }
-
-  &:hover {
-    &::before {
-      transform: scaleX(1);
-    }
-  }
-}
-
-.navigation {
-  position: relative;
-  box-shadow: $navigation-shadow;
-
-  .container-fluid {
-    @media (max-width: $screen-xs-max) {
-      padding-right: $nav-horizontal-spacing;
-      padding-left: $nav-horizontal-spacing;
-    }
-
-    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
-      padding-right: $nav-horizontal-spacing;
-      padding-left: $nav-horizontal-spacing;
-    }
-    > .navbar-header {
-      margin-left: 0;
-    }
-  }
-}
-
-.navbar-logo_image,
-.navbar-logo {
-  display: inline-block;
-  height: $logo-height-lg;
-  margin-top: $logo-vertical-align-lg;
-  max-width: $logo-max-width-lg; // you need to constrain your svg for IE
-
-  @media (max-width: $screen-xs-max) {
-    height: $logo-height-xs;
-    max-width: $logo-max-width-xs;
-    margin-top: $logo-vertical-align-xs;
-  }
-
-  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
-    height: $logo-height-sm;
-    max-width: $logo-max-width-sm;
-    margin-top: $logo-vertical-align-sm;
-  }
-}
-
-// main product nav links
-.navigation-menu-list {
-  height: $nav-height; // TODO - this hsould probably be the $header-height variable, pending further confirmation
-  overflow: hidden; //make sure the navigation inner elements do not overflow their main container.
-
-  .navbar-nav.navbar-text_center > li > a {
-    padding-left: $nav-horizontal-spacing;
-    padding-right: $nav-horizontal-spacing;
-    max-height: $nav-height;
-
-    @media (max-width: $screen-lg-plus) {
-      padding-left: $nav-horizontal-spacing / 2;
-      padding-right: $nav-horizontal-spacing / 2;
-    }
-
-    @media (max-width: $grid-float-breakpoint-max) {
-      padding-top: $padding-small-vertical;
-      padding-bottom: $padding-small-vertical;
-      padding-left: 0;
-      text-transform: uppercase;
-      font-size: $font-size-200;
-    }
-
-    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
-      font-size: $font-size-200;
-    }
-  }
-}
-
-.navbar-text_center {
-  display: inline-block;
-  float: none;
-
-  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
-    margin-right: -10px;
-    margin-left: -10px;
-  }
-
-  @media (max-width: $grid-float-breakpoint-max) {
-    direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
-    width: 100%;
-    padding-bottom: $nav-horizontal-spacing;
-    order: 3; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
-    border-bottom: solid 1px $color-gray-300;
-  }
-}
-
-.navigation-menu-list_item {
-  @media (max-width: $grid-float-breakpoint-max) {
-    text-align: left;
-  }
-
-  @media (max-width: $screen-sm) {
-    min-width: 300px;
-  }
-}
-
-.navigation-menu-list_item-active {
-  a.navigation-items-link {
-    color: $color-secondary;
-
-    &::before {
-      background-color: $color-secondary;
-      transform: scaleX(1);
-    }
-  }
-}
-
-a.navigation-items-link {
-  padding-top: $padding-default-vertical;
-  padding-bottom: $padding-default-vertical;
-  color: $color-gray-600;
-  text-decoration: none;
-
-  @media screen and (min-width: $grid-float-breakpoint) {
-    align-items: center;
-    height: 100%;
-    @include transition($navigation-link-hover-transition);
-    @include nav_hover_border();
-  }
-
-  @media (max-width: $grid-float-breakpoint) {
-    align-items: center;
-    height: 100%;
-  }
-
-  &:hover {
-    color: $color-secondary;
-  }
-}
-
-a.navigation-items-link-deals {
-  position: relative;
-  color: $color-warning;
-
-  &::after {
-    position: relative;
-    top: $deals-icon-vertical-position;
-    right: $deals-icon-horizontal-position;
-    font-family: 'FontAwesome';
-    font-size: $font-size-000;
-    content: "\f005"; // Star
-  }
-
-  @media (max-width: $screen-lg-plus) {
-    &::after {
-      font-size: $font-size-100 - 1;
-    }
-  }
-
-  @media (max-width: $screen-sm) {
-    &::after {
-      content: none;
-    }
-  }
-}
-
-.navbar-nav {
-  @media (max-width: $grid-float-breakpoint-max) {
-    margin: 0; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
-  }
-
-  &.navbar-right {
-    margin-right: 0;
-    max-height: $nav-height;
-    direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
-
-    @media (max-width: $grid-float-breakpoint-max) {
-      float: none !important; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
-    }
-
-    .navbar-right-icons {
-      @media (max-width: $grid-float-breakpoint-max) {
-        float: right;
-      }
-    }
-
-    &.navbar-right-icons-container {
-      @media (max-width: $grid-float-breakpoint-max) {
-        float: right !important;
-        margin: auto;
-      }
-      @media (max-width: $screen-xs-max) {
-        margin: 5px 0 0; // compensating for change in padding on .navbar-nav > li > a
-      }
-    }
-  }
-}
-
-.navbar-right-icons-container,
-.nav > li.navbar-right-icons,
-.navbar-mobile-menu {
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: inline-block;
-    float: right; //aligns mobile menu
-  }
-}
-
-// All-purpose bootstrap override for background-color of links that are not styled as buttons
-.nav > li > a:not(.btn) {
-  &:hover,
-  &:focus {
-    background-color: inherit !important;
-  }
-}
-
-.navbar-nav > li > a, .navbar-nav > li > a.nav-icon-padding {
-  padding-left: $nav-icon-padding;
-  padding-right: $nav-icon-padding;
-}