mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(sass): restored old responsive rules
This commit is contained in:
Torkel Ödegaard
parent
594ab0e2b5
commit
6fc2b69697
@ -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";
|
||||
|
||||
84
public/sass/_old_responsive.scss
Normal file
84
public/sass/_old_responsive.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user