Android_Retail/src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss

636 lines
11 KiB
SCSS
Raw Normal View History

2026-01-27 18:27:29 +05:30
.Selection-Component-Heading {
color: #161a1e;
// text-align: center;
font-family: Gilroy-SemiBold;
font-size: 33px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.Selection-Component-SubHeading {
color: #4d4d4d;
font-family: Manrope;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 4px 0 4px 4px;
}
.Selection-Component-selectheading {
color: #000;
font-family: Manrope;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
width: 100%;
span {
display: flex;
align-items: center;
gap: 2px;
color: #009b00 !important;
}
}
.Selection-Component-checkbox {
display: flex;
flex-direction: row;
gap: 1rem;
flex-wrap: wrap;
}
.Selection-Component-subdiv {
display: flex;
flex-direction: row;
gap: 0.5rem;
}
.Selection-Component-selectheadingMainDiv {
display: flex;
column-gap: 1rem;
}
.Selection-Component-selectContainer {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
border: 1px solid #1292ee;
padding: 10px;
border-radius: 12px;
transition: all 0.2s;
margin-top: 12px;
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.ant-checkbox-wrapper {
padding: 8px !important;
}
.ant-checkbox-label {
font-size: 12px;
}
}
.Selection-Component-tempUp {
flex-wrap: wrap;
display: flex;
flex-direction: row;
column-gap: 3rem;
}
.Selection-Component-fontsdiv {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1rem;
flex-wrap: wrap;
}
//nk
.Selection-Component-OverallDiv {
height: 80vh;
overflow: auto;
width: 100%;
padding-bottom: 10rem;
background-color: #fbf9fa;
padding: 12px 20px;
border-left: 1px solid #dddddd;
.ant-select-selector {
height: 40px !important;
}
.label-float {
display: none !important;
}
.ant-select-selection-item {
padding-top: 0 !important;
padding-inline-end: 16px !important;
font-size: 12px !important;
}
.anticon > svg {
color: #000000 !important;
vertical-align: unset !important;
font-size: 10px;
}
@media (max-width: 768px) {
padding: 10px 8px;
padding-bottom: 5rem;
}
}
//
// .Selection-Component-OverallDiv{
// padding:2rem 0 0 2rem;
// width:100%;
// }
// .ant-modal .ant-modal-footer .ant-btn+.ant-btn:not(.ant-dropdown-trigger){
// display: none
// }
.colorBtn {
background-color: var(--PRIMARY_BUTTON_BG_COLOR);
color: rgb(255, 255, 255);
font-family: var(--HEADING_FONT_FAMILY);
font-style: normal;
border: 4.8px solid var(--PRIMARY_BUTTON_BG_COLOR);
border-radius: 8px;
width: 30%;
float: right;
margin-top: 18px;
}
// .ant-btn-default{
// display: none;
// }
.Selection-Component-InputDiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2rem;
border: 1px solid #1292ee;
padding: 10px;
border-radius: 12px;
background-color: #f2f9fd;
transition: all 0.2s;
margin-top: 12px;
& .ant-form-item {
margin-bottom: 0px !important;
}
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
}
.Selection-Component-selectContainerDiv {
display: flex;
flex-direction: column;
// row-gap: 2rem;
}
.Selection-Component-SubDivContainer {
display: flex;
flex-direction: column;
// row-gap: 1rem;
}
.SelectComp-SubmitButton {
display: flex;
justify-content: flex-start;
margin-top: 1rem;
svg {
color: #fff !important;
}
button {
.anticon > svg {
color: #fff !important;
font-size: 14px;
}
}
}
.field-DropDown-Selection {
width: 150px !important;
}
.size-save-button {
background-color: #009b00;
font-size: 14px;
font-family: "Poppins";
font-weight: 400;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
}
.Selection-selectheading {
font-size: 14px;
font-weight: 500;
font-family: "Poppins";
line-height: 0.8;
}
.size-Cancel-button {
width: 71px;
background-color: #f5222d;
padding: 1px 2px 4px 0px;
font-size: 15px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
text-align: center;
}
.hex-input {
position: absolute;
right: -97px;
top: 86px;
.ant-input-affix-wrapper {
width: 50%;
height: 45px;
}
}
.color-hex-select {
.hex-input {
position: absolute;
right: -97px;
top: 94px;
}
}
/// swtich button style code
.defaultandCustomisedTheme {
display: flex;
align-items: center;
gap: 6px;
font-family: "Poppins";
margin: 0 0 10px 0;
background-color: #e1e1e1;
padding: 4px 4px;
width: max-content;
border-radius: 4px;
}
.defaultandCustomisedTheme > div {
font-weight: 500;
font-size: 20px;
padding: 2px 8px;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
display: flex;
align-items: center;
gap: 4px;
}
.defaultandCustomisedTheme > div:hover {
background-color: #f2f2f2;
}
.defaultandCustomisedTheme > div.selected {
background-color: #ffffff;
font-weight: 500;
border-radius: 4px;
svg {
color: #008b00 !important;
}
}
/// Another swtich button style code
.ProductMasterListSwitchBTN {
display: inline-flex;
gap: 16px;
font-family: "Poppins";
margin-bottom: 12px;
border-bottom: 1px solid #d1d5db;
}
.ProductMasterListSwitchBTN > div {
font-size: 22px;
font-weight: 600;
cursor: pointer;
color: #6b7280;
display: flex;
align-items: center;
gap: 6px;
position: relative;
border: none;
background: transparent;
font-family: "Gilroy";
transition: color 0.2s ease;
@media (max-width: 600px) {
font-size: 18px;
}
}
.ProductMasterListSwitchBTN > div:hover {
color: #0f172a;
}
.ProductMasterListSwitchBTN > div.selected {
color: #0f172a;
}
.ProductMasterListSwitchBTN > div.selected::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: #2c88ee;
border-radius: 2px;
}
.ProductMasterListSwitchBTN > div.selected svg {
color: #4765db !important;
}
// End
.themeListselected {
background-color: #dedede !important;
border: 1px solid #0000003f;
}
.themeList {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
white-space: nowrap;
scrollbar-width: thin;
padding: 6px;
padding-right: 4px;
height: max-content;
max-height: 160px;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 4px;
width: 100%;
> div {
background-color: #ffffff;
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
font-weight: 500;
text-transform: capitalize;
border: 1px solid #dadada;
&:hover {
background-color: #ededed;
border: 2px solid #dadada;
padding: 5px 10px;
}
}
}
.themeListOther {
text-align: right;
width: 100%;
> div {
cursor: pointer;
// border-bottom: 1px solid #1292ee;
color: #1292ee;
margin: 4px 10px 4px 4px;
}
}
.themeListOthers {
text-align: right;
> div {
cursor: pointer;
color: #ff0000;
margin: 6px 10px 6px 4px;
// background-color: #ff00002b;
border-radius: 4px;
padding: 1px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1px;
&:hover {
background-color: #ff00002b;
}
}
}
.themeListOthers1 {
text-align: right;
> div {
cursor: pointer;
//border-bottom: 1px solid #1292ee;
color: rgb(0, 126, 28);
margin: 6px 10px 6px 4px;
// background-color: rgba(0, 126, 27, 0.181);
padding: 1px 6px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
&:hover {
background-color: rgba(0, 126, 27, 0.181);
}
}
}
.themeListOthersclose {
width: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
> div {
height: max-content;
padding: 4px 4px;
color: #ff0000;
background-color: #dadada;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
}
.themeListmain {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f3f3f3;
width: 100%;
}
.LessMore {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
@media (max-width: 499px) {
.themeList {
width: 95vw;
}
}
.segmentData-style {
.ant-segmented-item-selected {
background-color: #059645 !important;
color: #fff !important;
}
}
.addNewSalesFiledBTN {
background-color: #2563eb;
// background-color: #1292ee;
color: #fff !important;
width: max-content;
height: max-content;
padding: 4px 8px;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
border-radius: 6px;
svg {
color: #fff !important;
font-weight: 500;
display: flex;
font-size: 16px;
}
}
.printSelectDefaultDIvs {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #1292ee;
background-color: #f2f9fddc;
border-radius: 10px;
width: 100%;
transition: all 0.3s;
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
}
.selectBillFiledPrint {
display: flex;
flex-direction: column;
border: 1px solid #1292ee;
background-color: #f2f9fddc;
border-radius: 10px;
width: 100%;
padding: 4px 10px;
margin-top: 12px;
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.ant-checkbox-wrapper {
padding: 8px !important;
}
.ant-checkbox-label {
font-size: 13px;
}
}
.handleAddBTN {
width: max-content;
padding: 6px 12px;
margin-top: 10px;
border-radius: 6px;
border: none;
background-color: #1292ee;
color: #fff;
font-family: "Poppins";
font-size: 12px;
cursor: pointer;
font-weight: 400;
}
.selectBillFiledInput {
display: flex;
flex-direction: column;
border: 1px solid #1292ee;
background-color: #f2f9fddc;
border-radius: 10px;
width: 100%;
padding: 0 14px;
margin-top: 12px;
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.ant-typography {
margin-bottom: 5px !important;
font-size: 12px;
font-family: "Poppins";
font-weight: 500;
}
}
.customisedStandardA4A5 {
display: flex;
align-items: center;
border: 1px solid #1292ee;
background-color: #f2f9fddc;
border-radius: 10px;
flex-wrap: wrap;
width: 100%;
padding: 0 14px;
margin-top: 12px;
&:hover {
background-color: #fff;
box-shadow:
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.ant-segmented-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.ant-segmented {
background: unset !important;
}
.ant-segmented-item {
width: 100%;
background-color: #e0e0e0;
transition: unset !important;
}
}
.SlecteCatDiv {
display: flex;
flex-wrap: wrap;
gap: 0;
.ant-form-item {
margin-bottom: 4px !important;
}
}
.SlecteCatDivSub2 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
gap: 1rem;
.addNewSalesFiledBTN {
margin-top: 16px !important;
}
}