forever_style_guide 4.1.14 → 4.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9cb9bc38c33e03c5a79ba76322078fe775d0422fc818da39c4cdaecd5cae0b4
-  data.tar.gz: 223ab3ced529f9a56086107e70be62540d9f07818683d45ed6a05d4902a14d72
+  metadata.gz: 2cfc74588725fa50ab33a8c69889e2233eab0a9f8c234603dba8b84a3dc7f353
+  data.tar.gz: b553670f0d6186dc5bb2b238257f287e361f4867601b6ccf57c3337a3e2ac8bb
 SHA512:
-  metadata.gz: 84f7e2caeed45570d8d1fd13e73a4fd07b44abb0f5e6c9922aadb96273268d922fa4b68b0efe19591d25c0ce56bd0a7d87979ef21a733ebe6b009a56e830bdb2
-  data.tar.gz: 3007a24a4844b1cefee6b03658fd58cfa00c5d944ae694c5501bc65528cd3f9434ff9c0cb805d1c6c928d1b8ff48917d38517b40d5c596f5e3f5e65e90b19f87
+  metadata.gz: f674109ca7efaa0a6886739f14ffcf60bc08d920e81a6af3e08faedd9d9d0a9c63c77c82f6dd01ab5b8274252f02b2b15df75db74a8f8fa7e7a6bf648822d56f
+  data.tar.gz: 8005dd03c4bbb868dbbcdb83d68d3a51155f95ed38f894f69647c793129ecf5d5008d8145cefb9da07bc2c72630a8604c58f76402458b3ed7a07af37204afcac

data/app/assets/stylesheets/forever_style_guide/base/_grid.scss

@@ -108,7 +108,7 @@ $f-grid-col-count: 24;
 
 
 $grid-gutter: 2;
