forever_style_guide 2.0.3 → 3.0.0

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

@@ -0,0 +1,155 @@
+$dropdown-height: 373px; // Allows for entire hero_simple text to display from $screen-md and up
+$nav-icon-width: 60px;
+
+@mixin dropdown-content-style {
+  display: block;
+  color: color('gray-300');
+  font-family: $font-face-light;
+  font-size: $font-size-large;
+}
+
+@mixin mobile-active-dropdown-bg($color) {
+  color: color('white');
+  background-color: $color;
+  border-top-color: $color;
+}
+
+// Behavior
+.nav .dropdown.open {
+  & > .dropdown-menu-nav {
+    opacity: 1;
+    visibility: visible;
+    @include transition(opacity 0.2s ease-in-out);
+
+    @media (min-width: $grid-float-breakpoint) {
+      height: $dropdown-height;
+    }
+  }
+  &.dropdown-full_width {
+    position: static;
+
+    .dropdown-menu-nav {
+      right: 0;
+      left: 0;
+    }
+  }
+  .dropdown-menu-nav {
+    @media (max-width: $grid-float-breakpoint) {
+      padding-bottom: 20px;
+    }
+  }
+}
+
+// Override bootstrap default to show dropdowns at custom breakpoint
+@media (max-width: $grid-float-breakpoint) {
+  .navbar-nav .open .dropdown-menu {
+    position: static;
+  }
+}
+
+// Styles
+.navbar .dropdown.open > .dropdown-toggle {
+  color: color('gray-400');
+  background-color: $nav-bg-color;
+
+  @media (max-width: $grid-float-breakpoint) {
+    &.dropdown-toggle-my_forever {
+      @include mobile-active-dropdown-bg($color-primary);
+    }
+    &.dropdown-toggle-products {
+      @include mobile-active-dropdown-bg($color-secondary);
+    }
+    &.dropdown-toggle-community {
+      @include mobile-active-dropdown-bg($color-accent);
+    }
+    &.dropdown-toggle-account {
+      @include mobile-active-dropdown-bg($color-forever_services);
+    }
+    &.dropdown-toggle-ambassador {
+      @include mobile-active-dropdown-bg($color-forever_ambassador);
+    }
+  }
+}
+
+.dropdown-menu-nav {
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  border: none;
+  border-radius: 0;
+  @extend %card-shadow;
+
+  @media (max-width: $grid-float-breakpoint) {
+    padding-left: 5px;
+  }
+
+  .dropdown-menu-nav-container {
+    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-min) {
+      width: $grid-float-breakpoint;
+    }
+  }
+}
+
+.dropdown-menu-nav-extra_column {
+  @media (max-width: $grid-float-breakpoint) {
+    margin-top: -10px; // compensate for l-padded-thin
+    padding-top: 0;
+  }
+}
+
+a.dropdown-menu-nav-link {
+  @include dropdown-content-style;
+
+  &:not(.dropdown-menu-nav-link-no_margin) {
+    margin-top: 10px;
+
+    @media (min-width: $screen-md-min) {
+      margin-top: 15px;
+    }
+  }
+  .fa {
+    margin-right: 10px;
+  }
+  span {
+    font-family: inherit; // persist font-style for conditionally hidden or shown text (span class="hidden-md")
+  }
+}
+.dropdown-menu-account-item {
+  .dropdown-menu-nav-link {
+    @media (max-width: $grid-float-breakpoint) {
+      margin-top: $padding-small-vertical;
+    }
+  }
+}
+
+.dropdown-menu-nav-link-subhead {
+  display: block;
+  margin-top: -5px;
+  color: $color-gray-500;
+  font-size: $font-size-200;
+}
+.dropdown-menu-nav-bullets {
+  @media (max-width: $grid-float-breakpoint) {
+    margin-left: 10px;
+  }
+  a.dropdown-menu-nav-link {
+    font-size: $font-size-200 !important;
+  }
+}
+.dropdown-menu-nav-description {
+  @include dropdown-content-style;
+
+  @media (max-width: $grid-float-breakpoint) {
+    font-size: $font-size-300;
+  }
+}
+.dropdown-menu-nav-title {
+  margin-top: 10px;
+
+  @media (min-width: $screen-md-min) {
+    margin-top: 15px;
+  }
+  @media (max-width: $grid-float-breakpoint) {
+    font-size: $font-size-400;
+  }
+}

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

@@ -5,19 +5,4 @@
   top: 0;
   left: 0;
   z-index: $zindex-navbar-fixed;
-
-  &.is_scrolling {
-    @media (max-width: $screen-md-min) {
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch; // smooth scrolling in mobile Safari
-    }
-  }
-  .navbar {
-    margin-bottom: 0;
-  }
-}
-.body-fixed {
-  @media (max-width: $screen-md-min) {
-    position: fixed;
-  }
 }

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

