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

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;
@@ -61,7 +66,21 @@
       height: 18px;
     }
   }
+  .editor {
+    padding-inline: 0px !important;
+    .fr-toolbar.fr-top {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+    }
+    .fr-second-toolbar {
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
 
+  .react-datepicker-wrapper {
+    display: block;
+  }
   input:not([type="checkbox"][type="radio"]),
   select {
     border: 1px solid var(--_gray-300);
@@ -82,6 +101,7 @@
     resize: vertical;
     border-radius: 6px;
     background-color: var(--_base-white);
+    border: 1px solid var(--_gray-300);
     padding: 12px;
   }
   .error_styles {
@@ -89,6 +109,8 @@
   }
   .label_with_radio {
     display: flex;
+    align-items: center;
+    gap: 4px;
     label {
       margin-right: 12px;
       display: flex;
@@ -114,8 +136,8 @@
     .custom-mark {
       width: 20px;
       height: 20px;
-      background-color: #fff;
-      border: 2px solid #ccc;
+      background-color: var(--_base-white);
+      border: 2px solid var(--_gray-400);
       margin: 0px 4px;
       position: relative;
       transition: all 0.2s ease;
@@ -144,8 +166,8 @@
       }
 
       input:checked + .custom-mark {
-        background-color: #4caf50;
-        border-color: #4caf50;
+        background-color: var(--_primary-400);
+        border-color: var(--_primary-400);
 
         &::after {
           opacity: 1;
@@ -162,15 +184,15 @@
           left: 50%;
           width: 10px;
           height: 10px;
-          background-color: #fff;
+          background-color: var(--_base-white);
           border-radius: 50%;
           transform: translate(-50%, -50%);
         }
       }
 
       input:checked + .custom-mark {
-        background-color: #4caf50;
-        border-color: #4caf50;
+        background-color: var(--_primary-400);
+        border-color: var(--_primary-400);
 
         &::after {
           opacity: 1;
@@ -184,8 +206,9 @@
   }
   &:has(input[type="checkbox"]) {
     display: flex;
-    align-items: center;
-    gap: 8px;
+    flex-direction: column;
+    // align-items: center;
+    // gap: 8px;
   }
   input[type="checkbox"] {
     width: 20px !important;
@@ -222,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%;
+    }
+  }
+}