@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.77

package/dist/allocations.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="allocations"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     & > div {
       &.wrapper {
@@ -25,7 +34,79 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         border: 1px solid var(--_gray-200);
         border-collapse: collapse;
+        caption {
+          color: var(--_gray-600);
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 20px;
+          padding: 16px 24px;
+          text-align: left;
+          background: var(--_gray-25);
+        }
+        .est__dropdown__main {
+          position: relative;
+          min-width: 200px;
+          margin-top: 10px;
+
+          label {
+            font-size: 14px;
+            color: var(--_gray-700);
+            margin-bottom: 8px;
+            display: block;
+          }
+
+          .est__dropdown {
+            position: relative;
+            .est__dropdown__button {
+              display: flex;
+              align-items: center;
+              width: 100%;
+              .value__selected {
+                width: 100%;
+                border: none;
+                background-color: transparent;
+              }
+            }
+
+            &.open .list {
+              display: flex;
+            }
+
+            .list {
+              display: none;
+              flex-direction: column;
+              border: 1px solid var(--_gray-200);
+              border-radius: 6px;
+              position: absolute;
+              top: 100%;
+              left: 0;
+              width: 100%;
+              background-color: #fff;
+              border-radius: 4px;
+              z-index: var(--_higher-zIndex);
+              max-height: 200px;
+              overflow-y: auto;
 
+              &.top {
+                bottom: 100%;
+                top: auto;
+              }
+
+              .list__option {
+                padding: 12px;
+                cursor: pointer;
+                &.selected {
+                  background-color: var(--_primary-25);
+                  color: var(--_primary-400);
+                }
+                &:hover {
+                  background-color: var(--_primary-25);
+                  color: var(--_primary-400);
+                }
+              }
+            }
+          }
+        }
         th {
           height: 44px;
           padding: 12px 24px;
@@ -102,5 +183,468 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+
+    .slider_wrapper {
+      display: flex;
+      height: 60px;
+      align-items: flex-start;
+      gap: 0px;
+      white-space: nowrap;
+      width: 100%;
+      flex-direction: column;
+      height: auto;
+      .slider_header_wrapper {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        justify-content: space-between;
+        width: 100%;
+        .slider_header_wrapper_left {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          .slider_heading {
+            height: auto;
+          }
+
+          .slider_heading {
+            color: #475467;
+            text-align: center;
+            font-size: 14px;
+            height: 60px;
+            font-weight: 600;
+            line-height: 20px;
+            align-items: center;
+            display: flex;
+          }
+          .est__dropdown__main {
+            position: relative;
+            min-width: 150px;
+            margin-top: unset;
+
+            label {
+              font-size: 14px;
+              color: var(--_gray-700);
+              margin-bottom: 8px;
+              display: block;
+            }
+
+            .est__dropdown {
+              position: relative;
+              .est__dropdown__button {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                .value__selected {
+                  width: 100%;
+                  border: none;
+                  background-color: transparent;
+                }
+              }
+
+              &.open .list {
+                display: flex;
+              }
+
+              .list {
+                display: none;
+                flex-direction: column;
+                border: 1px solid var(--_gray-200);
+                border-radius: 6px;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                width: 100%;
+                background-color: #fff;
+                border-radius: 4px;
+                z-index: var(--_higher-zIndex);
+                max-height: 200px;
+                overflow-y: auto;
+
+                &.top {
+                  bottom: 100%;
+                  top: auto;
+                }
+
+                .list__option {
+                  padding: 12px;
+                  cursor: pointer;
+                  &.selected {
+                    background-color: var(--_primary-25);
+                    color: var(--_primary-400);
+                  }
+                  &:hover {
+                    background-color: var(--_primary-25);
+                    color: var(--_primary-400);
+                  }
+                }
+              }
+            }
+          }
+        }
+        .redeem_now_wrapper {
+          .redeem_now_btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            color: var(--_primary-400);
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+
+            &:hover {
+              color: #53389e;
+            }
+
+            &:focus {
+              color: #162578;
+            }
+
+            &:disabled {
+              color: #d0d5dd;
+            }
+          }
+        }
+      }
+
+      .allocations_slider_slide_wrapper {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        height: 60px;
+        width: fit-content;
+        margin-right: var(--_ctm-lt-sg-bn-is);
+
+        .allocations_left_info_wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .product_name {
+            color: #101828;
+            white-space: nowrap;
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 20px;
+          }
+
+          .expiry_date {
+            color: #70707b;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 18px;
+            white-space: nowrap;
+          }
+        }
+
+        .allocations_right_info_wrapper {
+          display: flex;
+          width: 48px;
+          height: 36px;
+          justify-content: center;
+          align-items: center;
+          gap: 10px;
+
+          .product_quantity {
+            color: #475467;
+            white-space: nowrap;
+            font-size: 20px;
+            font-weight: 600;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+
+    .embla {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      // overflow: hidden;
+
+      .embla__viewport {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          grid-template-rows: 100%;
+          // grid-template-columns: 100%;
+          // grid-template-columns: repeat(
+          //   var(--_ctm-lt-is-pr-se),
+          //   calc(100% / var(--_ctm-lt-is-pr-se))
+          // );
+          // grid-auto-flow: column;
+          gap: var(--_ctm-lt-sh-im-sg);
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
+          }
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
+          }
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
+          }
+
+          .embla__slide {
+            // width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .arrow-navigation {
+        display: flex;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        justify-content: space-between;
+        transform: translate(-50%, -50%);
+        //   padding-left: 20px;
+        &[data-control-type="Side"] {
+          .left-button,
+          .right-button {
+            background-color: transparent;
+          }
+        }
+        &[data-background-shape="Round"] {
+          .left-button,
+          .right-button {
+            background-color: #f2f5f5;
+            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          }
+        }
+        &[data-control-type="Bottom-Overflow"] {
+          transform: translateX(-50%);
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          top: unset;
+          bottom: 6px;
+        }
+        &[data-control-type="Bottom"] {
+          transform: unset;
+          position: static;
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          margin-top: 10px;
+        }
+        .left-button {
+          padding: 10px;
+          border-radius: 50%;
+          border: none;
+          width: var(--_ctm-dn-pn-as-aw-se);
+          height: var(--_ctm-dn-pn-as-aw-se);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-left: 12px;
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .right-button {
+          border-radius: 50%;
+          border: none;
+          width: var(--_ctm-dn-pn-as-aw-se);
+          height: var(--_ctm-dn-pn-as-aw-se);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-right: 12px;
+          padding: 10px;
+
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .icon {
+          display: flex;
+          svg {
+            width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
+            height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
+            path {
+              stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
+            }
+          }
+        }
+      }
+
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
+
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-control-type="Side"] {
+        display: flex;
+        align-self: center;
+        gap: 16px;
+        flex-direction: row;
+        .left-button:disabled,
+        .right-button:disabled {
+          display: none;
+        }
+      }
+      .embla__dots {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+        gap: 6px;
+        margin-top: 16px;
+
+        &[data-control-type="Bottom-Overflow"] {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 75%;
+        }
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
+          touch-action: manipulation;
+          display: inline-flex;
+          text-decoration: none;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          // width: 0.6rem;
+          // height: 0.6rem;
+          width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+          height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .embla__dot:after {
+          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+          width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+          height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+        .embla__dot--selected:after {
+          box-shadow: inset 0 0 0 1px var(--text-body);
+          background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
+        }
+        &[data-slider-control="Pagination Line"] {
+          .embla__dot {
+            width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
+            height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
+            background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
+
+            border-radius: 6px;
+          }
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            border-radius: 6px;
+            width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
+            height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
+            // background-color: #fff;
+            background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-lt-tl-se);
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        overflow: hidden;
+        // margin: 10px;
+        padding: 10px;
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          margin-left: calc(var(--thumbs-slide-spacing) * -1);
+          gap: var(--_ctm-lt-tl-sg);
+          width: 100%;
+          // justify-content: center;
+          // height: 200px;
+
+          .embla__thumbs__slide {
+            min-width: var(--_ctm-lt-tl-se);
+            max-width: var(--_ctm-lt-tl-se);
+            height: var(--_ctm-lt-tl-se);
+            & img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
   }
 }