fix(grid): $desktop variable (#1511)

This commit is contained in:
Emile Bangma 2024-10-18 05:50:48 +02:00 committed by GitHub
parent 67e1beea70
commit 9f701e5045
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 9 additions and 8 deletions

View file

@ -37,7 +37,7 @@
display: none; display: none;
} }
height: auto; height: auto;
@media all and ($desktop) { @media all and not ($desktop) {
height: 250px; height: 250px;
} }
} }

View file

@ -65,7 +65,7 @@
height: 80vh; height: 80vh;
width: 80vw; width: 80vw;
@media all and ($desktop) { @media all and not ($desktop) {
width: 90%; width: 90%;
} }
} }

View file

@ -64,7 +64,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and ($desktop) { @media all and not ($desktop) {
width: 90%; width: 90%;
} }

View file

@ -156,7 +156,7 @@ a {
column-gap: #{map-get($desktopGrid, columnGap)}; column-gap: #{map-get($desktopGrid, columnGap)};
row-gap: #{map-get($desktopGrid, rowGap)}; row-gap: #{map-get($desktopGrid, rowGap)};
grid-template-areas: #{map-get($desktopGrid, templateAreas)}; grid-template-areas: #{map-get($desktopGrid, templateAreas)};
@media all and ($desktop) { @media all and ($tablet) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)}; grid-template-columns: #{map-get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)}; grid-template-rows: #{map-get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)}; column-gap: #{map-get($tabletGrid, columnGap)};
@ -171,7 +171,7 @@ a {
grid-template-areas: #{map-get($mobileGrid, templateAreas)}; grid-template-areas: #{map-get($mobileGrid, templateAreas)};
} }
@media all and ($desktop) { @media all and not ($desktop) {
padding: 0 1rem; padding: 0 1rem;
} }
@media all and ($mobile) { @media all and ($mobile) {
@ -212,7 +212,7 @@ a {
margin-left: inherit; margin-left: inherit;
margin-right: inherit; margin-right: inherit;
} }
@media all and ($desktop) { @media all and not ($desktop) {
position: initial; position: initial;
height: unset; height: unset;
width: 100%; width: 100%;
@ -254,10 +254,11 @@ a {
min-width: 100%; min-width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and ($desktop) { @media all and ($tablet) {
margin-right: 0; margin-right: 0;
} }
@media all and ($mobile) { @media all and ($mobile) {
margin-right: 0;
margin-left: 0; margin-left: 0;
} }
} }

View file

@ -12,7 +12,7 @@ $breakpoints: (
$mobile: "(max-width: #{map-get($breakpoints, mobile)})"; $mobile: "(max-width: #{map-get($breakpoints, mobile)})";
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})"; $tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
$desktop: "(max-width: #{map-get($breakpoints, desktop)})"; $desktop: "(min-width: #{map-get($breakpoints, desktop)})";
$pageWidth: #{map-get($breakpoints, mobile)}; $pageWidth: #{map-get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px; $sidePanelWidth: 320px; //380px;