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

package/dist/add-order.scss

@@ -0,0 +1,69 @@
+.add_order__wrapper {
+  position: relative;
+  display: inline-block;
+
+  .add_order_button {
+    background: transparent;
+    border: none;
+    font-size: 14px;
+    color: #3b49df; // Blue
+    font-weight: 500;
+    cursor: pointer;
+    padding: 6px 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-width: var();
+    height: var(--_ctm-lt-ht);
+    width: var(--_ctm-lt-wh);
+
+    .icon {
+      //   font-size: 18px;
+      //   display: flex;
+      //   align-items: center;
+      svg {
+        height: var(--_ctm-dn-dt-se-in-se);
+        width: var(--_ctm-dn-dt-se-in-se);
+        path {
+          fill: var(--_ctm-dn-dt-se-in-c1);
+          stroke: var(--_ctm-dn-dt-se-in-c1);
+        }
+      }
+    }
+  }
+
+  .add_order_menu {
+    position: absolute;
+    top: 120%;
+    left: 0;
+    width: 240px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    padding: 8px 0;
+    z-index: 10;
+  }
+
+  .add_order_item {
+    padding: 12px 20px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1f2937; // Darker text
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: background 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f5f7ff; // Subtle blue
+      color: #3b49df;
+    }
+
+    .icon {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/dist/allocationDetails.scss

@@ -0,0 +1,335 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="allocationDetails"] {
+    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);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+    .product__showcase {
+      background-color: rgb(247, 246, 243);
+      width: 100%;
+      padding: 50px;
+      // height: 100vh;/
+      // overflow-y: auto;
+
+      .main__header {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 0;
+        margin-bottom: 16px;
+        border-bottom: var(--Gray-500, #eaecf0) 1px solid;
+        .profile_heading {
+          margin-bottom: 10px;
+        }
+        .section__title {
+          color: var(--Gray-900, #101828);
+
+          font-size: 20px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 30px;
+          margin: 0px;
+          h3 {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            .text__secondary {
+              color: var(--Gray-iron-500, #70707b);
+              font-size: 16px;
+
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 18px;
+              padding-left: 8px;
+              .text__primary {
+                color: #243dc6;
+                font-size: 16px;
+              }
+            }
+          }
+          .section__desc {
+            color: var(--Gray-iron-500, #70707b);
+
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px;
+            margin: 0px;
+            span {
+              color: var(--Gray-900, #101828);
+
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 600;
+              line-height: 24px;
+            }
+          }
+        }
+        .button__group {
+          display: flex;
+          gap: 12px;
+        }
+        .product__views {
+          display: flex;
+          background-color: #fff;
+          border: 1px solid var(--_gray-300);
+          border-radius: 6px;
+          height: 40px;
+          overflow: hidden;
+
+          .btn {
+            display: inline-block;
+            padding: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            button {
+              display: flex;
+            }
+            &:hover {
+              background-color: var(--_gray-100);
+            }
+            &.active {
+              background-color: #ced4f6;
+              button {
+                svg {
+                  path {
+                    stroke: var(--_primary-500);
+                  }
+                }
+              }
+            }
+            &:first-child {
+              border-right: 1px solid var(--_gray-200);
+            }
+          }
+        }
+      }
+      // products header styles
+      .showcase__header {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 0;
+        margin-bottom: 16px;
+        border-bottom: var(--Gray-200, #eaecf0) 1px solid;
+
+        .section__title {
+          color: var(--Gray-900, #101828);
+
+          font-size: 20px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 30px;
+          margin: 0px;
+          h3 {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            .text__secondary {
+              color: var(--Gray-iron-500, #70707b);
+              font-size: 16px;
+
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 18px;
+              padding-left: 8px;
+              .text__primary {
+                color: #243dc6;
+                font-size: 16px;
+              }
+            }
+          }
+          .section__desc {
+            color: var(--Gray-iron-500, #70707b);
+
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px;
+            margin: 0px;
+            span {
+              color: var(--Gray-900, #101828);
+
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 600;
+              line-height: 24px;
+            }
+          }
+        }
+        .button__group {
+          display: flex;
+          gap: 12px;
+        }
+        .product__views {
+          display: flex;
+          background-color: #fff;
+          border: 1px solid var(--_gray-300);
+          border-radius: 6px;
+          height: 40px;
+          overflow: hidden;
+
+          .btn {
+            display: inline-block;
+            padding: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            button {
+              display: flex;
+            }
+            &:hover {
+              background-color: var(--_gray-100);
+            }
+            &.active {
+              background-color: #ced4f6;
+              button {
+                svg {
+                  path {
+                    stroke: var(--_primary-500);
+                  }
+                }
+              }
+            }
+            &:first-child {
+              border-right: 1px solid var(--_gray-200);
+            }
+          }
+        }
+      }
+
+      //  add to cart button styles
+      .primary__btn {
+        display: flex;
+        gap: 8px;
+        height: 44px;
+        padding: 8px 14px;
+        background-color: var(--_primary-500);
+        border-radius: 6px;
+        color: #fff;
+        font-weight: 600;
+        height: 40px;
+        display: inline-flex;
+        cursor: pointer;
+        &:hover {
+          background-color: var(--_primary-500);
+        }
+      }
+
+      //  product list styles
+      .showcase__product__list {
+        &.grid_view {
+          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+          gap: 24px;
+          .product__card {
+            flex-direction: column;
+            .card__img__container {
+              width: 100%;
+            }
+          }
+        }
+        &.list_view {
+          grid-template-columns: auto;
+          .product__card {
+            flex-direction: row;
+            align-items: center;
+            gap: 24px;
+            .card__img__container {
+              width: 250px;
+            }
+          }
+        }
+        display: grid;
+
+        .product__card {
+          // product card styles
+          display: flex;
+          gap: 24px;
+          border: 1px solid var(--gray-200);
+
+          gap: 12px;
+          margin-bottom: 24px;
+          .card__img__container {
+            height: 300px;
+            background-color: #fff;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            border-radius: 6px;
+            img {
+              max-height: 100%;
+              max-width: 100%;
+            }
+          }
+          .product__title {
+            font-size: 16px;
+            color: var(--_gray-700);
+            margin-bottom: 4px;
+            word-break: break-word;
+          }
+
+          .product__desc {
+            font-size: 14px;
+            color: var(--_gray-500);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+          }
+          .product__price {
+            position: relative;
+            margin-block: 20px;
+            .discounted__price {
+              font-size: 20px;
+              color: var(--_gray-900);
+              font-weight: 600;
+            }
+            .offer__price {
+              position: absolute;
+              font-size: 16px;
+              color: #797583;
+              margin-left: 4px;
+            }
+          }
+          .product__hilights {
+            display: flex;
+            align-items: center;
+            font-weight: 700;
+            font-size: 16px;
+            gap: 4px;
+            margin-bottom: 20px;
+            .product__list__item {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+
+              .svg_icon {
+                display: flex;
+              }
+
+              &:not(:last-child)::after {
+                content: "";
+                display: inline-block;
+                height: 18px;
+                width: 2px;
+                background-color: var(--_gray-200);
+                margin-inline: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}