mirror of
https://github.com/grafana/grafana.git
synced 2024-12-02 05:29:42 -06:00
116 lines
2.7 KiB
Plaintext
116 lines
2.7 KiB
Plaintext
@import "responsive.less";
|
|
|
|
@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: 480px;
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|