forever_style_guide 4.1.14 → 4.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9cb9bc38c33e03c5a79ba76322078fe775d0422fc818da39c4cdaecd5cae0b4
-  data.tar.gz: 223ab3ced529f9a56086107e70be62540d9f07818683d45ed6a05d4902a14d72
+  metadata.gz: bd2d4bc807d4f937f4f652edbddb382f2894cb78afa593b4bb339d337bb7efc4
+  data.tar.gz: d7e9d2ee85a01a0c932f864d11a117cc877f6fde0a007837992b5aea5cc9e8ad
 SHA512:
-  metadata.gz: 84f7e2caeed45570d8d1fd13e73a4fd07b44abb0f5e6c9922aadb96273268d922fa4b68b0efe19591d25c0ce56bd0a7d87979ef21a733ebe6b009a56e830bdb2
-  data.tar.gz: 3007a24a4844b1cefee6b03658fd58cfa00c5d944ae694c5501bc65528cd3f9434ff9c0cb805d1c6c928d1b8ff48917d38517b40d5c596f5e3f5e65e90b19f87
+  metadata.gz: 69cf32f4750b350af7c7dd5eb9d847872447e007936129534f81523b7d2465f9b972b89e18e14aa08b1444187507e027c2a0ed51cfd0128ae7c47365fc371866
+  data.tar.gz: 8da0e5e251da0d14a95b11c64bdb3d8f0e3c91957de354f25aed8b06fd33a4077e6732c398879e6733f9c66ca8675c9aba813bbf4c38e4e5385ecdd8167c2da0

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/_colors.scss

