@sc-360-v2/storefront-cms-library 0.3.62 → 0.3.64

package/dist/submit-quote.scss

@@ -1,34 +1,32 @@
 .submit-quote-main {
   display: flex;
-  gap: 24px;
-  padding: 32px;
-  width: 100%;
-  justify-content: space-between;
+  gap: 60px;
+  padding: 24px;
+  background-color: #f9f9f9;
 
   .quote-items {
     flex: 2;
-    min-height: calc(100% - 61px);
-    overflow-y: auto;
   }
 
   .quote-item {
-    padding: 32px 0;
+    // padding: 32px 0;
     display: flex;
     gap: 24px;
-    border-bottom: 1px dashed var(--_gray-400);
-    padding-right: 10px;
-    &:first-child {
-      padding-top: 0;
+    &:not(:last-child) {
+      border-bottom: 1px dotted var(--_gray-400);
     }
-    &:last-child {
-      border-bottom: 0;
+    &:not(:last-child) {
+      padding-bottom: 12px;
+    }
+    &:not(:first-child) {
+      padding-top: 12px;
     }
 
     .quote-item__image {
       width: 120px;
       height: 120px;
       object-fit: cover;
-      border-radius: 6px;
+      border-radius: 4px;
       background-color: #f0f0f0;
     }
 
@@ -38,73 +36,47 @@
       flex-direction: column;
 
       .quote-item__header {
-        display: flex;
-        flex-direction: column;
-        // gap: 16px;
         margin-bottom: 16px;
         padding-bottom: 16px;
-        border-bottom: 1px dashed var(--_gray-400);
-        // align-items: center;
+        border-bottom: 1px dotted #d0d0d0;
 
         .quote-item__title {
           font-size: 16px;
-          font-weight: 500;
-          color: var(--_gray-900);
-          &:after {
-            width: 1px;
-            height: 10px;
-            background: var(--_gray-600);
-            display: inline-block;
-            content: "";
-            margin-left: 16px;
-          }
+          font-weight: 600;
+          color: #111;
         }
 
         .quote-item__meta {
           display: flex;
-          gap: 6px;
+          gap: 10px;
           font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-600);
-          // span {
-          //   &::after {
-          //     width: 1px;
-          //     height: 10px;
-          //     background: var(--_gray-600);
-          //     content: "";
-          //     display: inline-block;
-          //     margin-left: 6px;
-          //   }
-          //   &:last-child::after {
-          //     width: 0 !important;
-          //     margin: 0 !important;
-          //   }
-          // }
+          color: var(--_gray-500);
         }
       }
 
       .quote-item__row {
         display: flex;
-        gap: 8px;
+        gap: 16px;
         align-items: flex-start;
-        white-space: nowrap;
 
         .field {
           display: flex;
           flex-direction: column;
           font-size: 14px;
+          &.price_column {
+            padding-right: 40px;
+          }
 
           label {
             margin-bottom: 6px;
             font-weight: 500;
-            color: var(--_gray-700);
+            color: #333;
           }
 
           .value {
-            font-weight: 700;
-            font-size: 20px;
-            line-height: 38px;
-            color: var(--_gray-900);
+            font-weight: 600;
+            font-size: 16px;
+            color: #111;
           }
 
           input {
@@ -112,7 +84,7 @@
             padding: 8px 12px;
             font-size: 15px;
             border: 1px solid #ccc;
-            border-radius: 6px;
+            border-radius: 4px;
             outline: none;
             width: 130px;
 
@@ -126,15 +98,21 @@
             display: flex;
             align-items: center;
             border: 1px solid #ccc;
-            border-radius: 6px;
+            border-radius: 4px;
             overflow: hidden;
             width: 130px;
             height: 40px;
+            &:focus-within {
+              border: 1px solid var(--_primary-300);
+              outline: 2px solid var(--_primary-100);
+            }
 
             span {
               padding: 0 8px;
               font-size: 15px;
               color: var(--_gray-500);
+              display: flex;
+              align-items: center;
             }
 
             input {
@@ -142,6 +120,10 @@
               width: 100%;
               height: 100%;
               padding-left: 6px;
+              &:focus {
+                box-shadow: none;
+                outline: none;
+              }
             }
           }
         }
@@ -157,7 +139,6 @@
           .quote-total {
             display: flex;
             flex-direction: column;
-            gap: 6px;
 
             > div {
               display: flex;
@@ -167,34 +148,30 @@
 
               .label {
                 font-size: 14px;
-                color: var(--_gray-700);
-                line-height: 20px;
-                font-weight: 500;
+                color: #444;
               }
 
               .amount {
                 font-size: 18px;
                 font-weight: 700;
-                color: var(--_gray-900);
-                line-height: 28px;
-                min-width: 80px;
+                color: #111;
               }
             }
 
             small {
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 20px;
-              color: var(--_gray-500);
+              font-size: 13px;
+              color: #888;
+              margin-top: 4px;
             }
+
             &.discounted {
               .label {
                 color: #198754;
               }
 
-              // .amount {
-              //   color: #198754;
-              // }
+              .amount {
+                color: #198754;
+              }
             }
           }
         }
@@ -203,80 +180,60 @@
   }
 
   .quote-summary {
-    // background: #f8f9fa;
-    border: 1px solid #e3e3e3;
+    background: #f8f9fa;
+    border: 1px solid var(--_gray-300);
     border-radius: 4px;
-    // padding: 24px;
     width: 100%;
     max-width: 400px;
-
-    h3 {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--_gray-900);
-      background: #f5f5f5;
-      line-height: 24px;
-      padding: 12px;
-      border-radius: 4px 4px 0 0;
-    }
-    .quote-summary-body {
-      padding: 0 16px 16px 16px;
-    }
+    overflow: hidden;
+    height: fit-content;
+    position: sticky;
+    top: 10px;
 
     &__row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 16px 0;
-      border-bottom: 1px dashed var(--_gray-400);
+      padding: 12px 0;
+      border-bottom: 1px dotted #ccc;
+
       .label {
         font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-        color: var(--_gray-500);
-      }
-      .label-quote {
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 24px;
-        color: #1f1930;
+        color: #666;
       }
 
       .value {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 500;
-        color: var(--_gray-900);
-        line-height: 20px;
+        color: #333;
 
         &.highlight {
           font-size: 20px;
           font-weight: 700;
-          color: #1f1930;
+          color: #000;
         }
       }
 
       &--quoted {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+      }
+      .label-quote {
+        font-weight: 600;
       }
     }
-    .label-notes {
-      margin-bottom: 6px;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--_gray-700);
-      display: inline-block;
-    }
+
     &__notes {
       width: 100%;
       height: 100px;
       padding: 12px;
       border: 1px solid #ddd;
-      border-radius: 6px;
+      border-radius: 4px;
       resize: none;
       font-size: 14px;
       font-family: inherit;
       margin-bottom: 20px;
       box-sizing: border-box;
+      margin-top: 6px;
 
       &::placeholder {
         color: #999;
@@ -284,14 +241,14 @@
 
       &:focus {
         outline: none;
-        border-color: #1a40f2;
+        border-color: var(--_primary-500);
       }
     }
 
     &__button {
       width: 100%;
-      padding: 12px;
-      background-color: #1a40f2;
+      padding: 14px;
+      background-color: var(--_primary-400);
       color: #fff;
       font-size: 16px;
       font-weight: 600;
@@ -301,8 +258,19 @@
       transition: background-color 0.2s ease;
 
       &:hover {
-        background-color: #1232c8;
+        background-color: var(--_primary-500);
       }
     }
+    & > h3 {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--_gray-900);
+      background-color: #f5f5f5;
+      padding: 12px;
+      border-bottom: 1px solid var(--_gray-300);
+    }
+    .quote-summary-body {
+      padding: 0px 16px 16px 16px;
+    }
   }
 }

