forever_style_guide 3.3.3 → 3.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: db1274251d3a6b815506a1b6a029921a248f81e3
-  data.tar.gz: 7242405c69d4a47f176697ce07a6c8f33afe0e9c
+  metadata.gz: 2a20f21821a651a0eaf0e620e993f39d1213c6f8
+  data.tar.gz: c8b160e5fff2428c2c2509a5179efab1cc96a41b
 SHA512:
-  metadata.gz: 36464a0e415cdc9e35db42e3639d3ad7a70fa57ee964197f18af752fc57e4abd69e4775b83234b3028ad4eb51fd6e8e6dfebbbe02b382feb2098aaf21192fec5
-  data.tar.gz: e08b40972b8ab59ad9cad290f5472fe5951e43dbe8032e8c44a5de64b92306131c0f0b8d0e44eeac6ff4514b9b753c2eea337bc634ea5d8ce1f8981b0cb333e7
+  metadata.gz: da0fe6fa1b4d7f3ec05c5fcce25400b4407bc4d09b83591d1b0a450eefb32ccee7cffa1508c2c5fd87ab61dae739b14b197e1dc7075525789c249eb83d36f797
+  data.tar.gz: 099737aa231fb816c311a657dab55800f222b73be123c5c869c1f45f7820efb20ea6d214d2de9efebd15050eea70f2e5c207d38e1228b0dc5332134b9af949a4

data/app/assets/stylesheets/forever_style_guide/globals/_mixins.scss

@@ -50,6 +50,8 @@ $color-nav-hover: color('secondary');
   bottom: 0;
   width: 0;
   background-color: $color-white;
+  border-left: solid 1px $color-gray-200;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
   transform: translateX(100%);
   transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out; // TODO - animate out
   z-index: $zindex-tooltip;
@@ -61,7 +63,7 @@ $color-nav-hover: color('secondary');
     opacity: 1;
     transform: translateX(0%);
     direction: rtl; // puts scrollbar to lefthand side
-    overflow-y: scroll;
+    overflow-y: auto;
     width: $minimum-application-width;
     z-index: $in-front-of-primary-and-banner-and-impersonation;
 

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

@@ -23,7 +23,7 @@ a.ambassador_banner {
 }
 
 .ambassador_banner-text {
-  position: static;
+  position: relative;
   height: $ambassador-banner-text-height;
   padding-top: $banner-vertical-padding;
   padding-bottom: $banner-vertical-padding;

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

@@ -17,9 +17,6 @@
   .ambassador_banner-dropdown_container.open {
     top: $ambassador-banner-text-height + $impersonation-banner-height;
   }
-  .ambassador_banner-text:after {
-    top: $impersonation-banner-height;
-  }
   .nav-mobile-menu.in {
     @media(max-width: $grid-float-breakpoint) {
       top: $impersonation-banner-height;

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

@@ -1,11 +1,14 @@
 // 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;
+$user_info-name-max_width: 200px;
+$user_info-icon-vertical_alignment: -2px;
+$user_info-toggle-hover_transition: color 0.15s ease-in-out;
 
-$mobile-menu-active-bar-offset: -11px;
 $padding-small-horizontal: 3px;
 
 .navigation-user_info {
@@ -31,7 +34,8 @@ $padding-small-horizontal: 3px;
 }
 
 .navigation-user_info-icon {
-  margin-top: -3px; // magic number to vertical align
+  margin-top: $user_info-icon-vertical_alignment;
+  transition: $user_info-toggle-hover_transition;
 }
 
 .navigation-user_info-avatar {
@@ -48,7 +52,7 @@ $padding-small-horizontal: 3px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  transition: transform 0.15s ease-in-out;
+  transition: $user_info-toggle-hover_transition;
 
   @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
     max-width: $user_info-max_width-xs;
@@ -66,14 +70,16 @@ $padding-small-horizontal: 3px;
   position: relative;
   height: 100%;
   overflow-y: hidden;
-  transition: opacity 0.15s ease-in-out;
 
   @media (max-width: $grid-float-breakpoint) {
     display: none;
   }
 
   &:hover {
-    opacity: 0.7;
+    .navigation-user_info-user_name,
+    .navigation-user_info-icon {
+      color: $color-secondary;
+    }
   }
 }
 
@@ -99,11 +105,17 @@ $padding-small-horizontal: 3px;
   border-bottom: 2px solid $color-gray-200;
 }
 
-.user_info-logged_in-account_dropdown-storage {
+.navigation-account_dropdown-user_info-logged_in {
   width: 100%;
   text-align: left;
 }
 
+.navigation-account_dropdown-user_info-logged_in-name {
+  display: inline-block;
+  max-width: $user_info-name-max_width;
+  word-wrap: break-word;
+}
+
 .navigation-account_dropdown-storage_bar {
   height: 10px;
   border-radius: 50px;

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

@@ -14,6 +14,10 @@ $mobile-menu-close-btn-height: 40px;
   @media (max-width: $grid-float-breakpoint) {
     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;
+    }
   }
 }
 

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

@@ -44,6 +44,7 @@ $deals-icon-vertical-position: -5px;
 }
 
 .navigation {
+  position: relative;
   box-shadow: $navigation-shadow;
 
   .container-fluid > .navbar-header {

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "3.3.3"
+  VERSION = "3.3.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 3.3.3
+  version: 3.3.4
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-03 00:00:00.000000000 Z
+date: 2018-02-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -306,3 +306,4 @@ signing_key:
 specification_version: 4
 summary: A live style guide and component API for the Forever brand
 test_files: []
+has_rdoc: