@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

package/dist/icon-list.scss

@@ -1,268 +1,268 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$item: "flex__icon_list_item";
-$icon: "flex__ili_span_icn";
-$text: "flex__ili_span_txt";
-$textContaner: "flex__ili__container";
-$desc: "flex__ili__description";
-$pos2: (
-  hrz: (
-    keys: (
-      0: inline,
-      after: (
-        top: 0,
-        right: 0,
-        height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
-        width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
-      ),
-    ),
-    after: (
-      start: (
-        top: 0px,
-      ),
-      center: (
-        top: 50%,
-        transform: translateY(-50%),
-      ),
-      end: (
-        top: auto,
-        bottom: 0,
-      ),
-    ),
-  ),
-  vtl: (
-    keys: (
-      0: block,
-      after: (
-        bottom: 0,
-        left: 0,
-        width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
-        height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
-      ),
-    ),
-    after: (
-      start: (
-        left: 0px,
-      ),
-      center: (
-        left: 50%,
-        transform: translateX(-50%),
-      ),
-      end: (
-        left: auto,
-        right: 0,
-      ),
-    ),
-  ),
-);
-[data-div-type="element"] {
-  &[data-element-type="icon-list"] {
-    & > .wrapper {
-      width: 100%;
-      gap: prepareMediaVariable(--_ctm-lt-im-gp);
-      padding: prepareMediaVariable(--_ctm-lt-pg);
-      display: var(--_d-flex) !important;
-
-      &.hrz {
-        flex-direction: row;
-        // justify-content: space-between;
-        align-items: prepareMediaVariable(--_ctm-lt-an-is);
-      }
-      &.vtl {
-        flex-direction: column;
-        justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
-      }
-
-      &[data-show-border="true"] {
-        border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
-        border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
-        border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
-      }
-      border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
-      background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
-
-      &[data-show-boxshadow="true"] {
-        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
-          prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
-          prepareMediaVariable(--_ctm-dn-lt-sw-cr);
-      }
-
-      &[data-show-divider="true"] {
-        & > .#{$item} {
-          &:not(:last-of-type) {
-            position: var(--_p-relative);
-
-            @each $key, $value in $pos2 {
-              $isVertical: $key == vtl;
-              $keys: map.get($value, keys);
-              $afterKeys: map.get($keys, after);
-              $afterPos: map.get($value, after);
-
-              &:is(.#{$key} > *) {
-                padding-#{map.get($keys, 0)}-end: calc(
-                  #{prepareMediaVariable(--_ctm-lt-im-gp)} +
-                    #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
-                );
-
-                @each $k, $v in $afterKeys {
-                  &::after {
-                    #{$k}: #{$v};
-                  }
-                }
-
-                @each $key1, $value1 in $afterPos {
-                  &:is([data-show-pos1="#{$key1}"] > *) {
-                    &::after {
-                      @each $k, $v in $value1 {
-                        #{$k}: #{$v};
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            &::after {
-              content: "";
-              position: var(--_p-absolute);
-              background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
-              border-radius: prepareMediaVariable(--_ctm-dn-lt-dr-br-rs);
-            }
-          }
-        }
-      }
-
-      & > div {
-        &.#{$item} {
-          display: var(--_d-flex);
-          gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp));
-
-          &:hover {
-            --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp)};
-            --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
-            --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
-            --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};
-
-            --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
-            --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
-            --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
-            --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
-            --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
-            --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
-            --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
-            --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
-            --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
-          }
-
-          & > span {
-            &.#{$icon} {
-              display: var(--_d-flex);
-              align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
-
-              & > svg {
-                width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
-                height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
-
-                path {
-                  stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
-                }
-              }
-            }
-          }
-
-          & > div {
-            &.#{$textContaner} {
-              display: var(--_d-flex);
-              flex-grow: 1;
-              flex-direction: column;
-              align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
-              padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
-              row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
-              &[data-show-divider="true"] {
-                // margin-inline-start: calc(
-                //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
-                //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
-                // );
-                margin-inline-start: calc(
-                  var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp)) +
-                    var(
-                      --_ctm-mob-dn-tt-cr-dr-wt,
-                      var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                    )
-                );
-                position: relative;
-                @each $key, $value in map.get(map.get($pos2, hrz), after) {
-                  &[data-divider-pos="#{$key}"] {
-                    &::before {
-                      @each $key1, $value1 in $value {
-                        #{$key1}: #{$value1};
-                      }
-                    }
-                  }
-                }
-                &::before {
-                  content: "";
-                  background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
-                  position: absolute;
-                  // left: calc(
-                  //   -1 *
-                  //     calc(
-                  //       #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
-                  //         #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
-                  //     )
-                  // );
-                  left: calc(
-                    calc(
-                        -1 *
-                          var(
-                            --_ctm-mob-dn-tt-cr-dr-wt,
-                            var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                          )
-                      ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp))
-                  );
-                  width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
-                  height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
-                  border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
-                }
-              }
-              & > .#{$text} {
-                &,
-                * {
-                  font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
-                  font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
-                  color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
-                  font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
-                  text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
-                  font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
-                  text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
-                  letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
-                  line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
-                }
-              }
-
-              & > .#{$desc} {
-                &,
-                * {
-                  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
-                  font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
-                  color: prepareMediaVariable(--_ctm-dn-dn-cr);
-                  font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
-                  text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
-                  font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
-                  text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
-                  letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
-                  line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
-                }
-              }
-              a {
-                color: inherit;
-                text-decoration: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$item: "flex__icon_list_item";
+$icon: "flex__ili_span_icn";
+$text: "flex__ili_span_txt";
+$textContaner: "flex__ili__container";
+$desc: "flex__ili__description";
+$pos2: (
+  hrz: (
+    keys: (
+      0: inline,
+      after: (
+        top: 0,
+        right: 0,
+        height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
+        width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
+      ),
+    ),
+    after: (
+      start: (
+        top: 0px,
+      ),
+      center: (
+        top: 50%,
+        transform: translateY(-50%),
+      ),
+      end: (
+        top: auto,
+        bottom: 0,
+      ),
+    ),
+  ),
+  vtl: (
+    keys: (
+      0: block,
+      after: (
+        bottom: 0,
+        left: 0,
+        width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
+        height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
+      ),
+    ),
+    after: (
+      start: (
+        left: 0px,
+      ),
+      center: (
+        left: 50%,
+        transform: translateX(-50%),
+      ),
+      end: (
+        left: auto,
+        right: 0,
+      ),
+    ),
+  ),
+);
+[data-div-type="element"] {
+  &[data-element-type="icon-list"] {
+    & > .wrapper {
+      width: 100%;
+      gap: prepareMediaVariable(--_ctm-lt-im-gp);
+      padding: prepareMediaVariable(--_ctm-lt-pg);
+      display: var(--_d-flex) !important;
+
+      &.hrz {
+        flex-direction: row;
+        // justify-content: space-between;
+        align-items: prepareMediaVariable(--_ctm-lt-an-is);
+      }
+      &.vtl {
+        flex-direction: column;
+        justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
+      }
+
+      &[data-show-border="true"] {
+        border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
+      }
+      border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
+      background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
+
+      &[data-show-boxshadow="true"] {
+        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
+          prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
+          prepareMediaVariable(--_ctm-dn-lt-sw-cr);
+      }
+
+      &[data-show-divider="true"] {
+        & > .#{$item} {
+          &:not(:last-of-type) {
+            position: var(--_p-relative);
+
+            @each $key, $value in $pos2 {
+              $isVertical: $key == vtl;
+              $keys: map.get($value, keys);
+              $afterKeys: map.get($keys, after);
+              $afterPos: map.get($value, after);
+
+              &:is(.#{$key} > *) {
+                padding-#{map.get($keys, 0)}-end: calc(
+                  #{prepareMediaVariable(--_ctm-lt-im-gp)} +
+                    #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
+                );
+
+                @each $k, $v in $afterKeys {
+                  &::after {
+                    #{$k}: #{$v};
+                  }
+                }
+
+                @each $key1, $value1 in $afterPos {
+                  &:is([data-show-pos1="#{$key1}"] > *) {
+                    &::after {
+                      @each $k, $v in $value1 {
+                        #{$k}: #{$v};
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            &::after {
+              content: "";
+              position: var(--_p-absolute);
+              background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
+              border-radius: prepareMediaVariable(--_ctm-dn-lt-dr-br-rs);
+            }
+          }
+        }
+      }
+
+      & > div {
+        &.#{$item} {
+          display: var(--_d-flex);
+          gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp));
+
+          &:hover {
+            --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp)};
+            --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
+            --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
+            --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};
+
+            --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
+            --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
+            --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
+            --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
+            --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
+            --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
+            --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
+            --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
+            --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
+          }
+
+          & > span {
+            &.#{$icon} {
+              display: var(--_d-flex);
+              align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
+
+              & > svg {
+                width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
+                height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
+
+                path {
+                  stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
+                }
+              }
+            }
+          }
+
+          & > div {
+            &.#{$textContaner} {
+              display: var(--_d-flex);
+              flex-grow: 1;
+              flex-direction: column;
+              align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
+              padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
+              row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
+              &[data-show-divider="true"] {
+                // margin-inline-start: calc(
+                //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
+                //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
+                // );
+                margin-inline-start: calc(
+                  var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp)) +
+                    var(
+                      --_ctm-mob-dn-tt-cr-dr-wt,
+                      var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
+                    )
+                );
+                position: relative;
+                @each $key, $value in map.get(map.get($pos2, hrz), after) {
+                  &[data-divider-pos="#{$key}"] {
+                    &::before {
+                      @each $key1, $value1 in $value {
+                        #{$key1}: #{$value1};
+                      }
+                    }
+                  }
+                }
+                &::before {
+                  content: "";
+                  background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
+                  position: absolute;
+                  // left: calc(
+                  //   -1 *
+                  //     calc(
+                  //       #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
+                  //         #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
+                  //     )
+                  // );
+                  left: calc(
+                    calc(
+                        -1 *
+                          var(
+                            --_ctm-mob-dn-tt-cr-dr-wt,
+                            var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
+                          )
+                      ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp))
+                  );
+                  width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
+                  height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
+                  border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
+                }
+              }
+              & > .#{$text} {
+                &,
+                * {
+                  font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
+                  font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
+                  color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
+                  font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
+                  text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
+                  font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
+                  text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
+                  letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
+                  line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
+                }
+              }
+
+              & > .#{$desc} {
+                &,
+                * {
+                  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
+                  font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
+                  color: prepareMediaVariable(--_ctm-dn-dn-cr);
+                  font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
+                  text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
+                  font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
+                  text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
+                  letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
+                  line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
+                }
+              }
+              a {
+                color: inherit;
+                text-decoration: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/image-for-product.scss

@@ -1,21 +1,21 @@
-.product_img {
-  // background-color: var(--_base-white);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // border: 1px solid var(--_gray-200);
-  overflow: hidden;
-  img {
-    max-height: 100%;
-    object-fit: contain;
-    // padding: 4px;
-  }
-  .no_image {
-    padding: 16px;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
+.product_img {
+  // background-color: var(--_base-white);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid var(--_gray-200);
+  overflow: hidden;
+  img {
+    max-height: 100%;
+    object-fit: contain;
+    // padding: 4px;
+  }
+  .no_image {
+    padding: 16px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}