diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 84d74c18ff6..40e6eeb78d0 100644 --- a/public/sass/_grafana.scss +++ b/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"; diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss new file mode 100644 index 00000000000..724f9179208 --- /dev/null +++ b/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; + } +} diff --git a/public/sass/grafana-responsive.scss b/public/sass/grafana-responsive.scss deleted file mode 100644 index 051a801f215..00000000000 --- a/public/sass/grafana-responsive.scss +++ /dev/null @@ -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; - } -}