diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 1db66f145bf..dd6291ee56b 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,95 +1,62 @@
-
- - - {{ctrl.dashboard.title}} - - - + + + {{ctrl.dashboard.title}} + + - + -
+ + + + + + +
+ + +
- -
+ +
diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index a230dd53b4d..dd3dc731c68 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,38 +1,26 @@ - + +
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 437c33d7bbd..5d9ae964529 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -122,8 +122,9 @@ $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; // Scrollbars -$scrollbarBackground: #3a3a3a; +$scrollbarBackground: #404357; $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; // Tables diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index eb4a699eea5..538733be2ef 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -54,3 +54,7 @@ .gicon-org { background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg'); } + +.gicon-zoom-out { + background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); +} diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 8da2a042612..e40b6109aac 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,19 +1,13 @@ .navbar { - display: block; - overflow: visible; position: relative; padding-left: $side-menu-width; box-shadow: $navbarShadow; z-index: $zindex-navbar-fixed; background: $navbarBackground; -} - -.navbar-inner { - min-height: $navbarHeight; + height: $navbarHeight; padding-right: $spacer; display: flex; - @include clearfix(); } .sidemenu-open { @@ -22,48 +16,49 @@ } } -.navbar .nav { - position: relative; - left: 0; - float: left; - - &--grow { - flex-grow: 1; - } -} - - -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - padding: 17px 13px 13px; - color: $navbarLinkColor; - text-decoration: none; - - .fa { font-size: 115%; } -} - -// Hover/focus -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: $navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: $navbarLinkColorActive; - text-decoration: none; - background-color: $navbarLinkBackgroundActive; -} +// .navbar .nav { +// position: relative; +// left: 0; +// float: left; +// +// &--grow { +// flex-grow: 1; +// } +// } +// +// +// .navbar .nav > li { +// float: left; +// } +// +// // Links +// .navbar .nav > li > a { +// float: none; +// padding: 17px 13px 13px; +// color: $navbarLinkColor; +// text-decoration: none; +// +// .fa { font-size: 115%; } +// } +// +// // Hover/focus +// .navbar .nav > li > a:focus, +// .navbar .nav > li > a:hover { +// color: $navbarLinkColorHover; +// text-decoration: none; +// } +// +// // Active nav items +// .navbar .nav > .active > a, +// .navbar .nav > .active > a:hover, +// .navbar .nav > .active > a:focus { +// color: $navbarLinkColorActive; +// text-decoration: none; +// background-color: $navbarLinkBackgroundActive; +// } .navbar-page-btn { + flex-grow: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -106,3 +101,47 @@ .navbar-mini-btn-wrapper { padding: 15px; } + +.navbar-buttons { + height: $navbarHeight; + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: $spacer; +} + +.navbar-button { + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + + display: inline-block; + font-weight: $btn-font-weight; + padding: 5px 10px; + line-height: 16px; + color: $text-muted; + border: 1px solid #151515; + margin-right: 1px; + + .gicon { + font-size: 16px; + } + + .fa { + font-size: 16px; + } + + &--add-panel { + .gicon { + font-size: 22px; + } + padding: 2px 8px; + } + + &--tight { + .fa { + font-size: 14px; + position: relative; + top: 2px; + } + padding: 6px 4px; + } +} diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index dcc3da6f1fe..be1f3562843 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -71,7 +71,7 @@ } .ps__thumb-y { - @include gradient-vertical($blue, lighten($blue, 20%)); + @include gradient-vertical($scrollbarBackground, $scrollbarBackground2); border-radius: 6px; width: 6px; /* there must be 'right' for ps__thumb-y */ diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index a5f311cdb46..f4928bac69b 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -1,15 +1,10 @@ -.nav.gf-timepicker-nav { - margin-right: 0; -} - .timepicker-timestring { font-weight: normal; } -.gf-timepicker-nav-btn { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.gf-timepicker-nav { + flex-wrap: nowrap; + display: flex; } .gf-timepicker-dropdown { @@ -118,14 +113,3 @@ @extend .fa-chevron-left; } -.gf-timepicker-time-control { - font-size: $font-size-sm; - a { - padding: 18px 7px 13px !important; - } -} - -.dashnav-move-timeframe { - position: relative; - top: 1px; -}