@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/buyForPopup.scss

@@ -1,339 +1,339 @@
-.popup_backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(6px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  .popup_container {
-    width: 90%;
-    max-width: 600px;
-    background: var(--_base-white);
-    border-radius: 12px;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    // min-height: 480px;
-
-    .popup_header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid var(--_gray-200);
-      padding: 16px 12px 16px 16px;
-      gap: 4px;
-
-      .close-icon {
-        width: 32px;
-        height: 32px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        & > span {
-          display: flex;
-        }
-        svg {
-          width: 18px;
-          height: 18px;
-          path {
-            stroke: var(--_gray-600);
-          }
-        }
-        &:hover {
-          background-color: var(--_gray-100);
-          svg path {
-            stroke: var(--_gray-900);
-          }
-        }
-      }
-
-      h2 {
-        color: var(--_thm-ty-p1-tt-cr);
-        font-size: 18px;
-        font-weight: normal;
-        margin: 0;
-        line-height: 28px;
-      }
-
-      p {
-        font-size: 14px;
-        color: #666;
-        margin: 4px 0 0;
-      }
-    }
-
-    .popup_body {
-      // padding: 8px 24px 24px 24px;
-      flex-grow: 1;
-      .est__dropdown__main {
-        padding-inline: 16px;
-        .est__dropdown {
-          border: 1px solid var(--_gray-300) !important;
-          &:focus-within {
-            box-shadow: 0px 0px 0px 3px var(--_gray-100);
-            border-radius: inherit;
-            border-radius: 6px;
-          }
-          .list .list__option {
-            font-size: 14px;
-            border-radius: 4px;
-          }
-          .est__dropdown__button {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            &.placeholder__text {
-              color: var(--_gray-500);
-            }
-            .value__selected {
-              justify-content: start;
-            }
-          }
-        }
-      }
-    }
-
-    .popup_footer {
-      display: flex;
-      padding: 16px 24px;
-      border-top: 1px solid var(--_gray-200);
-      justify-content: end;
-      gap: 12px;
-      .primary {
-        span {
-          display: flex;
-          svg {
-            width: 20px;
-            path {
-              stroke: var(--_base-white);
-            }
-          }
-        }
-      }
-
-      button {
-        padding: 10px 16px;
-        // border-radius: 6px;
-        // font-size: 14px;
-        // font-weight: 500;
-        // cursor: pointer;
-        // border: none;
-        // transition: background 0.2s ease;
-        // display: flex;
-        // align-items: center;
-        // &[aria-label="Discard"] {
-        //   &:hover {
-        //     background-color: var(--_gray-100);
-        //     color: var(--_gray-900);
-        //   }
-        // }
-
-        // &:first-child {
-        //   // background: #f3f3f3;
-        //   color: #333;
-
-        //   &:hover {
-        //     // background: #e0e0e0;
-        //   }
-        // }
-
-        &.proceed_button {
-          // background: var(--_primary-400);
-          // color: #fff;
-          // display: flex;
-          // gap: 10px;
-
-          // span {
-          //   svg {
-          //     width: 18px;
-          //     height: 18px;
-
-          //     path {
-          //       stroke: #ffffff;
-          //     }
-          //   }
-          // }
-          & > span {
-            display: flex;
-          }
-
-          &:disabled {
-            background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
-            cursor: not-allowed;
-            opacity: 0.7;
-          }
-
-          // &:not(:disabled):hover {
-          //   background: #0069d9;
-          // }
-        }
-      }
-    }
-  }
-}
-
-.popup_headertitle {
-  ul {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 14px;
-    color: var(--_gray-600);
-    list-style: none;
-
-    li {
-      &::after {
-        background: var(--_gray-300);
-        width: 5px;
-        height: 5px;
-        content: " ";
-        border-radius: 50%;
-        display: inline-block;
-        margin-left: 12px;
-      }
-
-      &:last-child::after {
-        padding: 0;
-        width: 0;
-        margin: 0;
-      }
-    }
-  }
-}
-
-.search_input {
-  padding: 10px 12px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  width: 100%;
-  font-size: 14px;
-  // width: 300px !important;
-  height: 40px !important;
-  border: 1px solid var(--_gray-300) !important;
-
-  &:focus {
-    // border: 1px solid var(--_primary-200) !important;
-    // outline: 2px solid var(--_primary-50);
-    box-shadow: 0px 0px 0px 3px var(--_gray-100);
-    border-radius: 6px;
-  }
-}
-
-.groups_list {
-  // display: flex;
-  // flex-direction: column;
-  // gap: 16px;
-  // overflow-y: auto;
-  max-height: 250px;
-  // overflow-y: auto;
-
-  .empty__data {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-block: 32px;
-
-    p {
-      color: var(--_thm-ty-p1-tt-cr);
-      font-size: 18px;
-      font-weight: normal;
-      margin: 0;
-      line-height: 28px;
-    }
-  }
-}
-
-.group_section {
-  padding: 0 16px 16px 16px;
-  height: 100%;
-  overflow-y: auto;
-  max-height: 250px;
-
-  .group_header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 500;
-    font-size: 14px;
-    padding-block: 16px 0px;
-    border-bottom: 1px solid var(--_gray-200);
-    margin-bottom: 16px;
-
-    input {
-      width: 100%;
-    }
-
-    label {
-      color: var(--_gray-600);
-      font-size: 14px;
-      font-weight: 400;
-    }
-  }
-
-  .group_body {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    .user_card {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px;
-      border: 1px solid var(--_gray-200);
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        background-color: var(--_primary-25);
-      }
-
-      &.selected {
-        background-color: var(--_primary-25);
-        border-color: var(--_primary-300);
-      }
-
-      .user_info {
-        display: flex;
-        flex-direction: column;
-
-        .user_name {
-          color: var(--_thm-ty-p1-tt-cr);
-          font-weight: 500;
-          font-size: 18px;
-          margin: 0;
-          line-height: 28px;
-        }
-
-        .user_id {
-          font-size: 14px;
-          color: var(--_thm-ty-p3-tt-cr);
-          display: flex;
-          gap: 4px;
-          margin-top: 6px;
-        }
-      }
-
-      .selected_icon {
-        font-size: 16px;
-
-        svg {
-          path {
-            stroke: var(--_primary-400);
-          }
-        }
-      }
-    }
-  }
-}
+.popup_backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  .popup_container {
+    width: 90%;
+    max-width: 600px;
+    background: var(--_base-white);
+    border-radius: 12px;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    // min-height: 480px;
+
+    .popup_header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--_gray-200);
+      padding: 16px 12px 16px 16px;
+      gap: 4px;
+
+      .close-icon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        & > span {
+          display: flex;
+        }
+        svg {
+          width: 18px;
+          height: 18px;
+          path {
+            stroke: var(--_gray-600);
+          }
+        }
+        &:hover {
+          background-color: var(--_gray-100);
+          svg path {
+            stroke: var(--_gray-900);
+          }
+        }
+      }
+
+      h2 {
+        color: var(--_thm-ty-p1-tt-cr);
+        font-size: 18px;
+        font-weight: normal;
+        margin: 0;
+        line-height: 28px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #666;
+        margin: 4px 0 0;
+      }
+    }
+
+    .popup_body {
+      // padding: 8px 24px 24px 24px;
+      flex-grow: 1;
+      .est__dropdown__main {
+        padding-inline: 16px;
+        .est__dropdown {
+          border: 1px solid var(--_gray-300) !important;
+          &:focus-within {
+            box-shadow: 0px 0px 0px 3px var(--_gray-100);
+            border-radius: inherit;
+            border-radius: 6px;
+          }
+          .list .list__option {
+            font-size: 14px;
+            border-radius: 4px;
+          }
+          .est__dropdown__button {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            &.placeholder__text {
+              color: var(--_gray-500);
+            }
+            .value__selected {
+              justify-content: start;
+            }
+          }
+        }
+      }
+    }
+
+    .popup_footer {
+      display: flex;
+      padding: 16px 24px;
+      border-top: 1px solid var(--_gray-200);
+      justify-content: end;
+      gap: 12px;
+      .primary {
+        span {
+          display: flex;
+          svg {
+            width: 20px;
+            path {
+              stroke: var(--_base-white);
+            }
+          }
+        }
+      }
+
+      button {
+        padding: 10px 16px;
+        // border-radius: 6px;
+        // font-size: 14px;
+        // font-weight: 500;
+        // cursor: pointer;
+        // border: none;
+        // transition: background 0.2s ease;
+        // display: flex;
+        // align-items: center;
+        // &[aria-label="Discard"] {
+        //   &:hover {
+        //     background-color: var(--_gray-100);
+        //     color: var(--_gray-900);
+        //   }
+        // }
+
+        // &:first-child {
+        //   // background: #f3f3f3;
+        //   color: #333;
+
+        //   &:hover {
+        //     // background: #e0e0e0;
+        //   }
+        // }
+
+        &.proceed_button {
+          // background: var(--_primary-400);
+          // color: #fff;
+          // display: flex;
+          // gap: 10px;
+
+          // span {
+          //   svg {
+          //     width: 18px;
+          //     height: 18px;
+
+          //     path {
+          //       stroke: #ffffff;
+          //     }
+          //   }
+          // }
+          & > span {
+            display: flex;
+          }
+
+          &:disabled {
+            background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
+            cursor: not-allowed;
+            opacity: 0.7;
+          }
+
+          // &:not(:disabled):hover {
+          //   background: #0069d9;
+          // }
+        }
+      }
+    }
+  }
+}
+
+.popup_headertitle {
+  ul {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    color: var(--_gray-600);
+    list-style: none;
+
+    li {
+      &::after {
+        background: var(--_gray-300);
+        width: 5px;
+        height: 5px;
+        content: " ";
+        border-radius: 50%;
+        display: inline-block;
+        margin-left: 12px;
+      }
+
+      &:last-child::after {
+        padding: 0;
+        width: 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.search_input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  width: 100%;
+  font-size: 14px;
+  // width: 300px !important;
+  height: 40px !important;
+  border: 1px solid var(--_gray-300) !important;
+
+  &:focus {
+    // border: 1px solid var(--_primary-200) !important;
+    // outline: 2px solid var(--_primary-50);
+    box-shadow: 0px 0px 0px 3px var(--_gray-100);
+    border-radius: 6px;
+  }
+}
+
+.groups_list {
+  // display: flex;
+  // flex-direction: column;
+  // gap: 16px;
+  // overflow-y: auto;
+  max-height: 250px;
+  // overflow-y: auto;
+
+  .empty__data {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-block: 32px;
+
+    p {
+      color: var(--_thm-ty-p1-tt-cr);
+      font-size: 18px;
+      font-weight: normal;
+      margin: 0;
+      line-height: 28px;
+    }
+  }
+}
+
+.group_section {
+  padding: 0 16px 16px 16px;
+  height: 100%;
+  overflow-y: auto;
+  max-height: 250px;
+
+  .group_header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    padding-block: 16px 0px;
+    border-bottom: 1px solid var(--_gray-200);
+    margin-bottom: 16px;
+
+    input {
+      width: 100%;
+    }
+
+    label {
+      color: var(--_gray-600);
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+
+  .group_body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    .user_card {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border: 1px solid var(--_gray-200);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        background-color: var(--_primary-25);
+      }
+
+      &.selected {
+        background-color: var(--_primary-25);
+        border-color: var(--_primary-300);
+      }
+
+      .user_info {
+        display: flex;
+        flex-direction: column;
+
+        .user_name {
+          color: var(--_thm-ty-p1-tt-cr);
+          font-weight: 500;
+          font-size: 18px;
+          margin: 0;
+          line-height: 28px;
+        }
+
+        .user_id {
+          font-size: 14px;
+          color: var(--_thm-ty-p3-tt-cr);
+          display: flex;
+          gap: 4px;
+          margin-top: 6px;
+        }
+      }
+
+      .selected_icon {
+        font-size: 16px;
+
+        svg {
+          path {
+            stroke: var(--_primary-400);
+          }
+        }
+      }
+    }
+  }
+}