Skip to content

Commit

Permalink
Add mobile/tablet grid settings (Shopify#1352)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sofiamatulis
sofiamatulis authored Feb 25, 2022
1 parent 8649ce0 commit 8ffdca1
Show file tree
Hide file tree
Showing 30 changed files with 1,736 additions and 68 deletions.
47 changes: 37 additions & 10 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1057,6 +1057,23 @@ summary::-webkit-details-marker {
}
}

@media screen and (max-width: 989px) {
.grid--1-col-tablet-down .grid__item {
width: 100%;
max-width: 100%;
}

.slider--tablet.grid--peek {
margin: 0;
width: 100%;
}

.slider--tablet.grid--peek .grid__item {
box-sizing: content-box;
margin: 0;
}
}

@media screen and (min-width: 990px) {
.grid--6-col-desktop .grid__item {
width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
Expand Down Expand Up @@ -1108,7 +1125,6 @@ summary::-webkit-details-marker {
}

.grid--peek .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
min-width: 35%;
}

Expand All @@ -1119,6 +1135,20 @@ summary::-webkit-details-marker {
.grid--peek.slider .grid__item:last-of-type {
margin-right: 1.5rem;
}

.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
.grid--peek .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
}

.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
.slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
}
}

@media screen and (min-width: 750px) and (max-width: 989px) {
Expand All @@ -1130,7 +1160,8 @@ summary::-webkit-details-marker {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
}

.slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
}

Expand All @@ -1141,17 +1172,13 @@ summary::-webkit-details-marker {
.slider--tablet.grid--peek .grid__item:last-of-type {
margin-right: 1.5rem;
}
}

@media screen and (max-width: 989px) {
.slider--tablet.grid--peek {
margin: 0;
width: 100%;
.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}

.slider--tablet.grid--peek .grid__item {
box-sizing: content-box;
margin: 0;
.grid--1-col-tablet-down.grid--peek .grid__item {
width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
}

Expand Down
4 changes: 0 additions & 4 deletions assets/section-collection-list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@
}

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(100% - 3rem);
}

.slider.collection-list--1-items {
padding-bottom: 0;
}
Expand Down
4 changes: 0 additions & 4 deletions assets/section-multicolumn.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,6 @@
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.multicolumn-list.slider .multicolumn-list__item {
width: calc(100% - 3rem);
}
}


Expand Down
72 changes: 72 additions & 0 deletions locales/cs.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
},
"blocks": {
Expand Down Expand Up @@ -612,6 +624,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
},
"presets": {
Expand Down Expand Up @@ -1328,6 +1352,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
}
},
Expand Down Expand Up @@ -1772,6 +1808,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
}
},
Expand Down Expand Up @@ -1837,6 +1885,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
},
"blocks": {
Expand Down Expand Up @@ -1965,6 +2025,18 @@
},
"columns_desktop": {
"label": "Počet sloupců na počítači"
},
"header_mobile": {
"content": "Mobilní rozvržení"
},
"columns_mobile": {
"label": "Počet sloupců na mobilu",
"options__1": {
"label": "1 sloupec"
},
"options__2": {
"label": "2 sloupce"
}
}
}
},
Expand Down
72 changes: 72 additions & 0 deletions locales/da.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
},
"blocks": {
Expand Down Expand Up @@ -612,6 +624,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
},
"presets": {
Expand Down Expand Up @@ -1328,6 +1352,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
}
},
Expand Down Expand Up @@ -1772,6 +1808,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
}
},
Expand Down Expand Up @@ -1837,6 +1885,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
},
"blocks": {
Expand Down Expand Up @@ -1965,6 +2025,18 @@
},
"columns_desktop": {
"label": "Antallet af kolonner på computer"
},
"header_mobile": {
"content": "Mobillayout"
},
"columns_mobile": {
"label": "Antallet af kolonner på mobil",
"options__1": {
"label": "1 kolonne"
},
"options__2": {
"label": "2 kolonner"
}
}
}
},
Expand Down
Loading

0 comments on commit 8ffdca1

Please sign in to comment.