@sc-360-v2/storefront-cms-library 0.5.1 → 0.5.2

package/dist/shareCartSideBar.scss

@@ -1,254 +1,254 @@
-@use "sass:map";
-@use "sass:list";
-
-// Variables
-$primary-color: #243dc6;
-$text-color: #2d2d2d;
-$background-color: #ffffff;
-$border-radius: 6px;
-$input-border: #e0e0e0;
-$error-color: #e53935;
-$hint-color: #7d7d7d;
-$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-
-.sidebar_container_glass_overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-
-  // Container overlay
-  .sidebar-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(20, 20, 20, 0.4); // Glass effect
-    backdrop-filter: blur(3px);
-    z-index: 1000;
-  }
-
-  // Sidebar slide-in
-  .sidebar-container {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 400px;
-    max-width: 100%;
-    height: 100vh;
-    background: $background-color;
-    box-shadow: $shadow;
-    z-index: 1001;
-    display: flex;
-    flex-direction: column;
-    animation: slide-in 0.3s ease-out;
-    .container {
-      overflow-y: auto;
-      width: 100%;
-      height: calc(100vh - 40px);
-      padding: 0px;
-    }
-
-    @keyframes slide-in {
-      from {
-        transform: translateX(100%);
-      }
-      to {
-        transform: translateX(0);
-      }
-    }
-  }
-
-  // Header
-  .sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 16px 16px 24px;
-    position: sticky;
-    top: 0px;
-    background: var(--_base-white);
-    border-bottom: 1px solid var(--_gray-200);
-
-    h2 {
-      font-size: 18px;
-      font-weight: 600;
-      color: $text-color;
-    }
-
-    .close-btn {
-      cursor: pointer;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      &:hover {
-        background-color: var(--_gray-50);
-        border-radius: 6px;
-        svg path {
-          stroke: var(--_gray-900);
-        }
-      }
-    }
-  }
-
-  .share_cart_body {
-    padding: 16px 24px;
-  }
-
-  // Form fields
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;
-
-    label {
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: $text-color;
-    }
-
-    input {
-      padding: 10px 12px;
-      font-size: 14px;
-      border-radius: $border-radius;
-      border: 1px solid $input-border;
-      outline: none;
-
-      &:focus {
-        border-color: $primary-color;
-        outline: 2px solid var(--_primary-200);
-      }
-    }
-
-    .hint {
-      font-size: 12px;
-      color: $hint-color;
-      margin-top: 4px;
-    }
-
-    .error {
-      color: $error-color;
-      font-size: 12px;
-      margin-top: 4px;
-    }
-  }
-
-  // Chip Input
-  .input-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    // gap: 6px;
-    // padding: 8px 0px;
-    // border: 1px solid #ccc;
-    // border-radius: 8px;
-    // min-height: 44px;
-    cursor: text;
-  }
-
-  .chips-input-wrapper:focus-within {
-    border-color: $primary-color;
-  }
-
-  .chips-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    min-width: 120px;
-    font-size: 14px;
-  }
-
-  .chip {
-    display: flex;
-    align-items: center;
-    background-color: #f1f1f1;
-    padding: 4px 8px;
-    border-radius: 999px;
-    font-size: 13px;
-
-    button {
-      margin-left: 6px;
-      background: transparent;
-      border: none;
-      font-size: 16px;
-      cursor: pointer;
-      line-height: 1;
-    }
-  }
-
-  // Footer buttons
-  .sidebar-footer {
-    margin-top: auto;
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    gap: 24px;
-    padding: 12px;
-    border-top: 1px solid #eee;
-
-    .discard-btn {
-      background: none;
-      border: none;
-      color: $text-color;
-      cursor: pointer;
-      font-weight: 600;
-
-      padding: 12px 14px;
-      border-radius: 6px;
-      &:hover {
-        background: var(--_gray-100);
-      }
-    }
-
-    .share-btn {
-      background: $primary-color;
-      color: $background-color;
-      border: none;
-      padding: 10px 16px;
-      border-radius: $border-radius;
-      cursor: pointer;
-      font-weight: 600;
-      transition: background 0.2s;
-      //  if it needed import the darken function from sass
-      // &:hover {
-      //   background: darken($primary-color, 5%);
-      // }
-    }
-  }
-
-  // PhoneInput override
-  .react-tel-input {
-    input {
-      width: 100% !important;
-      border-radius: $border-radius !important;
-      border-color: $input-border !important;
-    }
-  }
-
-  .form-group.get_promotons {
-    display: flex;
-    // align-items: center;
-    gap: 8px; // spacing between checkbox and label
-    margin-top: 12px;
-    flex-direction: row;
-
-    input[type="checkbox"] {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      accent-color: var(--_primary-400);
-    }
-
-    label {
-      font-size: 14px;
-      color: $text-color;
-      cursor: pointer;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+// Variables
+$primary-color: #243dc6;
+$text-color: #2d2d2d;
+$background-color: #ffffff;
+$border-radius: 6px;
+$input-border: #e0e0e0;
+$error-color: #e53935;
+$hint-color: #7d7d7d;
+$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+
+.sidebar_container_glass_overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+
+  // Container overlay
+  .sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(20, 20, 20, 0.4); // Glass effect
+    backdrop-filter: blur(3px);
+    z-index: 1000;
+  }
+
+  // Sidebar slide-in
+  .sidebar-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    max-width: 100%;
+    height: 100vh;
+    background: $background-color;
+    box-shadow: $shadow;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    animation: slide-in 0.3s ease-out;
+    .container {
+      overflow-y: auto;
+      width: 100%;
+      height: calc(100vh - 40px);
+      padding: 0px;
+    }
+
+    @keyframes slide-in {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  // Header
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 16px 16px 24px;
+    position: sticky;
+    top: 0px;
+    background: var(--_base-white);
+    border-bottom: 1px solid var(--_gray-200);
+
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: $text-color;
+    }
+
+    .close-btn {
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &:hover {
+        background-color: var(--_gray-50);
+        border-radius: 6px;
+        svg path {
+          stroke: var(--_gray-900);
+        }
+      }
+    }
+  }
+
+  .share_cart_body {
+    padding: 16px 24px;
+  }
+
+  // Form fields
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+
+    label {
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: $text-color;
+    }
+
+    input {
+      padding: 10px 12px;
+      font-size: 14px;
+      border-radius: $border-radius;
+      border: 1px solid $input-border;
+      outline: none;
+
+      &:focus {
+        border-color: $primary-color;
+        outline: 2px solid var(--_primary-200);
+      }
+    }
+
+    .hint {
+      font-size: 12px;
+      color: $hint-color;
+      margin-top: 4px;
+    }
+
+    .error {
+      color: $error-color;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }
+
+  // Chip Input
+  .input-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // gap: 6px;
+    // padding: 8px 0px;
+    // border: 1px solid #ccc;
+    // border-radius: 8px;
+    // min-height: 44px;
+    cursor: text;
+  }
+
+  .chips-input-wrapper:focus-within {
+    border-color: $primary-color;
+  }
+
+  .chips-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    min-width: 120px;
+    font-size: 14px;
+  }
+
+  .chip {
+    display: flex;
+    align-items: center;
+    background-color: #f1f1f1;
+    padding: 4px 8px;
+    border-radius: 999px;
+    font-size: 13px;
+
+    button {
+      margin-left: 6px;
+      background: transparent;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
+      line-height: 1;
+    }
+  }
+
+  // Footer buttons
+  .sidebar-footer {
+    margin-top: auto;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: 24px;
+    padding: 12px;
+    border-top: 1px solid #eee;
+
+    .discard-btn {
+      background: none;
+      border: none;
+      color: $text-color;
+      cursor: pointer;
+      font-weight: 600;
+
+      padding: 12px 14px;
+      border-radius: 6px;
+      &:hover {
+        background: var(--_gray-100);
+      }
+    }
+
+    .share-btn {
+      background: $primary-color;
+      color: $background-color;
+      border: none;
+      padding: 10px 16px;
+      border-radius: $border-radius;
+      cursor: pointer;
+      font-weight: 600;
+      transition: background 0.2s;
+      //  if it needed import the darken function from sass
+      // &:hover {
+      //   background: darken($primary-color, 5%);
+      // }
+    }
+  }
+
+  // PhoneInput override
+  .react-tel-input {
+    input {
+      width: 100% !important;
+      border-radius: $border-radius !important;
+      border-color: $input-border !important;
+    }
+  }
+
+  .form-group.get_promotons {
+    display: flex;
+    // align-items: center;
+    gap: 8px; // spacing between checkbox and label
+    margin-top: 12px;
+    flex-direction: row;
+
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: var(--_primary-400);
+    }
+
+    label {
+      font-size: 14px;
+      color: $text-color;
+      cursor: pointer;
+    }
+  }
+}

package/dist/shipping-estimator.scss

@@ -1,41 +1,41 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="shippingEstimator"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    aspect-ratio: calc(
-      1 / var(--_ctm-mob-sf-aspect-ratio, var(--_ctm-tab-sf-aspect-ratio, var(--_sf-aspect-ratio)))
-    );
-
-    // 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)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    .text-element {
-      background: #6d96e4;
-      padding: 10px;
-      font-weight: 600;
-      color: rgba(75, 69, 70, 1);
-    }
-    .shipping__estimator {
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="shippingEstimator"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    aspect-ratio: calc(
+      1 / var(--_ctm-mob-sf-aspect-ratio, var(--_ctm-tab-sf-aspect-ratio, var(--_sf-aspect-ratio)))
+    );
+
+    // 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)))
+    // );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
+    .shipping__estimator {
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    }
+  }
+}