forever_style_guide 3.5.0 → 3.6.0

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "3.5.0"
+  VERSION = "3.6.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 3.5.0
+  version: 3.6.0
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-13 00:00:00.000000000 Z
+date: 2019-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -249,13 +249,7 @@ files:
 - app/assets/stylesheets/forever_style_guide/modules/_mars_manifest.scss
 - app/assets/stylesheets/forever_style_guide/modules/_message_box.scss
 - app/assets/stylesheets/forever_style_guide/modules/_modal.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-account_dropdown.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-cart.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-item-list.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-offcanvas.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav.scss
+- app/assets/stylesheets/forever_style_guide/modules/_primary_nav.scss
 - app/assets/stylesheets/forever_style_guide/modules/_progress.scss
 - app/assets/stylesheets/forever_style_guide/modules/_promo_banner.scss
 - app/assets/stylesheets/forever_style_guide/modules/_responsive_utilities.scss

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

@@ -1,197 +0,0 @@
-// desktop authenticated account dropdown styling
-$avatar-size-nav: 35px;
-$avatar-size-offcanvas: 80px;
-$avatar-offcanvas-visual-alignment: -10px;
-
-$user_info-max_width: 100px;
-$user_info-max_width-sm: 70px;
-$user_info-max_width-xs: 50px;
-$user_info-name-max_width: 180px;
-$user_info-icon-vertical_alignment: -2px;
-$user_info-toggle-hover_transition: color 0.15s ease-in-out;
-
-$padding-small-horizontal: 3px;
-
-$cart-with-count-offset: 10px; //offsets .navigation-user_info-cart-with_count when there is a signed in user
-
-$forever-club-badge-size: 50px;
-
-$forever-club-badge-position-top: 48px;
-$forever-club-badge-position-left: 43px;
-
-
-.navigation-user_info {
-  height: 100%;
-  margin-top: 7px;
-}
-
-// Dont show user info close btn when in mobile offcanvas
-.nav-mobile-menu .nav-mobile-menu-close {
-  @media (max-width: $grid-float-breakpoint-max) {
-    order: 1;// .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
-  }
-
-  &.nav-user_info-close {
-    @media (min-width: $grid-float-breakpoint) {
-      display: block;
-    }
-
-    @media (max-width: $grid-float-breakpoint-max) {
-      display: none;
-    }
-
-    .navbar-toggle {
-      @media (min-width: $grid-float-breakpoint) {
-        display: block;
-      }
-    }
-  }
-}
-
-.navigation-user_info-icon {
-  margin-top: $user_info-icon-vertical_alignment;
-  transition: $user_info-toggle-hover_transition;
-}
-
-.navigation-user_info-avatar {
-  margin-right: $padding-default-horizontal / 2;
-  border: none;
-
-  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
-    padding-left: $cart-with-count-offset;
-  }
-
-  .avatar {
-    height: $avatar-size-nav;
-    width: $avatar-size-nav;
-    min-width: $avatar-size-nav;
-  }
-}
-
-// Account Dropdown / Popover
-.navigation-account_dropdown-trigger {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  height: 100%;
-  overflow-y: hidden;
-
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: none;
-  }
-
-  &:hover {
-    .navigation-user_info-user_name,
-    .navigation-user_info-icon {
-      color: $color-secondary;
-    }
-  }
-}
-
-.navigation-account_dropdown {
-  @media (min-width: $grid-float-breakpoint) {
-    @include off-canvas-style;
-  }
-}
-
-.navigation-account_dropdown-avatar {
-  min-width: $avatar-size-offcanvas; // fixes an ie 11 flexbug
-  margin: 0;
-  margin-left: $avatar-offcanvas-visual-alignment;
-  margin-right: $padding-large-horizontal;
-  padding: 0;
-  flex-shrink: 0;
-  position: relative;
-
-  .avatar {
-    width: $avatar-size-offcanvas;
-    height: $avatar-size-offcanvas;
-  }
-}
-
-.navigation-account_dropdown-user {
-  direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior
-  padding-bottom: $padding-large-vertical - 5;
-  border-bottom: 2px solid $color-gray-200;
-}
-
-.navigation-account_dropdown-user_info {
-  display: flex;
-  align-items: center;
-}
-
-.navigation-account_dropdown-user_info-club-image {
-  position: absolute;
-  max-width: $forever-club-badge-size;
-  height: $forever-club-badge-size;
-  top: $forever-club-badge-position-top;
-  left: $forever-club-badge-position-left;
-}
-
-.navigation-account_dropdown-user-club_status {
-  margin-top: 30px;
-  line-height: 1;
-}
-
-.navigation-account_dropdown-user_info-logged_in {
-  text-align: left;
-  flex: 1 1 auto; //ensures consistent display in ie 10
-}
-
-.navigation-account_dropdown-user_info-logged_in-name {
-  display: inline-block;
-  max-width: $user_info-name-max_width;
-  line-height: 1.1; // just a little tighter for multi line names
-  word-wrap: break-word;
-}
-
-.navigation-account_dropdown-storage_bar {
-  height: 10px;
-  border-radius: 50px;
-  background-color: $color-gray-300;
-  margin-top: $padding-xs-vertical;
-  margin-bottom: $padding-small-vertical;
-  width: 100%;
-}
-
-.navigation-account_dropdown-storage_bar-percent_used {
-  border-radius: 50px;
-  height: 100%;
-}
-
-.navigation-account_dropdown-list {
-  padding-top: $padding-small-vertical;
-  padding-bottom: $padding-small-vertical;
-  margin-bottom: 0;
-  text-align: left;
-
-  &:not(:last-of-type) {
-    border-bottom: 2px solid $color-gray-200;
-  }
-}
-
-a.navigation-account_dropdown-list-item {
-  display: block;
-  position: relative;
-  padding-top: $padding-small-vertical;
-  padding-bottom: $padding-small-vertical;
-  margin-left: -$padding-large-horizontal;
-  margin-right: -$padding-large-horizontal;
-  padding-left: $padding-large-horizontal;
-  padding-right: $padding-large-horizontal;
-  color: $color-gray-600;
-  text-decoration: none;
-
-  &:hover {
-    color: $color-secondary;
-  }
-}
-
-.navigation-account_dropdown-list-item-sign_out {
-  color: $color-danger !important;
-}
-
-.navigation-account_dropdown-list-item:not(:last-of-type) {
-  border-bottom: none;
-}

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