@@ -0,0 +1,114 @@
+$nav-icon-width: 60px;
+$nav-icon-margin: 3px;
+
+@mixin chevron-style {
+  position: absolute;
+  right: 15px;
+  font-size: $font-size-default;
+}
+
+.nav-icon-stack {
+  width: $nav-icon-width;
+  padding: 7px 4px 4px 4px !important; // overriding .navbar-nav > li > a
+  text-align: center;
+
+  .fa {
+    display: block;
+    position: relative;
+    top: $nav-icon-margin;
+  }
+}
+.nav-icon-label {
+  font-size: $font-size-100;
+  line-height: $font-size-400;
+}
+
+// Style offcanvas account icons consistent w/ product dropdowns
+@media (max-width: $grid-float-breakpoint) {
+  .navbar-account_item .nav-icon-stack {
+    width: auto;
+    padding: 15px !important; // override .navbar .nav.navbar-nav > li > a
+    text-align: left;
+
+    .fa-chevron-down {
+      top: 15px;
+    }
+    .fa-chevron-right {
+      top: 15px;
+      @include chevron-style;
+    }
+    .nav-icon-label {
+      font-size: $font-size-500;
+    }
+  }
+}
+
+.navbar-default .navbar-nav {
+  .dropdown-toggle .fa-chevron-down {
+    margin-left: $nav-icon-margin;
+    font-size: 9px;
+    @include transition(transform 0.2s ease-in-out);
+
+    @media(max-width: $grid-float-breakpoint) {
+      @include chevron-style;
+    }
+  }
+  .dropdown.open .dropdown-toggle .fa-chevron-down {
+    @include transform(rotate(180deg));
+  }
+}
+
+// Mobile Toggles
+.navbar-default .navbar-toggle,
+a.cart-icon {
+  height: $header_height;
+  width: $header_height;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  color: color('gray-600');
+  font-size: $font-size-default;
+  border: 0;
+  border-radius: 0;
+  z-index: $zindex-navbar-fixed; // make sure toggles appear above logo
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  &.nav-icon-stack {
+    padding: 0 !important; // overriding .navbar-nav > li > a
+  }
+  &.pull-left {
+    @include nav-border(right);
+  }
+  &.navbar-toggle-close {
+    width: 100%;
+    padding: 0;
+    @include nav-border(bottom);
+
+    &:hover {
+      background-color: color('white');
+      cursor: pointer;
+    }
+    .nav-icon-stack {
+      height: $header_height;
+    }
+  }
+  .fa-shopping-cart {
+    padding-top: 5px;
+  }
+}
+a.cart-icon {
+  @media (max-width: $grid-float-breakpoint) {
+    position: absolute;
+    right: 0;
+    @include nav-border(left);
+  }
+}
+.navbar-toggle-close-left {
+  @include nav-border(right);
+}

data/app/assets/stylesheets/forever_style_guide/modules/_nav-item-list.scss

