forever_style_guide 4.2.1 → 4.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dddfdd5bbf427533a3d9f3acb82d1e116e72c8cd658f5b4c1a407f402b76b944
-  data.tar.gz: 78d16d0a1e2003488cdad986e6016de0d17a92a50d0ffd01c7d1a6d571be3c0f
+  metadata.gz: ab0832c2cd8a53c5a6c17ab0e612ddb7528a8ad04bdae90f7d6075f7a75c97b1
+  data.tar.gz: 59c5f93333852a9568de4e98e64214946682217061c837f924a56e58dcf85d5f
 SHA512:
-  metadata.gz: 3945f0c6db6d64db265653c910a173e8d4352ca3bb684395242e451add48c4cb2d7da2256d6f048f3de03e323dd59949d155409a514e276f7074a444c71c13ba
-  data.tar.gz: e30d92a5022abf50f7cbbebb2e53976668300cd330a458dfada22cf9c95831dbae5e130bc1323d9870e55fc1bda9325a044b9fb05a7e129c5a6363bc6399f76b
+  metadata.gz: 719364ab8034d54956607cb3fc676b7c80490bff6aa25c03a6e421d25ae773d449ea55753d4be56282595b49eb19c7c91c2bced02202b6004032b20664789340
+  data.tar.gz: 1ef778b4379eda5239a82c10ac59b90679f804d7272a0066676ce13bd34d352b3d87866f7cd67f71ec600b4287b54ccda4b97d3fa0b089d96f6a70a6ca8cdfaa

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

@@ -87,3 +87,19 @@ $font-weight-inherit: weightify('inherit', inherit) !default;
     font-weight: #{$font-weight};
   }
 }
+
+
+/*caladea serif font*/
+@font-face {
+  font-family: 'Caladea';
+  src: font-url('caladea-regular.woff2') format('woff2'),
+    font-url('caladea-regular.woff') format('woff');
+}
+
+.font-serif {
+  font-family: 'Caladea', serif;
+  font-weight: normal;
+  letter-spacing: 0.035rem;
+}
+
+$font-face-serif: 'Caladea, serif';

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

@@ -13,7 +13,7 @@
 @import "input_groups";
 @import "list";
 @import "message_box";
-@import "primary_nav";
+//@import "primary_nav";
 @import "progress";
 @import "promo_banner";
 @import "responsive_utilities";

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.4"
 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.4
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-30 00:00:00.000000000 Z
+date: 2022-07-14 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
@@ -42,6 +42,8 @@ files:
 - app/assets/fonts/ProximaNova-Sbold-webfont.svg
 - app/assets/fonts/ProximaNova-Sbold-webfont.ttf
 - app/assets/fonts/ProximaNova-Sbold-webfont.woff
+- app/assets/fonts/caladea-regular.woff
+- app/assets/fonts/caladea-regular.woff2
 - app/assets/images/forever_style_guide/artisan-logo-sm.png
 - app/assets/images/forever_style_guide/artisan-logo.png
 - app/assets/images/forever_style_guide/check.png