studio-variable/index-shop
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

merge sliders
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source
This commit is contained in:
isUnknown 2025-12-22 10:22:36 +01:00
commit b59d841d39
13 changed files with 391 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/template/shop/_layout.scss
View file

@ -1,8 +1,4 @@
[data-template="home"] {
main {
margin-bottom: calc(var(--spacing) * 2);
}
[data-template="store"] {
.p__baseline-big {
margin-top: calc(var(--spacing) * 2);
}

237
assets/css/template/shop/_section--product.scss
View file

@ -1,12 +1,28 @@
.section__product,
.store__nav{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.section__product,
.store__nav {
max-width: 1000px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.store__nav {
padding-top: calc(var(--spacing) * 1);
padding-bottom: calc(var(--spacing) * 0.5);
color: var(--color-txt-light);
font-size: var(--fs-small);
a {
text-decoration: none;
@ -21,13 +37,80 @@
}
}
.section__product {
.product-gallery {
li {
list-style: none;
.section__product .details {
// margin-bottom: calc(var(--spacing) * 2);
ul{
margin-left: 2ch;
li{
padding-bottom: 0.2em;
}
}
}
.product-options__list {
list-style: none;
display: flex;
gap: 2ch;
li {
position: relative;
input[type="radio"] {
position: fixed;
opacity: 0;
pointer-events: none;
}
label {
font-family: var(--title);
font-size: var(--fs-normal);
height: 4ch;
width: 4ch;
border-radius: 50%;
border: var(--border);
border-color: transparent;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0px;
cursor: pointer;
}
input[type="radio"]:checked + label {
border-color: var(--color-txt);
}
input[type="radio"]:not(:checked) + label:hover {
border-color: var(--grey-600);
background-color: var(--grey-800);
}
}
}
.product-gallery {
position: relative;
aspect-ratio: 4 / 3;
.swiper-slide {
width: 100%;
figure {
aspect-ratio: 1/1;
aspect-ratio: 4 / 3;
width: 100%;
height: 100%;
img {
width: 100%;
@ -37,50 +120,54 @@
}
}
.product-options__list {
list-style: none;
display: flex;
gap: 2ch;
// Swiper navigation arrows
.swiper-button-prev,
.swiper-button-next {
color: var(--color-txt);
width: 20px;
height: 20px;
li {
position: relative;
&:after {
font-size: 20px;
font-weight: bold;
}
input[type="radio"] {
position: fixed;
opacity: 0;
pointer-events: none;
}
label {
font-family: var(--title);
font-size: var(--fs-normal);
height: 4ch;
width: 4ch;
border-radius: 50%;
border: var(--border);
border-color: transparent;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0px;
cursor: pointer;
}
input[type="radio"]:checked + label {
border-color: var(--color-txt);
}
input[type="radio"]:not(:checked) + label:hover {
border-color: var(--grey-600);
background-color: var(--grey-800);
}
&:hover {
opacity: 0.7;
}
}
// Swiper pagination dots
.swiper-pagination {
position: relative;
margin-top: calc(var(--spacing) * 0.5);
bottom: 0;
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: var(--grey-600);
opacity: 0.5;
transition: opacity 0.3s;
&:hover {
opacity: 0.7;
}
}
.swiper-pagination-bullet-active {
background: var(--color-txt);
opacity: 1;
}
}
}
.hero {
margin-bottom: calc(var(--spacing) * 1);
padding-top: calc(var(--spacing) * 0.5);
padding: calc(var(--spacing) * 0.5) 0;
border-top: var(--border-light);
border-bottom: var(--border-light);
.p__baseline-big {
margin: 0;
@ -88,18 +175,18 @@
}
}
.add-to-cart,
.product-options {
.add-to-cart {
margin: 0;
border-bottom: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
.product-options__label {
font-weight: 600;
margin-bottom: calc(var(--spacing) * 0.25);
.product-options {
border-bottom: var(--border-light);
padding: calc(var(--spacing) * 0.25) 0;
}
}
@media #{$small} {
.store__nav a {
@ -110,6 +197,7 @@
.section__product {
display: flex;
flex-direction: column;
margin-bottom: 10vh;
.col-left {
display: contents;
@ -137,40 +225,47 @@
.add-to-cart {
order: 5;
}
.product-gallery{
width: 100vw;
position: relative;
left: calc(var(--padding-body)*-1);
.swiper-button-prev,
.swiper-button-next{ display: none; }
}
}
}
@media #{$small-up} {
.section__product {
.section__product{
display: grid;
grid-template-columns: 50% 50%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing) * 0.5);
position: relative;
.col-left {
padding-right: var(--padding-body);
}
grid-template-columns: 1fr 1fr;
gap: calc(var(--padding-body)*2);
margin-bottom: calc(var(--spacing)*3);
.details {
margin-bottom: calc(var(--spacing) * 3);
}
.add-to-cart,
.product-options {
width: calc(50% - var(--padding-body));
}
.add-to-cart {
position: absolute;
bottom: 10px;
margin-bottom: calc(var(--spacing) * 2);
flex-grow: 1;
}
.product-options {
position: absolute;
bottom: calc(var(--spacing) * 2);
border-top: var(--border-light);
}
.col-left{
min-height: 100%;
padding-bottom: 40px; //dots
display: flex;
flex-direction: column;
}
}
.product-gallery .swiper-slide figure{
width: calc(100% - 60px);
}
}