@@ -0,0 +1,53 @@
+// Styling for Vertical Nav lists
+$header_active_border_height: 2px;
+
+.nav {
+  &.nav-pills {
+    @extend %card-style;
+  }
+
+  .nav-item {
+    @include clearfix;
+    font-family: $font-face-regular;
+    font-size: $font-size-300;
+
+    .nav-item-list {
+      border: 0;
+      height: $header_height;
+      color: color('gray-500');
+    }
+    .nav-item-list {
+      @include border_highlight("left", transparent);
+    }
+
+    // For styleguide primary nav icon + text style
+    .nav-item-icon {
+      font-size: $font-size-400;
+      line-height: 20px;
+      vertical-align: bottom;
+    }
+    .nav-item-label {
+      line-height: 20px;
+    }
+
+    &:hover, &:focus {
+      .nav-item-list {
+        color: color('secondary');
+        background-color: color('gray-100');
+      }
+      .nav-item-list {
+        @include border_highlight("left");
+      }
+    }
+
+    @at-root #{&}.active {
+      .nav-item-list {
+        color: color('gray-600');
+        background-color: color('gray-100');
+        border-top: 1px solid color('gray-300');
+        border-bottom: 1px solid color('gray-300');
+        @include border_highlight("left", color("primary"));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+// https://github.com/iamphill/Bootstrap-Offcanvas
+$offcanvas-width:                 270px !default;
+$offcanvas-animation-time:        .15s !default;
+$offcanvas-media:                 $grid-float-breakpoint!default;
+
+@media (max-width: $offcanvas-media) {
+  .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;
+    z-index: $zindex-navbar-fixed + 1; // Make sure offcanvas nav is 'above' fixed header
+    overflow: scroll;
+    -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) {
+    display: block !important;
+  }
+}
+.hidden-grid-float-breakpoint {
+  @media (min-width: $grid-float-breakpoint) {
+    display: block !important;
+  }
+  @media (max-width: $grid-float-breakpoint) {
+    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,96 +1,107 @@
-/* nav
----------------------------------------------------------------------------- */
-
-$color-nav-bg:  color('white');
-$color-nav-active: color('gray-100');
-$color-nav-hover: color('secondary');
 $header_height: 50px;
-$header_active_border_height: 2px;
+$offcanvas-width: 270px;
+$offcanvas-padding: 15px;
+$nav-bg-color: color('gray-700');
 
-.nav {
-  &.nav-pills {
-    @extend %card-style;
+@mixin nav-border($sides...) {
+  @each $side in $sides {
+    border-#{$side}: 1px solid color('gray-400');
   }
+}
 
-  .nav-item {
-    @include clearfix;
-    font-family: $font-face-regular;
-    font-size: $font-size-300;
-
-    .nav-item-tab,
-    .nav-item-list {
-      border: 0;
-      height: $header_height;
-      color: color('gray-500');
-    }
-    .nav-item-tab {
-      @include border_highlight("bottom", transparent);
+// Basic styles - A lot of overriding Bootstrap defaults
+.navbar-toggle {
+  @media (max-width: $grid-float-breakpoint) {
+    display: block;
+  }
+}
+.navbar-brand {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  margin: auto;
+  padding: $padding-small-vertical 0 0;
+  text-align: center;
+}
+.navbar {
+  border-radius: 0;
+  border: none;
+  @extend %card-shadow;
 
-      @media(max-width: $grid-float-breakpoint) {
-        @include border_highlight("left", transparent);
-      }
-    }
-    .nav-item-list {
-      @include border_highlight("left", transparent);
-    }
+  .nav.navbar-nav {
+    margin-top: 0;
+    margin-bottom: 0;
 
-    .nav-item-icon {
-      font-size: $font-size-400;
-      line-height: 20px;
-      vertical-align: bottom;
+    @media (max-width: $grid-float-breakpoint) {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .nav-item-label {
-      line-height: 20px;
-    }
+    > li > a {
+      height: $header_height;
+      color: color('gray-400');
+      font-size: $font-size-500;
 
-    &:hover, &:focus {
-      .nav-item-tab,
-      .nav-item-list {
-        color: $color-nav-hover;
-        background-color: $color-nav-active;
+      @media (max-width: $grid-float-breakpoint) {
+        padding-top: $offcanvas-padding;
+        @include nav-border(top);
+        border-color: color('gray-600')
       }
-      .nav-item-tab {
-        @include border_highlight("bottom");
 
-        @media(max-width: $grid-float-breakpoint) {
-          @include border_highlight("left");
-        }
+      @media (min-width: $grid-float-breakpoint) {
+        color: color('gray-600');
+        font-size: $font-size-default;
+        @include transition(all 0.2s ease-in-out);
       }
-      .nav-item-list {
-        @include border_highlight("left");
+      &:hover {
+        @media (min-width: $grid-float-breakpoint) {
+          background-color: color('gray-300');
+        }
       }
     }
+    .dropdown.open > .dropdown-toggle {
+      color: color('white');
 
-    @at-root #{&}.active {
-      .nav-item-tab {
-        height: $header_height;
-        color: color('gray-600');
-        background-color: $color-nav-active;
-        @include border_highlight("bottom", color("primary"));
-        border-right: 1px solid color('gray-300');
-        border-left: 1px solid color('gray-300');
+      @media (min-width: $grid-float-breakpoint) {
+        color: color('gray-400');
+        background-color: $nav-bg-color;
+      }
+    }
+    > .active > a {
+      background-color: transparent;
 
+      &:hover,
+      &:focus {
         @media (max-width: $grid-float-breakpoint) {
-          @include border_highlight("left", color("primary"));
-          border-right: 1px solid color('gray-300');
-          border-bottom: 1px solid color('gray-300');
+          color: color('gray-400');
         }
       }
+    }
+    &.navbar-right {
+      margin-right: 0;
+    }
+  }
+}
 
-      .nav-item-list {
-        color: color('gray-600');
-        background-color: $color-nav-active;
-        @include border_highlight("left", color("primary"));
-        border-top: 1px solid color('gray-300');
-        border-bottom: 1px solid color('gray-300');
-      }
+.navbar-account_item {
+  @media (min-width: $grid-float-breakpoint) {
+    @include nav-border(left);
+  }
+}
 
-      // neutralize hover on active nav selection
-      &:hover .nav-item-tab, .nav-item-list {
-        color: color('gray-600');
-        background-color: $color-nav-active;
-      }
-    }
+.navbar-account-signed_out_btn {
+  position: absolute;
+  width: $offcanvas-width - ($offcanvas-padding * 2) - 5; // 5 = .dropdown-menu-nav padding-left
+  left: $offcanvas-padding + 5;
+  margin-top: $offcanvas-padding;
+  margin-bottom: $offcanvas-padding;
+
+  &.is_fixed_bottom {
+    bottom: 10px;
+    margin-bottom: 0;
+  }
+  .btn-action-icon {
+    margin-top: 2px;
   }
 }