@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

package/dist/login.scss

@@ -101,6 +101,7 @@
               height: var(--_sf-img-sz);
             }
           }
+
           &.wrapper {
             display: var(--_d-grid);
             --_col-count: 2;
@@ -109,12 +110,14 @@
 
             & > div {
               width: 100%;
+
               &.left__div {
                 display: var(--_d-flex);
                 background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
                 background-size: 75%;
                 height: 100%;
                 align-items: center;
+
                 img {
                   width: 100%;
                   object-fit: cover;
@@ -159,6 +162,7 @@
                               font-weight: var(--_fw-400);
                               font-size: var(--_fs-24);
                             }
+
                             &.desc {
                               font-size: var(--_fs-16);
                               line-height: 1.6;
@@ -209,6 +213,7 @@
           --_ctm-mob-dn-wt-ds-im-gp,
           var(--_ctm-tab-dn-wt-ds-im-gp, var(--_ctm-dn-wt-ds-im-gp))
         );
+
         .rounded__fill {
           width: 60px;
           height: 60px;
@@ -218,17 +223,21 @@
           display: flex;
           align-items: center;
           justify-content: center;
+
           svg {
             width: 26px;
             height: 26px;
+
             path {
               stroke: var(--_success-600);
             }
           }
+
           &.remove__bg {
             background-color: transparent;
           }
         }
+
         .rounded_icon {
           width: 40px;
           height: 40px;
@@ -236,11 +245,13 @@
           border-radius: 50%;
           margin-bottom: 24px;
         }
+
         & > div:has(.log_in_title) {
           display: flex;
           flex-direction: column;
           gap: 4px;
         }
+
         // Title Styles
         .log_in_title {
           font-family: var(
@@ -277,6 +288,7 @@
             var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
           );
         }
+
         .desc {
           word-break: break-word;
           font-family: var(
@@ -314,6 +326,7 @@
           );
         }
       }
+
       .sso_verify {
         border: 1px solid red;
       }
@@ -326,18 +339,23 @@
         );
         display: flex;
         flex-direction: column;
+
         .btn__with__text[data-btn-name="resetButton"] {
           width: 100%;
           margin-top: 10px;
+
           &[data-show-shadow="false"] {
             --_show-shadow: none;
           }
+
           &[data-icon-position="left"] {
             --_sf-fd-bn: row;
           }
+
           &[data-icon-position="right"] {
             --_sf-fd-bn: row-reverse;
           }
+
           &[data-icon-position="center"] {
             --_sf-fd-bn: row;
           }
@@ -375,9 +393,11 @@
             // for pading and width
             --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-pg)};
             --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-wh)};
+
             &[data-hover-show-shadow="false"] {
               --_hover-show-shadow: none;
             }
+
             &[data-hover-show-icon="false"] {
               --_hover-show-icon: none;
             }
@@ -467,6 +487,7 @@
 
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
+
             svg {
               width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
               height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
@@ -479,6 +500,7 @@
               }
             }
           }
+
           [data-element-style="Text"] {
             display: inline-block;
             width: 100%;
@@ -514,6 +536,7 @@
         );
         display: flex;
         flex-direction: column;
+
         .input__label {
           display: flex;
           align-items: center;
@@ -555,61 +578,152 @@
           // font-size: 16px;
           // font-weight: 500;
         }
+
         .input__field {
-          position: relative;
+          display: flex;
+          align-items: center;
+          border-radius: prepareMediaVariable(--_ctm-dn-fm-it-br-rs);
+          border-color: var(
+            --_ctm-mob-dn-fm-it-br-cr,
+            var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-fm-it-br-rs,
+            var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
+          );
+          border-style: var(
+            --_ctm-mob-dn-fm-it-br-se,
+            var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-dn-fm-it-br-wh,
+            var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
+          );
+          box-shadow: var(
+              --_ctm-mob-dn-fm-it-sw-ae,
+              var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
+            )
+            var(
+              --_ctm-mob-dn-fm-it-sw-br,
+              var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-fm-it-sw-sd,
+              var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-fm-it-sw-cr,
+              var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
+            );
+          background-color: var(
+            --_ctm-mob-dn-fm-it-bd-cr,
+            var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
+          );
+          padding: var(
+            --_ctm-mob-dn-fm-it-pg,
+            var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg))
+          );
+          gap: prepareMediaVariable(--_ctm-dn-fm-it-im-gp);
+          transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+
+          &:focus-within {
+            outline: 0 none;
+            outline-offset: 0;
+            box-shadow:
+              0px 0px 1px rgba(16, 24, 40, 0.05),
+              0px 0px 0px 1px var(--_primary-100) !important;
+            border: 1px solid var(--_primary-300);
+          }
+
+          // Invalid Input Field
+          &.invalid {
+            border-color: var(--_error-300) !important;
+            outline: 2px solid var(--_error-50);
+
+            &:focus {
+              outline: 0 none;
+              outline-offset: 0;
+              box-shadow:
+                0px 0px 1px rgba(16, 24, 40, 0.05),
+                0px 0px 0px 1px var(--_error-100) !important;
+              border: 1px solid var(--_error-300);
+            }
+          }
+
+          // position: relative;
           svg {
             width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
             height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
             }
           }
