forever_style_guide 3.2.18 → 3.3

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

@@ -1,25 +1,34 @@
+$in-front-of-primary-nav-and-ambassador-banner: $zindex-navbar-fixed + 3;
+$impersonation-banner-height: 20px;
+
 .impersonation_banner {
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: $impersonation-banner-height;
   min-width: $minimum-application-width;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  font-size: $font-size-200;
+  padding-top: 1px; // shimming visual alignment
+  font-size: $font-size-100;
+  z-index: $in-front-of-primary-nav-and-ambassador-banner;
+}
+
+.has-impersonation_banner {
+  .ambassador_banner,
+  #header-is_fixed.affix {
+    margin-top: $impersonation-banner-height;
+  }
 }
 
 .btn.btn-cancel_impersonation {
   height: auto;
+  float: right;
+  margin-top: -3px; //account for fa-close icon throwing off vertical alignment
   color: $color-white;
-  font-size: $font-size-200;
+  font-size: $font-size-100;
   text-decoration: none;
 
-  @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-top: -3px; //account for fa-close icon throwing off vertical alignment
-  }
-  @media (max-width: $screen-xs-max) {
-    display: block;
-    clear: both;
-    text-align: left;
+  .fa {
+    font-size: $font-size-100;
   }
 
   &:link,

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

@@ -4,20 +4,16 @@
 @import "dropdown-menu";
 @import "fa-feature_bullet";
 @import "impersonation_banner";
+@import "ambassador_banner";
 @import "input_groups";
 @import "list";
 @import "nav";
-@import "nav-dropdowns";
-@import "nav-dropdowns-account";
-@import "nav-dropdowns-ambassador";
-@import "nav-dropdowns-help";
+@import "nav-account_dropdown";
+@import "nav-cart";
 @import "nav-fixed";
-@import "nav-icons";
-@import "nav-item-list";
-@import "nav-offcanvas";
+@import "nav-mobile-menu";
 @import "progress";
 @import "responsive_utilities";
 @import "select";
-@import "shame";
 @import "modal";
 @import "signin";

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

@@ -0,0 +1,193 @@
+// desktop authenticated account dropdown styling
+$avatar-height: 35px;
+$avatar-width: 35px;
+$user_info-max_width: 100px;
+$user_info-max_width-sm: 70px;
+$user_info-max_width-xs: 50px;
+
+$mobile-menu-active-bar-offset: -11px;
+$padding-small-horizontal: 3px;
+
+.navigation-user_info {
+  height: 100%;
+  margin-top: 7px;
+
+  &.open {
+    .navigation-user_info-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  @media (max-width: $grid-float-breakpoint) {
+    display: none; // hides dropdown on mobile
+  }
+
+  @media (min-width: $screen-md) {
+    margin-right: 15px;
+  }
+}
+
+.navigation-user_info-icon {
+  margin-top: -3px; // magic number to vertical align
+}
+
+.navigation-user_info-avatar { // avatar in nav
+  height: $avatar-height;
+  width: $avatar-width;
+  margin-right: $padding-default-horizontal;
+  box-shadow: none;
+  border: none;
+}
+
+.navigation-user_info-user_name {
+  margin-right: $padding-small-horizontal;
+  max-width: $user_info-max_width;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: transform 0.15s ease-in-out;
+
+  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
+    max-width: $user_info-max_width-xs;
+  }
+  @media (min-width: $screen-md_to_lg-plus) and (max-width: $screen-lg-plus) {
+    max-width: $user_info-max_width-sm;
+  }
+}
+
+// Account Dropdown / Popover
+.navigation-account_dropdown-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  height: 100%;
+  overflow-y: hidden;
+  transition: opacity 0.15s ease-in-out;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.navigation-account_dropdown {
+  position: absolute;
+  background-color: $color-white;
+  box-shadow: 0 5px 20px rgba(0,0,0,.1);
+  top: calc(100% + 20px);
+  right: $nav-horizontal-spacing;
+  padding: $padding-large-vertical $padding-large-horizontal;
+  padding-bottom: 0;
+  width: 300px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid $color-white;
+  }
+
+  &.open {
+    display: block;
+  }
+}
+
+.navigation-account_dropdown-avatar {
+  margin: 0;
+  margin-right: $padding-large-horizontal;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  border: none;
+  padding: 0;
+}
+
+.navigation-account_dropdown-user_info {
+  display: flex;
+  align-items: center;
+  padding-bottom: $padding-large-vertical;
+  border-bottom: 2px solid $color-gray-200;
+}
+
+.user_info-logged_in-account_dropdown-storage {
+  width: 100%;
+  text-align: left;
+}
+
+.navigation-account_dropdown-storage_bar {
+  height: 10px;
+  border-radius: 50px;
+  background: $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;
+  background: $color-forever_services;
+  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;
+
+  &::before {
+    @media screen and (min-width: $screen-xs) {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 100%;
+      width: 4px;
+      background-color: $color-secondary;
+      content: "";
+      transform: scaleX(0);
+      transition: transform 0.15s ease-in-out;
+      transform-origin: left;
+    }
+    @media screen and (max-width: $grid-float-breakpoint) {
+      left: $mobile-menu-active-bar-offset;
+    }
+  }
+
+  &:hover {
+    color: $color-secondary;
+
+    &::before {
+      transform: scaleX(1);
+      transition: transform 0.25s ease-in-out;
+    }
+  }
+}
+
+.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

