@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/sub-category.scss

@@ -1,74 +1,74 @@
-@use "sass:map";
-@use "sass:list";
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-[data-div-type="element"] {
-  &[data-element-type="subCategory"] {
-    // width: var(--_sf-con-nw-wh);
-    width: var(
-      --_sf-mob-el-wh-st-mx,
-      var(
-        --_sf-tab-el-wh-st-mx,
-        var(
-          --_sf-el-wh-st-mx,
-          calc(
-            1% *
-              var(
-                --_ctm-mob-subc-ele-nw-wh-vl,
-                var(--_ctm-tab-subc-ele-nw-wh-vl, var(--_ctm-subc-ele-nw-wh-vl, var(--_sf-nw-wh)))
-              )
-          )
-        )
-      )
-    );
-
-    margin: var(--_ctm-mob-subc-lt-mn, var(--_ctm-tab-subc-lt-mn, var(--_ctm-subc-lt-mn)));
-
-    background-color: var(
-      --_ctm-mob-subc-dn-bd-cr,
-      var(--_ctm-tab-subc-dn-bd-cr, var(--_ctm-subc-dn-bd-cr))
-    );
-
-    padding: var(--_ctm-mob-subc-lt-pg, var(--_ctm-tab-subc-lt-pg, var(--_ctm-subc-lt-pg)));
-
-    border-color: var(
-      --_ctm-mob-subc-dn-br-cr,
-      var(--_ctm-tab-subc-dn-br-cr, var(--_ctm-subc-dn-br-cr))
-    );
-
-    border-style: var(
-      --_ctm-mob-subc-dn-br-se,
-      var(--_ctm-tab-subc-dn-br-se, var(--_ctm-subc-dn-br-se))
-    );
-
-    border-width: var(
-      --_ctm-mob-subc-dn-br-wh,
-      var(--_ctm-tab-subc-dn-br-wh, var(--_ctm-subc-dn-br-wh))
-    );
-
-    border-radius: var(
-      --_ctm-mob-subc-dn-br-rs,
-      var(--_ctm-tab-subc-dn-br-rs, var(--_ctm-subc-dn-br-rs))
-    );
-
-    box-shadow: var(
-      --_show-shadow,
-      var(--_ctm-mob-subc-dn-sw-ae, var(--_ctm-tab-subc-dn-sw-ae, var(--_ctm-subc-dn-sw-ae)))
-        var(--_ctm-mob-subc-dn-sw-br, var(--_ctm-tab-subc-dn-sw-br, var(--_ctm-subc-dn-sw-br)))
-        var(--_ctm-mob-subc-dn-sw-sd, var(--_ctm-tab-subc-dn-sw-sd, var(--_ctm-subc-dn-sw-sd)))
-        var(--_ctm-mob-subc-dn-sw-cr, var(--_ctm-tab-subc-dn-sw-cr, var(--_ctm-subc-dn-sw-cr)))
-    );
-
-    // &:not(:has(#{$resizerId}#{$resizeActive})) {
-    //   min-height: 100px !important;
-    // }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        // grid-template-rows: max(var(--_ctm-subc-lt-ht), auto) !important;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="subCategory"] {
+    // width: var(--_sf-con-nw-wh);
+    width: var(
+      --_sf-mob-el-wh-st-mx,
+      var(
+        --_sf-tab-el-wh-st-mx,
+        var(
+          --_sf-el-wh-st-mx,
+          calc(
+            1% *
+              var(
+                --_ctm-mob-subc-ele-nw-wh-vl,
+                var(--_ctm-tab-subc-ele-nw-wh-vl, var(--_ctm-subc-ele-nw-wh-vl, var(--_sf-nw-wh)))
+              )
+          )
+        )
+      )
+    );
+
+    margin: var(--_ctm-mob-subc-lt-mn, var(--_ctm-tab-subc-lt-mn, var(--_ctm-subc-lt-mn)));
+
+    background-color: var(
+      --_ctm-mob-subc-dn-bd-cr,
+      var(--_ctm-tab-subc-dn-bd-cr, var(--_ctm-subc-dn-bd-cr))
+    );
+
+    padding: var(--_ctm-mob-subc-lt-pg, var(--_ctm-tab-subc-lt-pg, var(--_ctm-subc-lt-pg)));
+
+    border-color: var(
+      --_ctm-mob-subc-dn-br-cr,
+      var(--_ctm-tab-subc-dn-br-cr, var(--_ctm-subc-dn-br-cr))
+    );
+
+    border-style: var(
+      --_ctm-mob-subc-dn-br-se,
+      var(--_ctm-tab-subc-dn-br-se, var(--_ctm-subc-dn-br-se))
+    );
+
+    border-width: var(
+      --_ctm-mob-subc-dn-br-wh,
+      var(--_ctm-tab-subc-dn-br-wh, var(--_ctm-subc-dn-br-wh))
+    );
+
+    border-radius: var(
+      --_ctm-mob-subc-dn-br-rs,
+      var(--_ctm-tab-subc-dn-br-rs, var(--_ctm-subc-dn-br-rs))
+    );
+
+    box-shadow: var(
+      --_show-shadow,
+      var(--_ctm-mob-subc-dn-sw-ae, var(--_ctm-tab-subc-dn-sw-ae, var(--_ctm-subc-dn-sw-ae)))
+        var(--_ctm-mob-subc-dn-sw-br, var(--_ctm-tab-subc-dn-sw-br, var(--_ctm-subc-dn-sw-br)))
+        var(--_ctm-mob-subc-dn-sw-sd, var(--_ctm-tab-subc-dn-sw-sd, var(--_ctm-subc-dn-sw-sd)))
+        var(--_ctm-mob-subc-dn-sw-cr, var(--_ctm-tab-subc-dn-sw-cr, var(--_ctm-subc-dn-sw-cr)))
+    );
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        // grid-template-rows: max(var(--_ctm-subc-lt-ht), auto) !important;
+      }
+    }
+  }
+}

