grafana/public/sass/pages/_dashboard.scss
Torkel Ödegaard 48ae93048b
Panels: No title will no longer make panel header take up space (#16884)
* Panels: Initial poc of no panel titles

* moving panel-container to DashboardPanel

* Starting to work

* Gauge fix

* Panels: tweaked panel padding and title z-index stuff

* Panels: changed panel padding a bit and simplified it by having same padding in vertical and horizontal

* Lots of tweaks to panel padding related stuff

* Updated snapshot

* Added test dashboard

* Final refactorings

* Trim title befgor applying panel-container--no-title class

* Remove unnecessary type annotation

* Panels: hasTitle no need to trim

* Gauge: fixed font family
2019-05-06 15:26:09 +02:00

124 lines
1.8 KiB
SCSS

.dashboard-container {
padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.template-variable {
color: $variable;
}
div.flot-text {
color: $text-color !important;
}
.panel {
height: 100%;
}
.dashboard-solo {
.footer,
.sidemenu {
display: none;
}
}
.panel-solo {
position: fixed;
bottom: 0;
right: 0;
margin: 0;
left: 0;
top: 0;
.panel-container {
border: none;
}
.panel-menu-toggle,
.panel-menu {
display: none;
}
}
.panel-height-helper {
display: block;
height: 100%;
}
.panel-container {
background-color: $panel-bg;
border: $panel-border;
position: relative;
border-radius: 3px;
height: 100%;
width: 100%;
&.panel-transparent {
background-color: transparent;
border: none;
}
&:hover {
.panel-menu-toggle {
visibility: visible;
transition: opacity 0.1s ease-in 0.2s;
opacity: 1;
}
}
&--is-editing {
height: auto;
}
&--absolute {
position: absolute;
}
}
.panel-content {
padding: $panel-padding;
height: calc(100% - #{$panel-header-height});
width: 100%;
position: relative;
// Fixes scrolling on mobile devices
overflow: auto;
}
// For larger screens, set back to hidden to avoid double scroll bars
@include media-breakpoint-up(md) {
.panel-content {
overflow: hidden;
}
}
.dashboard-header {
font-size: $font-size-h3;
text-align: center;
overflow: hidden;
position: relative;
top: -10px;
span {
display: inline-block;
@include brand-bottom-border();
padding: $space-sm $space-sm $space-xxs $space-sm;
}
}
.dashboard-loading {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
.alert {
max-width: 600px;
min-width: 600px;
}
}
.dashboard-loading__text {
font-size: $font-size-lg;
}