+
           .placeholder_icon_start_login {
-            position: absolute;
+            // position: absolute;
             z-index: 10;
-            top: 12px;
-            left: 10px;
+            // top: 12px;
+            // left: 10px;
+            display: flex;
+            align-items: center;
+
             svg {
               width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
               height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
               }
             }
           }
+
           @media (min-width: 768px) and (max-width: 1023px) {
             .placeholder_icon_start_login {
               top: 10px;
             }
           }
+
           @media (max-width: 767px) {
             .placeholder_icon_start_login {
               top: 8px;
             }
           }
+
           .placeholder_icon_start {
-            position: absolute;
+            // position: absolute;
             z-index: 10;
-            top: 11px;
-            left: 10px;
+            display: flex;
+            align-items: center;
+            // top: 11px;
+            // left: 10px;
+
             svg {
               width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
               height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
               }
             }
           }
+
           @media (min-width: 768px) and (max-width: 1023px) {
             .placeholder_icon_start {
               top: 10px;
             }
           }
+
           @media (max-width: 767px) {
             .placeholder_icon_start {
               top: 8px;
             }
           }
+
           .placeholder_icon_end {
             position: absolute;
             right: 10px;
@@ -618,8 +732,18 @@
             transform: translateY(-50%);
           }
 
+          input:-webkit-autofill,
+          input:-webkit-autofill:hover,
+          input:-webkit-autofill:focus {
+            -webkit-box-shadow: 0 0 0px 1000px prepareMediaVariable(--_ctm-dn-fm-it-bd-cr) inset;
+            -webkit-text-fill-color: var(
+              --_ctm-mob-dn-fm-it-cr,
+              var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
+            );
+          }
+
           input {
-            padding-left: 38px;
+            // padding-left: 38px;
 
             font-family: var(
               --_ctm-mob-dn-fm-it-ft-fy,
@@ -657,64 +781,50 @@
               --_ctm-mob-dn-fm-it-tt-an,
               var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an))
             );
-            border-color: var(
-              --_ctm-mob-dn-fm-it-br-cr,
-              var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
-            );
-            border-radius: var(
-              --_ctm-mob-dn-fm-it-br-rs,
-              var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
-            );
-            border-style: var(
-              --_ctm-mob-dn-fm-it-br-se,
-              var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
-            );
-            border-width: var(
-              --_ctm-mob-dn-fm-it-br-wh,
-              var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
-            );
-            box-shadow: var(
-                --_ctm-mob-dn-fm-it-sw-ae,
-                var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-br,
-                var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-sd,
-                var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-cr,
-                var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
-              );
+            // border-color: var(--_ctm-mob-dn-fm-it-br-cr,
+            //     var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr)));
+            // border-radius: var(--_ctm-mob-dn-fm-it-br-rs,
+            //     var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs)));
+            // border-style: var(--_ctm-mob-dn-fm-it-br-se,
+            //     var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se)));
+            // border-width: var(--_ctm-mob-dn-fm-it-br-wh,
+            //     var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh)));
+            // box-shadow: var(--_ctm-mob-dn-fm-it-sw-ae,
+            //     var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))) var(--_ctm-mob-dn-fm-it-sw-br,
+            //     var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))) var(--_ctm-mob-dn-fm-it-sw-sd,
+            //     var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))) var(--_ctm-mob-dn-fm-it-sw-cr,
+            //     var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr)));
+
             &::placeholder {
-              background-color: var(
-                --_ctm-mob-dn-fm-it-bd-cr,
-                var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
-              );
+              background-color: transparent;
             }
           }
         }
