Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Move breakpoints to twitter bootstrap grid

Browse Source
This commit is contained in:
Xaver Maierhofer 2016-06-25 01:09:13 +02:00
parent a112b8f8af
commit 303bde3851
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/modules/_map.scss
View File

@ -14,14 +14,15 @@
button { button {
margin-left: $button-distance; margin-left: $button-distance;
} }
@media screen and (max-width: $min-screen-width) {
@media screen and (max-width: map-get($grid-breakpoints, lg) - 1) {
right: -1rem; right: -1rem;
top: 0; top: 0;
transform: scale(.8); transform: scale(.8);
} }
} }
@media screen and (max-width: $min-screen-width) { @media screen and (max-width: map-get($grid-breakpoints, lg) - 1) {
height: calc(100vh - 150px); height: calc(100vh - 150px);
min-height: 240px; min-height: 240px;
position: relative; position: relative;

6
scss/modules/_sidebar.scss
View File

@ -12,7 +12,7 @@
left: $button-distance; left: $button-distance;
transform: scale(-1, 1); transform: scale(-1, 1);
} }
@media screen and (max-width: $min-screen-width) { @media screen and (max-width: map-get($grid-breakpoints, lg) - 1) {
width: auto; width: auto;
} }
} }
@ -69,7 +69,7 @@
} }
} }
@media screen and (max-width: 80em) { @media screen and (max-width: map-get($grid-breakpoints, xl) - 1) {
background: $color-white; background: $color-white;
font-size: .8em; font-size: .8em;
margin: 0; margin: 0;
@ -88,7 +88,7 @@
} }
} }
@media screen and (max-width: $min-screen-width) { @media screen and (max-width: map-get($grid-breakpoints, lg) - 1) {
height: auto; height: auto;
min-height: 0; min-height: 0;
position: static; position: static;

20
scss/modules/_variables.scss
View File

@ -20,9 +20,23 @@ $font-size-small: 11px !default;
$button-font-size: 1.6rem !default; $button-font-size: 1.6rem !default;
$button-distance: 16px !default; $button-distance: 16px !default;
$min-screen-width: 840px !default; // Bootstrap breakpoints
$sidebar-width: 560px !default; $grid-breakpoints: (
$sidebar-width-small: 426px !default; // Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
) !default;
// 45% sidebar - based on viewport
$sidebar-width: map-get($grid-breakpoints, xl) * .45 !default;
$sidebar-width-small: map-get($grid-breakpoints, lg) * .45 !default;
// En/disable box-shadows // En/disable box-shadows
$shadows: 1 !default; $shadows: 1 !default;