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/_old_responsive.scss

@@ -0,0 +1,84 @@
+
+.dashnav-back-to-dashboard  {
+  display: none;
+}
+
+// Media queries
+// ---------------------
+@include media-breakpoint-down(sm) {
+  div.panel {
+    width: 100% !important;
+    padding: 0px !important;
+  }
+  .panel-margin {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  body {
+    padding: 0;
+  }
+  .dashnav-dashboards-btn a {
+    max-width: 200px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 120px;
+  }
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
+  .page-container {
+    padding: 10px 20px;
+  }
+}
+
+// form styles
+@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; }
+
+  .dashnav-dashboards-btn a {
+    max-width: 180px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 120px;
+  }
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
+      display: none;
+    }
+    .dashnav-back-to-dashboard  {
+      display: block;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .dashnav-dashboards-btn a {
+    max-width: 290px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 240px;
+  }
+  .dashnav-zoom-out {
+    display: block;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
+      display: block;
+    }
+  }
+
+  .dashnav-dashboards-btn a {
+    max-width: none;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: none;
+  }
+}

public/sass/grafana-responsive.scss

@@ -1,127 +0,0 @@
-@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;
-}
-
-// Media queries
-// ---------------------
-@media $breakpoint-xs {
-  div.panel {
-    width: 100% !important;
-    padding: 0px !important;
-  }
-  .panel-margin {
-    margin-right: 0;
-    margin-left: 0;
-  }
-  body {
-    padding: 0;
-  }
-  .dashnav-dashboards-btn a {
-    max-width: 200px;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: 120px;
-  }
-  .dashnav-zoom-out,
-  .dashnav-action-icons {
-    display: none;
-  }
-  .page-container {
-    padding: 10px 20px;
-  }
-}
-
-// form styles
-@media $breakpoint-sm-up {
-  .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;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: 120px;
-  }
-  .panel-in-fullscreen {
-    .dashnav-action-icons {
-      display: none;
-    }
-    .dashnav-back-to-dashboard  {
-      display: block;
-    }
-  }
-}
-
-@media $breakpoint-md-up {
-  .dashnav-dashboards-btn a {
-    max-width: 290px;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: 250px;
-  }
-  .dashnav-zoom-out {
-    display: block;
-  }
-}
-
-@media $breakpoint-lg {
-  .panel-in-fullscreen {
-    .dashnav-action-icons {
-      display: block;
-    }
-  }
-
-  .dashnav-dashboards-btn a {
-    max-width: none;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: none;
-  }
-}