+
         .view__icon {
-          position: absolute;
+          // position: absolute;
           z-index: 10;
-          top: 39px;
-          right: 10px;
+          // top: 39px;
+          // right: 10px;
+          display: flex;
+          align-items: center;
+
           svg {
             width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
             height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
             }
           }
         }
+
         @media (min-width: 768px) and (max-width: 1023px) {
           .view__icon {
             top: 34px;
           }
         }
+
         @media (max-width: 767px) {
           .view__icon {
             top: 35px;
@@ -725,9 +835,9 @@
       // Input Field Styles
       .inputField {
         width: 100%;
-        padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
+        // padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
         // padding: 10px;
-        border-radius: 6px;
+        // border-radius: 6px;
         // border: 1px solid var(--_gray-300) !important;
         font-size: 14px;
         transition:
@@ -735,32 +845,35 @@
           color 0.2s,
           border-color 0.2s,
           box-shadow 0.2s;
-        &:focus {
-          outline: 0 none;
-          outline-offset: 0;
-          box-shadow:
-            0px 0px 1px rgba(16, 24, 40, 0.05),
-            0px 0px 0px 1px var(--_primary-100) !important;
-          border: 1px solid var(--_primary-300);
-        }
+
+        // &:focus {
+        //   outline: 0 none;
+        //   outline-offset: 0;
+        //   box-shadow:
+        //     0px 0px 1px rgba(16, 24, 40, 0.05),
+        //     0px 0px 0px 1px var(--_primary-100) !important;
+        //   border: 1px solid var(--_primary-300);
+        // }
+
         ::placeholder {
           color: var(--_thm-ty-h2-tt-cr);
         }
       }
 
       // Invalid Input Field
-      .invalid {
-        border-color: var(--_error-300) !important;
-        outline: 2px solid var(--_error-50);
-        &:focus {
-          outline: 0 none;
-          outline-offset: 0;
-          box-shadow:
-            0px 0px 1px rgba(16, 24, 40, 0.05),
-            0px 0px 0px 1px var(--_error-100) !important;
-          border: 1px solid var(--_error-300);
-        }
-      }
+      // .invalid {
+      //   border-color: var(--_error-300) !important;
+      //   outline: 2px solid var(--_error-50);
+
+      //   &:focus {
+      //     outline: 0 none;
+      //     outline-offset: 0;
+      //     box-shadow:
+      //       0px 0px 1px rgba(16, 24, 40, 0.05),
+      //       0px 0px 0px 1px var(--_error-100) !important;
+      //     border: 1px solid var(--_error-300);
+      //   }
+      // }
 
       // Error Text Styles
       .errorText {
@@ -769,10 +882,12 @@
         gap: 4px;
         font-size: 12px;
         color: red;
+
         svg {
           display: flex;
           width: 13px;
           height: 13px;
+
           path {
             stroke: var(--_error-500);
           }
@@ -784,15 +899,19 @@
         margin-top: 10px;
         width: 100%;
         --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr))};
+
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
+
         &[data-icon-position="left"] {
           --_sf-fd-bn: row;
         }
+
         &[data-icon-position="right"] {
           --_sf-fd-bn: row-reverse;
         }
+
         &[data-icon-position="center"] {
           --_sf-fd-bn: row;
         }
@@ -830,9 +949,11 @@
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)};
           --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)};
+
           &[data-hover-show-shadow="false"] {
             --_hover-show-shadow: none;
           }
+
           &[data-hover-show-icon="false"] {
             --_hover-show-icon: none;
           }
@@ -889,6 +1010,7 @@
 
         .icon {
           display: var(--_hover-show-icon, var(--_show-icon, flex));
+
           svg {
             width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
             height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
@@ -898,6 +1020,7 @@
             }
           }
         }
+
         [data-element-style="Text"] {
           display: inline-block;
           width: 100%;
@@ -1108,6 +1231,7 @@
       .mt__32 {
         margin-top: 32px !important;
       }
+
       .mt__48 {
         margin-top: 48px !important;
       }
@@ -1126,12 +1250,14 @@
           --_ctm-mob-dn-fm-ft-pd-ll-dt-se-pg,
           var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-pg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-pg))
         );
