Skip to content

N
nexpie-grafana-theme
Commit 6fc2b696 by Torkel Ödegaard
Options

ux(sass): restored old responsive rules

parent 594ab0e2
Showing with 50 additions and 92 deletions
public/sass/_grafana.scss
...@@ -24,49 +24,50 @@ ...@@ -24,49 +24,50 @@
@import "layout/page"; @import "layout/page";
// COMPONENTS // COMPONENTS
@import "components/panel_graph.scss"; @import "components/panel_graph";
@import "components/submenu.scss"; @import "components/submenu";
@import "components/panel_dashlist.scss"; @import "components/panel_dashlist";
@import "components/panel_singlestat.scss"; @import "components/panel_singlestat";
@import "components/panel_table.scss"; @import "components/panel_table";
@import "components/tagsinput.scss"; @import "components/tagsinput";
@import "components/tables_lists.scss"; @import "components/tables_lists";
@import "components/search.scss"; @import "components/search";
@import "components/dashboard.scss"; @import "components/dashboard";
@import "components/tightform.scss"; @import "components/tightform";
@import "components/gf-form.scss"; @import "components/gf-form";
@import "components/sidemenu.scss"; @import "components/sidemenu";
@import "components/navbar.scss"; @import "components/navbar";
@import "components/gfbox.scss"; @import "components/gfbox";
@import "components/pagination.scss"; @import "components/pagination";
@import "components/tabs.scss"; @import "components/tabs";
@import "components/timepicker.scss"; @import "components/timepicker";
@import "components/filter-controls.scss"; @import "components/filter-controls";
@import "components/filter-list.scss"; @import "components/filter-list";
@import "components/filter-table.scss"; @import "components/filter-table";
@import "components/scrollbar.scss"; @import "components/scrollbar";
@import "components/old_stuff.scss"; @import "components/old_stuff";
@import "components/navbar.scss"; @import "components/navbar";
@import "components/popovers.scss"; @import "components/popovers";
@import "components/alerts.scss"; @import "components/alerts";
@import "components/typeahead.scss"; @import "components/typeahead";
@import "components/tags.scss"; @import "components/tags";
@import "components/modals.scss"; @import "components/modals";
@import "components/dropdown.scss"; @import "components/dropdown";
@import "components/color_picker.scss"; @import "components/color_picker";
@import "components/tooltip.scss"; @import "components/tooltip";
@import "components/buttons.scss"; @import "components/buttons";
@import "components/footer.scss"; @import "components/footer";
@import "components/infobox.scss"; @import "components/infobox";
@import "components/shortcuts.scss"; @import "components/shortcuts";
@import "components/query_editor.scss"; @import "components/query_editor";
@import "components/navs.scss"; @import "components/navs";
// PAGES // PAGES
@import "pages/login.scss"; @import "pages/login";
@import "pages/playlist.scss"; @import "pages/playlist";
@import "pages/admin.scss"; @import "pages/admin";
@import "pages/alerting.scss"; @import "pages/alerting";
@import "pages/apps.scss"; @import "pages/apps";
@import "pages/signup.scss"; @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 { .dashnav-back-to-dashboard {
display: none; display: none;
...@@ -46,7 +5,7 @@ $breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; ...@@ -46,7 +5,7 @@ $breakpoint-lg: "only screen and (min-width: #{$screen-lg})";
// Media queries // Media queries
// --------------------- // ---------------------
@media $breakpoint-xs { @include media-breakpoint-down(sm) {
div.panel { div.panel {
width: 100% !important; width: 100% !important;
padding: 0px !important; padding: 0px !important;
...@@ -74,17 +33,15 @@ $breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; ...@@ -74,17 +33,15 @@ $breakpoint-lg: "only screen and (min-width: #{$screen-lg})";
} }
// form styles // form styles
@media $breakpoint-sm-up { @include media-breakpoint-up(md) {
.gf-size-m { width: 120px; } .gf-size-m { width: 120px; }
.gf-size-l { width: 150px; } .gf-size-l { width: 150px; }
.gf-size-xl { width: 200px; } .gf-size-xl { width: 200px; }
.gf-size-xxl { width: 300px; } .gf-size-xxl { width: 300px; }
.gf-size-xxxl { width: 400px; } .gf-size-xxxl { width: 400px; }
}
@media $breakpoint-sm-up {
.dashnav-dashboards-btn a { .dashnav-dashboards-btn a {
max-width: 200px; max-width: 180px;
} }
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
max-width: 120px; max-width: 120px;
...@@ -99,19 +56,19 @@ $breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; ...@@ -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 { .dashnav-dashboards-btn a {
max-width: 290px; max-width: 290px;
} }
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
max-width: 250px; max-width: 240px;
} }
.dashnav-zoom-out { .dashnav-zoom-out {
display: block; display: block;
} }
} }
@media $breakpoint-lg { @include media-breakpoint-up(xl) {
.panel-in-fullscreen { .panel-in-fullscreen {
.dashnav-action-icons { .dashnav-action-icons {
display: block; display: block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment