grafana/public/sass/components/_dashboard_settings.scss
Torkel Ödegaard 629603dd92
Theming: Updates to select styles and theme model progress (#32797)
* Theming: Updates to select styles and theme model progress

* Progress

* Update menu

* Updated menu group

* Improving button styles

* Added transitions to theme

* solving the hover & selected, focus issues

* Updated snapshot

* adding some colors from figma, but waiting to use them as not enough components use new layer colors

* Updates

* Updates

* Progress

* Renames

* Improvements to theme overview

* updated test

* demo update

* More new theme colors

* Wip new card styles

* Card tweaks hover is not working

* Updates more colors from figma

* Progress

* Progress

* Updated radio button styles

* Progress on new colors

* Progress

* New page toolbar and toolbar button design

* New toolbar button design

* Reverted to older toolbar and button look

* Updated snapshot

* Updated generated files

* Updated design

* Updates

* Added card hover

* Fixed button group

* Updates
2021-04-12 14:23:00 +02:00

104 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__content {
flex-grow: 1;
min-width: 0;
height: 100%;
padding: 32px;
max-width: 1100px;
}
.dashboard-settings__aside {
padding: 32px 0 0 32px;
background: $dashboard-bg;
display: flex;
flex-direction: column;
}
.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;
font-size: $font-size-md;
line-height: 20px;
@include left-brand-border;
&.active {
@include left-brand-border-gradient();
background: $page-bg;
}
.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;
}