forked from crowetic/commerce
71 lines
1.1 KiB
CSS
71 lines
1.1 KiB
CSS
.root {
|
|
@apply relative grid items-start gap-8 grid-cols-1;
|
|
|
|
@screen lg {
|
|
@apply grid-cols-12;
|
|
}
|
|
}
|
|
|
|
.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 h-full;
|
|
}
|
|
|
|
.nameBox {
|
|
@apply absolute top-6 left-6 z-20;
|
|
|
|
& .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-hover-1 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-auto max-h-full object-cover;
|
|
}
|
|
|
|
.button {
|
|
min-width: 300px;
|
|
text-align: center;
|
|
}
|