@sc-360-v2/storefront-cms-library 0.3.29 → 0.3.31

package/dist/contact-us.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./form-zindex-module.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="contactUs"],
@@ -22,6 +23,8 @@
       // justify-content: center;
       // width: 100%;
       // height: 100%;
+
+      @include FlexFormZindexModuleStyles();
     }
 
     & form {

package/dist/dropdownTemplate.scss

@@ -85,7 +85,16 @@
     .readonly-input,
     .dropdown__clear__icon,
     .dropdown__icon {
+      .icon {
+         display: flex;
+      }
       cursor: pointer;
+      .icon svg {
+        vertical-align: middle;
+      }
+      .icon.down svg {
+        transform: rotate(180deg);
+      }
     }
     .dropdown__clear__icon {
       position: absolute;
@@ -94,7 +103,7 @@
     .dropdown-menu {
       position: absolute;
       width: 100%;
-      top: 35px;
+      top: 40px;
       left: 0px;
       right: 24px;
       background: white;
@@ -105,7 +114,6 @@
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       z-index: 10;
       min-width: 240px;
-      min-height: 300px;
       max-height: 300px;
 
       .dropdown-opt {
@@ -227,13 +235,20 @@
 .dropdown-with-input-section.full-width {
   width: auto;
   .dropdown-input-section {
-    width: 100% !important;
+    width: 100%;
+    border-radius: 6px;
+   
+    &:focus-within {
+      border: 1px solid var(--_primary-300);
+      outline: 2px solid var(--_primary-50);
+    }
   }
 }
 
 .icon_with_label_section {
   display: flex;
   gap: 4px;
+  align-items: center;
   cursor: pointer;
   .label_elm {
     color: var(--_primary-400);
@@ -247,3 +262,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.no_data_found {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/dist/employee-bulk-order.scss

@@ -2,11 +2,6 @@
   display: flex;
   justify-self: end;
   gap: 10px;
-  .single_payment_action {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
   .svg_icon {
     display: flex;
     align-items: center;
@@ -452,6 +447,14 @@
         right: -8px;
       }
     }
+    .single_checkout_sec {
+      gap: 12px;
+      .single_addres_sec,
+      .single_payment_sec {
+        color: #243dc6;
+        cursor: pointer;
+      }
+    }
     .action_item {
       cursor: pointer;
     }
@@ -545,3 +548,31 @@
     font-size: 14px;
   }
 }
+.overlay_body {
+  position: absolute;
+  top: 100%;
+  width: 168px;
+  background: #fff;
+  padding: 12px;
+  /* border: 1px solid gray; */
+  border-radius: 4px;
+  box-shadow: 0 0 24px 0 #00000010;
+  display: grid;
+  gap: 8px;
+  width: 227px;
+  right: 0px;
+  .overlay_body_opt {
+    display: flex;
+    gap: 12px;
+    height: 50px;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    .overlay_body_opt_tittle {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+  }
+}

package/dist/empty-states.scss

@@ -0,0 +1,52 @@
+.empty_template {
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+height: 100%;
+
+h3 {
+    font-size: 16px;
+    color: var(--_gray-900);
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+p {
+    font-size: 12px;
+    color: var(--_gray-600);
+}
+}
+
+.bulk_order_pad_empty_msg_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+        max-width: 100px;
+        max-height: 100px;
+    }
+
+    .bulk_order_pad_empty_msg {
+      font-family: "Lato";
+      font-weight: 700;
+      font-size: 24px;
+      color: var(--_gray-900);
+      line-height: 32px;
+    }
+
+    .bulk_order_pad_support_msg {
+      font-family: "Lato";
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--_gray-900);
+    }
+  }

package/dist/fb-dropdown.scss

@@ -77,8 +77,11 @@
 
   ul {
     list-style: none;
-    padding: 4px 0;
+    padding: 4px;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
 
     li {
       padding: 0;
@@ -93,6 +96,7 @@
       color: var(--_gray-700);
       cursor: pointer;
       transition: background 0.2s;
+      border-radius: 4px;
 
       input[type="checkbox"] {
         margin: 0;
@@ -105,7 +109,7 @@
       }
 
       &.selected {
-        background-color: var(--_primary-100);
+        background-color: var(--_primary-25);
         color: var(--_primary-700);
         font-weight: 500;
       }

package/dist/form-preview.scss

@@ -4,6 +4,7 @@
 /**************************************************************
  * Preview Form Styles
  **************************************************************/
+
 .new-form-template {
   display: flex;
   flex-direction: column;
@@ -53,6 +54,10 @@
 
 .fb_field {
   width: 100%;
+  .cnf_checkbox {
+    display: flex;
+    gap: 8px;
+  }
 
   .toggle_input {
     display: flex;
@@ -203,7 +208,7 @@
     display: flex;
     flex-direction: column;
     // align-items: center;
-    gap: 8px;
+    // gap: 8px;
   }
   input[type="checkbox"] {
     width: 20px !important;
@@ -240,3 +245,21 @@
     opacity: 0.6;
   }
 }
+
+.react-datepicker__month {
+  background-color: var(--_base-white);
+  margin: 0px;
+  border: 1px solid var(--_gray-200);
+  border-top: 0;
+  margin: 0px !important;
+}
+
+.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+  padding: 25px 10px 15px 20px;
+}
+.react-datepicker__day-names {
+  padding-top: 5px;
+}
+.react-datepicker__header {
+  padding: 25px 10px 15px 20px;
+}

package/dist/form-zindex-module.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+@use "sass:list";
+
+$cls: ".react-grid-item";
+$commonCls: ".grid-item";
+
+$hazZindexList: (
+    ".input.time" : "input:focus",
+    ".input.datetime-local" : "input:focus",
+    ".input.date" : "input:focus",
+    ".select.select": ".open.fb_dropdown_panel"
+);
+
+@mixin FlexFormZindexModuleStyles(){
+    #{$cls}{
+        
+        @each $key, $value in $hazZindexList{
+            &:has(#{$value}){
+                &:has(#{$commonCls}#{$key}){
+                    z-index: 2;
+                }
+            }
+        }
+    }
+}

package/dist/functions.scss

@@ -195,12 +195,82 @@ $breakPointsV2: (
   }
 }
 
-@function prepareMediaVariable($full-var) {
+@function prepareMediaVariable($full-var, $common: inherit) {
   $prefix: "--_ctm-";
   $core-name: str-slice($full-var, str-length($prefix) + 1); // removes --_ctm-
 
-  $default-var: var(#{$full-var});
+  $default-var: var(#{$full-var}, #{$common});
   $tab-var: var(#{$prefix}tab-#{$core-name}, #{$default-var});
   $mob-var: var(#{$prefix}mob-#{$core-name}, #{$tab-var});
   @return $mob-var;
 }
+
+@mixin flexBorderRotationWithDashed($clr, $gap, $height) {
+  --_clr-border: #{$clr};
+  --_cid-page-cpn-box-br-width: #{$gap};
+  --_cid-box-self-border-height: #{$height};
+  --_self-border-width: var(--_cid-page-cpn-box-br-width);
+  --_self-border-gap: calc(var(--_cid-page-cpn-box-br-width) * 2);
+  --_self-border-height: var(--_cid-box-self-border-height);
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      var(--_clr-border),
+      var(--_clr-border) var(--_self-border-width),
+      transparent var(--_self-border-width),
+      transparent var(--_self-border-gap)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--_clr-border),
+      var(--_clr-border) var(--_self-border-width),
+      transparent var(--_self-border-width),
+      transparent var(--_self-border-gap)
+    ),
+    repeating-linear-gradient(
+      180deg,
+      var(--_clr-border),
+      var(--_clr-border) var(--_self-border-width),
+      transparent var(--_self-border-width),
+      transparent var(--_self-border-gap)
+    ),
+    repeating-linear-gradient(
+      270deg,
+      var(--_clr-border),
+      var(--_clr-border) var(--_self-border-width),
+      transparent var(--_self-border-width),
+      transparent var(--_self-border-gap)
+    );
+
+  background-size:
+    var(--_self-border-height) calc(100% + var(--_self-border-gap)),
+    calc(100% + var(--_self-border-gap)) var(--_self-border-height),
+    var(--_self-border-height) calc(100% + var(--_self-border-gap)),
+    calc(100% + var(--_self-border-gap)) var(--_self-border-height);
+
+  background-repeat: no-repeat;
+  background-position:
+    0 0,
+    0 0,
+    100% 0,
+    0 100%;
+
+  animation: boxBorderAnimation 1s infinite linear;
+
+  @keyframes boxBorderAnimation {
+    0% {
+      background-position:
+        0 0,
+        calc(#{$gap} * -2) 0,
+        100% calc(#{$gap} * -2),
+        0 100%;
+    }
+    100% {
+      background-position:
+        0 calc(#{$gap} * -2),
+        0 0,
+        100% 0,
+        calc(#{$gap} * -2) 100%;
+    }
+  }
+}