grafana/public/sass/layout/_page.scss
2017-12-13 13:16:44 +01:00

101 lines
1.5 KiB
SCSS

.grafana-app {
display: flex;
align-items: stretch;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.main-view {
position: relative;
flex-grow: 1;
background: $page-gradient;
}
.page-container {
margin-left: auto;
margin-right: auto;
padding-left: $spacer*2;
padding-right: $spacer*2;
max-width: 980px;
@include clearfix();
}
.scroll-canvas {
position: absolute;
width: 100%;
overflow: auto;
height: 100%;
&--dashboard {
height: calc(100% - 54px);
}
}
.page-body {
padding-top: $spacer*2;
min-height: 500px;
}
.page-heading {
font-size: 1.25rem;
margin-top: 0;
margin-bottom: $spacer * 0.7;
}
.page-action-bar {
margin-bottom: $spacer * 2;
display: flex;
align-items: flex-start;
> a, > button {
margin-left: $spacer;
}
}
.page-action-bar__spacer {
width: $spacer * 2;
flex-grow: 1;
}
.sidebar-content {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
}
.sidebar-container {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
.page-sidebar {
@include media-breakpoint-up(md) {
width: $page-sidebar-width;
margin-left: $page-sidebar-margin;
}
}
.page-sub-heading {
margin-bottom: $spacer;
}
.page-sidebar {
color: $text-color-weak;
h4 {
font-size: $font-size-base;
font-weight: $font-weight-semi-bold;
}
h5 {
font-size: $font-size-base;
font-weight: $font-weight-semi-bold;
}
}
.page-sidebar-section {
margin-bottom: $spacer*2;
}