forever_style_guide 4.2.1 → 4.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dddfdd5bbf427533a3d9f3acb82d1e116e72c8cd658f5b4c1a407f402b76b944
-  data.tar.gz: 78d16d0a1e2003488cdad986e6016de0d17a92a50d0ffd01c7d1a6d571be3c0f
+  metadata.gz: bd2d4bc807d4f937f4f652edbddb382f2894cb78afa593b4bb339d337bb7efc4
+  data.tar.gz: d7e9d2ee85a01a0c932f864d11a117cc877f6fde0a007837992b5aea5cc9e8ad
 SHA512:
-  metadata.gz: 3945f0c6db6d64db265653c910a173e8d4352ca3bb684395242e451add48c4cb2d7da2256d6f048f3de03e323dd59949d155409a514e276f7074a444c71c13ba
-  data.tar.gz: e30d92a5022abf50f7cbbebb2e53976668300cd330a458dfada22cf9c95831dbae5e130bc1323d9870e55fc1bda9325a044b9fb05a7e129c5a6363bc6399f76b
+  metadata.gz: 69cf32f4750b350af7c7dd5eb9d847872447e007936129534f81523b7d2465f9b972b89e18e14aa08b1444187507e027c2a0ed51cfd0128ae7c47365fc371866
+  data.tar.gz: 8da0e5e251da0d14a95b11c64bdb3d8f0e3c91957de354f25aed8b06fd33a4077e6732c398879e6733f9c66ca8675c9aba813bbf4c38e4e5385ecdd8167c2da0

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

@@ -20,6 +20,20 @@ $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: #007198;
 
@@ -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.2.1"
+  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.2.1
+  version: 4.2.2
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-30 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