@sc-360-v2/storefront-cms-library 0.3.5 → 0.3.8

package/dist/employee-bulk-order.scss

@@ -0,0 +1,547 @@
+.employee_bulk_order_header {
+  display: flex;
+  justify-self: end;
+  gap: 10px;
+  .single_payment_action {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .svg_icon {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.product-card {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .image-section {
+    width: 80px;
+    height: 100%;
+    img {
+      width: 50px;
+      height: 65px;
+      object-fit: cover;
+      border-radius: 2px;
+    }
+  }
+  .info-section {
+    margin-left: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 80px);
+    .header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      .product-name {
+        font-weight: 600;
+        font-size: 16px;
+        color: #1a1a1a;
+      }
+      .svg_icon {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+    .item-number,
+    .quota {
+      font-size: 14px;
+      color: #6b7280;
+      margin-top: 2px;
+    }
+
+    .item-number span,
+    .quota span {
+      margin-left: 4px;
+    }
+  }
+}
+
+.employee-bulk-order-section {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  .employee-products {
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    height: 36px;
+    display: grid;
+    align-items: anchor-center;
+  }
+  .employee-content-section {
+    display: flex;
+    height: calc(100% - 50px);
+    width: calc(100% - 10px);
+    .employees-section-title {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      font-weight: 600;
+      font-size: 14px;
+      margin-right: 10px;
+      display: flex;
+      justify-content: center;
+      overflow: visible;
+      position: sticky;
+      top: 0;
+      height: 100%;
+      position: relative;
+      &:before,
+      &:after {
+        content: "";
+        width: 1px;
+        height: calc(50% - 50px);
+        background: #eaecf0;
+        position: relative;
+        left: -10px;
+      }
+      &:before {
+        top: -14px;
+      }
+      &:after {
+        top: 14px;
+      }
+      .title {
+        background: #ffffff;
+        height: max-content;
+      }
+    }
+    .employee-content {
+      width: calc(100% - 21px);
+      display: flex;
+      .em_content {
+        // display: flex;
+        .add-entity-section {
+          width: 250px;
+          height: 88px;
+          position: relative;
+          border: 1px solid #d0d5dd;
+          border-bottom: none;
+          border-right: none;
+          .svg_icon {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            background: #243dc6;
+            width: 20px;
+            height: 20px;
+            justify-content: center;
+            border-radius: 50%;
+            cursor: pointer;
+            svg {
+              path {
+                stroke: #fff;
+              }
+            }
+          }
+          .em_add-product {
+            position: absolute;
+            right: 0;
+            .svg_icon {
+              right: -10px;
+            }
+          }
+          .em_add-employee {
+            position: absolute;
+            bottom: 0;
+            .svg_icon {
+              left: -10px;
+            }
+          }
+          .em_add-product-disabled {
+            pointer-events: none;
+            opacity: 0.8;
+            cursor: default;
+          }
+        }
+        .employees-section {
+          height: calc(100% - 88px);
+          border: 1px solid #d0d5dd;
+          overflow: auto;
+          width: 250px;
+          .employee_card {
+            padding: 12px;
+            display: grid;
+            gap: 12px;
+            border-bottom: 1px solid #d0d5dd;
+            height: 112px;
+            width: 100%;
+            .em_data {
+              display: flex;
+              // align-items: baseline;
+              gap: 10px;
+              .em_profile {
+                width: 40px;
+                height: 40px;
+                background: #ededed;
+                border-radius: 50%;
+                align-items: center;
+                text-align: center;
+                display: flex;
+                background-size: 100% 100%;
+                .em_profile_text {
+                  width: 100%;
+                }
+              }
+              .em_info {
+                display: grid;
+                gap: 4px;
+                .em_name_section {
+                  display: flex;
+                  align-items: center;
+                  .em_name {
+                    width: 158px;
+                    color: var(--_gray-900);
+                    font-size: 14px;
+                  }
+                  .svg_icon {
+                    display: flex;
+                    cursor: pointer;
+                  }
+                }
+                .em_code {
+                  width: 158px;
+                  color: var(--_gray-600);
+                  font-size: 12px;
+                }
+              }
+            }
+            .em_entity-status {
+              display: flex;
+              gap: 10px;
+            }
+          }
+        }
+        .employee_card.selected {
+          background: #e6f0ff;
+        }
+        .em_empty_section {
+          width: 100%;
+          height: 100%;
+          text-align: center;
+          display: grid;
+          align-items: anchor-center;
+          color: #475467;
+        }
+      }
+      .products-section {
+        width: calc(100% - 250px);
+        height: 100%;
+        border: 1px solid #d0d5dd;
+        display: flex;
+        overflow-x: auto;
+        .em_product {
+          min-width: 320px;
+          width: 320px;
+          height: 100%;
+          border: 1px solid #d0d5dd;
+          border-left: 0;
+          border-top: 0;
+          .em_product-data {
+            width: 100%;
+            // height: 177px;
+            border-bottom: 1px solid #d0d5dd;
+            .em_product-info {
+              height: 88px;
+              border-bottom: 1px solid #d0d5dd;
+            }
+            .em_product-variant,
+            .em_product-info {
+              // height: 50%;
+              padding: 12px;
+            }
+            .em_product-variant {
+              height: 68px;
+              .em_variant-status {
+                display: flex;
+                gap: 10px;
+              }
+            }
+          }
+          .em_pr_actions {
+            display: flex;
+            justify-content: end;
+            gap: 8px;
+            height: 40px;
+            align-items: center;
+            border-bottom: 1px solid #d0d5dd;
+            padding: 0 12px;
+            .action {
+              font-size: 14px;
+              cursor: pointer;
+            }
+            .discard {
+              color: #475467;
+            }
+            .save {
+              color: #243dc6;
+            }
+          }
+          .product-option-details {
+            height: calc(100% - 204px);
+            width: 100%;
+            overflow: auto;
+            .em_p_variant_options {
+              padding: 12px;
+              .em_p_opt {
+                margin-bottom: 4px;
+                .em_opt_name {
+                  font-size: 12px;
+                  color: #101828;
+                  font-weight: 500;
+                }
+                .em_p_opt_values {
+                  display: inline-block;
+                  padding: 8px 0;
+                  .em_opt_val {
+                    cursor: pointer;
+                    &:hover {
+                      // scale: 1.01;
+                      transition: all 0.2s;
+                    }
+                  }
+                  .em_opt_val.selected {
+                    border: 1px solid #243dc6;
+                  }
+                  .em_opt_val.not-avl {
+                    position: relative;
+                    overflow: hidden;
+                    &:after {
+                      content: "";
+                      width: 100%;
+                      height: 100%;
+                      position: absolute;
+                      left: 0;
+                      top: 0;
+                      background: url(https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/development/Line%207.png);
+                      background-repeat: no-repeat;
+                      background-size: 100% 100%;
+                      overflow: hidden;
+                    }
+                  }
+                  .em_opt_val_swatch {
+                    width: 25px;
+                    height: 25px;
+                    float: left;
+                    margin: 0px 4px 4px 0px;
+                    border-radius: 50%;
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                  }
+                  .em_opt_val_single {
+                    min-width: 25px;
+                    max-width: max-content;
+                    padding: 4px;
+                    text-align: center;
+                    border-radius: 6px;
+                    margin: 0px 4px 4px 0px;
+                    float: left;
+                    border: 1px solid #d0d5dd;
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: var(--_gray-600);
+                  }
+                  .em_opt_val_single.selected {
+                    background: #f2f4fc;
+                  }
+
+                  // .em_opt_val_swatch.selected  {
+
+                  // }
+                }
+              }
+            }
+          }
+          .product-qty-section {
+            height: 46px;
+            position: relative;
+            input {
+              height: 100%;
+              width: 100%;
+              border: 1px solid #d0d5dd;
+              /* border-radius: 4px; */
+              border-left: 0;
+              border-right: 0;
+              padding: 0 64px;
+              text-align: center;
+            }
+            .qty-action {
+              position: absolute;
+              top: 0;
+              height: 100%;
+              width: 64px;
+              display: grid;
+              //   align-items: anchor-center;
+              //   text-align: center;
+              background: #e6f0ff;
+              cursor: pointer;
+              &:hover {
+                background: #c3dbff;
+              }
+
+              .svg_icon {
+                display: flex;
+                align-items: center;
+                justify-self: center;
+                cursor: pointer;
+              }
+            }
+            .qty-action.decrease {
+              left: 0;
+            }
+            .qty-action.increase {
+              right: 1px;
+            }
+            .qty_action_disabled {
+              pointer-events: none;
+              opacity: 0.8;
+              cursor: default;
+            }
+          }
+          .invalid_qty {
+            border: #f51605 1px solid !important;
+          }
+        }
+        .invalid_em_pr {
+          border: #f51605 1px solid !important;
+        }
+      }
+    }
+  }
+}
+
+.heade-body {
+  position: absolute;
+  right: 84px;
+  .employee_bulk_order_header {
+    display: flex;
+    justify-self: end;
+    gap: 16px;
+    .single_payment_action {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .svg_icon {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .employee_bulk_order_header_item {
+      color: #344054;
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+      &:after {
+        content: "";
+        width: 1px;
+        height: 24px;
+        background: #d0d5dd;
+        position: absolute;
+        right: -8px;
+      }
+    }
+    .action_item {
+      cursor: pointer;
+    }
+    .em_order_settings_act {
+      width: 40px;
+    }
+    .em_btn_act {
+      padding: 8px 14px;
+      height: 40px;
+      border-radius: 4px;
+    }
+
+    .em_review_btn {
+      background: #243dc6;
+      color: #fff;
+    }
+
+    .em_btn_act_disabled {
+      pointer-events: none;
+      opacity: 0.8;
+    }
+  }
+}
+
+.product-card {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .image-section {
+    width: 48px;
+    height: 64px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 2px;
+    }
+  }
+  .info-section {
+    margin-left: 12px;
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 48px);
+    .header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      .product-name {
+        font-weight: 600;
+        font-size: 14px;
+        color: #1a1a1a;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .svg_icon {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+    .em_p_code_s {
+      display: flex;
+      gap: 4px;
+      .em_p_code {
+        max-width: 160px;
+      }
+    }
+    .em_p_code_s,
+    .em_quota {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 2px;
+    }
+
+    .em_quota span {
+      margin-left: 4px;
+    }
+  }
+}
+
+.icon_with_label_section {
+  display: flex;
+  gap: 4px;
+  .label_elm {
+    color: var(--_primary-400);
+    font-size: 14px;
+  }
+}

package/dist/fb-dropdown.scss

@@ -0,0 +1,124 @@
+.dropdown_macro {
+  &.underline {
+    .dropdown_label {
+      border-radius: 0;
+      border: none;
+      border-bottom: 1px solid #333;
+      padding-inline: 0px;
+
+      &:focus-within,
+      &:focus {
+        border: 0;
+        box-shadow: none;
+        border-bottom: 1px solid #333;
+        // box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        background-color: var(--_base-white);
+
+        .dropdown_text {
+          color: var(--_primary-500);
+        }
+
+        svg {
+          stroke: var(--_primary-500);
+        }
+      }
+    }
+  }
+  .label {
+    font-size: 14px;
+    display: block;
+    margin-bottom: 4px;
+  }
+  .dropdown_label {
+    width: 100%;
+    height: 40px;
+    border: 1px solid var(--_gray-300);
+    border-radius: 6px;
+    background: white;
+    cursor: pointer;
+    padding-inline: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .dropdown_icon {
+      display: flex;
+      transition: transform 400ms ease;
+      will-change: transform;
+
+      &.open {
+        transform: rotate(180deg); // flipped up
+      }
+
+      &.close {
+        transform: rotate(0deg); // pointing down
+      }
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:focus-within,
+    &:focus {
+      border: 1px solid var(--_primary-300);
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+      background-color: var(--_base-white);
+
+      .dropdown_text {
+        color: var(--_primary-500);
+      }
+
+      svg {
+        stroke: var(--_primary-500);
+      }
+    }
+  }
+}
+
+.dropdown_panel_macro {
+  border: 1px solid var(--_gray-300);
+  padding: 4px;
+  border-radius: 6px;
+  position: absolute;
+  top: var(--_top-pos, 100%);
+  left: var(--_left-pos, 0);
+  width: var(--_panel-width, auto);
+  background-color: var(--_base-white);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 300ms ease,
+    transform 300ms ease;
+
+  &.open {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  &.closed {
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      padding: 8px 12px;
+      font-size: 14px;
+      color: var(--_gray-600);
+      background-color: var(--_base-white);
+      cursor: pointer;
+      border-radius: 4px;
+      &:hover {
+        background-color: var(--_primary-50);
+        color: var(--_primary-500);
+      }
+    }
+  }
+}