Initial commit
This commit is contained in:
169
src/pages/product/product.module.css
Normal file
169
src/pages/product/product.module.css
Normal file
@@ -0,0 +1,169 @@
|
||||
.productDetailContainer {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* radio.module.css */
|
||||
.productContainer :global(.ant-radio-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-checked .ant-radio-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-space-gap-row-small) {
|
||||
row-gap: 0px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* .productContainer :global(.ant-checkbox-input) {
|
||||
margin-top: 5px !important;
|
||||
} */
|
||||
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
border-radius: 40px !important;
|
||||
}
|
||||
|
||||
/* CheckboxGroup.module.css */
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .productDetailContainer path {
|
||||
fill: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Restaurant-Style Description */
|
||||
.descriptionSection {
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0 16px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.descriptionSection:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.descriptionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.descriptionIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.descriptionIcon::before {
|
||||
content: "🍽️";
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.descriptionLabel {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--secondary);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
opacity: 0.85;
|
||||
text-align: justify;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.descriptionText::first-letter {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Dark mode restaurant styles */
|
||||
:global(.darkApp) .descriptionSection {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(26, 26, 26, 0.95) 0%,
|
||||
rgba(42, 42, 42, 0.98) 100%
|
||||
);
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionLabel {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionText {
|
||||
color: #e5e5e5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionText::first-letter {
|
||||
color: var(--primary2);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.descriptionSection {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.descriptionLabel {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user