@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

package/dist/coupon.scss

@@ -295,6 +295,91 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             white-space: nowrap;
           }
         }
+        .coupon_code_apply_section {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          .coupon_code_fields_wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            input {
+              border: 1px solid #d0d5dd;
+              padding: 12px;
+              width: 100%;
+              border-radius: 4px;
+            }
+            .coupon-search-btn {
+              width: 93px;
+              height: 48px;
+              white-space: nowrap;
+            }
+          }
+          .couponCode_divider {
+            border: 1px dashed #d0d5dd;
+          }
+          .coupon-list {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            .coupon-item {
+              display: flex;
+              flex-direction: row;
+              gap: 12px;
+              input {
+                width: 18px;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                top: -9px;
+              }
+              input[type="checkbox"] {
+                accent-color: rgb(36 61 198);
+              }
+              .coupon-info {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                .coupon-title {
+                  font-size: 16px;
+                  font-weight: 700;
+                  line-height: 24px;
+                  color: #101828;
+                }
+                .coupon-desc {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 20px;
+                  color: #667085;
+                }
+              }
+            }
+          }
+          .coupon-footer-section {
+            display: flex;
+            justify-content: space-between;
+            .coupon-savings {
+              .title {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 20px;
+                color: #344054;
+              }
+              .price {
+                font-size: 16px;
+                font-weight: 700;
+                line-height: 24px;
+                color: #101828;
+              }
+            }
+            .apply-coupon-primary-btn {
+              width: 158px;
+              height: 48px;
+              white-space: nowrap;
+            }
+          }
+        }
       }
     }
   }

package/dist/dropdownTemplate.scss

