forked from crowetic/commerce
92 lines
1.3 KiB
CSS
92 lines
1.3 KiB
CSS
.root {
|
|
@apply relative grid items-start gap-8 grid-cols-1;
|
|
|
|
@screen lg {
|
|
@apply grid-cols-12 pt-10;
|
|
}
|
|
}
|
|
|
|
.productDisplay {
|
|
@apply relative flex px-0 pb-0 relative box-border col-span-7;
|
|
margin-right: -2rem;
|
|
margin-left: -2rem;
|
|
min-height: 400px;
|
|
|
|
@screen md {
|
|
min-height: 700px;
|
|
}
|
|
|
|
@screen lg {
|
|
@apply mx-0;
|
|
min-height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.squareBg {
|
|
@apply absolute inset-0 bg-violet z-0;
|
|
max-height: 250px;
|
|
|
|
@screen md {
|
|
@apply inset-20;
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
.nameBox {
|
|
@apply absolute top-6 left-0 z-10;
|
|
|
|
& .name {
|
|
@apply px-6 py-2 bg-primary text-primary font-bold;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
& .price {
|
|
@apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
|
|
}
|
|
|
|
@screen md {
|
|
& .name,
|
|
& .price {
|
|
@apply bg-violet text-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
@apply flex flex-col col-span-5;
|
|
|
|
@screen lg {
|
|
padding-top: 5rem;
|
|
}
|
|
}
|
|
|
|
.sliderContainer {
|
|
@apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
|
|
}
|
|
|
|
.img {
|
|
@apply w-full h-full object-cover;
|
|
|
|
@screen md {
|
|
height: 100%;
|
|
margin-top: -2.75rem;
|
|
}
|
|
|
|
@screen lg {
|
|
height: 150%;
|
|
margin-top: -10%;
|
|
}
|
|
|
|
@screen xl {
|
|
height: 170%;
|
|
margin-top: -19%;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
min-width: 300px;
|
|
text-align: center;
|
|
}
|