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

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%;
+    }
+  }
+}