mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-22 03:26:22 +00:00
fix(grid): $desktop variable (#1511)
This commit is contained in:
parent
67e1beea70
commit
9f701e5045
5 changed files with 9 additions and 8 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue