ux(sass): restored old responsive rules

public/sass/_grafana.scss

@@ -24,49 +24,50 @@
 @import "layout/page";
 
 // COMPONENTS
-@import "components/panel_graph.scss";
-@import "components/submenu.scss";
-@import "components/panel_dashlist.scss";
-@import "components/panel_singlestat.scss";
-@import "components/panel_table.scss";
-@import "components/tagsinput.scss";
-@import "components/tables_lists.scss";
-@import "components/search.scss";
-@import "components/dashboard.scss";
-@import "components/tightform.scss";
-@import "components/gf-form.scss";
-@import "components/sidemenu.scss";
-@import "components/navbar.scss";
-@import "components/gfbox.scss";
-@import "components/pagination.scss";
-@import "components/tabs.scss";
-@import "components/timepicker.scss";
-@import "components/filter-controls.scss";
-@import "components/filter-list.scss";
-@import "components/filter-table.scss";
-@import "components/scrollbar.scss";
-@import "components/old_stuff.scss";
-@import "components/navbar.scss";
-@import "components/popovers.scss";
-@import "components/alerts.scss";
-@import "components/typeahead.scss";
-@import "components/tags.scss";
-@import "components/modals.scss";
-@import "components/dropdown.scss";
-@import "components/color_picker.scss";
-@import "components/tooltip.scss";
-@import "components/buttons.scss";
-@import "components/footer.scss";
-@import "components/infobox.scss";
-@import "components/shortcuts.scss";
-@import "components/query_editor.scss";
-@import "components/navs.scss";
+@import "components/panel_graph";
+@import "components/submenu";
+@import "components/panel_dashlist";
+@import "components/panel_singlestat";
+@import "components/panel_table";
+@import "components/tagsinput";
+@import "components/tables_lists";
+@import "components/search";
+@import "components/dashboard";
+@import "components/tightform";
+@import "components/gf-form";
+@import "components/sidemenu";
+@import "components/navbar";
+@import "components/gfbox";
+@import "components/pagination";
+@import "components/tabs";
+@import "components/timepicker";
+@import "components/filter-controls";
+@import "components/filter-list";
+@import "components/filter-table";
+@import "components/scrollbar";
+@import "components/old_stuff";
+@import "components/navbar";
+@import "components/popovers";
+@import "components/alerts";
+@import "components/typeahead";
+@import "components/tags";
+@import "components/modals";
+@import "components/dropdown";
+@import "components/color_picker";
+@import "components/tooltip";
+@import "components/buttons";
+@import "components/footer";
+@import "components/infobox";
+@import "components/shortcuts";
+@import "components/query_editor";
+@import "components/navs";
 
 // PAGES
-@import "pages/login.scss";
-@import "pages/playlist.scss";
-@import "pages/admin.scss";
-@import "pages/alerting.scss";
-@import "pages/apps.scss";
-@import "pages/signup.scss";
+@import "pages/login";
+@import "pages/playlist";
+@import "pages/admin";
+@import "pages/alerting";
+@import "pages/apps";
+@import "pages/signup";
 
+@import "old_responsive";

public/sass/grafana-responsive.scss → public/sass/_old_responsive.scss

-@import "variables.dark.scss";
-@import "bootstrap/responsive.scss";
-
-$gridColumnWidth:         70px;
-$gridGutterWidth:         10px;
-
-$gridColumnWidth768:      52px;
-$gridGutterWidth768:      10px;
-
-$gridColumnWidth1200:     90px;
-$gridGutterWidth1200:     10px;
-
-// Fluid grid
-// -------------------------
-$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
-$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
-
-// 1200px min
-$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
-$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
-
-// 768px-979px
-$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
-$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);
-
-$screen-xs: 320px;
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-
-$screen-xs-max: ($screen-sm - 1);
-$screen-sm-max: ($screen-md - 1);
-$screen-md-max: ($screen-lg - 1);
-
-$breakpoint-xs-up:         "only screen and (min-width: #{$screen-xs})";
-$breakpoint-xs:            "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})";
-$breakpoint-sm-up:         "only screen and (min-width: #{$screen-sm})";
-$breakpoint-sm:            "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})";
-$breakpoint-md-up:         "only screen and (min-width: #{$screen-md})";
-$breakpoint-md:            "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})";
-$breakpoint-lg:            "only screen and (min-width: #{$screen-lg})";
 
 .dashnav-back-to-dashboard  {
   display: none;
@@ -46,7 +5,7 @@ $breakpoint-lg:            "only screen and (min-width: #{$screen-lg})";
 
 // Media queries
 // ---------------------
-@media $breakpoint-xs {
+@include media-breakpoint-down(sm) {
   div.panel {
     width: 100% !important;
     padding: 0px !important;
@@ -74,17 +33,15 @@ $breakpoint-lg:            "only screen and (min-width: #{$screen-lg})";
 }
 
 // form styles
-@media $breakpoint-sm-up {
+@include media-breakpoint-up(md) {
   .gf-size-m { width: 120px; }
   .gf-size-l { width: 150px; }
   .gf-size-xl { width: 200px; }
   .gf-size-xxl { width: 300px; }
   .gf-size-xxxl { width: 400px; }
-}
 
-@media $breakpoint-sm-up {
   .dashnav-dashboards-btn a {
-    max-width: 200px;
+    max-width: 180px;
   }
   .gf-timepicker-nav-btn {
     max-width: 120px;
@@ -99,19 +56,19 @@ $breakpoint-lg:            "only screen and (min-width: #{$screen-lg})";
   }
 }
 
-@media $breakpoint-md-up {
+@include media-breakpoint-up(lg) {
   .dashnav-dashboards-btn a {
     max-width: 290px;
   }
   .gf-timepicker-nav-btn {
-    max-width: 250px;
+    max-width: 240px;
   }
   .dashnav-zoom-out {
     display: block;
   }
 }
 
-@media $breakpoint-lg {
+@include media-breakpoint-up(xl) {
   .panel-in-fullscreen {
     .dashnav-action-icons {
       display: block;