grafana/public/sass/components/_dashboard_settings.scss
Torkel Ödegaard 9b60f8c404
DashboardSettings: Slight design tweak to fix page toolbar padding and align design (#33575)
* DashboardSettings: Slight design tweak to fix page toolbar padding and align design

* Fixed font weight

* Removed comment

* Update
2021-04-30 17:21:18 +02:00

107 lines
1.7 KiB
SCSS

.dashboard-settings {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $zindex-sidemenu;
background: $dashboard-bg;
display: flex;
flex-direction: column;
}
.dashboard-settings__body {
min-height: 100%;
width: 100%;
display: flex;
flex-direction: row;
background: $panel-bg;
}
.dashboard-settings__aside {
display: flex;
flex-direction: column;
margin-top: $spacer;
}
.dashboard-settings__aside-header {
color: $text-muted;
font-size: $font-size-h3;
padding-right: 60px;
white-space: nowrap;
margin-bottom: $space-md;
i {
font-size: 25px;
position: relative;
top: 1px;
padding-right: 5px;
}
}
.dashboard-settings__header {
font-size: $font-size-h3;
margin-bottom: $space-md;
}
.dashboard-settings__subheader {
color: $text-muted;
font-style: italic;
position: relative;
top: -$space-lg;
}
.dashboard-settings__nav-item {
padding: 8px 40px 8px 8px;
color: $text-color-weak;
font-size: $font-size-md;
line-height: 20px;
position: relative;
@include left-brand-border;
&.active {
color: $text-color;
font-weight: $font-weight-semi-bold;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
border-radius: 4px;
background: $brand-gradient-vertical;
}
}
.gicon {
margin-bottom: 2px;
margin-right: 4px;
}
.fa {
font-size: 17px;
width: 16px;
margin-right: 4px;
}
}
.dashboard-settings__aside-actions {
display: flex;
flex-direction: column;
height: 100%;
flex-grow: 1;
margin: 40px $space-xl 0 0;
button {
margin-bottom: $space-sm;
}
}
.dashboard-settings__json-save-button {
margin-top: $space-md;
}