@@ -1,59 +0,0 @@
-$icon-to-text-alignment: -3px;
-$icon-to-text-alignment-alt: -2px;
-$cart-count-horizontal-position: -3px;
-$cart-count-horizontal-position-alt: -10px;
-$cart-count-vertical-position: -8px;
-$cart-count-size: 21px;
-$icon-size-break_to_md: 21px;
-
-//style the cart and help icon the same + override bootstrap
-.navbar-nav > li > a {
-  &.navigation-user_info-icon {
-    float: left; // ensures proper cart with count display in IE
-    margin-top: $icon-to-text-alignment;
-    background-color: inherit;
-    @include transition($navigation-link-hover-transition);
-
-    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
-      padding-right: 2px;
-      padding-left: 2px;
-      margin-top: $icon-to-text-alignment-alt;
-      font-size: $icon-size-break_to_md;
-    }
-
-    &:hover .fa {
-      color: $color-secondary;
-      @include transition($navigation-link-hover-transition);
-    }
-
-    &.navigation-user_info-cart-with_count {
-      @media (max-width: $grid-float-breakpoint-max) {
-        padding-right: 0;
-      }
-    }
-  }
-  &.navigation-user_info-cart {
-    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
-      margin-right: $cart-count-horizontal-position;
-    }
-  }
-  &.navigation-user_info-cart-with_count {
-    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
-      margin-right: $cart-count-horizontal-position-alt;
-    }
-  }
-}
-
-
-
-.navigation-user_info-cart-count {
-  display: block;
-  float: right;
-  text-align: center;
-  margin-top: $cart-count-vertical-position;
-  margin-left: $cart-count-horizontal-position;
-  padding-top: 1px; // shim for alignment
-  width: $cart-count-size;
-  height: $cart-count-size;
-  border-radius: 50%;
-}

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

