@sc-360-v2/storefront-cms-library 0.1.95 → 0.1.97

package/dist/variant-picker.scss

@@ -24,6 +24,12 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .variant__container {
       display: flex;
       flex-direction: column;
@@ -296,171 +302,70 @@
         }
       }
       //Dropdown
-      .dropdown__main {
+      .est__dropdown__main {
         position: relative;
-        cursor: pointer;
-        // z-index: 101;
+        width: 100%;
+        margin-top: 10px;
 
-        &.dropdown__outline {
-          // border: 1px solid var(--_primary-300);
-          // border-radius: var(--_br-6);
-          .dropdown__header {
-            border: 0;
-            background-color: transparent;
-          }
+        label {
+          font-size: 14px;
+          color: var(--_gray-700);
+          margin-bottom: 8px;
+          display: block;
         }
 
-        .selected__value {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          font-weight: 500;
-          color: var(--_gray-900);
-          &::placeholder {
-            color: var(--_gray-500);
-          }
-          .selected__text {
-            margin-top: -2px;
-          }
-          &.updated__values {
-            background-color: var();
-          }
-        }
+        .est__dropdown {
+          cursor: pointer;
+          position: relative;
+          color: var(--_gray-700);
 
-        .dropdown__header {
           border-radius: 6px;
-          border: 1px solid var(--_gray-300);
-          height: 40px;
-          // line-height: 40px;
           background-color: #fff;
-          padding: 0 8px 0 14px;
           display: flex;
-          align-items: center;
           justify-content: space-between;
-          background-color: #fff;
-
-          gap: 10px;
-
-          &.remove__radius {
-            border-radius: 0;
-          }
-
-          &.pl__0 {
-            padding-left: 0px;
-          }
-          &.primary__btn {
-            background-color: var(--_primary-500);
-            color: var(--_base-white);
-            .selected__value {
-              color: var(--_base-white);
-            }
-            svg {
-              width: var(--_width-20);
-              height: var(--height-20);
-              path {
-                stroke: var(--_base-white);
-              }
-            }
+          align-items: center;
+          width: 100%;
+          .value__selected {
+            width: 100%;
           }
 
-          .dropdown__arrow {
-            // margin-left: 10px;
-            margin-top: var(--_mt-3);
-            margin-left: -3px;
-            margin-top: 2px;
-            &[data-attr="chevron-down"] {
-              margin-top: -3px;
-              svg {
-                width: var(--_width-18);
-                height: var(--height-18);
-                path {
-                  stroke: var(--_gray-700);
-                }
-              }
-            }
-            svg {
-              width: var(--_width-20);
-              height: var(--_height-20);
-            }
-          }
-          .close__btn {
-            svg {
-              width: var(--_width-18);
-              height: var(--_height-18);
-            }
+          &.open .list {
+            display: flex;
           }
-        }
 
-        .dropdown__list {
-          display: flex;
-          left: 0;
-          position: absolute;
-          z-index: var(--_higher-zIndex);
-          // margin-top: var(--_mt-4);
-          flex-direction: var(--_f-column);
-          // width: max-content;
-          border-radius: var(--_br-8);
-          border: 1px solid var(--_border-light-color);
-          background: var(--_base-white);
-          // min-width: 130px;
-          // max-width: 200px;
-          width: 100%;
-          gap: var(--_ctm-lt-dn-dy-se-dn-os-sg);
-          // box-shadow:
-          //   0px 4px 6px -2px rgba(16, 24, 40, 0.03),
-          //   0px 12px 16px -4px rgba(16, 24, 40, 0.08);
-          padding: var(--_ctm-lt-dn-dy-se-dn-os-pg);
-          max-height: 200px;
-          overflow-y: auto;
-          .no__content {
-            padding: 10px;
-            text-align: center;
-          }
-          .dropdown__option {
-            padding: var(--_ctm-lt-dn-dy-se-dn-lt-im-pg);
-            border-bottom: 1px solid var(--_gray-200);
-            display: var(--_d-flex);
-            justify-content: var(--_justify-between);
-            background-color: var(--_base-white);
-            gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
-            &[data-list="true"] {
-              pointer-events: none;
-              opacity: 0.3;
-              // border: 1px solid red;
-            }
-            span {
-              display: inline-block;
-              @include restrictToLinesShow(1);
-              white-space: normal;
-              text-overflow: ellipsis;
-              // width: 140px;
-              button {
-                display: var(--_d-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;
 
-            &:hover {
-              background-color: var(--_primary-25);
+            &.top {
+              bottom: 100%;
+              top: auto;
             }
 
-            &.selected {
-              background-color: var(--_primary-25);
-              color: var(--_primary-500);
-              // font-weight: medium;
+            .list__option {
+              padding: 12px;
+              cursor: pointer;
 
-              svg {
-                path {
-                  stroke: var(--_primary-500);
-                }
+              &:hover {
+                background-color: var(--_primary-25);
+                color: var(--_primary-400);
               }
             }
-
-            &:last-child {
-              border-bottom: none;
-            }
           }
         }
       }
+
       // variant dropdown selection
       .var__drop__selection {
         display: flex;

package/dist/volume-pricing.scss

@@ -24,7 +24,12 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .volume__container {
       padding: var(--_ctm-lt-pg);
       .stack {

package/dist/widget.scss

@@ -33,6 +33,7 @@
 @import "./cart.scss";
 @import "./profile.scss";
 @import "./product.scss";
+@import "./productDetails.scss";
 @import "./menu.scss";
 @import "./product-options.scss";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.1.95",
+  "version": "0.1.97",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {