forever_style_guide 4.1.12 → 4.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 187f5f435aca86f54da94c651dcad1e8e7382a01d3f26bad6a3df6eb06fdb91d
-  data.tar.gz: deac6bafdfe870d29ad3670bc4e7498715af2f1134af8a4aebeabb0d921a4cca
+  metadata.gz: 2cfc74588725fa50ab33a8c69889e2233eab0a9f8c234603dba8b84a3dc7f353
+  data.tar.gz: b553670f0d6186dc5bb2b238257f287e361f4867601b6ccf57c3337a3e2ac8bb
 SHA512:
-  metadata.gz: 67f578caae548cfd03e7e17e1bc7a372626409e817583b4da3bdef2e476ed90996381c54b3e6685f854a013cb84cd243f8fb4b8ed617ee0dfd30f8c0cc8bf52e
-  data.tar.gz: 0be7cc00ef9f0e8e48110aaf81eb9556f84e45b9bd0c4b95f2d1d07df8d79cec6a76c95557ae31c8f63d21ab0a9c6eb5f0c98c5dcb8391b3537fe7f14898de54
+  metadata.gz: f674109ca7efaa0a6886739f14ffcf60bc08d920e81a6af3e08faedd9d9d0a9c63c77c82f6dd01ab5b8274252f02b2b15df75db74a8f8fa7e7a6bf648822d56f
+  data.tar.gz: 8005dd03c4bbb868dbbcdb83d68d3a51155f95ed38f894f69647c793129ecf5d5008d8145cefb9da07bc2c72630a8604c58f76402458b3ed7a07af37204afcac

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

@@ -97,21 +97,21 @@ $f-grid-col-count: 24;
 /* padding modifiers */
 .f-grid.f-grid-no_padding {
   margin: 0;
-  [class*="f-col"] { padding: 0; }
+  > [class*="f-col"] { padding: 0; }
 }
 
 .f-grid.f-grid-bs_padding {
   margin-left: -$f-grid-bootstrap-padding;
   margin-right: -$f-grid-bootstrap-padding;
-  [class*="f-col"] { padding: 0 $f-grid-bootstrap-padding; }
+  > [class*="f-col"] { padding: 0 $f-grid-bootstrap-padding; }
 }
 
 
 $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; }
+    > [class*="f-col"] { padding: #{$grid-gutter / 2}px; }
   }
 
   $grid-gutter: $grid-gutter + 2;

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;
   }
 }
@@ -490,29 +490,35 @@ $f-nav-icon-hover: #bce5fd;
 
         > a {
           font-size: 16px;
-          margin-left: 70px;
+          margin-left: 10px;
+          display: inline-block;
         }
 
         > p {
           font-size: 12px;
-          margin: 8px 0 0 70px;
+          margin: 4px 0 0 70px;
+        }
+
+        span.badge {
+          border-radius: 2px;
+          padding: 2px 4px;
+          color: #fff;
+          background-color: $color-forever_orange;
+          font-size: 10px;
+          vertical-align: top;
+          margin-top: 2px;
+          display: inline-block;
+          font-weight: bold;
+          line-height: 1;
         }
 
         > ul {
-          margin: 4px 0 0 70px;
+          margin: 2px 0 0 70px;
 
           > li {
             margin: 0 0 2px;
             font-size: 12px;
 
-            span.badge {
-              border-radius: 2px;
-              padding: 2px 4px;
-              color: #fff;
-              background-color: $color-forever_orange;
-              font-size: 10px;
-            }
-
             > a {
               font-size: 12px;
               display: inline-block;

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "4.1.12"
+  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.12
+  version: 4.2.0
 platform: ruby
 authors:
 - Nicholas McClay
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-28 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: []