diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html index 3c7aa609cc4..c9227324001 100644 --- a/public/app/features/dashboard/row/options.html +++ b/public/app/features/dashboard/row/options.html @@ -1,5 +1,5 @@
-
+
@@ -23,7 +23,7 @@
-
+
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 085036f581b..75157af77cc 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -216,6 +216,11 @@ div.flot-text { margin-right: $panel-margin; margin-left: 0; + &:hover { + .dash-row-header-actions { + display: block; + } + } .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem } .h2 { font-size: 2.4rem; line-height: 3.5rem; } @@ -267,6 +272,9 @@ div.flot-text { .dash-row-header-action-show-options { color: $link-color; } + .dash-row-header { + border-bottom: none; + } } .dash-row-show-add-panel { @@ -276,6 +284,9 @@ div.flot-text { .dash-row-header-action--add-panel { color: $link-color; } + .dash-row-header { + border-bottom: none; + } } .dash-row-show-title { @@ -302,21 +313,55 @@ div.flot-text { .dash-edit-mode { .dash-row-header { display: flex; - &:hover { - .dash-row-header-actions { - display: block; - } + border-bottom: 1px solid $dark-4; + border-right: 1px solid $dark-4; + margin-right: 0; + .dash-row-header-actions { + display: block; } } + .dash-row-show-add-panel { + .dash-row-header { + border-bottom: none; + } + } + .dash-row-show-options { + .dash-row-header { + border-bottom: none; + } + } + .dash-row-header::after { + content: ' '; + border-top: 1px solid $dark-4; + width: 15px; + position: relative; + } .dash-row { - border-left: 1px solid $dark-4; + margin-bottom: $spacer*2; } .dash-row-header-title { + border-left: 1px solid $dark-4; + } + .dash-row-header-title::before { + content: ' '; border-top: 1px solid $dark-4; + width: 15px; + position: absolute; + margin: -9px 0 0 -9px; } .panels-wrapper { - margin-left: $panel-margin; + padding: $panel-margin*2 $panel-margin 0 $panel-margin*2; + border-left: 1px solid $dark-4; + border-right: 1px solid $dark-4; } + .panels-wrapper::after { + content: ' '; + border-bottom: 1px solid $dark-4; + width: 15px; + position: absolute; + margin: 0 0 0 -12px; + } + .add-row-panel-hint { display: block; } @@ -339,18 +384,24 @@ div.flot-text { } .dash-row-options { - background: $panel-bg; - border: $panel-border; - margin: 0 0 $panel-margin*2 $panel-margin*2; - padding: $spacer*1.5; + border-left: $panel-border; + border-bottom: $panel-border; + border-right: $panel-border; + margin: 0; + padding: $panel-margin*2; + box-shadow: 0px 3px 7px -3px $black; } .dash-row-add-panel { + border-left: $panel-border; + border-bottom: $panel-border; + border-right: $panel-border; margin: 0; padding: $panel-margin*2; // display: flex; // align-items: flex-start; // position: relative; + box-shadow: 0px 3px 7px -3px $black; } .add-panel-panels-scroll { @@ -383,8 +434,9 @@ div.flot-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + font-size: $font-size-sm; } .add-panel-item-img { - width: 3rem; + width: 2rem; }