-@while $grid-gutter < 30 {
+@while $grid-gutter < 31 {
   .f-grid.f-grid-gutter-#{$grid-gutter} {
     margin: -#{$grid-gutter / 2}px;
     > [class*="f-col"] { padding: #{$grid-gutter / 2}px; }

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

@@ -73,6 +73,5 @@ $in-front-of-primary-nav: $zindex-navbar-fixed + 2;
 $in-front-of-primary-and-banner: $zindex-navbar-fixed + 3;
 $in-front-of-primary-and-banner-and-impersonation: $zindex-navbar-fixed + 4;
 
-$ambassador-banner-height-assigned: 32px;
-$ambassador-banner-height-unassigned: 50px;
+$ambassador-banner-height: 30px;
 $impersonation-banner-height: 20px;

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

@@ -1,5 +1,4 @@
-$banner-vertical-padding-assigned: 6px;
-$banner-vertical-padding-unassigned: 10px;
+$banner-vertical-padding: 4px;
 $banner-max-width: 70%;
 
 $banner-background-visible: 0.1;
@@ -9,117 +8,74 @@ $banner-hover-effect-speed: 0.15s;
 $chevron-rotate-effect-speed: 0.25s;
 $dropdown-entrance-and-exit-effect-speed: 0.22s;
 
-@mixin ambassador_banner($banner-background-color, $height) {
+@mixin ambassador_banner() {
   position: relative;
-  height: $height;
+  height: $ambassador-banner-height;
+  padding: $banner-vertical-padding 10px;
   color: $banner-color;
-  background-color: $banner-background-color;
+  background-color: $color-forever_gray;
   z-index: $in-front-of-primary-nav;
-  pointer-events: none;
   text-align: center;
-  font-family: $font-face-semibold;
+  font-family: $font-face-regular;
 
   &.is-behind_fixed-nav {
     z-index: -1;
-    height: $ambassador-banner-height-assigned;
-  }
-
-  &::after {
-    position: absolute;
-    height: $height;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: $color-black;
-    opacity: 0;
-    @include transition(opacity $banner-hover-effect-speed ease-in-out);
-    z-index: $zindex-navbar - 1;
-    content: "";
-    pointer-events: none;
+    height: $ambassador-banner-height;
   }
 
-  &:hover {
-    &::after {
-      opacity: $banner-background-visible;
-    }
-  }
-}
-
-a.ambassador_banner {
-  display: block;
-  pointer-events: auto;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:active:focus {
-    text-decoration: none;
-    pointer-events: auto;
-  }
+  @media screen and (max-width: $screen-xs) { text-align: left; }
 }
 
 .ambassador_banner-assigned {
-  @include ambassador_banner($color-forever_gray, $ambassador-banner-height-assigned);
-  padding-top: $banner-vertical-padding-assigned;
-  padding-bottom: $banner-vertical-padding-assigned;
-  height: $ambassador-banner-height-assigned;
-
-  &::after { height: $ambassador-banner-height-assigned; }
+  @include ambassador_banner();
 
   &.open {
     .fa-chevron-down {
-      @include transform(rotate(180deg));
+      transform: rotate(180deg);
     }
   }
 
   .fa-chevron-down {
-    @include transition(all $chevron-rotate-effect-speed linear);
+    cursor: pointer;
+    @include transition(transform $chevron-rotate-effect-speed linear);
   }
-
-  @media screen and (max-width: $screen-xs) { text-align: left; }
 }
 
 .ambassador_banner-unassigned {
-  @include ambassador_banner(#781A60, $ambassador-banner-height-unassigned);
-  padding-top: $banner-vertical-padding-unassigned;
-  padding-bottom: $banner-vertical-padding-unassigned;
+  @include ambassador_banner();
 
   &.is-behind_fixed-nav {
     .ambassador_banner-btn { display: none; }
   }
 }
 
-// make the lead-in text just look like a btn on small devices
-.ambassador_banner-unassigned-text {
-  @media (max-width: $screen-xs-max) {
-    display: inline-block;
+a.ambassador_banner-btn {
+  &,
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    padding-top: 4px !important;//because this is easier than a day of fighting with legacy crap
     height: 30px;
-    padding: 4px 12px 8px;
-    line-height: 1.3;
-    border: 2px solid $color-white;
-    border-radius: $border-radius-button;
-    &:hover { text-decoration: underline; }
+    font-size: $font-size-200;
+    color: $color-white;
+    font-family: $font-face-semibold;
+    text-decoration: underline;
+    cursor: pointer;
   }
 }
 
-.ambassador_banner-btn {
-  padding-top: 4px;
-  margin-left: 20px;
-  height: 30px;
-  font-size: $font-size-200;
-}
-
 .ambassador_banner-content {
   display: inline-block;
   vertical-align: middle;
   pointer-events: auto;
-  cursor: pointer;
 }
 
 .ambassador_banner-name {
   max-width: $banner-max-width;
   vertical-align: middle;
   text-decoration: underline;
+  cursor: pointer;
 
   @media screen and (max-width: $screen-xs) {
     max-width: 48%;
@@ -131,12 +87,12 @@ a.ambassador_banner {
 
 .ambassador_banner-dropdown_container {
   position: absolute;
-  top: $ambassador-banner-height-assigned;
+  top: $ambassador-banner-height;
   left: 0;
   visibility: hidden;
   width: 100%;
   transform: translateY(-100%);
-  @include transition(all $dropdown-entrance-and-exit-effect-speed ease-in);
+  @include transition_fast(all);
   z-index: $in-front-of-primary-nav-but-behind-banner;
   pointer-events: none;
 
@@ -160,7 +116,7 @@ a.ambassador_banner {
 .ambassador_banner-dropdown-avatar {
   align-self: flex-start;
   margin: 0;
-  margin-right: $padding-large-horizontal * 2;
+  margin-right: $padding-large-horizontal * 2 !important;
 }
 
 .ambassador_banner-dropdown-info {

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

@@ -15,7 +15,7 @@
     margin-top: $impersonation-banner-height;
   }
   .ambassador_banner-dropdown_container.open {
-    top: $ambassador-banner-height-assigned + $impersonation-banner-height;
+    top: $ambassador-banner-height + $impersonation-banner-height;
   }
   .nav-mobile-menu.in {
     @media (max-width: $grid-float-breakpoint-max) {

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

@@ -21,7 +21,7 @@ $f-nav-icon-hover: #bce5fd;
 
 .f-primary_nav {
   width: 100%;
-  background-color: #2881B8;
+  background-color: #007198;
 
   /*support store method of affixing*/
   &.affix {
@@ -47,8 +47,8 @@ $f-nav-icon-hover: #bce5fd;
   align-items: center;
 
   > img {
-    height: 22px;
-    width: 138px;
+    height: 26px;
+    width: 150px;
     max-width: unset;
   }
 }

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "4.1.14"
+  VERSION = "4.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 4.1.14
+  version: 4.2.0
 platform: ruby
 authors:
 - Nicholas McClay
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-02-20 00:00:00.000000000 Z
+date: 2022-03-23 00:00:00.000000000 Z
 dependencies: []
 description: Install this as a gem in your Forever app and it will expose style guide
   through /style-guide route
@@ -126,7 +126,7 @@ homepage: https://github.com/forever-inc/forever-style-guide
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -141,8 +141,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.0.9
+signing_key:
 specification_version: 4
 summary: A live style guide and component API for the Forever brand
 test_files: []