@@ -1,6 +1,10 @@
 .dropdown-with-input-section {
   width: 100%;
   background-color: var(--_base-white);
+  .dropdown-label {
+    display: block;
+    margin-bottom: 6px;
+  }
 
   .dropdown-input-section {
     position: relative;
@@ -11,6 +15,7 @@
     width: 100%;
     align-items: center;
     height: 40px;
+    line-height: 40px;
     outline: 2px solid var(--_base-white);
     border: 1px solid var(--_gray-300);
     .selected-display {

package/dist/embroider-template-1-v2.scss

@@ -0,0 +1,597 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@use "./embroider-preview-element.scss" as *;
+
+$tmpWrapper: ".emb__tmp__wrapper";
+$tmpHeaderV2: ".emb__tmp__header__v2";
+$paListParent: ".emb__tmp__pa__list";
+$pacListParent: ".emb__tmp__pac__parent";
+$positionHeader: ".emb__tmp__psn__header";
+$grpDiv: ".grp__div";
+$positionToggleDiv: ".psn__tgle__parent";
+$tmpDsWrapper: ".emb__tmp1__ds__wrapper";
+$previewMain: ".emb__preview__me";
+$previewMainWrapper: ".emb__preview__me__wrapper";
+$previewMainOuput: ".output__ele__v1";
+
+@mixin EmbroideryTemplate1StylesV2() {
+  & > #{$tmpWrapper} {
+    --_sf-prm-clr: #000;
+    --_sf-scd-clr: #fff;
+    display: var(--_d-flex);
+    height: 100%;
+    flex-direction: column;
+    --_sf-bm-ht: 48px;
+    // gap: 12px;
+
+    #{$tmpHeaderV2} {
+      display: var(--_d-flex);
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+
+      & > #{$positionHeader} {
+        display: var(--_d-flex);
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        padding: 6px 8px;
+
+        font-size: 12px;
+        text-transform: uppercase;
+        line-height: 20px;
+        font-weight: var(--_sp-act-fw, 400);
+        background: var(--_sp-act-clr, transparent);
+        color: var(--_sp-act-cl, var(--_sf-prm-clr));
+        border-radius: 4px;
+        span {
+          display: var(--_d-flex);
+          align-items: center;
+        }
+
+        &[data-state="active"] {
+          --_sp-act-fw: 600;
+          --_sp-act-clr: var(--_sf-prm-clr);
+          --_sp-act-cl: var(--_sf-scd-clr);
+        }
+      }
+    }
+
+    & > #{$paListParent} {
+      display: var(--_d-flex);
+      flex-direction: column;
+      row-gap: 16px;
+      width: 100%;
+      background: #f2f2f2;
+      padding: 12px;
+      height: calc(100% - (2 * var(--_sf-bm-ht)));
+      overflow-y: auto;
+
+      & > #{$pacListParent} {
+        display: var(--_d-flex);
+        flex-direction: row;
+        gap: 12px;
+
+        // Header
+        & > #{$positionHeader} {
+          display: var(--_d-flex);
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+
+          & > span {
+            display: var(--_d-flex);
+            &.tt1 {
+              color: prepareMediaVariable(--_ctm-dn-te-cr, #101828);
+              font-size: prepareMediaVariable(--_ctm-dn-te-ft-se, 30px);
+              font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt, 500);
+              line-height: prepareMediaVariable(--_ctm-dn-te-le-ht, 125%);
+              font-style: prepareMediaVariable(--_ctm-dn-te-ft-se-ic, normal);
+              font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy), sans-serif;
+              text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
+              letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
+              text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
+            }
+
+            &.icn1 {
+              --_sf-size: 24px;
+              width: var(--_sf-size);
+              height: var(--_sf-size);
+              align-items: center;
+              justify-content: center;
+              transition: transform 0.45s ease-in-out;
+              cursor: pointer;
+
+              &[data-is-open="true"] {
+                transform: rotate(180deg);
+              }
+
+              & > svg {
+                --_perc: 0.75;
+                width: calc(var(--_sf-size) * var(--_perc));
+                height: calc(var(--_sf-size) * var(--_perc));
+
+                path {
+                  stroke: prepareMediaVariable(--_ctm-dn-te-cr, #667085);
+                }
+              }
+            }
+          }
+        }
+
+        & > .emb__rght__v2 {
+          display: var(--_d-flex);
+          flex-direction: column;
+          row-gap: 16px;
+          width: 100%;
+        }
+
+        // Preview
+
+        & > #{$previewMain} {
+          width: 100%;
+          display: var(--_d-flex);
+          align-items: flex-start;
+          justify-content: center;
+          max-width: 400px;
+          // --_perc-1: 20%;
+          // background: color-mix(
+          //   in srgb,
+          //   #000 calc(100% - var(--_perc-1, 0%)),
+          //   transparent var(--_perc-1, 0%)
+          // );
+          --_alpha: 85%;
+          background: color-mix(
+            in srgb,
+            var(--_sf-prm-clr) calc(100% - var(--_alpha)),
+            transparent var(--_alpha)
+          );
+          padding: 8px;
+          border-radius: 6px;
+
+          flex-direction: column;
+          row-gap: 6px;
+
+          position: sticky;
+          top: 0;
+          align-self: flex-start;
+
+          & > .emb__preview__title {
+            // color: color-mix(in srgb, #fff 70%, transparent 30%);
+            --_alpha: 15%;
+            color: color-mix(
+              in srgb,
+              var(--_sf-prm-clr) calc(100% - var(--_alpha)),
+              transparent var(--_alpha)
+            );
+            font-size: 14px;
+            font-weight: 600;
+          }
+
+          & > #{$previewMainWrapper} {
+            display: var(--_d-flex);
+            // flex-direction: column;
+            max-width: min(500px, 100%);
+            align-items: center;
+            width: 100%;
+            justify-content: center;
+            position: var(--_p-relative);
+            --_blk-perc: 5%;
+            background: color-mix(
+              in srgb,
+              var(--_base-white) calc(100% - #{var(--_blk-perc)}),
+              var(--_base-black) var(--_blk-perc)
+            );
+            border-radius: 6px;
+            min-height: var(--_sf-emb-prw-mn-ht-vl, 150px);
+
+            & > #{$previewMainOuput} {
+              display: var(--_d-grid);
+              width: 100%;
+              align-self: stretch;
+
+              // Image Element CSS
+              @include FlexEmbroideryPreviewStyles(1);
+
+              // Text Element CSS
+              @include FlexEmbroideryPreviewStyles(2);
+            }
+          }
+        }
+
+        // Position Toggle
+        #{$positionToggleDiv} {
+          display: var(--_d-grid);
+          width: 100%;
+          --_gap: 12px;
+          --_col: 2;
+          gap: var(--_gap);
+          //   grid-template-columns: getRepeatColWidth(--_col, --_gap);
+          grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+          align-items: center;
+
+          & > button {
+            min-height: 40px;
+            display: var(--_d-flex);
+            align-items: center;
+            justify-content: center;
+            padding: 8px 12px;
+            border-radius: 4px;
+            --_perc-clr-bb: 50%;
+            border: 0.5px solid
+              var(
+                --_sp-color,
+                color-mix(
+                  in srgb,
+                  #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
+                    calc(100% - var(--_perc-clr-bb)),
+                  transparent var(--_perc-clr-bb)
+                )
+              );
+            background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
+            gap: 6px;
+
+            & > .icn__spn {
+              display: var(--_d-flex);
+              align-items: center;
+              justify-content: center;
+
+              svg {
+                width: 20px;
+                height: 20px;
+
+                path {
+                  &:not(.acv *) {
+                    stroke: color-mix(
+                      in srgb,
+                      var(
+                          --_sp-color,
+                          var(
+                            --_ctm-mob-dn-dt-tt-cr,
+                            var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
+                          )
+                        )
+                        75%,
+                      transparent 25%
+                    );
+                  }
+                }
+              }
+            }
+
+            & > .pac__name__div {
+              display: var(--_d-flex);
+              align-items: center;
+              gap: 8px;
+
+              & > .pac__name__span {
+                display: var(--_d-flex);
+                color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
+                font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
+                font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
+                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+                font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
+                line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                text-transform: capitalize;
+
+                @include restrictToLinesShow(1);
+              }
+            }
+
+            &.acv {
+              --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+              --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
+
+              svg {
+                rect {
+                  fill: var(
+                    --_sp-color,
+                    var(
+                      --_ctm-mob-dn-dt-tt-cr,
+                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
+                    )
+                  );
+                }
+              }
+            }
+          }
+        }
+
+        // Data Settings Wrapper
+
+        #{$tmpDsWrapper} {
+          display: var(--_d-flex);
+          flex-direction: column;
+          row-gap: 16px;
+        }
+
+        #{$grpDiv} {
+          display: var(--_d-flex);
+          flex-direction: column;
+          row-gap: 6px;
+
+          & > label {
+            color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
+            font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
+            font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+            font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
+            font-weight: 500;
+            line-height: 24px;
+          }
+
+          // Image Upload
+
+          & > .img__div {
+            background: var(--_gray-100);
+            height: 100px;
+            width: 100%;
+            border-radius: var(--_br-6);
+            border: 1px dashed var(--_primary-100);
+            position: var(--_p-relative);
+            cursor: pointer;
+
+            &[data-has-content="true"] {
+              --_sf-vt-im: hidden;
+              --_sf-vt-op: 0;
+
+              & > .output__div {
+                display: var(--_d-flex);
+                align-self: stretch;
+                justify-self: stretch;
+                height: 100%;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                }
+              }
+            }
+
+            & > span {
+              &.label__span {
+                position: var(--_p-absolute);
+                pointer-events: none;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 12px);
+                font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
+                text-transform: uppercase;
+                line-height: 1;
+                cursor: pointer;
+                visibility: var(--_sf-vt-im, visible);
+                opacity: var(--_sf-op-im, 1);
+              }
+            }
+
+            & > input {
+              &[type="file"] {
+                position: var(--_p-absolute);
+                inset: 0 0 0 0;
+                opacity: 0;
+                height: 100%;
+              }
+            }
+          }
+
+          // Text Editor
+          & > .text__div {
+            --_perc-clr-bb: 50%;
+            border-radius: 4px;
+            border: 0.5px solid
+              var(
+                --_fcs-clr,
+                color-mix(
+                  in srgb,
+                  #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
+                    calc(100% - var(--_perc-clr-bb)),
+                  transparent var(--_perc-clr-bb)
+                )
+              );
+            background: var(--_sf-scd-clr);
+            padding: 8px 12px;
+
+            &:has(input) {
+              width: min(350px, 100%);
+            }
+
+            &:has(:focus) {
+              --_fcs-clr: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+            }
+
+            & > input {
+              color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
+              font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
+              font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
+              font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+              font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
+              line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
+              letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+              border: none;
+              height: auto;
+
+              &:focus {
+                outline: none;
+              }
+            }
+          }
+
+          // Common Dropdown
+
+          & > .cmn__drp__parent__v2 {
+            & > ul {
+              display: var(--_d-flex);
+              flex-wrap: wrap;
+              gap: 12px;
+
+              & > li {
+                display: var(--_d-flex);
+                align-content: center;
+                gap: 6px;
+                padding: 8px 12px;
+                border-radius: 4px;
+                --_perc-clr-bb: 50%;
+                border: 0.5px solid
+                  var(
+                    --_sp-color,
+                    color-mix(
+                      in srgb,
+                      #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
+                        calc(100% - var(--_perc-clr-bb)),
+                      transparent var(--_perc-clr-bb)
+                    )
+                  );
+                background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
+                cursor: pointer;
+
+                &:has(.list__img) {
+                  --_size-w: 128px;
+                  --_size-h: 48px;
+
+                  width: var(--_size-w);
+                  height: var(--_size-h);
+                  position: var(--_p-relative);
+
+                  & > .list__icon {
+                    position: var(--_p-absolute);
+                    left: 2px;
+                    top: 2px;
+                    visibility: var(--_sf-at-vt, hidden);
+                    opacity: var(--_sf-at-op, 0);
+                  }
+
+                  &.active {
+                    --_sf-at-vt: visible;
+                    --_sf-at-op: 1;
+                  }
+                }
+                &,
+                * {
+                  user-select: none;
+                }
+
+                &.active {
+                  --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+                  --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
+                }
+
+                & > span {
+                  display: var(--_d-flex);
+                  &.list__text {
+                    color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
+                    font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
+                    font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy), sans-serif;
+                    font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+                    font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
+                    line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
+                    letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                    text-transform: capitalize;
+                  }
+
+                  &.list__icon {
+                    display: var(--_d-flex);
+                    align-items: center;
+                    justify-content: center;
+
+                    svg {
+                      width: 20px;
+                      height: 20px;
+
+                      path {
+                        &:not(.active *) {
+                          stroke: color-mix(
+                            in srgb,
+                            var(
+                                --_sp-color,
+                                var(
+                                  --_ctm-mob-dn-dt-tt-cr,
+                                  var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
+                                )
+                              )
+                              75%,
+                            transparent 25%
+                          );
+                        }
+                      }
+                      &:is(.active *) {
+                        rect {
+                          fill: var(
+                            --_sp-color,
+                            var(
+                              --_ctm-mob-dn-dt-tt-cr,
+                              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
+                            )
+                          );
+                        }
+                      }
+                    }
+                  }
+
+                  &.list__img {
+                    width: 100%;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                      object-fit: contain;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & > .emb__tmp__footer {
+      display: var(--_d-flex);
+      height: var(--_sf-bm-ht);
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 8px 12px;
+
+      & > div {
+        display: var(--_d-flex);
+        align-items: center;
+        gap: 12px;
+
+        & > button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 6px 8px;
+
+          font-size: 12px;
+          text-transform: uppercase;
+          line-height: 20px;
+
+          border-radius: 4px;
+
+          &.emb__clear {
+            color: var(
+              --_ctm-mob-dn-dt-tt-cr,
+              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
+            );
+          }
+
+          &.emb__save {
+            background: var(--_sf-prm-clr);
+            color: var(--_sf-scd-clr);
+            border: 1px solid var(--_sf-prm-clr);
+          }
+
+          &.emb__cancel {
+            background: transparent;
+            color: var(--_sf-prm-clr);
+            // border: 1px solid var(--_sf-prm-clr);
+            border: 1px solid transparent;
+          }
+        }
+      }
+    }
+  }
+}