@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.96

package/dist/grid.scss

@@ -1,3 +1,5 @@
+$activeElementSelector: "[data-has-clicked='true']";
+$elementSelector: "[data-div-type='element']";
 [data-div-type="grid"] {
   position: var(--_p-relative);
   box-shadow: var(
@@ -13,13 +15,29 @@
   &[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(--_d-none) !important;
+      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
       pointer-events: none;
-      visibility: hidden !important;
+      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;
+      border: var(--_sf-gri-wl-bw) solid var(--_accent-color-2-500);
     }
     &[data-div-type="cms-grid-wrapper"] {
       padding: var(--_ctm-gri-lt-pg);

package/dist/image-temp.scss

@@ -13,7 +13,7 @@
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     --_aspect-ratio: calc(
       1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     );

package/dist/menu.scss

@@ -0,0 +1,89 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="menu"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: 50%;
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: var(--_ctm-lt-wh);
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
+    // height: var(--_ctm-lt-ht);
+    // height: ;
+    // height: auto;
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    // &[data-element-sub-child="true"] {
+    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
+    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // }
+
+    & > .wrapper {
+      // width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .menu__element {
+      background-color: var(--_ctm-dn-mu-cr-bd-cr, var(--_tst-dn-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+      // height: 100%;
+      border-color: var(--_ctm-dn-mu-cr-br-cr, var(--_tst-dn-br-cr));
+      border-style: var(--_ctm-dn-mu-cr-br-se, var(--_tst-dn-br-se));
+      border-width: var(--_ctm-dn-mu-cr-br-wh, var(--_tst-dn-br-wh));
+      border-radius: var(--_ctm-dn-mu-cr-br-rs, var(--_tst-dn-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-mu-cr-sw-ae, var(--_tst-dn-sw-ae))
+          var(--_ctm-dn-mu-cr-sw-br, var(--_tst-dn-sw-br))
+          var(--_ctm-dn-mu-cr-sw-sd, var(--_tst-dn-sw-sd))
+          var(--_ctm-dn-mu-cr-sw-cr, var(--_tst-dn-sw-cr))
+      );
+
+      gap: var(--_ctm-lt-sg-bn-mu-lt-is);
+      .menu__item {
+        background-color: var(--_ctm-dn-mu-im-se-bd-cr, var(--_tst-dn-bd-cr));
+
+        width: 100%;
+        // height: 100%;
+        border-color: var(--_ctm-dn-mu-im-se-br-cr, var(--_tst-dn-br-cr));
+        border-style: var(--_ctm-dn-mu-im-se-br-se, var(--_tst-dn-br-se));
+        border-width: var(--_ctm-dn-mu-im-se-br-wh, var(--_tst-dn-br-wh));
+        border-radius: var(--_ctm-dn-mu-im-se-br-rs, var(--_tst-dn-br-rs));
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-mu-im-se-sw-ae, var(--_tst-dn-sw-ae))
+            var(--_ctm-dn-mu-im-se-sw-br, var(--_tst-dn-sw-br))
+            var(--_ctm-dn-mu-im-se-sw-sd, var(--_tst-dn-sw-sd))
+            var(--_ctm-dn-mu-im-se-sw-cr, var(--_tst-dn-sw-cr))
+        );
+        & button {
+          color: var(--_ctm-dn-mu-im-se-cr, var(--_tst-dn-mu-im-se-cr));
+          font-family: var(--_ctm-dn-mu-im-se-ft-fy, var(--_tst-dn-mu-im-se-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-mu-im-se-ft-se, var(--_tst-dn-mu-im-se-ft-se));
+          font-weight: var(--_ctm-dn-mu-im-se-ft-wt, var(--_tst-dn-mu-im-se-ft-wt));
+          font-style: var(--_ctm-dn-mu-im-se-ft-se-ic, var(--_tst-dn-mu-im-se-ft-se-ic));
+          text-align: var(--_ctm-dn-mu-im-se-tt-an, var(--_tst-dn-mu-im-se-se-an));
+          letter-spacing: var(--_ctm-dn-mu-im-se-lr-sg, var(--_tst-dn-mu-im-se-lr-sg));
+          line-height: var(--_ctm-dn-mu-im-se-le-ht, var(--_tst-dn-mu-im-se-le-ht));
+          text-decoration: var(--_ctm-dn-mu-im-se-ue,);
+        }
+      }
+    }
+  }
+}

package/dist/payment-methods.scss

@@ -12,10 +12,10 @@
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    );
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
 
     & > .wrapper {
       width: 100%;
@@ -24,13 +24,177 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-    .payment__methods__container {
-      display: var(--_d-flex);
-      gap: 20px;
-      padding: 20px;
-      img {
-        width: 50px;
-        height: 30px;
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      padding: var(--_ctm-lt-pg);
+      .title-content {
+        display: flex;
+        flex-direction: column;
+        .title {
+          font-size: 24px;
+          margin-bottom: 10px;
+          color: #000;
+        }
+        .description {
+          font-size: 16px;
+          color: #000;
+        }
+      }
+      .payment__methods__container {
+        display: var(--_d-flex);
+        flex-direction: column;
+        gap: 20px;
+        // padding: 20px 0;
+        justify-content: var(--_ctm-lt-im-ct-at);
+        .horizontal {
+          display: flex;
+          align-items: center;
+          gap: var(--_ctm-lt-im-sg);
+          flex-direction: row;
+          &[data-overflow-item="Wrap"] {
+            flex-wrap: wrap;
+          }
+          &[data-overflow-item="Scroll"] {
+            overflow-x: scroll;
+            width: 35%;
+          }
+          .item {
+            padding: var(--_ctm-lt-im-pg);
+            img {
+              width: 50px;
+              height: 30px;
+            }
+          }
+        }
+        .vertical {
+          display: flex;
+          align-items: center;
+          gap: var(--_ctm-lt-im-sg);
+          flex-direction: column;
+          &[data-overflow-item="Wrap"] {
+            flex-wrap: wrap;
+          }
+          &[data-overflow-item="Scroll"] {
+            overflow-x: scroll;
+            width: 35%;
+          }
+          .item {
+            padding: var(--_ctm-lt-im-pg);
+            img {
+              width: 50px;
+              height: 30px;
+            }
+          }
+        }
+        .table-content {
+          border-collapse: collapse;
+          border: 1px solid #000;
+          &[data-header-divider="true"] {
+            thead tr th {
+              border-bottom: 1px solid red;
+            }
+          }
+          &[data-row-divider="true"] {
+            tbody tr td {
+              border-bottom: 1px solid green;
+            }
+          }
+          &[data-column-divider="true"] {
+            tbody tr td,
+            thead tr th {
+              border-right: 1px solid orange;
+            }
+
+            tbody tr td:last-child,
+            thead tr th:last-child {
+              border-right: none;
+            }
+          }
+          &[data-alternative-row-colors="true"] {
+            tbody tr:nth-child(odd) {
+              background-color: #f78a8a;
+              width: 100%;
+            }
+          }
+          thead {
+            height: var(--_ctm-lt-hr-ht);
+            tr {
+              th {
+                padding: var(--_ctm-lt-hr-cl-pg);
+                text-align: var(--_ctm-lt-ct-at);
+                border: 0;
+              }
+            }
+          }
+          tbody {
+            tr {
+              padding: var(--_ctm-lt-rw-cl-pg);
+              height: var(--_ctm-lt-rw-ht);
+              th,
+              td {
+                border: 0;
+                padding: inherit;
+                text-align: var(--_ctm-lt-ct-at);
+              }
+            }
+          }
+        }
+
+        .button-content {
+          button {
+            font-size: 16px;
+            padding: 10px 20px;
+            background-color: #000;
+            color: #fff;
+            border: none;
+            cursor: pointer;
+            border-radius: 10px;
+          }
+        }
+      }
+      .loadmore_conatiner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        margin-top: 10px;
+        button {
+          font-size: 10px;
+          padding: 10px;
+          background-color: #000;
+          color: #fff;
+          border: none;
+          cursor: pointer;
+          border-radius: 10px;
+        }
+      }
+      .pagination_container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        button {
+          font-size: 16px;
+          // padding: 10px 20px;
+          // background-color: #000;
+          color: #fff;
+          border: none;
+          cursor: pointer;
+          // border-radius: 10px;
+        }
+        .active {
+          span {
+            background-color: var(--_gray-300);
+            padding: 2px;
+          }
+        }
       }
     }
   }