+
         &:hover {
           padding: var(
             --_ctm-mob-dn-fm-ft-pd-ll-hr-se-pg,
             var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-pg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-pg))
           );
         }
+
         // margin-top: 20px;
         .remember_block {
           display: flex;
@@ -1139,6 +1265,7 @@
           gap: 6px;
         }
       }
+
       // .flex_center {
       //   display: flex;
       //   justify-content: center;
@@ -1158,15 +1285,19 @@
 
       .btn__with__text[data-btn-name="goBackToLogin"] {
         width: 100%;
+
         &[data-show-shadow="false"] {
           --_show-shadow: none;
         }
+
         &[data-icon-position="left"] {
           --_sf-fd-bn: row;
         }
+
         &[data-icon-position="right"] {
           --_sf-fd-bn: row-reverse;
         }
+
         &[data-icon-position="center"] {
           --_sf-fd-bn: row;
         }
@@ -1204,9 +1335,11 @@
           // for pading and width
           --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-pg)};
           --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-wh)};
+
           &[data-hover-show-shadow="false"] {
             --_hover-show-shadow: none;
           }
+
           &[data-hover-show-icon="false"] {
             --_hover-show-icon: none;
           }
@@ -1305,6 +1438,7 @@
 
         .icon {
           display: var(--_hover-show-icon, var(--_show-icon, flex));
+
           svg {
             width: var(
               --_sf-hr-in-se,
@@ -1323,6 +1457,7 @@
             }
           }
         }
+
         [data-element-style="Text"] {
           display: inline-block;
           width: 100%;
@@ -1356,17 +1491,20 @@
           align-items: center;
           justify-content: space-between;
           gap: 10px;
+
           .step {
             // width: 20%;1
             height: 3px;
             border-radius: 4px;
             background-color: var(--_gray-300);
             flex-grow: 1;
+
             &.active {
               background-color: var(--_success-600);
             }
           }
         }
+
         .psw_content {
           background-color: var(--_gray-50);
           padding: 16px;
@@ -1376,28 +1514,34 @@
           overflow-y: auto;
           // margin-top: 20px;
           margin-top: 5px;
+
           .title {
             font-size: 14px;
             font-weight: 600;
             color: var(--_gray-700);
             margin-bottom: 16px;
           }
+
           ul {
             list-style: none;
+
             li {
               color: var(--_gray-700);
               font-size: 14px;
               display: flex;
               align-items: center;
               gap: 8px;
+
               &.valid_input {
                 svg path {
                   stroke: var(--_success-700);
                 }
               }
+
               & > span {
                 display: inline-flex;
               }
+
               &:not(:last-child) {
                 margin-bottom: 8px;
               }
@@ -1533,17 +1677,20 @@
             display: block;
             margin-bottom: 4px;
           }
+
           .formGroup {
             &:not(:last-child) {
               margin-bottom: 16px;
             }
           }
+
           .to_be_filled {
             display: grid;
             grid-template-columns: 50% 50%;
             gap: 4px;
             margin-top: 10px;
             margin-bottom: 16px;
+
             li {
               padding: 4px 10px;
               background-color: var(--_gray-100);
@@ -1553,9 +1700,11 @@
               align-items: center;
               gap: 5px;
               font-size: 12px;
+
               &.active {
                 background-color: var(--_success-50);
                 color: var(--_success-700);
+
                 svg {
                   path {
                     stroke: var(--_success-700);
@@ -1577,8 +1726,10 @@
         .to_be_filled {
           display: flex;
         }
+
         .error {
           color: var(--_error-500);
+
           &::first-letter {
             text-transform: uppercase;
           }
@@ -1599,8 +1750,10 @@
         justify-content: center;
         align-items: center;
         gap: 8px;
+
         & > span {
           display: flex;
+
           svg {
             path {
               stroke: var(--_base-white);
@@ -1608,16 +1761,19 @@
           }
         }
       }
+
       .section__title {
         font-size: 24px;
         font-weight: 600;
         margin-bottom: 8px;
         color: var(--_gray-900);
       }
+
       .section__desc {
         font-size: 14px;
         color: var(--_gray-500);
       }
+
       .text__center {
         text-align: center;
       }