package/dist/templates.scss

@@ -0,0 +1,299 @@
+.temp_accordion_wrapper {
+  width: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .template_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    h2 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--_gray-900);
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      span {
+        font-size: 14px;
+      }
+    }
+    button {
+      color: #243dc6;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .accordion_header {
+    width: fit-content;
+    text-align: left;
+    padding: 14px 0px;
+    font-size: 16px;
+    font-weight: 600;
+    background: var(--_base-white);
+    border: none;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    color: var(--_gray-700);
+
+    &.active {
+      background: var(--_base-white);
+      color: var(--_gray-900);
+    }
+  }
+
+  .accordion_content {
+    overflow: hidden;
+    transition: all 0.3s ease;
+    background: var(--_base-white);
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      color: #333;
+    }
+  }
+
+  .embla {
+    max-width: 70rem;
+    margin: auto;
+    --slide-height: 350px;
+    --slide-spacing: 1rem;
+    --slide-size: 100%;
+    --slide-spacing-sm: 1.6rem;
+    --slide-size-sm: 50%;
+    --slide-spacing-lg: 2rem;
+    --slide-size-lg: calc(100% / 3);
+  }
+  .embla__viewport {
+    overflow: hidden;
+    position: relative;
+  }
+  .embla__container {
+    backface-visibility: hidden;
+    display: flex;
+    touch-action: pan-y pinch-zoom;
+    margin-left: calc(var(--slide-spacing) * -1);
+  }
+  @media (min-width: 750px) {
+    .embla__container {
+      margin-left: calc(var(--slide-spacing-sm) * -1);
+    }
+  }
+  @media (min-width: 1200px) {
+    .embla__container {
+      margin-left: calc(var(--slide-spacing-lg) * -1);
+    }
+  }
+  .embla__slide {
+    min-width: 0;
+    flex: 0 0 var(--slide-size);
+    padding-left: var(--slide-spacing);
+  }
+  @media (min-width: 750px) {
+    .embla__slide {
+      flex: 0 0 var(--slide-size-sm);
+      padding-left: var(--slide-spacing-sm);
+    }
+  }
+  @media (min-width: 1200px) {
+    .embla__slide {
+      flex: 0 0 var(--slide-size-lg);
+      padding-left: var(--slide-spacing-lg);
+    }
+  }
+  .embla__slide__number {
+    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+    border-radius: 1.8rem;
+    font-size: 4rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--slide-height);
+    user-select: none;
+    height: auto;
+    .product_showcase {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+      .sc_pro_img {
+        width: 100%;
+        height: 200px;
+        border: 1px solid var(--_gray-200);
+        border-radius: 8px;
+        font-size: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .sc_pro_info {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        .sc_pro_br_name {
+          font-size: 14px;
+          color: var(--_gray-600);
+        }
+        .sc_pro_title {
+          font-size: 16px;
+          color: var(--_gray-900);
+        }
+        .sc_pro_code {
+          font-size: 12px;
+          color: var(--_gray-600);
+        }
+        .sc_pro_price {
+          font-size: 20px;
+          color: var(--_gray-900);
+          font-weight: 600;
+        }
+        .sc_pro_btn_actions {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          .btn {
+            background-color: var(--_base-white);
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            color: var(--_base-white);
+            padding: 8px 16px;
+            font-weight: 500;
+
+            &.primary {
+              background-color: var(--_primary-400);
+              width: 100%;
+              svg path {
+                stroke: var(--_base-white);
+              }
+            }
+            &.show_more {
+              border: 1px solid var(--_gray-400);
+              width: fit-content;
+              align-self: stretch;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              gap: 3px;
+              span {
+                display: inline-block;
+                width: 3px;
+                height: 3px;
+                border-radius: 50%;
+                background-color: var(--_gray-600);
+              }
+            }
+            &:hover {
+              text-decoration: none !important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .embla__controls {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    justify-content: space-between;
+    gap: 1.2rem;
+    margin-top: 1.8rem;
+  }
+  .embla__buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.6rem;
+    align-items: center;
+  }
+  .embla__button {
+    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    touch-action: manipulation;
+    display: inline-flex;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+    width: 3.6rem;
+    height: 3.6rem;
+    z-index: 1;
+    border-radius: 50%;
+    color: var(--text-body);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &--prev {
+      position: absolute;
+      top: 28%;
+      left: -17px;
+      width: 40px;
+      height: 40px;
+      border: 1px solid var(--_gray-200);
+      background: var(--_base-white);
+    }
+    &--next {
+      position: absolute;
+      top: 28%;
+      right: -17px;
+      width: 40px;
+      height: 40px;
+      border: 1px solid var(--_gray-200);
+      background: var(--_base-white);
+    }
+  }
+  .embla__button:disabled {
+    color: var(--detail-high-contrast);
+  }
+  .embla__button__svg {
+    width: 35%;
+    height: 35%;
+  }
+  .embla__dots {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+  }
+  .embla__dot {
+    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    touch-action: manipulation;
+    display: inline-flex;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: 2.6rem;
+    height: 2.6rem;
+    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: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    content: "";
+  }
+  .embla__dot--selected:after {
+    box-shadow: inset 0 0 0 0.2rem var(--text-body);
+  }
+}

package/dist/types/builder/elements/cart-wrapper/index.d.ts

@@ -0,0 +1,44 @@
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { BuilderAttributes } from "../common";
+export interface CartWrapperStyleProperties extends CommonStyleProperties {
+    minWidth: string;
+    maxWidth: string;
+    maxHeight: string;
+    gridArea: string;
+    display: DisplayValue;
+    boxSizing: string;
+    rowGap: string;
+    columnGap: string;
+    gridTemplateRows: string;
+    gridTemplateColumns: string;
+}
+export declare const getDefaultStyles: () => CartWrapperStyleProperties;
+export interface CommonContainerElementAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+    dataMeta?: string;
+}
+export interface ContainerElementInterface {
+    id?: string | number;
+    uniqueKey?: string | number;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType" | "dataDropElement">;
+        HTML?: CommonContainerElementAttributes;
+        CUSTOM?: any;
+    };
+    styles?: CartWrapperStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    children: any;
+    childIds: any[];
+    previewImage?: string;
+    isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
+}