diff --git a/src/check.scss b/src/check.scss index 774d06f..bea3807 100644 --- a/src/check.scss +++ b/src/check.scss @@ -1,1316 +1,117 @@ -.productListBrowseImageButton { - width: 65px; - background-color: #dbd1d1; - border: 0.5px solid gray; - border-radius: 3px; - font-size: 10px; - font-weight: 600; -} - -.productListBrowseImageButton2 { - width: 65px; - background-color: #dbd1d1; - border: 0.5px solid gray; - border-radius: 3px; - font-size: 10px; - font-weight: 600; -} - -.Counter-Category-mapping { - border-collapse: collapse; - border: 1px solid red; - margin: 0 0 1rem 0; -} - -.product-delete-input { - .example { - width: 80px !important; - } -} - -.delete-bulk-icon { - display: flex; - gap: 10px; - align-items: center; - justify-content: center; - width: 100%; - - svg { - margin-bottom: 0 !important; - } -} - -.userPageCustMaster { - height: 100vh !important; - - .formDiv { - height: 85% !important; - } -} - -.samplereportTableButton { - justify-content: flex-end; - margin: 1rem 0; - align-items: center; - display: flex; - width: 100%; -} - -.uploadexcelBtn { - .primary_Button { - background-color: #000 !important; - - &:focus { - color: #000000 !important; - border-color: #000 !important; - } - } -} - -.productMaster-input { - .tertiary_Button { - font-size: 13px; - background-color: #d37305 !important; - } -} - -// Customer Address Details List Styles -.customer-address-details-list { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1rem; - - @media (max-width: 768px) { - grid-template-columns: 1fr 1fr; - } - - @media (max-width: 500px) { - grid-template-columns: 1fr; - } - - .address-card { - margin-bottom: 20px; - padding: 16px; - border: 1px solid #e1e5e9; - border-radius: 12px; - background-color: #ffffff; - transition: all 0.3s ease; - position: relative; - overflow: auto; - height: 245px; - max-height: 300px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - - @media (max-width: 768px) { - height: max-content; - } - - @media (max-width: 500px) { - height: max-content; - margin-bottom: 0; - } - } - - .address-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; - padding: 6px 12px; - border-radius: 8px 8px 0px 0; - margin: -20px -20px 0px -20px; - - .header-left { - display: flex; - align-items: center; - gap: 12px; - - .address-number { - width: 32px; - height: 32px; - border-radius: 50%; - background-color: #b5a8ff; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: bold; - color: #23378a; - } - - h4 { - color: #23378a; - margin: 0; - font-size: 14px; - font-weight: 600; - letter-spacing: 0.5px; - } - } - } - - .header-actions { - display: flex; - gap: 0px; - align-items: flex-end; - justify-content: flex-end; - margin-top: 6px; - width: 100%; - - svg { - display: flex; - } - - .edit-btn, - .remove-btn { - border: none; - font-family: 'Poppins'; - padding: 4px 10px; - border-radius: 6px; - cursor: pointer; - font-size: 12px; - font-weight: 400; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 4px; - height: max-content; - } - - .remove-btn { - background: unset; - color: #cf0b0fe6; - } - - .edit-btn { - background: unset; - color: #0ea021; - } - } - - .address-type-section { - - // padding: 12px; - // background-color: #f8fafc; - // border-radius: 8px; - // border: 1px solid #e2e8f0; - .ant-checkbox-inner { - height: 14px; - width: 14px; - } - - .ant-checkbox-label { - font-size: 12px; - } - - label { - font-size: 13px; - font-weight: 600; - color: #4a5568; - margin-bottom: 8px; - display: block; - } - - .ant-checkbox-group { - display: flex; - gap: 0; - flex-wrap: wrap; - } - - .ant-checkbox-wrapper { - display: flex; - } - } - - .address-details-grid { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 4px; - margin-top: 10px; - - .address-detail-item { - padding: 2px 2px; - border-radius: 4px; - line-height: 1.3; - - // &.address1 { - // border-left: 2px solid #d0c8ff; - // } - // &.address2 { - // border-left: 2px solid #d0c8ff; - // } - // &.zip { - // border-left: 2px solid #d0c8ff; - // } - // &.city { - // border-left: 2px solid #d0c8ff; - // } - // &.district { - // border-left: 2px solid #d0c8ff; - // } - // &.state { - // border-left: 2px solid #d0c8ff; - // } - // &.coordinates { - // border-left: 2px solid #d0c8ff; - // } - - .labelCoordinates { - font-size: 10px; - color: #3b424d; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - } - - .value { - font-size: 13px; - color: #000000; - font-weight: 500; - - &.coordinates { - font-size: 13px; - display: flex; - align-items: center; - gap: 4px; - margin-top: 4px; - - svg { - color: #3182ce; - } - } - } - } - } - - .empty-state { - text-align: center; - padding: 40px 20px; - background-color: #f8fafc; - border-radius: 12px; - border: 2px dashed #cbd5e0; - color: #718096; - - svg { - font-size: 48px; - margin-bottom: 16px; - color: #cbd5e0; - } - - h3 { - margin: 0 0 8px 0; - color: #4a5568; - } - - p { - margin: 0; - font-size: 14px; - } - } -} - -@media (max-width: 499px) { - .commonMaster-btn { - .tertiary_Button { - width: 40vw !important; - // font-size: 11px; - } - - .primary_Button { - width: 35vw !important; - font-size: 13px; - } - - .productMaster-input .primary_Button { - width: 33.33vw !important; - font-size: 13px; - // background-color: #f1c40f !important; - } - - .subRowFlex { - .product-add-iconMargin { - margin-top: 15px !important; - } - } - } - - // for all mobile screen no issue - .searchDiv { - width: 215px !important; - } - - .searchAddDiv { - font-size: 11px; - // .primary_Button { - // // width: 76.39vw !important; - // } - - .searchDiv { - width: 76.39vw !important; - } - } - - .ant-table table { - width: 800px; - } - - .subinputForm { - // width: 100%; - display: flex; - flex-direction: row !important; - // gap: 1rem; - // align-items: center; - // justify-content: flex-start; - } - - .Counter-Category-mapping { - width: 80vw; - } - - .MapDiv { - width: var(--INPUT_FIELD_WIDTH); - overflow: hidden; - border: none; - } - - .CustmasterForm-RadiaSelect .CustmasterForm-RadiaSelect-flex { - display: flex; - flex-wrap: wrap; - font-size: 12px; - } - - .samplereportTableButton { - position: unset !important; - display: flex; - align-items: center; - justify-content: flex-end; - } - - .commonMaster-btn { - // flex-direction: column; - flex-wrap: wrap; - height: unset !important; - - button { - width: 250px !important; - } - - .productMaster-input { - .tertiary_Button { - position: unset !important; - left: unset !important; - } - } - } -} - -.customerMaster-Form-percentage { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.customerMaster-Form-percentage.field-DropDown { - width: 200px !important; -} - -.bulkuploadmodal { - .ant-modal-content { - padding: 16px 32px; - } -} - -.producttablepagination { - z-index: 50; - position: sticky !important; - bottom: 0; - margin: 0 !important; - padding: 0.5rem; - background-color: #fafafa; -} - -.productlistgetnoinput { - display: flex; - align-items: center; - gap: 10px; - - input { - width: 40px; - height: 25px; - padding: 10px; - border: none; - font-size: 14px; - border: 1px solid #c0c0c0; - background-color: #fff; - border-radius: 6px; - outline: none; - } -} - -.reportTableProduct { - .ant-table-thead { - z-index: 150 !important; - } - - .ant-table-cell { - padding: 4px !important; - } -} - -.PricePrice-input { - .ant-select-selection-item { - padding-top: 2px !important; - } -} - -.MapDiv1 { - width: 502px; - height: 400px !important; -} - -.customerMaster-Form-Form-details { - display: flex; - flex-wrap: wrap; - gap: 10px; - column-gap: 2rem; - width: 100%; -} - -.subinputFormInput { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - width: 100%; - gap: 1rem; - column-gap: 2rem; -} - -.Credits-percentage { - display: flex; - align-items: center; - justify-content: center; - border-radius: 30px; - background-color: yellow; - width: max-content; - height: max-content; - padding: 6px 12px; - - font-size: 13px; - font-weight: 700; - text-align: center; - - border: 1px solid #f1c40f; - transition: all 0.3s ease; - - :hover { - box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); - transform: translateY(-2px); - } -} - -.productNameDDAuto { - .ant-select-selector { - width: 250px !important; - } -} - -.product-name-scan { +.toggle-switch { position: relative; - - .product-scan-Icon { - position: absolute; - right: 10px; - top: 35%; - cursor: pointer; - } + display: inline-block; + width: 46px; + height: 24px; } -.Bulkuploadpost { - width: 100vw; - height: 99vh; - background-color: #00000052; - display: flex; - align-items: center; - justify-content: center; - position: fixed; +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + background-color: #ccc; + border-radius: 24px; top: 0; - right: 0; left: 0; + right: 0; bottom: 0; - backdrop-filter: blur(2px); - z-index: 499; + transition: 0.4s; } -.update-and-cancel { - display: flex; - align-items: flex-start; - gap: 10px; - - button { - padding: 14px 18px; - border: none; - font-family: 'Poppins', sans-serif; - font-size: 14px; - font-weight: 500; - cursor: pointer; - border-radius: 8px; - outline: none; - } - - >button:nth-child(1) { - background-color: #daecfd; - color: #1292ee; - } - - >button:nth-child(2) { - background-color: #ffdcdc; - color: #ee3333; - } +.slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + border-radius: 50%; + transition: 0.4s; } -@media (max-width: 500px) { - .ant-breadcrumb { - font-size: 12px !important; - } - - .breadCrumbClass { - padding: 0.1rem 0.5rem 0.1rem 0.7rem; - } - - .formName { - flex-direction: column; - margin-bottom: 5px; - - >div:nth-child(2) { - width: max-content; - font-size: 12px !important; - height: max-content; - } - } +/* Active (checked) style */ +.toggle-switch input:checked + .slider { + background-color: #28a745; } -.lowStock-SaveButton { - width: 4rem; - background-color: #0ea021; - border-radius: 1rem; - display: flex; - align-items: center; - justify-content: center; - padding: 8px; - color: white; - cursor: pointer; +.toggle-switch input:checked + .slider:before { + transform: translateX(22px); } - -.lowStock-SaveButton:hover { - background-color: #13c12a; - transform: translateY(-2px); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); -} - -.lowStock-button { - display: flex; - align-items: center; - gap: 8px; - background-color: #eab308; - color: #000; - padding: 8px 14px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; -} - -/* Hover effect */ -.lowStock-button:hover { - background-color: #f7c530; - transform: translateY(-2px); -} - -/* Active (click) effect */ -.lowStock-button:active { - transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -.add-slot-header { - font-size: 25px; - font-weight: 600; - font-family: 'Gilroy'; - padding-bottom: 6px; -} - -.ModalPaymentGatewayEmbedded { - .ant-modal-content { - overflow: hidden !important; - } -} - -.addTaxinputDrawer { - display: flex; - align-items: flex-start; - flex-direction: column; - gap: 2rem; -} - -@media (max-width: 768px) { - .productlistSearchDiv { - flex-direction: column; - } -} - -.swicthCardScanToggle { - button { - background-color: #1292ee !important; - font-family: 'Poppins'; - font-weight: 500; - } -} - -.BSC1NavBar-location { - &.scan { - padding: 2px 3px !important; - } -} - -.searched-value { - font-family: 'Poppins'; - font-weight: 500; -} - -.StorekitchenlistTable { - scrollbar-width: thin; - padding-right: 8px; - - @media (max-width: 600px) {} - - .ant-table-thead { - &:hover { - background-color: #bad4f9 !important; - } - - tr:hover { - background-color: #bad4f9 !important; - } - - .ant-table-cell { - color: #ffffff; - font-weight: 500; - font-size: 12px; - } - } - - .ant-table-cell { - &:hover { - background-color: #bad4f9 !important; - } - } -} - -.StoreRecipeinputForm { - .ant-form-item-explain-error { - top: 16px; - } -} - -.incenbtivepayBTN { - .ant-btn { - font-size: 16px !important; - padding: 8px 16px !important; - height: max-content; - text-align: center; - vertical-align: middle; - } -} - -.commonMaster-btn { - .SmartScanBTN { - button { - background-color: #0bad77 !important; - - &:focus { - color: #fff !important; - border-color: #fff !important; - } - } - } - - .tertiary_Button { - position: unset !important; - left: unset !important; - height: 45px !important; - width: 180px !important; - font-size: 14px !important; - - &:hover { - background-color: #d37305 !important; - } - } - - .smart_scan_Button { - position: unset !important; - left: unset !important; - height: 45px !important; - width: 180px !important; - font-size: 14px !important; - background-color: #28a745 !important; - - &:hover { - background-color: #218838 !important; - } - } -} - -.StoreKitchen-tables { - .ant-form-item { - margin-bottom: 0 !important; - } - - .ant-input { - padding: 6px 14px 6px 11px !important; - text-align: center; - } - - .ant-table table { - border-spacing: 0 !important; - } -} - -.pricechangeTable { - width: 83vw; - scrollbar-width: thin; - overflow-x: auto; - overflow-y: auto; - - .ant-input { - padding: 4px 11px 4px 11px !important; - width: 80px !important; - text-align: center; - border-color: #1292ee; - - &:hover { - background-color: #c2e6ff; - border-color: #fff; - } - } - - .ant-table-cell { - padding: 2px 6px !important; - } -} - -.editable-cell-value-wrap { - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - - .ant-input { - position: relative; - } -} - -.price-change-modal { - .ant-modal-content { - padding: 24px !important; - } -} - -.price-change-table { - .ant-form-item { - margin-bottom: 0 !important; - } - - .ant-input { - padding: 6px 14px 6px 11px !important; - text-align: center; - width: 100px !important; - border-color: #1292ee; - } - - .ant-input:hover { - background-color: #cfcfcf; - border-color: #fff; - } - - .example { - width: 100px !important; - } - - .table-notes { - font-family: 'Poppins'; - font-style: italic; - margin-bottom: 10px; - } - - .ant-table table { - border-spacing: 0 !important; - font-family: 'Poppins'; - } -} - -.formFields { - display: flex; - flex-direction: row; - gap: 1rem; -} - -.CommmasterPageHeader { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - flex-wrap: wrap; -} - -.comboProductList { - width: 100%; - - .ant-table-thead, - .ant-table-cell { - white-space: nowrap; - - th { - white-space: nowrap; - } - } -} - -table { - thead { - th { - font-family: 'Gilroy' !important; - } - } - - tbody { - td { - font-family: 'Poppins' !important; - font-weight: 500; - font-size: 13px; - } - } -} - -.radio-sidebar-container { - display: flex; - flex-direction: column; - gap: 4px; - height: 30vh; - overflow-y: auto; - overflow-x: hidden; - scrollbar-width: thin; - width: 340px; -} - -.radio-sidebar-item { - padding: 8px 12px; - border: 1px solid #d9d9d9; - border-radius: 8px; - cursor: pointer; - background-color: #fff; - transition: all 0.3s ease; - width: 220px; - - &.selected { - border-color: #901d77; - background-color: #f6f0ff; - } -} - -.radio-sidebar-title { - font-weight: 500; - white-space: nowrap; -} - -.radio-sidebar-desc { - font-size: 12px; - color: #666; -} - -.barcode-qr-preview { - display: flex; - align-items: center; - gap: 50px; - justify-content: space-between; - width: 100%; - border: 1px solid #b1b1b1; - padding: 10px; - border-radius: 4px; -} - -.labelGrid15 { - width: 92mm; -} - -@media print { - body { - margin: 0 !important; - padding: 0 !important; - } -} - -.label15 { - width: 15mm; - height: 15mm; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; -} - -.BarQrprint2details { - display: flex; - flex-direction: column; - align-items: center; - gap: 1mm; - font-size: 6px; - font-weight: 600; - text-align: center; - padding: 3px; - - .productNameBQ, - .MRPBQ { - line-height: 1; - } -} - -.preview-15x15-6cross { - margin: 0 !important; - padding: 0 !important; -} - -.size-selection { - width: 100%; -} - -.default-15x15-6cross { - margin: 0 !important; - padding: 0 !important; - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 1.5mm; -} - -.Sticker0 { - padding: 1.4mm; - width: 15mm; - height: 15mm; - text-align: center; - font-size: 6px; - //border:1px solid black; - font-weight: bold; - background-color: #fff; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #dadada; - border-radius: 4px; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } -} - -.text-ellipsis { - width: 90%; - white-space: nowrap; +.counter-expand-box { + max-height: 0; overflow: hidden; - text-align: center; - text-overflow: ellipsis; + opacity: 0; + padding: 0; + transition: all 0.3s ease; } -.grid22x35_3cross { - width: 105mm; - /* 35 × 3 */ - display: grid; - grid-template-columns: repeat(3, 35mm); - column-gap: 2mm; -} - -.Sticker1 { - width: 35mm; - height: 22mm; - padding-left: 2mm; - box-sizing: border-box; - padding-right: 2mm; - display: flex; - align-items: center; - justify-content: space-between; - - font-size: 9px; - font-weight: bold; -} - -.bg-white { - background: #fff; - border: 1px solid #dadada; - border-radius: 4px; -} - -.grid25x25_4cross { - display: grid; - grid-template-columns: repeat(4, 25mm); - width: 101.6mm; - column-gap: 3mm; - padding: 0px 10px; -} - -.sticker25x25 { - width: 25mm; - height: 25mm; - box-sizing: border-box; - padding: 3mm; - +.counter-expand-box.open { + max-height: 300px; // large enough for the content + opacity: 1; + padding: 12px; + border-radius: 6px; + border: 1px solid #ccc; + background: #f1f1f1; display: flex; flex-direction: column; - align-items: center; - justify-content: center; + gap: 8px; } -.sticker25-img { - width: 13mm; - height: 13mm; - object-fit: contain; +/// Another swtich button style code + +.PrinterSettingSwitchBTN { + display: inline-flex; + gap: 16px; + font-family: "Poppins"; + margin-bottom: 12px; + border-bottom: 1px solid #d1d5db; } -.sticker25x25-name { - text-align: center; - line-height: 1; - margin: 0; - font-size: 8px; -} - -.product-id2 { - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; - white-space: normal; - font-size: 8px; -} - -.grid25x50_2cross { - justify-content: center; - align-items: center; - display: grid; - grid-template-columns: repeat(2, 50mm); - width: 106mm; - column-gap: 6mm; -} - -.Sticker3 { - padding: 5px; - width: 50mm; - height: 25mm; - text-align: center; - font-size: 12px; +.PrinterSettingSwitchBTN > div { + font-size: 22px; + font-weight: 600; + cursor: pointer; + color: #6b7280; display: flex; - flex-direction: row; - font-weight: bold; align-items: center; - background: #fff; -} - -.grid50x30_1cross { - display: flex; - justify-content: center; - align-items: center; - - .Sticker4 { - width: 50mm; - height: 30mm; - padding: 6px; - box-sizing: border-box; - text-align: center; - font-size: 14px; - font-weight: bold; - background: #fff; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } + gap: 6px; + position: relative; + border: none; + background: transparent; + font-family: "Gilroy"; + transition: color 0.2s ease; + @media (max-width: 600px) { + font-size: 18px; } } -.grid50x25_1cross { - display: flex; - justify-content: center; - align-items: center; - - .Sticker5 { - width: 50mm; - height: 25mm; - padding: 4px; - box-sizing: border-box; - text-align: center; - font-size: 14px; - font-weight: bold; - background: #fff; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } - } - - .Sticker5-name { - font-size: 10px; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - width: 100%; - } +.PrinterSettingSwitchBTN > div:hover { + color: #0f172a; } -.grid100x13_1cross { - display: flex; - justify-content: center; - align-items: center; - - .Sticker6 { - width: 100mm; - height: 13mm; - padding: 4px 4px; - box-sizing: border-box; - text-align: center; - font-size: 14px; - font-weight: bold; - background: #fff; - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } - } +.PrinterSettingSwitchBTN > div.selected { + color: #0f172a; } -.grid100x15_1cross { - display: flex; - justify-content: center; - align-items: center; - - .Sticker7 { - width: 100mm; - height: 15mm; - padding: 4px 4px; - box-sizing: border-box; - text-align: center; - font-size: 14px; - font-weight: bold; - background: #fff; - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } - } -} - -.grid100x150_1cross { - display: flex; - justify-content: center; - align-items: center; - padding: 8px 8px; - - .OverAllSticker8 { - width: 100mm; - height: 150mm; - padding: 4px 4px; - box-sizing: border-box; - text-align: center; - font-size: 14px; - font-weight: bold; - background: #fff; - display: flex; - align-items: center; - flex-direction: column; - justify-content: space-between; - - >img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - } - } - - // .OverAllSticker8 { - // height: 149mm; - // } - - .Sticker8 { - display: flex; - justify-content: space-between; - width: 100mm; - height: 149mm; - font-size: 16px; - font-weight: bold; - } - - .text-section8 { - flex: 1; - text-align: left; - width: 50%; - } - - .StikerBr8 { - text-align: center; - font-size: 16px; - font-weight: bold; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - } - - .text-section8 .field-value { - flex: 1; - text-align: right; - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; - } -} - -.height-max { - height: max-content !important; -} - -.Sticker4-name { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; +.PrinterSettingSwitchBTN > div.selected::after { + content: ""; + position: absolute; + left: 0; + bottom: -1px; width: 100%; + height: 2px; + background: #2c88ee; + border-radius: 2px; } -.pricechangedata { - width: 100%; - overflow: auto; - scrollbar-width: thin; -} \ No newline at end of file +.PrinterSettingSwitchBTN > div.selected svg { + color: #4765db !important; +} + +// End \ No newline at end of file