From 303bde3851a4907ca39c1fab708986d6789439e9 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Sat, 25 Jun 2016 01:09:13 +0200
Subject: [PATCH] [TASK] Move breakpoints to twitter bootstrap grid

---
 scss/modules/_map.scss       |  5 +++--
 scss/modules/_sidebar.scss   |  6 +++---
 scss/modules/_variables.scss | 20 +++++++++++++++++---
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/scss/modules/_map.scss b/scss/modules/_map.scss
index 80001c9..6c5ba2c 100644
--- a/scss/modules/_map.scss
+++ b/scss/modules/_map.scss
@@ -14,14 +14,15 @@
     button {
       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;
       top: 0;
       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);
     min-height: 240px;
     position: relative;
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index 221698b..14a4849 100644
--- a/scss/modules/_sidebar.scss
+++ b/scss/modules/_sidebar.scss
@@ -12,7 +12,7 @@
       left: $button-distance;
       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;
     }
   }
@@ -69,7 +69,7 @@
     }
   }
 
-  @media screen and (max-width: 80em) {
+  @media screen and (max-width: map-get($grid-breakpoints, xl) - 1) {
     background: $color-white;
     font-size: .8em;
     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;
     min-height: 0;
     position: static;
diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss
index 6b30dbc..b7756a1 100644
--- a/scss/modules/_variables.scss
+++ b/scss/modules/_variables.scss
@@ -20,9 +20,23 @@ $font-size-small: 11px !default;
 $button-font-size: 1.6rem !default;
 $button-distance: 16px !default;
 
-$min-screen-width: 840px !default;
-$sidebar-width: 560px !default;
-$sidebar-width-small: 426px !default;
+// Bootstrap breakpoints
+$grid-breakpoints: (
+  // 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
 $shadows: 1 !default;