461 lines
9.4 KiB
SCSS
461 lines
9.4 KiB
SCSS
// ProductPage.module.scss
|
||
|
||
.container {
|
||
max-width: 1366px;
|
||
margin: 0 auto;
|
||
padding: 20px 1.375rem 15px 1.375rem;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// ─── Breadcrumb ───────────────────────────────────────────────────
|
||
.breadcrumb {
|
||
margin-bottom: 15px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
.separator {
|
||
margin: 0 8px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
// ─── Product section: 3 kolon ─────────────────────────────────────
|
||
// desktop: [image 35%] | [info+description flex:1] | [purchase 260px]
|
||
// tablet: [image 45%] [info 55%] / [purchase full-width]
|
||
// mobile: tek kolon
|
||
.productSection {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: flex-start;
|
||
// background-color: #fff;
|
||
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
// padding: 1.25rem;
|
||
box-sizing: border-box;
|
||
|
||
@media screen and (max-width: 900px) {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
@media screen and (max-width: 639px) {
|
||
flex-direction: column;
|
||
border-radius: 8px;
|
||
// padding: 0.75rem;
|
||
}
|
||
}
|
||
|
||
// ─── Sol: resim kolonu ────────────────────────────────────────────
|
||
.productImage {
|
||
background: #fff;
|
||
// padding: 20px;
|
||
border-radius: 8px;
|
||
width: 35%;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
|
||
@media screen and (max-width: 900px) {
|
||
width: 45%;
|
||
border-radius: 8px;
|
||
// padding: 5px;
|
||
}
|
||
|
||
@media screen and (max-width: 639px) {
|
||
width: 100%;
|
||
padding: 0;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
img {
|
||
width: 99%;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
// ─── Orta: isim + meta + description kolonu ───────────────────────
|
||
.productInfo {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
|
||
|
||
@media screen and (max-width: 900px) {
|
||
// tablet: image(45%) + info yan yana, purchase wrap ile alta iner
|
||
width: calc(55% - 24px);
|
||
flex: none;
|
||
}
|
||
|
||
@media screen and (max-width: 639px) {
|
||
width: 100%;
|
||
|
||
// mobile'da purchase card orta kolona taşınır (sticky bar var)
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.productTitle {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 0 4px;
|
||
color: #000;
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
|
||
// ─── Sağ: satın alma kartı kolonu ────────────────────────────────
|
||
.purchaseCol {
|
||
width: 260px;
|
||
flex-shrink: 0;
|
||
|
||
@media screen and (max-width: 900px) {
|
||
width: 100%;
|
||
}
|
||
|
||
@media screen and (max-width: 639px) {
|
||
display: none; // mobile'da sticky bar devreye girer
|
||
}
|
||
}
|
||
|
||
.purchaseCard {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
// ─── Fiyat satırı ─────────────────────────────────────────────────
|
||
.priceRow {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
}
|
||
|
||
.priceLabel {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #666;
|
||
}
|
||
|
||
.priceRight {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
}
|
||
|
||
.oldPrice {
|
||
font-size: 14px;
|
||
color: #d32824;
|
||
text-decoration: line-through;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// ─── Aksiyon butonları satırı ─────────────────────────────────────
|
||
.Btn {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.addToCartButton {
|
||
flex: 1;
|
||
height: 42px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 6px;
|
||
border: none;
|
||
background-color: #d32824;
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background-color 150ms ease;
|
||
white-space: nowrap;
|
||
|
||
svg {
|
||
fill: #fff;
|
||
width: 18px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #e86064;
|
||
}
|
||
}
|
||
|
||
.favoriteButton {
|
||
width: 42px;
|
||
height: 42px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 6px;
|
||
background-color: #fff;
|
||
border: 1px solid #e5e7eb;
|
||
cursor: pointer;
|
||
transition: border-color 150ms ease;
|
||
|
||
svg {
|
||
fill: #888;
|
||
height: 20px;
|
||
width: 20px;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: #d32824;
|
||
|
||
svg {
|
||
fill: #d32824;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ─── Quantity controls ────────────────────────────────────────────
|
||
.quantityControls {
|
||
flex: 1;
|
||
height: 42px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #d32824;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.quantityBtn {
|
||
width: 42px;
|
||
height: 42px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
|
||
svg {
|
||
fill: #fff;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
&:hover {
|
||
background: #e86064;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ─── Meta tablo ───────────────────────────────────────────────────
|
||
.productMeta {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
padding: 16px 20px;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
gap: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.metaItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.metaLabel {
|
||
color: #000;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.metaValue {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// ─── Description card ─────────────────────────────────────────────
|
||
.descriptionCard {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
padding: 16px 20px;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.descriptionHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
|
||
.descriptionIcon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
background: #1a1a2e;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
stroke: #fff;
|
||
fill: none;
|
||
}
|
||
}
|
||
|
||
.descriptionTitle {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.productDescription {
|
||
font-size: 14px;
|
||
color: #000;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
// ─── Mobile sticky bar ────────────────────────────────────────────
|
||
.productActionsMobile {
|
||
display: none;
|
||
|
||
@media screen and (max-width: 639px) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
bottom: 59px;
|
||
z-index: 50;
|
||
background: #fff;
|
||
border-top: 1px solid #e5e7eb;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
padding: 10px 16px;
|
||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
|
||
gap: 12px;
|
||
border-radius: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.mobilePriceContainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
width: 35%;
|
||
|
||
.price {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
}
|
||
|
||
.oldPrice {
|
||
font-size: 13px;
|
||
color: #d32824;
|
||
text-decoration: line-through;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.mobileBtnContainer {
|
||
display: flex;
|
||
gap: 8px;
|
||
width: 65%;
|
||
}
|
||
|
||
// ─── Similar products ─────────────────────────────────────────────
|
||
.similarProducts {
|
||
margin-top: 40px;
|
||
|
||
.sectionTitle {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
}
|
||
|
||
.productsGrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 24px;
|
||
|
||
@media screen and (max-width: 1230px) {
|
||
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
|
||
}
|
||
|
||
@media screen and (max-width: 1023px) {
|
||
grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
@media screen and (max-width: 510px) {
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
}
|
||
}
|
||
|
||
// ─── Misc ─────────────────────────────────────────────────────────
|
||
.modalButton {
|
||
padding: 6px 15px;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.wishlistButton {
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
|
||
&:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.outOfStock {
|
||
background-color: #ff4d4f;
|
||
} |