diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index aafd806e47d..6d611692efc 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,13 +1,11 @@
-
-
- - - - - {{::item.text}} - -
+
+ + + + + {{::item.text}} +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index b41ea4a70ef..3bceee51356 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -39,10 +39,10 @@ export function pageH1() { return { restrict: 'E', template: ` -

- - - {{model.node.text}} +

+ + + {{model.node.text}}

`, scope: { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index d083fe1b332..892403a3d92 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,28 +1,34 @@ - -
-
- +
+
+ -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
+ -
- +
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+ +
+ +
+
-
- +
+
@@ -83,7 +89,7 @@
-
+
diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index e2569681a70..283a54a5902 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -28,7 +28,7 @@
-
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index b2ca34837d6..146b11afe0d 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -29,8 +29,9 @@ .dashnav-action-icons { display: none; } + .page-container { - padding: ($spacer * 1) ($spacer * 2); + padding: 0 $spacer * 2; } .dash-row-menu-container { diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 8b1805480b2..2e381256aef 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding-top: 0.6rem; -$tabs-padding-bottom: 0.4rem; -$tabs-top-margin: 0.5rem; +$tabs-padding: 8px 15px 11px; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index c1bc8455205..9eeadf3d61d 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -34,7 +34,7 @@ margin: 0; background-color: transparent; border: none; - padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; + padding: $tabs-padding; color: $text-color; i { font-size: 120%; diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 6aebf846450..739f7b7ae85 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,41 +1,6 @@ -.nav-tabs-alt { - & > li > a { - color: darken($link-color, 20%); - } - - li > a:hover { - border-bottom: none; - } - - li.active > a, - li.active > a:focus, - li.active > a:hover { - @include border-radius(3px); - border: 1px solid $divider-border-color; - background-color: transparent; - border-bottom: 1px solid $page-bg; - color: $link-color; - } - - li.disabled > a { - color: $text-color; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } - - .tab-content { - padding: 10px; - background-color: $panel-bg; - } -} - .gf-tabs { @include clearfix(); float: left; - margin: $tabs-top-margin 0 0 0; } .gf-tabs-item { @@ -44,13 +9,17 @@ } .gf-tabs-link { - padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer; + padding: $tabs-padding; margin-right: $spacer/2; - border: 1px solid transparent; position: relative; display: block; + border: solid transparent; + border-width: 2px 1px 1px; + border-radius: 3px 3px 0 0; - @include border-radius(2px 2px 0 0); + i { + padding-right: 5px; + } &:hover, &:focus { @@ -60,20 +29,11 @@ &.active, &.active:hover, &.active:focus { - @include border-radius(3px); - border-color: rgba(216, 131, 40, 0.77); - border-bottom: 1px solid $page-bg; + border-color: $orange $dark-4 transparent; + background: $page-bg; color: $link-color; position: relative; top: 1px; } } -.form-tabs-wrapper { - @include brand-bottom-border(); - @include clearfix(); -} - -.form-tabs-content { - padding: $spacer*2 $spacer; -} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index e36e0301162..432f6a26a1e 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -16,7 +16,7 @@ .page-container { @extend .container; - padding: $spacer $spacer $spacer $spacer*3; + padding: 0 $spacer * 2; } .scroll-canvas { @@ -31,10 +31,14 @@ } .page-body { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; + padding-top: $spacer*2; + + &--with-sidebar { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } } } @@ -49,31 +53,18 @@ } } +.page-header-canvas { + background: linear-gradient(90deg, #292a2d, black); + box-shadow: inset 0px -4px 14px #2d2d2d; + bottom-border: 1px solid $dark-4; +} + .page-header { padding: 2rem 0 0 0; - margin-bottom: 2rem; - @include brand-bottom-border(); - @include clearfix(); - h1 { - font-size: $font-size-h2; - flex-grow: 1; - display: inline-block; - margin-bottom: 1rem; - - img { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 0.5rem; - position: relative; - top: -3px; - } - } - - a, button { + .btn { float: right; - margin-left: $spacer; + margin-left: 1rem; // better align icons .fa { @@ -83,7 +74,26 @@ } } +.page-header__title { + font-size: $font-size-h2; + flex-grow: 1; + display: inline-block; + margin-bottom: 2.5rem; +} +.page-header__img { + width: 30px; + height: 30px; + border-radius: 50%; + margin-right: 1rem; + position: relative; + top: -3px; +} + +.page-header__icon { + font-size: 150%; + margin-right: 1rem; +} .page-heading { font-size: 1.25rem; @@ -123,7 +133,7 @@ .page-breadcrumbs { display: flex; - padding: 10px 25px; + padding: 10px 0; line-height: 0.5; } @@ -136,6 +146,8 @@ } .breadcrumb-item { + @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + text-decoration: none; outline: none; display: block; @@ -143,7 +155,6 @@ font-size: 12px; line-height: 30px; padding: 0 7px 0 37px; - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); position: relative; box-shadow: $card-shadow; @@ -196,13 +207,13 @@ // 5px - for rounded arrows and // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; - } + border-radius: 0 5px 0 50px; +} - // we dont need an arrow after the last link - &:last-child:after { - content: none; - } +// we dont need an arrow after the last link +&:last-child:after { + content: none; +} }