package/dist/submit-quote.scss

@@ -1,275 +1,275 @@
-.submit-quote-main {
-  display: flex;
-  gap: 60px;
-  padding: 24px;
-
-  .quote-items {
-    flex: 2;
-  }
-
-  .quote-item {
-    // padding: 32px 0;
-    display: flex;
-    gap: 24px;
-    &:not(:last-child) {
-      border-bottom: 1px dotted var(--_gray-400);
-    }
-    &:not(:last-child) {
-      padding-bottom: 12px;
-    }
-    &:not(:first-child) {
-      padding-top: 12px;
-    }
-
-    .quote-item__image {
-      width: 120px;
-      height: 120px;
-      object-fit: cover;
-      border-radius: 4px;
-      background-color: #f0f0f0;
-    }
-
-    .quote-item__details {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .quote-item__header {
-        margin-bottom: 16px;
-        padding-bottom: 16px;
-        border-bottom: 1px dotted #d0d0d0;
-
-        .quote-item__title {
-          font-size: 16px;
-          font-weight: 600;
-          color: #111;
-        }
-
-        .quote-item__meta {
-          display: flex;
-          gap: 10px;
-          font-size: 14px;
-          color: var(--_gray-500);
-        }
-      }
-
-      .quote-item__row {
-        display: flex;
-        gap: 16px;
-        align-items: flex-start;
-
-        .field {
-          display: flex;
-          flex-direction: column;
-          font-size: 14px;
-          &.price_column {
-            padding-right: 40px;
-          }
-
-          label {
-            margin-bottom: 6px;
-            font-weight: 500;
-            color: #333;
-          }
-
-          .value {
-            font-weight: 600;
-            font-size: 16px;
-            color: #111;
-          }
-
-          input {
-            height: 40px;
-            padding: 8px 12px;
-            font-size: 15px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            outline: none;
-            width: 130px;
-
-            &:focus {
-              border-color: #2563eb;
-              box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
-            }
-          }
-
-          .input-with-prefix {
-            display: flex;
-            align-items: center;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            overflow: hidden;
-            width: 130px;
-            height: 40px;
-            &:focus-within {
-              border: 1px solid var(--_primary-300);
-              outline: 2px solid var(--_primary-100);
-            }
-
-            span {
-              padding: 0 8px;
-              font-size: 15px;
-              color: var(--_gray-500);
-              display: flex;
-              align-items: center;
-            }
-
-            input {
-              border: none;
-              width: 100%;
-              height: 100%;
-              padding-left: 6px;
-              &:focus {
-                box-shadow: none;
-                outline: none;
-              }
-            }
-          }
-        }
-
-        .quote-item__totals {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-          text-align: right;
-          margin-left: auto;
-          min-width: 180px;
-
-          .quote-total {
-            display: flex;
-            flex-direction: column;
-
-            > div {
-              display: flex;
-              justify-content: flex-end;
-              align-items: baseline;
-              gap: 4px;
-
-              .label {
-                font-size: 14px;
-                color: #444;
-              }
-
-              .amount {
-                font-size: 18px;
-                font-weight: 700;
-                color: #111;
-              }
-            }
-
-            small {
-              font-size: 13px;
-              color: #888;
-              margin-top: 4px;
-            }
-
-            &.discounted {
-              .label {
-                color: #198754;
-              }
-
-              .amount {
-                color: #198754;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .quote-summary {
-    background: #f8f9fa;
-    border: 1px solid var(--_gray-300);
-    border-radius: 4px;
-    width: 100%;
-    max-width: 400px;
-    overflow: hidden;
-    height: fit-content;
-    position: sticky;
-    top: 10px;
-
-    &__row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px 0;
-      border-bottom: 1px dotted #ccc;
-
-      .label {
-        font-size: 14px;
-        color: #666;
-      }
-
-      .value {
-        font-size: 16px;
-        font-weight: 500;
-        color: #333;
-
-        &.highlight {
-          font-size: 20px;
-          font-weight: 700;
-          color: #000;
-        }
-      }
-
-      &--quoted {
-        margin-bottom: 20px;
-      }
-      .label-quote {
-        font-weight: 600;
-      }
-    }
-
-    &__notes {
-      width: 100%;
-      height: 100px;
-      padding: 12px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      resize: none;
-      font-size: 14px;
-      font-family: inherit;
-      margin-bottom: 20px;
-      box-sizing: border-box;
-      margin-top: 6px;
-
-      &::placeholder {
-        color: #999;
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--_primary-500);
-      }
-    }
-
-    &__button {
-      width: 100%;
-      padding: 14px;
-      background-color: var(--_primary-400);
-      color: var(--_base-white);
-      font-size: 16px;
-      font-weight: 600;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: var(--_primary-500);
-      }
-    }
-    & > h3 {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--_gray-900);
-      background-color: #f5f5f5;
-      padding: 12px;
-      border-bottom: 1px solid var(--_gray-300);
-    }
-    .quote-summary-body {
-      padding: 0px 16px 16px 16px;
-    }
-  }
-}
+.submit-quote-main {
+  display: flex;
+  gap: 60px;
+  padding: 24px;
+
+  .quote-items {
+    flex: 2;
+  }
+
+  .quote-item {
+    // padding: 32px 0;
+    display: flex;
+    gap: 24px;
+    &:not(:last-child) {
+      border-bottom: 1px dotted var(--_gray-400);
+    }
+    &:not(:last-child) {
+      padding-bottom: 12px;
+    }
+    &:not(:first-child) {
+      padding-top: 12px;
+    }
+
+    .quote-item__image {
+      width: 120px;
+      height: 120px;
+      object-fit: cover;
+      border-radius: 4px;
+      background-color: #f0f0f0;
+    }
+
+    .quote-item__details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .quote-item__header {
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px dotted #d0d0d0;
+
+        .quote-item__title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #111;
+        }
+
+        .quote-item__meta {
+          display: flex;
+          gap: 10px;
+          font-size: 14px;
+          color: var(--_gray-500);
+        }
+      }
+
+      .quote-item__row {
+        display: flex;
+        gap: 16px;
+        align-items: flex-start;
+
+        .field {
+          display: flex;
+          flex-direction: column;
+          font-size: 14px;
+          &.price_column {
+            padding-right: 40px;
+          }
+
+          label {
+            margin-bottom: 6px;
+            font-weight: 500;
+            color: #333;
+          }
+
+          .value {
+            font-weight: 600;
+            font-size: 16px;
+            color: #111;
+          }
+
+          input {
+            height: 40px;
+            padding: 8px 12px;
+            font-size: 15px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            outline: none;
+            width: 130px;
+
+            &:focus {
+              border-color: #2563eb;
+              box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+            }
+          }
+
+          .input-with-prefix {
+            display: flex;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            overflow: hidden;
+            width: 130px;
+            height: 40px;
+            &:focus-within {
+              border: 1px solid var(--_primary-300);
+              outline: 2px solid var(--_primary-100);
+            }
+
+            span {
+              padding: 0 8px;
+              font-size: 15px;
+              color: var(--_gray-500);
+              display: flex;
+              align-items: center;
+            }
+
+            input {
+              border: none;
+              width: 100%;
+              height: 100%;
+              padding-left: 6px;
+              &:focus {
+                box-shadow: none;
+                outline: none;
+              }
+            }
+          }
+        }
+
+        .quote-item__totals {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          text-align: right;
+          margin-left: auto;
+          min-width: 180px;
+
+          .quote-total {
+            display: flex;
+            flex-direction: column;
+
+            > div {
+              display: flex;
+              justify-content: flex-end;
+              align-items: baseline;
+              gap: 4px;
+
+              .label {
+                font-size: 14px;
+                color: #444;
+              }
+
+              .amount {
+                font-size: 18px;
+                font-weight: 700;
+                color: #111;
+              }
+            }
+
+            small {
+              font-size: 13px;
+              color: #888;
+              margin-top: 4px;
+            }
+
+            &.discounted {
+              .label {
+                color: #198754;
+              }
+
+              .amount {
+                color: #198754;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .quote-summary {
+    background: #f8f9fa;
+    border: 1px solid var(--_gray-300);
+    border-radius: 4px;
+    width: 100%;
+    max-width: 400px;
+    overflow: hidden;
+    height: fit-content;
+    position: sticky;
+    top: 10px;
+
+    &__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px dotted #ccc;
+
+      .label {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .value {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+
+        &.highlight {
+          font-size: 20px;
+          font-weight: 700;
+          color: #000;
+        }
+      }
+
+      &--quoted {
+        margin-bottom: 20px;
+      }
+      .label-quote {
+        font-weight: 600;
+      }
+    }
+
+    &__notes {
+      width: 100%;
+      height: 100px;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      resize: none;
+      font-size: 14px;
+      font-family: inherit;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      margin-top: 6px;
+
+      &::placeholder {
+        color: #999;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--_primary-500);
+      }
+    }
+
+    &__button {
+      width: 100%;
+      padding: 14px;
+      background-color: var(--_primary-400);
+      color: var(--_base-white);
+      font-size: 16px;
+      font-weight: 600;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: var(--_primary-500);
+      }
+    }
+    & > h3 {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--_gray-900);
+      background-color: #f5f5f5;
+      padding: 12px;
+      border-bottom: 1px solid var(--_gray-300);
+    }
+    .quote-summary-body {
+      padding: 0px 16px 16px 16px;
+    }
+  }
+}