luna-one 3.1.464 → 3.1.465

package/dist/luna/components/BlockListItems/BlockListItems.scss

@@ -3,26 +3,37 @@
 .ter-bounded-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 48px;
+  grid-gap: 36px;
+  padding: 0px calc((100% - 1280px) / 2);
+  margin: 0 auto;
 
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: 1000px) {
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: 24px;
   }
 
-  @media screen and (max-width: $breakpoint-sm) {
+  @media screen and (max-width: 900px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
   @media screen and (max-width: $breakpoint-xs) {
     grid-template-columns: repeat(1, 1fr);
-    grid-gap: 20px;
   }
 
-  .ter-card {
-    max-width: 320px;
-    width: 100%;
-    margin: 0 auto;
+  .ter-bounded-card {
+    flex: 1 1 0;
+    max-width: 252px;
+    min-width: 252px;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.19);
+
+    @media screen and (max-width: $breakpoint-md) {
+      min-width: 200px;
+      max-width: 100%;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      min-width: auto;
+      max-width: 100%;
+    }
   }
 }
 

package/dist/luna/components/Tabs/Tabs.scss

@@ -22,7 +22,8 @@
     }
   }
 
-  &.left, &.right {
+  &.left,
+  &.right {
     @media screen and (min-width: $breakpoint-sm) {
       .nav-entries {
         max-width: 360px;
@@ -64,18 +65,18 @@
     .nav-entry {
       cursor: pointer;
       outline: 0;
-      
+
       &.focus:focus {
         outline: 2px solid $trimble-blue;
       }
     }
 
     &.text-entries {
-
       &.light {
         border-color: $concrete-gray;
 
-        &.left, &.right {
+        &.left,
+        &.right {
           .nav-entry {
             text-align: left;
           }
@@ -87,12 +88,12 @@
 
           &.active {
             border-color: $dark-navy;
-            
+
             &:before {
               position: absolute;
               display: block;
               content: "";
-              width: 0; 
+              width: 0;
               height: 0;
             }
             .nav-text {
@@ -116,7 +117,7 @@
         }
       }
 
-      &.dark  {
+      &.dark {
         border-color: $concrete-gray;
 
         .nav-entry {
@@ -129,18 +130,19 @@
             border-color: $dark-navy;
             color: $white;
             background-color: $dark-navy;
-            
+
             &:before {
               position: absolute;
               display: block;
               content: "";
-              width: 0; 
+              width: 0;
               height: 0;
             }
           }
         }
 
-        &.top, &.bottom {
+        &.top,
+        &.bottom {
           gap: 2px;
 
           .nav-entry {
@@ -148,7 +150,8 @@
           }
         }
 
-        &.left, &.right {
+        &.left,
+        &.right {
           border: 0;
           .nav-entry {
             text-align: left;
@@ -157,9 +160,10 @@
         }
       }
 
-      &.top, &.bottom {
+      &.top,
+      &.bottom {
         .nav-entry {
-          &:nth-child(n+5) {
+          &:nth-child(n + 5) {
             display: none;
           }
         }
@@ -261,13 +265,12 @@
         }
 
         .nav-text {
-
           .nav-title {
             margin: 0;
             font-size: 16px;
             line-height: 24px;
             font-family: $bold-font-family;
-            
+
             @media screen and (max-width: $breakpoint-sm) {
               text-align: left;
             }
@@ -282,7 +285,6 @@
               text-align: left;
             }
           }
-          
         }
 
         @media screen and (max-width: $breakpoint-sm) {
@@ -297,7 +299,7 @@
                   position: absolute;
                   display: block;
                   content: "";
-                  width: 0; 
+                  width: 0;
                   height: 0;
                   top: calc(50% - 10px);
                   left: -23px;
@@ -319,10 +321,13 @@
         border: 0 !important;
         margin: 0 !important;
 
-        &.top, &.left, &.right, &.bottom, {
+        &.top,
+        &.left,
+        &.right,
+        &.bottom {
           order: 2;
         }
-        
+
         .nav-entry {
           width: 100% !important;
           border: 0 !important;
@@ -331,7 +336,6 @@
           justify-content: flex-start !important;
           transform: translateX(0) !important;
 
-
           &.active {
             background-color: $dark-navy;
 
@@ -340,7 +344,6 @@
             }
           }
 
-
           &:not(:last-child) {
             margin-bottom: 10px !important;
           }
@@ -367,8 +370,8 @@
     }
 
     &.thumbnails {
-
-      &.top, &.bottom {
+      &.top,
+      &.bottom {
         .nav-entry {
           width: 25%;
           display: flex;
@@ -377,11 +380,14 @@
         }
       }
 
-      &.left, &.right {
+      &.left,
+      &.right {
         width: auto;
       }
 
-      &.left, &.right, &.bottom {
+      &.left,
+      &.right,
+      &.bottom {
         @media screen and (max-width: $breakpoint-sm) {
           padding-bottom: 24px;
 
@@ -470,21 +476,19 @@
       }
 
       &.round {
-
-        &.top, &.bottom {
-
+        &.top,
+        &.bottom {
           .nav-entry {
-            &:nth-child(n+5) {
+            &:nth-child(n + 5) {
               display: none;
             }
           }
         }
 
-
-
-        &.left, &.right {
+        &.left,
+        &.right {
           .nav-entry {
-            &:nth-child(n+5) {
+            &:nth-child(n + 5) {
               display: none;
             }
           }
@@ -543,12 +547,11 @@
               min-width: 45px;
             }
 
-
             &:before {
               position: absolute;
               display: block;
               content: "";
-              width: 0; 
+              width: 0;
               height: 0;
             }
 
@@ -564,8 +567,8 @@
       }
 
       &.square {
-
-        &.top, &.bottom {
+        &.top,
+        &.bottom {
           justify-content: center;
 
           .nav-entry {
@@ -573,13 +576,14 @@
               margin-right: 20px;
             }
 
-            &:nth-child(n+5) {
+            &:nth-child(n + 5) {
               display: none;
             }
           }
         }
 
-        &.left, &.right {
+        &.left,
+        &.right {
           @media screen and (min-width: $breakpoint-sm) {
             align-items: center;
 
@@ -609,7 +613,7 @@
           }
 
           .nav-entry {
-            &:nth-child(n+5) {
+            &:nth-child(n + 5) {
               display: none;
             }
           }
@@ -628,7 +632,7 @@
             align-items: flex-start;
           }
         }
-        
+
         .nav-entry {
           width: 126px;
           max-width: 126px;
@@ -643,25 +647,24 @@
           }
 
           @media screen and (max-width: $breakpoint-sm) {
-              padding: 5px;
-              width: 112px;
-              height: 112px;
-            }
+            padding: 5px;
+            width: 112px;
+            height: 112px;
+          }
 
-            @media screen and (max-width: $breakpoint-xs) {
-              max-width: 75px;
-              max-height: 75px;
-              min-width: 75px;
-            }
+          @media screen and (max-width: $breakpoint-xs) {
+            max-width: 75px;
+            max-height: 75px;
+            min-width: 75px;
+          }
 
-            @media screen and (max-width: $breakpoint-xxs) {
-              padding: 2px;
-              max-width: 45px;
-              max-height: 45px;
-              min-width: 45px;
-            }
+          @media screen and (max-width: $breakpoint-xxs) {
+            padding: 2px;
+            max-width: 45px;
+            max-height: 45px;
+            min-width: 45px;
+          }
 
-          
           .nav-thumbnail {
             position: relative;
             width: 100%;
@@ -673,7 +676,7 @@
               position: absolute;
               display: block;
               content: "";
-              width: 0; 
+              width: 0;
               height: 0;
             }
 
@@ -687,27 +690,39 @@
       }
 
       .nav-entry {
-
         .nav-text {
           display: none;
         }
       }
-      
     }
   }
 
   .content-entries {
     width: 100%;
     max-width: 100%;
+    overflow: hidden;
 
-    .ter-bounded-cards {
-      justify-items: center;
+    .ter-block-list-items {
+      margin: 0 auto;
+      max-width: 1120px !important;
     }
 
     .ter-bounded-card {
-      max-width: 275px;
+      flex: 1 1 0;
+      max-width: 250px;
+      min-width: 250px;
+
+      @media screen and (max-width: $breakpoint-md) {
+        min-width: 200px;
+        max-width: 100%;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        min-width: auto;
+        max-width: 100%;
+      }
     }
-    
+
     .content-entry {
       width: 100%;
       display: none;
@@ -717,31 +732,28 @@
       }
     }
     .nested-content .default-layout .default-layout__children {
-      grid-column: 1/span 16 !important;
+      grid-column: 1 / span 16 !important;
+      padding: 0 2px 0 2px;
     }
   }
 }
 
-
 .nav-text-top-mobile {
   padding-bottom: 16px;
   border-bottom: 3px solid $dark-navy;
 
   &__arrow {
-      margin: 0 30px 16px;
-      width: 10px;
-      border-left: 10px solid transparent !important;
-      border-right: 10px solid transparent !important;
-      border-top: 10px solid $dark-navy !important;
-    }
+    margin: 0 30px 16px;
+    width: 10px;
+    border-left: 10px solid transparent !important;
+    border-right: 10px solid transparent !important;
+    border-top: 10px solid $dark-navy !important;
+  }
 
   .nav-title {
     margin: 0 24px;
     font-size: 16px;
     line-height: 24px;
     font-family: $bold-font-family;
-  }  
+  }
 }
-
-
-

package/dist/luna/featurettes/ProductsPackage/ProductsPackage.js

@@ -149,7 +149,17 @@ var ProductsPackage = function ProductsPackage(_ref) {
     className: "mxp-products-package-container__left-section"
   }, productEyebrow && /*#__PURE__*/_react["default"].createElement("h1", {
     className: "mxp-products-package-container__left-section--eyebrow"
-  }, productEyebrow), (0, _ProductsPackageMethods.formatCards)(cards, width, heightOfTallestCard))));
+  }, productEyebrow), /*#__PURE__*/_react["default"].createElement("section", {
+    className: "mxp-products-package-container__left-section--card-container",
+    style: (cards === null || cards === void 0 ? void 0 : cards.length) > 3 && width >= "600" ? {
+      maxHeight: heightOfTallestCard,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      overflowY: "scroll"
+    } : {
+      maxHeight: heightOfTallestCard
+    }
+  }, (0, _ProductsPackageMethods.formatCards)(cards, width, heightOfTallestCard)))));
 };
 
 var _default = ProductsPackage;

package/dist/luna/featurettes/ProductsPackage/ProductsPackage.scss

@@ -6,7 +6,7 @@
   padding: 70px calc((100% - 1280px) / 2) 0;
   background: $concrete-gray-1;
 
-  @media screen and (max-width: $breakpoint-sm) {
+  @media screen and (max-width: 1100px) {
     padding-bottom: 64px;
     padding-top: 0;
   }
@@ -20,8 +20,8 @@
     grid-column: 2 / span 14;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    
-    @media screen and (max-width: $breakpoint-sm) {
+
+    @media screen and (max-width: 1100px) {
       grid-template-columns: 1fr;
       grid-template-rows: 480px 1fr;
     }
@@ -34,11 +34,11 @@
     @media screen and (max-width: 500px) {
       grid-template-rows: 550px 1fr;
     }
-    
+
     &__right-section {
       height: 100%;
       grid-column: 1 / span 1;
-      @media screen and (max-width: $breakpoint-sm) {
+      @media screen and (max-width: 1100px) {
         grid-row: 1 / span 1;
         grid-column: 1 / span 1;
         display: grid;
@@ -56,7 +56,7 @@
 
       &--text-area {
         max-width: 240px;
-        @media screen and (max-width: $breakpoint-sm) {
+        @media screen and (max-width: 1100px) {
           max-width: 358px;
           align-self: center;
         }
@@ -98,12 +98,11 @@
         margin-right: 16px;
         margin-top: 60px;
 
-        @media screen and (max-width: $breakpoint-sm) {
+        @media screen and (max-width: 1100px) {
           height: 480px;
           max-width: 420px !important;
           grid-column: 2 / span 1;
           margin: 0 0 0 20px;
-
         }
         @media screen and (max-width: $breakpoint-xs) {
           display: flex;
@@ -126,14 +125,14 @@
     &__left-section {
       height: 100%;
       grid-column: 2 / span 3;
-      padding-left: 35px;
-
+      padding-left: 5px;
 
-      @media screen and (max-width: $breakpoint-sm) {
+      @media screen and (max-width: 1100px) {
         grid-row: 2 / span 1;
         grid-column: 1 / span 1;
         padding-left: 0;
       }
+
       &--eyebrow {
         font-size: $eyebrow-font-size;
         line-height: 18px;
@@ -142,20 +141,24 @@
         @include benton-bold();
         margin-bottom: 20px;
 
-        @media screen and (max-width: $breakpoint-sm) {
+        @media screen and (max-width: 1100px) {
           margin-top: 34px;
         }
 
         @media screen and (max-width: $breakpoint-xs) {
           margin: 27px auto;
-
         }
       }
-      
+
       &--card-container {
         display: flex;
         flex-direction: row;
         scrollbar-gutter: stable;
+        min-width: 875px;
+
+        @media screen and (max-width: 1440px) {
+          min-width: auto;
+        }
 
         @media screen and (max-width: $breakpoint-xs) {
           flex-direction: column;
@@ -164,13 +167,20 @@
         }
 
         .ter-bounded-card {
-          max-width: 235px !important;
+          flex: 1 1 0;
+          max-width: 252px;
+          min-width: 252px;
+          margin: 0px 40px 20px 0px;
 
           &__body {
             background-color: $white;
           }
 
-          @media screen and (max-width: $breakpoint-sm) {
+          @media screen and (max-width: 1130px) {
+            margin: 0px 20px 10px 0px !important;
+            max-width: fit-content !important;
+          }
+          @media screen and (max-width: 1100px) {
             margin: 12px 24px 12px 0;
           }
 
@@ -179,8 +189,16 @@
             margin: 20px 0;
           }
 
+          @media screen and (max-width: $breakpoint-md) {
+            min-width: 200px;
+            max-width: 100%;
+          }
+
+          @media screen and (max-width: 1100px) {
+            max-width: 100%;
+          }
         }
       }
     }
   }
-}
+}

package/dist/luna/featurettes/ProductsPackage/ProductsPackageMethods.js

@@ -76,11 +76,15 @@ var formatCards = function formatCards(cards, width, height) {
   };
 
   if (typeof document !== "undefined") {
-    var prodCards = document.querySelectorAll(".ter-bounded-card");
+    var _document, _document$querySelect;
+
+    var ele = (_document = document) === null || _document === void 0 ? void 0 : (_document$querySelect = _document.querySelector(".mxp-products-package-container__left-section--card-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.querySelectorAll(".ter-bounded-card");
+    var prodCards = ele ? Array.prototype.slice.call(ele) : [];
 
     if ((prodCards === null || prodCards === void 0 ? void 0 : prodCards.length) > 3 && width > "600") {
       prodCards.forEach(function (card) {
-        card.style.margin = "0 20px 20px 0";
+        card.style.margin = "0 30px 15px 0";
+        card.style.minWidth = "250px !important";
       });
     } else if ((prodCards === null || prodCards === void 0 ? void 0 : prodCards.length) <= 3 && width > "600") {
       prodCards.forEach(function (card) {
@@ -93,17 +97,7 @@ var formatCards = function formatCards(cards, width, height) {
     }
   }
 
-  return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "mxp-products-package-container__left-section--card-container",
-    style: (cards === null || cards === void 0 ? void 0 : cards.length) > 3 && width >= "600" ? {
-      maxHeight: height,
-      flexDirection: "row",
-      flexWrap: "wrap",
-      overflowY: "scroll"
-    } : {
-      maxHeight: height
-    }
-  }, renderBoundedCards());
+  return renderBoundedCards();
 };
 
 exports.formatCards = formatCards;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.464",
+  "version": "3.1.465",
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",