forever_style_guide 3.2.18 → 3.3

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

@@ -1,149 +1,297 @@
-$offcanvas-width: 270px;
-$offcanvas-padding: 10px;
-$nav-bg-color: color('gray-700');
+$navigation-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+$nav-height: 50px;
 
-$nav-li-a-padding-base: 4px;
-$nav-li-a-padding-right-desktop: 20px;
-$nav-li-a-padding-right-md_to_lg: 14px;
-$nav-li-a-padding-right-lg: 16px;
+$lg-logo-vertical-align: 5px;
+$sm-logo-vertical-align: 8px;
+$logo-height-large: 28px;
+$logo-height-small: 18px;
 
-@mixin nav-border($sides...) {
-  @each $side in $sides {
-    border-#{$side}: 1px solid color('gray-400');
+$nav-horizontal-spacing: 10px;
+$nav-horizontal-spacing-small: 3px;
+
+$hover-border-size: 4px;
+$navigation-link-hover-transition: color 0.15s ease-in-out;
+
+$letter-spacing-xlarge: 0.6px;
+$letter-spacing-large: 0.5px;
+$letter-spacing-medium: 0;
+$font-size-150: 13px;
+
+$deals-icon-horizontal-position: -3px;
+$deals-icon-vertical-position: -5px;
+
+// animation on hover
+@mixin nav_hover_border($orientation) {
+  &::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    @if $orientation == horizontal {
+      height: $hover-border-size;
+      width: 100%;
+    } @else if $orientation == vertical {
+      height: 100%;
+      width: $hover-border-size;
+    }
+
+    background-color: $color-secondary;
+    content: "";
+    transform: scaleX(0);
+    @include transition(transform 0.15s ease-in-out);
+  }
+
+  &:hover {
+    &::before {
+      transform: scaleX(1);
+    }
   }
 }
 
-// Basic styles - A lot of overriding Bootstrap defaults
-.navbar-toggle {
-  @media (max-width: $grid-float-breakpoint-max) {
-    display: block;
+.navigation {
+  box-shadow: $navigation-shadow;
+
+  .container-fluid > .navbar-header {
+    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
+      margin-right: -10px;
+      margin-left: -10px;
+    }
   }
 }
-.navbar-brand {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  top: 0;
-  margin: auto;
-  padding: $padding-xs-vertical 0 0;
-  height: $header-height;
-  text-align: center;
 
-  .navbar-brand-logo-xs {
-    display: none;
+.navbar-logo_image,
+.navbar-logo {
+  height: $logo-height-large;
+  margin-top: $lg-logo-vertical-align;
+
+  @media (max-width: $screen-md_to_lg-plus) {
+    height: $logo-height-small;
+    margin-top: $sm-logo-vertical-align;
+  }
+  @media (max-width: $grid-float-breakpoint) {
+    display: inline-block;
+    height: $logo-height-large;
+    margin-top: $lg-logo-vertical-align;
+  }
+  @media (max-width: $screen-sm) {
+    margin-left: $nav-horizontal-spacing;
   }
+}
 
-  @media (max-width: $minimum-application-width-xs-max) {
-    padding-top: 0;
-    padding-right: $header-height;
-    padding-left: $header-height;
+// main product nav links
+.navigation-menu-list {
+  height: $nav-height; // TODO - this hsould probably be the $header-height variable, pending further confirmation
 
-    .navbar-brand-logo-xs {
-      display: block;
-      height: 100%;
+  .navbar-nav.navbar-text_center > li > a {
+    letter-spacing: $letter-spacing-xlarge;
+    padding-left: $nav-horizontal-spacing;
+    padding-right: $nav-horizontal-spacing;
+    max-height: $nav-height;
+
+    @media (max-width: $screen-lg-plus) {
+      padding-left: 4px;
+      padding-right: 4px;
+      letter-spacing: $letter-spacing-medium;
     }
-    .navbar-brand-logo {
-      display: none;
+
+    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
+      font-size: $font-size-150;
     }
   }
 }
-.navbar {
-  min-height: $header-height;
-  border-radius: 0;
-  border: none;
-  @extend %card-shadow;
 
-  .nav.navbar-nav {
-    margin-top: 0;
-    margin-bottom: 0;
+.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) {
-      margin-left: 0;
-      margin-right: 0;
+  @media (max-width: $grid-float-breakpoint) {
+    width: 100%;
+    padding-left: $nav-horizontal-spacing * 2;
+    padding-bottom: $nav-horizontal-spacing;
+    border-bottom: solid 1px $color-gray-300;
+  }
+
+  @media (max-width: $screen-sm) {
+    padding-left: $nav-horizontal-spacing;
+  }
+}
+
+.navigation-menu-list_item-active {
+  a.navigation-items-link {
+    color: $color-secondary;
+
+    &::before {
+      background-color: $color-secondary;
+      transform: scaleX(1);
     }
+  }
+}
 
-    > li > a {
-      height: $header-height;
-      padding: $offcanvas-padding; /* bootstrap override */
-      color: color('gray-400');
-      font-size: $font-size-100;
-      font-weight: $font-weight-bold;
-      font-family: $font-face-gotham;
-      text-transform: uppercase;
-
-      @media (max-width: $grid-float-breakpoint-max) {
-        padding-top: $offcanvas-padding;
-        font-size: $font-size-large;
-        @include nav-border(top);
-        border-color: color('gray-600')
-      }
-      @media (min-width: $grid-float-breakpoint-max) {
-        position: relative;
-        color: color('gray-600');
-      }
-      @media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-md_to_lg) {
-        padding-left: $nav-li-a-padding-base;
-        padding-right: $nav-li-a-padding-base;
-      }
-      @media (min-width: $screen-md_to_lg) and (max-width: $screen-lg-min) {
-        padding-left: $nav-li-a-padding-base * 2;
-        padding-right: $nav-li-a-padding-base * 2;
-      }
-      &:hover {
-        @media (min-width: $grid-float-breakpoint-max) {
-          background-color: color('gray-300');
-        }
-      }
-      &.dropdown-toggle {
-        @media (min-width: $grid-float-breakpoint) {
-          padding-right: $nav-li-a-padding-right-desktop;
-        }
-        @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg) {
-          padding-left: $nav-li-a-padding-base;
-          padding-right: $nav-li-a-padding-right-md_to_lg;
-        }
-        @media (min-width: $screen-md_to_lg) and (max-width: $screen-lg) {
-          padding-left: $nav-li-a-padding-base + 2;
-          padding-right: $nav-li-a-padding-right-lg;
-        }
-      }
+a.navigation-items-link {
+  padding-top: $padding-default-vertical;
+  padding-bottom: $padding-default-vertical;
+  color: $color-gray-600;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  @media screen and (min-width: $screen-sm) {
+    align-items: center;
+    height: 100%;
+    @include transition($navigation-link-hover-transition);
+    @include nav_hover_border(horizontal)
+  }
+
+  @media screen and (min-width: $screen-lg) {
+    font-size: $font-size-200;
+  }
+
+  @media (max-width: $grid-float-breakpoint) {
+    align-items: center;
+    height: 100%;
+    @include transition($navigation-link-hover-transition);
+    @include nav_hover_border(vertical)
+
+    &:before {
+      left: -21px;
     }
-    .dropdown.open > .dropdown-toggle {
-      color: color('white');
+  }
 
-      @media (min-width: $grid-float-breakpoint) {
-        color: color('gray-400');
-        background-color: $nav-bg-color;
-      }
+  &: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;
     }
-    > .active > a {
-      background-color: transparent;
-
-      &:hover,
-      &:focus {
-        @media (max-width: $grid-float-breakpoint-max) {
-          color: color('gray-400');
-        }
-      }
+  }
+
+  @media (max-width: $screen-sm) {
+    &::after {
+      content: none;
     }
-    &.navbar-right {
-      margin-right: 0;
+  }
+}
+
+.navbar-nav {
+  &.navbar-right {
+    max-height: $nav-height;
+
+    &.navbar-right-icons-container {
+      @media (max-width: $grid-float-breakpoint) {
+        float: right !important;
+        margin: auto;
+      }
+      @media (max-width: $screen-sm) {
+        margin: 3.5px 0;
+      }
     }
   }
 }
 
-.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;
+.nav > li > a.navigation-user_info-logged_out-log_in_link {
+  text-transform: uppercase;
+  color: $color-gray-600;
+  text-decoration: none;
+  @include transition(color 0.15s ease-in-out);
+
+  &:hover {
+    color: $color-secondary;
+    text-decoration: none;
+  }
+
+  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
+    padding-left: 5px;
+    padding-right: 8px; // visual alignment
+    font-size: $font-size-100;
+  }
+
+  @media screen and (min-width: $screen-md) {
+    margin-left: $nav-horizontal-spacing-small;
+    letter-spacing: $letter-spacing-large;
+  }
+
+  @media screen and (min-width: $screen-lg) {
+    font-size: $font-size-200;
+    letter-spacing: 0;
+    margin-left: 0;
+  }
+}
+
+.nav-sign_in-sign_up {
+  @media (max-width: $screen-xs) {
+    float: left !important;
+  }
+}
+
+.navigation-menu-list_item {
+  @media (max-width: $grid-float-breakpoint) {
+    text-align: left;
+  }
+
+  @media (max-width: $screen-sm) {
+    min-width: 300px;
+    margin-left: $nav-horizontal-spacing;
+  }
+}
 
-  &.is_fixed_bottom {
-    bottom: 10px;
-    margin-bottom: 0;
+.navbar-right-icons-container,
+.nav > li.navbar-right-icons,
+.navbar-mobile-menu {
+  @media (max-width: $grid-float-breakpoint) {
+    display: inline-block;
+    float: right; //aligns mobile menu
   }
-  .btn-action-icon {
-    margin-top: 2px;
+}
+
+.navbar-nav > li.navigation-user_info-logged_out.navigation-log_in {
+  padding-top: 0;
+} 
+
+.navigation-user_info-logged_out-container {
+  @media (max-width: $grid-float-breakpoint) {
+    display: block;
+  }
+}
+
+li.navbar-user_info-logged_out {
+  float: right;
+
+  @media (max-width: $grid-float-breakpoint) {
+    display: none;
+  }
+}
+
+.btn.btn-sm.navbar-sign_up_btn {
+  margin-top: 7px; // vertical align custom sized button
+  margin-right: $padding-default-vertical;
+  font-size: $font-size-200;
+}
+
+
+// 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;
   }
 }

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

@@ -51,3 +51,19 @@
     float: left !important;
   }
 }
+
+
+// Utilities for new nav w/ custom breakpoint
+.visible-mobile {
+  display: none !important;
+
+  @media (max-width: $grid-float-breakpoint) {
+    display: inline-block !important;
+  }
+}
+
+.hidden-mobile {
+  @media (max-width: $grid-float-breakpoint) {
+    display: none !important;
+  }
+}

data/app/helpers/forever_style_guide/application_helper.rb

@@ -70,34 +70,8 @@ module ForeverStyleGuide
     end
 
     #active state nav
-    def is_active?
-      return true if @pages.any?{ |matches| [controller.controller_name, controller.action_name].include? matches }
-    end
-
-    def is_in_product_dropdown?
-      @pages = [
-        'guaranteed_storage', 'add_storage', 'services', 'historian', 'downloads',
-        'artisan', 'digital_art', 'digital_art_library', 'forever_print_library' 'p2p',
-        'forever_print', 'print', 'prints', 'print_quality',
-        'gifts', 'shipping', 'bulk_orders', 'returns',
-        'products'
-      ]
-      is_active?
-    end
-
-    def is_in_my_forever_dropdown?
-      @pages = ['guarantee', 'about', 'team', 'beliefs']
-      is_active?
-    end
-
-    def is_in_community_dropdown?
-      @pages = ['opportunity', 'find_ambassadors', 'commitments', 'retreats']
-      is_active?
-    end
-
-    def is_in_deals_dropdown?
-      @pages = ['promotions', 'deals']
-      is_active?
+    def is_active?(page_name, product_types = nil)
+      controller.controller_name.include?(page_name) || controller.action_name.include?(page_name) || (@product != nil && product_types !=nil && product_types.split(',').include?(@product.product_type) && !@product.name.include?('Historian'))
     end
 
     #User storage methds as seen in web app user.rb

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "3.2.18"
+  VERSION = "3.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 3.2.18
+  version: '3.3'
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-12 00:00:00.000000000 Z
+date: 2018-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -204,9 +204,11 @@ files:
 - app/assets/images/forever_style_guide/digiart1.png
 - app/assets/images/forever_style_guide/digiart2.png
 - app/assets/images/forever_style_guide/digiart3.png
+- app/assets/images/forever_style_guide/forever-logo-small.svg
 - app/assets/images/forever_style_guide/forever-logo-xs.png
 - app/assets/images/forever_style_guide/forever-logo.jpg
 - app/assets/images/forever_style_guide/forever-logo.png
+- app/assets/images/forever_style_guide/forever-logo.svg
 - app/assets/images/forever_style_guide/forever-swirl-logo.png
 - app/assets/images/forever_style_guide/historian-logo-sm.png
 - app/assets/images/forever_style_guide/historian-logo.png
@@ -237,6 +239,7 @@ files:
 - app/assets/stylesheets/forever_style_guide/globals/_mixins.scss
 - app/assets/stylesheets/forever_style_guide/globals/_variables.scss
 - app/assets/stylesheets/forever_style_guide/modules/_all.scss
+- app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss
 - app/assets/stylesheets/forever_style_guide/modules/_avatar.scss
 - app/assets/stylesheets/forever_style_guide/modules/_button.scss
 - app/assets/stylesheets/forever_style_guide/modules/_checkbox.scss
@@ -251,40 +254,23 @@ files:
 - app/assets/stylesheets/forever_style_guide/modules/_list.scss
 - app/assets/stylesheets/forever_style_guide/modules/_mars_manifest.scss
 - app/assets/stylesheets/forever_style_guide/modules/_modal.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-help.scss
-- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns.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-icons.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/_progress.scss
 - app/assets/stylesheets/forever_style_guide/modules/_promo_banner.scss
 - app/assets/stylesheets/forever_style_guide/modules/_responsive_utilities.scss
 - app/assets/stylesheets/forever_style_guide/modules/_select.scss
-- app/assets/stylesheets/forever_style_guide/modules/_shame.scss
 - app/assets/stylesheets/forever_style_guide/modules/_signin.scss
 - app/assets/stylesheets/forever_style_guide/utils/_color-utils.scss
 - app/assets/stylesheets/forever_style_guide/utils/_font-utils.scss
 - app/assets/stylesheets/forever_style_guide/utils/_logger.scss
 - app/helpers/forever_style_guide/application_helper.rb
-- app/views/forever_style_guide/sections/components/footer/_footer.erb
-- app/views/forever_style_guide/sections/components/navigation/_impersonation_banner.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_account_signed_out_mobile.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_cart_icon.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_community_dropdown.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_deals.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_help.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_inspiration.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb
-- app/views/forever_style_guide/sections/components/navigation/_nav_products_dropdown.erb
 - config/locales/en.yml
 - config/routes.rb
 - config/style_guide.yml

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

@@ -1,60 +0,0 @@
-.dropdown-menu-account {
-  padding-top: 15px;
-  border-bottom-right-radius: $border-radius-large;
-  border-bottom-left-radius: $border-radius-large;
-
-  .progress {
-    margin-bottom: 10px;
-  }
-
-  @media (min-width: $grid-float-breakpoint) {
-    width: $nav-icon-width * 4;
-  }
-}
-.dropdown-menu-account-item {
-  display: block;
-  overflow: hidden;
-
-  @media (min-width: $grid-float-breakpoint) {
-    padding-top: 0;
-    padding-bottom: $padding-small-vertical;
-  }
-}
-.dropdown-menu-account-divider {
-  margin-top: 5px;
-  margin-bottom: 10px;
-  @include nav-border(bottom);
-
-  @media (max-width: $grid-float-breakpoint-max) {
-    border-color: color('gray-600');
-  }
-}
-.dropdown-menu-account-divider-thin {
-  margin-top: 0;
-  border-color: color('gray-600');
-}
-.dropdown-menu-account-user-name {
-  @media (min-width: $grid-float-breakpoint) {
-    @include multi_line_ellipsis($lineHeight: 1.1em, $lineCount: 3, $bgColor: $color-gray-700);
-  }
-}
-.dropdown-menu-account-user-intro {
-  margin-top: $padding-small-vertical;
-  margin-bottom: 0;
-  font-size: $font-size-100;
-}
-.dropdown-menu-account-avatar {
-  margin-right: 10px;
-  border: 0;
-  box-shadow: none;
-
-  @media (max-width: $grid-float-breakpoint-max) {
-    height: 40px; // avatar-xs
-    width: 40px;
-    margin-top: $padding-small-vertical;
-  }
-}
-.dropdown-menu-account-storage {
-  margin-bottom: 0;
-  font-size: $font-size-200;
-}