grafana/public/sass/components/_navbar.scss
Torkel Ödegaard 701ad79bb5
PageToolbar: Extracting navbar styles & layout into a modern emotion based component (#30588)
* Explore: Replaces navbar-button and overriden explore button css classes with ToolbarButton and cleans up scss & markup, removes ResponsiveButton

* Change live button text when paused

* For the dashboard toolbar button I need a transparent button so I refactored the states/variants into a new ToolbarButtonVariatn

* PageToolbar wip

* Progress

* Prgress

* Minor progress

* Fixed back button and responsive titles

* Fixed tv mode

* Updated

* support tv modes and playlist

* more progress

* Fixing lots of view states and responsive features

* Minor fixes

* review fixes

* Fixes to e2e tests

* Review fixes
2021-01-27 15:02:04 +01:00

131 lines
2.0 KiB
SCSS

.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
margin: 0;
font-size: $font-size-lg;
min-height: $navbarHeight;
.gicon {
top: -2px;
position: relative;
font-size: 17px;
line-height: 8px;
opacity: 0.75;
margin-right: 10px;
display: none;
@include media-breakpoint-up(md) {
display: inline-block;
}
}
.navbar-page-btn__folder-icon {
display: none;
@include media-breakpoint-up(md) {
display: inline-block;
}
}
}
.navbar-button {
background-color: $panel-bg;
display: flex;
align-items: center;
font-weight: $btn-font-weight;
padding: 0 $space-sm;
height: 32px;
// 2px less then border
line-height: 30px;
color: $text-muted;
border: 1px solid $navbar-button-border;
margin-left: $space-xs;
white-space: nowrap;
.gicon {
font-size: 16px;
}
.fa {
font-size: 16px;
}
&--add-panel {
padding: 2px 10px;
.gicon {
font-size: 22px;
}
}
&--refresh {
padding-left: 8px;
padding-right: 8px;
}
&--attached {
margin-left: 0;
border-radius: 0 2px 2px 0;
}
&--settings {
.gicon {
filter: $navbar-btn-gicon-brightness;
}
&:hover {
.gicon {
filter: brightness(0.8);
}
}
}
&--danger {
@include buttonBackground($red-base, $red-shade);
}
&--tight {
padding: 0px 4px;
.fa {
font-size: 14px;
}
}
&--primary {
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
}
&--danger {
@include buttonBackground($red-base, $red-shade);
}
&:hover {
svg {
color: $text-color;
}
}
&--danger {
@include buttonBackground($red-base, $red-shade);
}
@include media-breakpoint-down(lg) {
.btn-title {
margin-left: $space-xs;
display: none;
}
}
}
.navbar-edit {
display: flex;
height: $navbarHeight;
align-items: center;
padding-right: 16px;
}