@@ -0,0 +1,39 @@
+$icon-to-text-alignment: -3px;
+$cart-count-horizontal-position: -3px;
+$cart-count-vertical-position: -8px;
+$mobile-icon-size: 21px;
+
+//style the cart and help icon the same + override bootstrap
+.navbar-nav > li > a {
+  &.navigation-user_info-cart,
+  &.navigation-user_info-help_link {
+    margin-top: $icon-to-text-alignment;
+    padding-left: $padding-small-horizontal * 2;
+    padding-right: $padding-small-horizontal * 2;
+    background-color: inherit;
+    @include transition($navigation-link-hover-transition);
+
+    &:hover .fa {
+      color: $color-secondary;
+      @include transition($navigation-link-hover-transition);
+    }
+
+    &.navigation-user_info-cart-with_count {
+      @media (max-width: $grid-float-breakpoint) {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.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: $mobile-icon-size;
+  height: $mobile-icon-size;
+  border-radius: 50%;
+}

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

@@ -1,5 +1,4 @@
 #header-is_fixed {
-  position: fixed;
   display: block;
   width: 100%;
   top: 0;

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

@@ -134,14 +134,6 @@ a.cart-icon {
 
 a.cart-icon {
   padding-top: $cart-icon-vertical-offset-mobile;
-
-  @media (max-width: $screen-lg-min) {
-    position: absolute;
-    right: 0;
-  }
-  @media (min-width: $screen-md_to_lg) {
-    padding-top: $cart-icon-vertical-offset !important; //override .nav.navbar-nav > li > a
-  }
 }
 
 .cart-icon-count {

data/app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss

@@ -0,0 +1,111 @@
+$nav-icon_bar-width: 22px;
+
+.navbar-header {
+  @media (max-width: $grid-float-breakpoint) {
+    float: none;
+  }
+}
+
+.navbar-toggle {
+  @media (max-width: $grid-float-breakpoint) {
+    display: block;
+  }
+  @media (max-width: $screen-md) {
+    margin-right: -10px; // equalize padding between right-side icons
+  }
+  @media (max-width: $screen-xs) {
+    margin-left: 5px;
+  }
+
+  // begin Hamburger + animation
+  .icon-bar {
+    background-color: $color-gray-600;
+    transition: all 0.2s;
+  }
+  .middle-bar {
+    opacity: 1;
+  }
+
+  &.open {
+    .icon-bar {
+      width: $nav-icon_bar-width;
+    }
+    .top-bar {
+      transform: rotate(45deg);
+      transform-origin: 10% 10%;
+    }
+    .middle-bar {
+      opacity: 0;
+    }
+    .bottom-bar {
+      transform: rotate(-45deg);
+      transform-origin: 10% 90%;
+    }
+  }
+}
+
+.navbar-nav > li {
+  @media (max-width: $grid-float-breakpoint) {
+    float: none;
+  }
+
+  &.navigation-user_info-logged_out-mobile {
+    display: none;
+
+    @media (max-width: $grid-float-breakpoint) {
+      display: block;
+      padding: 5px 20px;
+    }
+  }
+}
+
+.navigation-user_info-logged_out-mobile > a.btn {
+  @media (max-width: $grid-float-breakpoint) {
+    padding-top: 10px; // custom pad req. to override BS to fix btn align bug
+  }
+}
+
+// mobile menu button styling
+.nav-mobile-menu-account {
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+  width: 100%;
+  background-color: $color-white;
+}
+
+
+.nav-mobile-menu {
+  &.affix {
+    position: relative; // we only want the affix behavior in the mobile views
+  }
+
+  @media (max-width: $grid-float-breakpoint) {
+    position: absolute;
+    right: 0;
+    width: $minimum-application-width;
+    border-left: solid 1px $color-gray-200;
+    background-color: $color-white;
+    transform: translateX(100%);
+    transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
+    z-index: $zindex-tooltip; /* Sit on top */
+
+    &.affix {
+      position: fixed;
+      top: $nav-height;
+      bottom: 0;
+      overflow-y: scroll;
+    }
+  }
+
+  @media (max-width: $screen-xs) {
+    width: 100%;
+  }
+
+  &.in {
+    padding-bottom: 100%; // gives off-canvas menu full height
+    opacity: 1;
+    padding-bottom: 100%;
+    transform: translateX(0%);
+  }
+}