@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.58

package/dist/global-styles.scss

@@ -1,86 +1,86 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-.custom-upload {
-  display: flex;
-  &:has(.preview_image_container) {
-    justify-content: space-between;
-  }
-  align-items: center;
-  border: 1px solid var(--_gray-300);
-  background-color: var(--_base-white);
-  padding: 16px;
-  border-radius: 4px;
-  gap: 12px;
-  .preview_image_container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    .image_title {
-      font-size: 14px;
-      margin-top: 3px;
-      .label {
-        color: var(--_thm-cs-at-sy);
-        @include restrictToLinesShow(1);
-      }
-    }
-    .preview_image {
-      height: 36px;
-      width: 36px;
-      border-radius: 50%;
-      padding: 4px;
-      background: var(--_base-white);
-      border: 1px solid var(--_gray-300);
-      img {
-        width: 100%;
-        width: 100%;
-        object-fit: contain;
-      }
-    }
-  }
-  .clear_upload_icon {
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-  .uploadicon {
-    padding: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--_gray-200);
-    outline: 6px solid var(--_gray-100);
-    border-radius: 50%;
-    height: 36px;
-    width: 36px;
-    .svg_icon {
-      svg {
-        width: 20px;
-        height: 20px;
-        path {
-          stroke: var(--_gray-700);
-        }
-      }
-    }
-  }
-
-  .file_upload_text {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    .label {
-      @include restrictToLinesShow(1);
-    }
-    p {
-      color: var(--_thm-cs-at-py);
-      font-weight: 600;
-    }
-    span {
-      color: var(--_thm-cs-at-sy);
-      font-size: 14px;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+.custom-upload {
+  display: flex;
+  &:has(.preview_image_container) {
+    justify-content: space-between;
+  }
+  align-items: center;
+  border: 1px solid var(--_gray-300);
+  background-color: var(--_base-white);
+  padding: 16px;
+  border-radius: 4px;
+  gap: 12px;
+  .preview_image_container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    .image_title {
+      font-size: 14px;
+      margin-top: 3px;
+      .label {
+        color: var(--_thm-cs-at-sy);
+        @include restrictToLinesShow(1);
+      }
+    }
+    .preview_image {
+      height: 36px;
+      width: 36px;
+      border-radius: 50%;
+      padding: 4px;
+      background: var(--_base-white);
+      border: 1px solid var(--_gray-300);
+      img {
+        width: 100%;
+        width: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+  .clear_upload_icon {
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+  .uploadicon {
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--_gray-200);
+    outline: 6px solid var(--_gray-100);
+    border-radius: 50%;
+    height: 36px;
+    width: 36px;
+    .svg_icon {
+      svg {
+        width: 20px;
+        height: 20px;
+        path {
+          stroke: var(--_gray-700);
+        }
+      }
+    }
+  }
+
+  .file_upload_text {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .label {
+      @include restrictToLinesShow(1);
+    }
+    p {
+      color: var(--_thm-cs-at-py);
+      font-weight: 600;
+    }
+    span {
+      color: var(--_thm-cs-at-sy);
+      font-size: 14px;
+    }
+  }
+}

package/dist/grid.scss

@@ -1,119 +1,119 @@
-$activeElementSelector: "[data-has-clicked='true']";
-$elementSelector: "[data-div-type='element']";
-
-@use "./functions.scss" as *;
-
-$flex: "flx";
-$grid: "grd";
-$flexRow: "rw";
-$flexRowReverse: "rw-rv";
-$flexColumn: "cln";
-$flexColumnReverse: "cln-rv";
-[data-div-type="grid"] {
-  position: var(--_p-relative);
-  display: var(--_d-grid);
-  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-  // height: 100% !important;
-  box-shadow: var(
-    --_hide-grid-shadow,
-    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
-      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
-  );
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
-  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-
-  &[data-show-shadow="false"] {
-    --_hide-grid-shadow: none;
-  }
-  &[data-show-border="false"] {
-    --_hide-grid-border: none;
-  }
-
-  &:is(#{$activeElementSelector}) {
-    &:has(#{$activeElementSelector}#{$elementSelector}) {
-      & > div {
-        &[data-type="wrapper-layer"] {
-          --_sf-gri-wl-vt: visible;
-          --_sf-gri-wl-op: 1;
-          --_sf-gri-wl-dp: block;
-          --_sf-gri-wl-bw: 1px;
-          z-index: 2;
-        }
-      }
-    }
-  }
-
-  & > div {
-    &[data-type="wrapper-layer"] {
-      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
-      pointer-events: none;
-      visibility: var(--_sf-gri-wl-vt, hidden) !important;
-      opacity: var(--_sf-gri-wl-op, 0) !important;
-      position: var(--_p-absolute) !important;
-      inset: 0 0 0 0;
-      --_sf-pr-wr-ly-br-cl: 25%;
-      border: var(--_sf-gri-wl-bw) solid
-        color-mix(
-          in srgb,
-          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
-          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
-        );
-    }
-    &[data-div-type="cms-grid-wrapper"] {
-      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
-      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-      width: 100%;
-      grid-area: 1/1/2/2 !important;
-      height: 100%;
-      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-      display: var(--_d-grid);
-      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
-      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
-      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
-      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
-
-      &:is(.#{$flex} > *) {
-        display: var(--_d-flex) !important;
-        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
-        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
-        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
-
-        &.#{$flexRow} {
-          flex-direction: row;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexRowReverse} {
-          flex-direction: row-reverse;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumn} {
-          flex-direction: column;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumnReverse} {
-          flex-direction: column-reverse;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-      }
-    }
-  }
-}
+$activeElementSelector: "[data-has-clicked='true']";
+$elementSelector: "[data-div-type='element']";
+
+@use "./functions.scss" as *;
+
+$flex: "flx";
+$grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
+[data-div-type="grid"] {
+  position: var(--_p-relative);
+  display: var(--_d-grid);
+  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+  // height: 100% !important;
+  box-shadow: var(
+    --_hide-grid-shadow,
+    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
+      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
+  );
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
+  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+
+  &[data-show-shadow="false"] {
+    --_hide-grid-shadow: none;
+  }
+  &[data-show-border="false"] {
+    --_hide-grid-border: none;
+  }
+
+  &:is(#{$activeElementSelector}) {
+    &:has(#{$activeElementSelector}#{$elementSelector}) {
+      & > div {
+        &[data-type="wrapper-layer"] {
+          --_sf-gri-wl-vt: visible;
+          --_sf-gri-wl-op: 1;
+          --_sf-gri-wl-dp: block;
+          --_sf-gri-wl-bw: 1px;
+          z-index: 2;
+        }
+      }
+    }
+  }
+
+  & > div {
+    &[data-type="wrapper-layer"] {
+      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
+      pointer-events: none;
+      visibility: var(--_sf-gri-wl-vt, hidden) !important;
+      opacity: var(--_sf-gri-wl-op, 0) !important;
+      position: var(--_p-absolute) !important;
+      inset: 0 0 0 0;
+      --_sf-pr-wr-ly-br-cl: 25%;
+      border: var(--_sf-gri-wl-bw) solid
+        color-mix(
+          in srgb,
+          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
+          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
+        );
+    }
+    &[data-div-type="cms-grid-wrapper"] {
+      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
+      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+      width: 100%;
+      grid-area: 1/1/2/2 !important;
+      height: 100%;
+      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+      display: var(--_d-grid);
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
+      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
+
+      &:is(.#{$flex} > *) {
+        display: var(--_d-flex) !important;
+        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
+        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
+        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
+
+        &.#{$flexRow} {
+          flex-direction: row;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexRowReverse} {
+          flex-direction: row-reverse;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumn} {
+          flex-direction: column;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumnReverse} {
+          flex-direction: column-reverse;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+      }
+    }
+  }
+}