@sc-360-v2/storefront-cms-library 0.5.31 → 0.5.33

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/fb-dropdown.scss

@@ -1,125 +1,125 @@
-.fb_dropdown_main {
-  position: relative;
-  width: 100%;
-}
-
-.fb_dropdown_label {
-  width: 100%;
-  height: 40px;
-  border: 1px solid var(--_gray-300);
-  border-radius: 6px;
-  background: var(--_base-white);
-  cursor: pointer;
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: border 0.2s ease;
-
-  &:focus,
-  &:focus-within {
-    border-color: var(--_primary-300);
-    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-    outline: none;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    background: var(--_gray-100);
-    color: var(--_gray-400);
-  }
-
-  .fb_dropdown_text {
-    color: var(--_gray-800);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 90%;
-  }
-
-  .fb_dropdown_icon {
-    display: flex;
-    transition: transform 300ms ease;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    &.open {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.fb_dropdown_panel {
-  position: absolute;
-  width: 100%;
-  background-color: var(--_base-white);
-  border: 1px solid var(--_gray-300);
-  border-radius: 6px;
-  margin-top: 4px;
-  z-index: 10;
-  max-height: 200px;
-  overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-  &.drop-up {
-    bottom: 44px;
-    top: auto;
-    margin-top: 0;
-    margin-bottom: 4px;
-  }
-
-  &.drop-down {
-    top: 100%;
-  }
-
-  ul {
-    list-style: none;
-    padding: 4px;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    li {
-      padding: 0;
-    }
-
-    .dropdown_option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      font-size: 14px;
-      color: var(--_gray-700);
-      cursor: pointer;
-      transition: background 0.2s;
-      border-radius: 4px;
-
-      input[type="checkbox"] {
-        margin: 0;
-        pointer-events: none;
-      }
-
-      &:hover {
-        background-color: var(--_primary-50);
-        color: var(--_primary-500);
-      }
-
-      &.selected {
-        background-color: var(--_primary-25);
-        color: var(--_primary-700);
-        font-weight: 500;
-      }
-    }
-  }
-}
-
-.empty-options {
-  padding: 10px 12px;
-  color: var(--_gray-500);
-  font-size: 14px;
-  text-align: center;
-}
+.fb_dropdown_main {
+  position: relative;
+  width: 100%;
+}
+
+.fb_dropdown_label {
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--_gray-300);
+  border-radius: 6px;
+  background: var(--_base-white);
+  cursor: pointer;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border 0.2s ease;
+
+  &:focus,
+  &:focus-within {
+    border-color: var(--_primary-300);
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    outline: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    background: var(--_gray-100);
+    color: var(--_gray-400);
+  }
+
+  .fb_dropdown_text {
+    color: var(--_gray-800);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90%;
+  }
+
+  .fb_dropdown_icon {
+    display: flex;
+    transition: transform 300ms ease;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.fb_dropdown_panel {
+  position: absolute;
+  width: 100%;
+  background-color: var(--_base-white);
+  border: 1px solid var(--_gray-300);
+  border-radius: 6px;
+  margin-top: 4px;
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  &.drop-up {
+    bottom: 44px;
+    top: auto;
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+
+  &.drop-down {
+    top: 100%;
+  }
+
+  ul {
+    list-style: none;
+    padding: 4px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    li {
+      padding: 0;
+    }
+
+    .dropdown_option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      font-size: 14px;
+      color: var(--_gray-700);
+      cursor: pointer;
+      transition: background 0.2s;
+      border-radius: 4px;
+
+      input[type="checkbox"] {
+        margin: 0;
+        pointer-events: none;
+      }
+
+      &:hover {
+        background-color: var(--_primary-50);
+        color: var(--_primary-500);
+      }
+
+      &.selected {
+        background-color: var(--_primary-25);
+        color: var(--_primary-700);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.empty-options {
+  padding: 10px 12px;
+  color: var(--_gray-500);
+  font-size: 14px;
+  text-align: center;
+}