@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.61

package/dist/emtpy-templates.scss

@@ -1,165 +1,165 @@
-.empty_template {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  text-align: center;
-
-  h3 {
-    font-size: 16px;
-    color: var(--_gray-900);
-    font-weight: 600;
-    margin-bottom: 10px;
-  }
-  p {
-    font-size: 12px;
-    color: var(--_gray-600);
-  }
-}
-
-.empty_cart_wrapper {
-  display: flex;
-  flex-direction: column;
-  // align-items: center;
-  justify-content: start;
-  width: 100%;
-  // gap: 6px;
-  margin-top: 24px;
-  img {
-    max-width: 100px;
-    max-height: 100px;
-  }
-
-  .empty_msg_title {
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 32px;
-    padding-bottom: 8px;
-  }
-
-  .empty_msg_desc {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500;
-  }
-  .empty_cart_actions {
-    gap: 12px;
-    margin-top: 24px;
-    .empty_cart_template_actions {
-      display: flex;
-      gap: 24px;
-      margin-top: 24px;
-      .primary_btn {
-        color: var(--_thm-cs-tt-ls-as);
-        font-weight: 400;
-        font-size: 14px;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-    .empty_crt_btn {
-      padding: 12px 24px;
-      border-radius: 4px;
-      font-weight: 600px;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-
-      span {
-        display: flex;
-      }
-
-      .label {
-        color: var(--_thm-py-bs-dt-se-tt-cr);
-        font-size: 16px;
-      }
-      svg path {
-        stroke: var(--_thm-py-bs-dt-se-tt-cr);
-      }
-    }
-  }
-}
-
-// loading styles
-.loader_empty_template {
-  width: 82px;
-  height: 18px;
-  position: relative;
-  margin-bottom: 12px;
-}
-.loader_empty_template::before,
-.loader_empty_template::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, 10%);
-  top: 0;
-  background: var(--_gray-500);
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  animation: jump_loader 0.5s ease-in infinite alternate;
-}
-
-.loader_empty_template::after {
-  background: #0000;
-  color: var(--_gray-400);
-  top: 100%;
-  box-shadow:
-    32px -20px,
-    -32px -20px;
-  animation: split_loader 0.5s ease-out infinite alternate;
-}
-
-// loding data with icon using in bulk order pad and quick order pad
-.data__loading__wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .loading__container {
-    max-width: 500px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    .loading__spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid var(--_gray-200);
-      border-top: 4px solid var(--_primary-400);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    .text {
-      color: var(--_gray-600);
-      font-size: 14px;
-    }
-  }
-}
-
-@keyframes split_loader {
-  0% {
-    box-shadow:
-      8px -20px,
-      -8px -20px;
-  }
-  100% {
-    box-shadow:
-      32px -20px,
-      -32px -20px;
-  }
-}
-@keyframes jump_loader {
-  0% {
-    transform: translate(-50%, -100%);
-  }
-  100% {
-    transform: translate(-50%, 10%);
-  }
-}
+.empty_template {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+
+  h3 {
+    font-size: 16px;
+    color: var(--_gray-900);
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  p {
+    font-size: 12px;
+    color: var(--_gray-600);
+  }
+}
+
+.empty_cart_wrapper {
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  justify-content: start;
+  width: 100%;
+  // gap: 6px;
+  margin-top: 24px;
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
+
+  .empty_msg_title {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 32px;
+    padding-bottom: 8px;
+  }
+
+  .empty_msg_desc {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+  }
+  .empty_cart_actions {
+    gap: 12px;
+    margin-top: 24px;
+    .empty_cart_template_actions {
+      display: flex;
+      gap: 24px;
+      margin-top: 24px;
+      .primary_btn {
+        color: var(--_thm-cs-tt-ls-as);
+        font-weight: 400;
+        font-size: 14px;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    .empty_crt_btn {
+      padding: 12px 24px;
+      border-radius: 4px;
+      font-weight: 600px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        display: flex;
+      }
+
+      .label {
+        color: var(--_thm-py-bs-dt-se-tt-cr);
+        font-size: 16px;
+      }
+      svg path {
+        stroke: var(--_thm-py-bs-dt-se-tt-cr);
+      }
+    }
+  }
+}
+
+// loading styles
+.loader_empty_template {
+  width: 82px;
+  height: 18px;
+  position: relative;
+  margin-bottom: 12px;
+}
+.loader_empty_template::before,
+.loader_empty_template::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 10%);
+  top: 0;
+  background: var(--_gray-500);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: jump_loader 0.5s ease-in infinite alternate;
+}
+
+.loader_empty_template::after {
+  background: #0000;
+  color: var(--_gray-400);
+  top: 100%;
+  box-shadow:
+    32px -20px,
+    -32px -20px;
+  animation: split_loader 0.5s ease-out infinite alternate;
+}
+
+// loding data with icon using in bulk order pad and quick order pad
+.data__loading__wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .loading__container {
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    .loading__spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid var(--_gray-200);
+      border-top: 4px solid var(--_primary-400);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    .text {
+      color: var(--_gray-600);
+      font-size: 14px;
+    }
+  }
+}
+
+@keyframes split_loader {
+  0% {
+    box-shadow:
+      8px -20px,
+      -8px -20px;
+  }
+  100% {
+    box-shadow:
+      32px -20px,
+      -32px -20px;
+  }
+}
+@keyframes jump_loader {
+  0% {
+    transform: translate(-50%, -100%);
+  }
+  100% {
+    transform: translate(-50%, 10%);
+  }
+}

package/dist/faq.scss

@@ -470,7 +470,7 @@
             );
             font-style: var(
               --_ctm-mob-dn-ed-an-im-ft-se-ic,
-              var(--_tst-tab-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic))
+              var(--_ctm-tab-dn-ed-an-im-ft-se-ic, var(--_ctm-dn-ed-an-im-ft-se-ic))
             );
             text-align: var(
               --_ctm-mob-dn-ed-an-im-tt-an,
@@ -647,21 +647,17 @@
           position: relative;
         }
         &[data-show-divider="true"] {
+          // The divider is a pseudo-element and takes no space of its own, so a thick one
+          // grew back over the title above it — see dividerGapReserve in functions.scss.
+          .accordion-title:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-ed-an-im-dr-wt);
+          }
           .accordion-title:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-te-ad-dn-sg,
-                      var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
-                    ) /
-                    2
-                )
-            );
+            bottom: dividerGapOffset(--_ctm-lt-te-ad-dn-sg, --_ctm-dn-ed-an-im-dr-wt);
 
             height: var(
               --_ctm-mob-dn-ed-an-im-dr-wt,