@@ -1,11 +0,0 @@
-#header-is_fixed {
-  display: block;
-  width: 100%;
-  top: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-
-  &:not(.affix) {
-    position: static; // respect the z-index of all the nav stuff + don't break small heroes like on the /find_ambassador page
-  }
-}

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

@@ -1,53 +0,0 @@
-// 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-mobile-menu.scss

@@ -1,143 +0,0 @@
-$nav-icon_bar-width: 22px;
-$close-icon-offset: -5px;
-$mobile-menu-close-btn-height: 40px;
-$sign-up-btn-height: 30px;
-$sign-up-btn-top-margin: 10px;
-$sign-up-btn-top-padding: 8px;
-
-.nav-mobile-menu {
-  @media (max-width: $grid-float-breakpoint-max) {
-    @include off-canvas-style;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.navbar-user_info {
-  @media (max-width: $grid-float-breakpoint-max) {
-    max-height: none !important; // important overrides navbar bootstrap stuff
-    order: 2; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
-
-    &.navbar-user_info-logged_out {
-      order: 4;
-    }
-  }
-}
-
-.nav-mobile-menu-close {
-  height: $mobile-menu-close-btn-height;
-
-  @media (min-width: $grid-float-breakpoint) {
-    display: none;
-  }
-
-  .navbar-toggle {
-    margin-right: 0;
-  }
-}
-
-.navbar-header {
-  @media (max-width: $grid-float-breakpoint-max) {
-    float: none;
-  }
-}
-
-.navbar-toggle {
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: block;
-  }
-  @media (max-width: $screen-md) {
-    margin-right: -10px; // equalize padding between right-side icons
-  }
-
-  @media (max-width: $screen-xs-max) {
-    margin-right: -12px;
-    margin-left: -4px;
-  }
-
-  &:hover {
-    .icon-bar {
-      background-color: $color-secondary;
-    }
-  }
-
-  // begin Hamburger
-  .icon-bar {
-    background-color: $color-gray-600;
-    transition: all 0.2s;
-    width: $nav-icon_bar-width;
-  }
-
-  .icon-bar-back_slash {
-    margin-bottom: $close-icon-offset;
-    transform: rotate(-45deg);
-  }
-
-  .icon-bar-forward_slash {
-    transform: rotate(45deg);
-  }
-}
-
-// Log In & Sign Up Buttons
-.navbar-nav > li {
-  @media (max-width: $grid-float-breakpoint-max) {
-    float: none;
-  }
-
-  &.nav-mobile-menu-btns {
-    @media (max-width: $grid-float-breakpoint-max) {
-      padding-right: 20px;
-      padding-top: 10px;
-    }
-
-    &.nav-mobile-menu-signup {
-      @media (min-width: $grid-float-breakpoint) {
-        float: right!important; //put sign up out to right on desktop
-      }
-    }
-
-    //customize both buttons to account for overall nav spacing
-    a.btn {
-      @media (min-width: $grid-float-breakpoint) {
-        margin-top: 3px;
-        padding-left: 7px;
-        padding-right: 7px;
-        font-size: $font-size-100;
-        line-height: 1;
-      }
-
-      @media (max-width: $grid-float-breakpoint-max) {
-        display: block;
-        padding-top: 10px;
-      }
-    }
-
-    .btn.btn-login {
-      @media (min-width: $grid-float-breakpoint) {
-        color: $color-gray-600;
-        background-color: transparent;
-        border-color: white;
-        box-shadow: none;
-
-        &:hover,
-        &:focus,
-        &:active,
-        &:active:focus {
-          color: $color-secondary;
-        }
-      }
-    }
-
-    .btn.btn-signup {
-      @media (min-width: $grid-float-breakpoint) {
-        height: $sign-up-btn-height;
-        margin-top: $sign-up-btn-top-margin;
-        padding-top: $sign-up-btn-top-padding;
-      }
-      &:focus {
-        background-color: color('primary-dark');
-        border-color: color('primary-dark');
-      }
-    }
-  }
-}