@sc-360-v2/storefront-cms-library 0.3.42 → 0.3.44

package/dist/checkout.scss

@@ -753,7 +753,7 @@ $dark-color: #343a40;
               &_shipping_option_container {
                 display: flex;
                 flex-direction: column;
-                gap: var(--_ctm-lt-me-as-pt-io-hl-gp);
+                gap: 6px;
 
                 @media (max-width: 500px) {
                   flex-direction: row;
@@ -896,13 +896,14 @@ $dark-color: #343a40;
 
                 @media (min-width: 768px) {
                   grid-template-columns: 1fr 1fr;
+                  gap: 32px;
                 }
               }
 
               &__group {
                 display: flex;
                 flex-direction: column;
-                gap: var(--_ctm-lt-sg-md-le-gp);
+                gap: 4px;
 
                 .chk_shipping_method_heading {
                   color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
@@ -1007,6 +1008,18 @@ $dark-color: #343a40;
                   border-color: #2563eb;
                 }
               }
+
+              // order level shipping
+              .order_level_shipping {
+                display: flex;
+                gap: 24px;
+                .order_level_shipping_img {
+                  width: 120px;
+                  height: 120px;
+                  background-color: var(--_gray-100);
+                  border-radius: 6px;
+                }
+              }
             }
 
             .chk_payment-options {
@@ -1100,7 +1113,7 @@ $dark-color: #343a40;
 
                 &_left_container {
                   display: flex;
-                  gap: var(--_ctm-lt-pt-os-cr-vl-gp);
+                  gap: 12px;
                   align-items: flex-start;
 
                   @media (max-width: 500px) {
@@ -1163,7 +1176,6 @@ $dark-color: #343a40;
                 &__info_wrapper {
                   display: flex;
                   flex-direction: column;
-                  gap: var(--_ctm-lt-ll-ad-it-gp);
                   white-space: nowrap;
 
                   .chk_payment_options_name {
@@ -1312,6 +1324,9 @@ $dark-color: #343a40;
                   line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
                   letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
                   text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
+                  &.pl_0 {
+                    padding-left: 0px;
+                  }
                 }
 
                 &_form_wrapper {
@@ -1753,7 +1768,6 @@ $dark-color: #343a40;
               gap: 6px;
               background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
               border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
-              border-radius: var(--_ctm-dn-pt-os-dn-ne-dn-br-rs);
               border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
               border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
               color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
@@ -1920,3 +1934,180 @@ $dark-color: #343a40;
     }
   }
 }
+
+// credit card form syles
+.chk_cred_form_details {
+  border-top: 1px solid var(--_gray-300);
+  padding: 16px;
+  .chk_basic_form_title {
+    font-size: 14px;
+    margin-bottom: 16px;
+    font-weight: 600;
+  }
+  .chk_form_fields {
+    h3 {
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 500px;
+    .chk_form_field {
+      width: 100%;
+      &.expiry_details {
+        width: 80px;
+      }
+
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+
+      .chk_form_field_label {
+        font-size: 14px;
+        color: var(--_gray-600);
+      }
+      .chk_form_field_inp {
+        height: 40px;
+        border: 1px solid var(--_gray-300);
+        border-radius: 4px;
+        padding-inline: 10px;
+        &:placeholder-shown {
+          color: var(--_gray-400);
+          padding-left: 16px;
+        }
+      }
+      .error_msg {
+        display: block;
+        color: var(--_error-700);
+        font-size: 12px;
+      }
+    }
+
+    .checkbox {
+      width: auto;
+
+      label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+
+        input[type="checkbox"] {
+          display: none;
+
+          &:checked + .custom-checkbox::after {
+            opacity: 1;
+          }
+        }
+
+        .custom-checkbox {
+          width: 16px;
+          height: 16px;
+          border: 2px solid var(--_primary-400);
+          border-radius: 4px;
+          position: relative;
+          display: inline-block;
+          box-sizing: border-box;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 3px;
+            top: 0px;
+            width: 4px;
+            height: 8px;
+            border: solid var(--_primary-400);
+            border-width: 0 1px 1px 0;
+            transform: rotate(45deg);
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+          }
+        }
+      }
+    }
+    .expiry_details {
+      display: flex;
+      gap: 12px;
+      .cvv_inp {
+        width: 110px;
+      }
+    }
+  }
+}
+
+// giftcard form styles
+.chk_gift_card_details {
+  border-top: 1px solid var(--_gray-300);
+  padding: 16px;
+  .chk_gift_card_form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 480px;
+    .chk_gift_cart_form_title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .chk_gift_form_fields {
+      display: flex;
+      gap: 12px;
+      width: 100%;
+      .chk_gift_inp_field {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        width: 100%;
+        label {
+          color: var(--_gray-600);
+        }
+        .chk_gift_inp {
+          border: 1px solid var(--_gray-300);
+          border-radius: 6px;
+          height: 40px;
+          padding-inline: 10px;
+        }
+        &.pin {
+          width: 110px;
+        }
+        .error_msg {
+          display: block;
+          color: var(--_error-700);
+          font-size: 12px;
+        }
+      }
+      .error_msg {
+        color: var(--_error-700);
+        font-size: 14px;
+      }
+    }
+  }
+}
+.chk_form_actions {
+  display: flex;
+  gap: 12px;
+  .chk_sav_btn {
+    padding: 12px 16px;
+    background-color: var(--_primary-400);
+    border-radius: 6px;
+    color: var(--_base-white);
+    &:hover {
+      background-color: var(--_primary-500);
+    }
+  }
+  .chk_can_btn {
+    padding: 12px 16px;
+    background-color: transparent;
+    border-radius: 6px;
+    color: var(--_gray-600);
+    padding-inline: 10px;
+    &:hover {
+      background-color: var(--_gray-50);
+      color: var(--_gray-900);
+    }
+  }
+}