@@ -11,6 +11,7 @@ $color-forever_valet:       colorify('valet', #50bd94) !default;
 $color-forever_services:    colorify('services', #39b3be) !default;
 $color-forever_artisan:     colorify('artisan', #28a6de) !default;
 $color-forever_blue:        colorify('blue', #2b91cf) !default;
+$color-forever_dark-blue:   colorify('dark-blue', #007198) !default;
 $color-forever_ambassador:  colorify('ambassador', #a4314c) !default;
 $color-forever_ambassador-unassigned: colorify('ambassador-unassigned', #2d8e97) !default;
 $color-forever_p2p:         colorify('p2p', #f89406) !default;

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

@@ -20,8 +20,22 @@ $f-nav-icon-hover: #bce5fd;
 }
 
 .f-primary_nav {
+  /* These rules are to bring the nav look closer to what mars/fui are displaying. They are not needed for mars/fui, as they are applied globally there */
+  -webkit-font-smoothing: antialiased;
+  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
+    image-rendering: -webkit-optimize-contrast !important;
+  }
+
+  /* Unset for Safari 11+ */
+  @media not all and (min-resolution: .001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+      image-rendering: unset !important;
+    }
+  }
+  /* end of specific rules */
+
   width: 100%;
-  background-color: #2881B8;
+  background-color: #007198;
 
   /*support store method of affixing*/
   &.affix {
@@ -47,8 +61,8 @@ $f-nav-icon-hover: #bce5fd;
   align-items: center;
 
   > img {
-    height: 22px;
-    width: 138px;
+    height: 26px;
+    width: 150px;
     max-width: unset;
   }
 }
@@ -448,13 +462,14 @@ $f-nav-icon-hover: #bce5fd;
     &:nth-child(even) { background-color: $color-gray-200; }
 
     a {
+      color: #007198; // heroblue default
       display: block;
       font-family: $font-face-semibold;
       line-height: 1;
     }
 
     p {
-      margin: 0;
+      margin: 10px 0 10px 0;
       color: $color-forever_gray;
       font-family: $font-face-regular;
       line-height: 1.4;
@@ -462,30 +477,26 @@ $f-nav-icon-hover: #bce5fd;
 
     > a { font-size: 20px; }
 
-    .f-primary_nav_cpmeganav_title {
-      display: block;
-      font-family: $font-face-semibold;
-      line-height: 1;
-      font-size: 20px;
-    }
-
     > p { font-size: $font-size-200; }
 
-    > ul {
-      padding-top: 20px;
+    > .f-primary_nav_cpmeganav-categories {
+      margin: 20px -10px 0 -10px; // -10px offsets li padding within
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
 
       > li {
-        min-width: 180px;
-        max-width: 300px;
+        min-width: 115px;
+        max-width: 140px;
         min-height: 60px;
         margin-bottom: 20px;
+        padding: 0;
 
         img {
-          float: left;
+          margin: 0 0 10px 10px;
           width: 60px;
+          height: 60px;
+          object-fit: contain;
         }
 
         > a {
@@ -496,7 +507,7 @@ $f-nav-icon-hover: #bce5fd;
 
         > p {
           font-size: 12px;
-          margin: 4px 0 0 70px;
+          margin: 4px 0 0 10px;
         }
 
         span.badge {
@@ -512,8 +523,8 @@ $f-nav-icon-hover: #bce5fd;
           line-height: 1;
         }
 
-        > ul {
-          margin: 2px 0 0 70px;
+        > .f-primary_nav_cpmeganav-products {
+          margin: 2px 0 0 10px;
 
           > li {
             margin: 0 0 2px;
@@ -528,6 +539,34 @@ $f-nav-icon-hover: #bce5fd;
         }
       }
     }
+
+    &.f-primary_nav_cpmeganav-scrapbooking {
+      > ul {
+        flex-wrap: unset;
+        justify-content: unset;
+        gap: 10px;
+
+        margin-right: 0;
+        margin-left: 0;
+
+        > li {
+          padding: 0;
+          max-width: 300px;
+
+          flex: 1;
+
+          img {
+            margin: 0;
+            float: left;
+            width: 60px;
+          }
+
+          p {
+            margin: 4px 0 0 70px;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -566,17 +605,39 @@ $f-nav-icon-hover: #bce5fd;
     display: flex;
 
     > li {
-      > p { min-height: 42px; }
+      > p {
+        margin: 10px 0;
+        min-height: 42px;
+      }
 
-      &:nth-child(odd) { width: 28%; }
+      &.f-primary_nav_cpmeganav-autoprint,
+      &.f-primary_nav_cpmeganav-design,
+      &.f-primary_nav_cpmeganav-scrapbooking {
+        width: 33%;
+      }
 
-      &:nth-child(2) {
-        width: 44%;
+      &.f-primary_nav_cpmeganav-design {
         background-color: transparent;
         border-style: solid;
         border-width: 0 1px;
         border-color: $color-gray-400;
       }
+
+      > .f-primary_nav_cpmeganav-categories > li {
+        min-width: 130px;
+        max-width: 300px;
+        flex: 1;
+      }
+
+      &.f-primary_nav_cpmeganav-scrapbooking {
+        > ul {
+          flex-wrap: wrap;
+
+          > li {
+            flex: unset;
+          }
+        }
+      }
     }
   }
 }
@@ -589,8 +650,26 @@ $f-nav-icon-hover: #bce5fd;
 
   .f-primary_nav_cpmeganav {
     > li {
-      &:nth-child(odd) { width: 25%; }
-      &:nth-child(2) { width: 50%; }
+      &.f-primary_nav_cpmeganav-autoprint { width: 32%; }
+      &.f-primary_nav_cpmeganav-design { width: 42%; }
+      &.f-primary_nav_cpmeganav-scrapbooking { width: 26%; }
+
+      > .f-primary_nav_cpmeganav-categories > li {
+        flex: unset;
+
+        &.f-primary_nav_cpmeganav-photo-prints {
+          width: 100%;
+          max-width: unset;
+
+          img {
+            margin-right: 10px;
+            float: left;
+          }
+
+          a { margin: 14px 0 0; }
+          p { margin-left: 0; }
+        }
+      }
     }
   }
 }

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "4.1.14"
+  VERSION = "4.2.2"
 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.2
 platform: ruby
 authors:
 - Nicholas McClay
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-02-20 00:00:00.000000000 Z
+date: 2022-05-24 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: []