diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index dff9cc6947a..e3d99501d78 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -74,15 +74,10 @@ - + {{tag}} - - - - - diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5eef1264aca..a47e8fcae48 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -51,7 +51,7 @@ $critical: #ed2e18; // Scaffolding // ------------------------- $body-bg: rgb(23,24,25); -$page-bg: $dark-2; +$page-bg: rgb(22, 23, 25); $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; @@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); // gradients $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); -$page-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03)); +$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); // Links // ------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index f853c3e4387..19813cd6f1e 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -224,6 +224,7 @@ $side-menu-width: 60px; // dashboard $panel-margin: 10px; $dashboard-padding: $panel-margin * 2; +$panel-padding: 0px 10px 5px 10px; // tabs $tabs-padding-top: 0.6rem; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index d7b8e00ded8..0c550e42922 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -69,6 +69,7 @@ padding: $spacer; position: relative; flex-grow: 10; + margin-bottom: 1rem; .label-tag { margin-left: 6px; @@ -84,9 +85,16 @@ } } +.search-section { + background: $panel-bg; + border: $panel-border; + padding: $panel-padding; + margin-bottom: 8px; +} + .search-section__header { font-size: $font-size-h6; - padding: 0.6rem 0; + padding: 8px 0 2px 0; color: $text-color-weak; display: flex; flex-grow: 1; @@ -105,7 +113,7 @@ } .search-section__header__icon { - padding: 3px 10px; + padding: 5px 10px; } .search-section__header__toggle { @@ -170,24 +178,34 @@ } .search-item__tags { - padding: 8px; + padding: 10px; } .search-item__actions { flex: 0 0 auto; + padding: 0 10px 0 0; } .search-item__actions__item { - display: none; + display: inline-block; + opacity: 0; + width: 0; + transition: all 0.2s ease-in-out; + .fa-star, .fa-star-o { + color: $orange; + line-height: 37px; + } } .search-item:hover { .search-item__actions__item { - opacity: 0.8; + width: 15px; + opacity: 1; } } .search-button-row { text-align: center; padding: $spacer*2 $spacer; + background: $panel-bg; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 310ecd51532..e36e0301162 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -141,16 +141,16 @@ display: block; float: left; font-size: 12px; - line-height: 36px; + 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; &:first-child { - padding-left: 13px; + padding-left: 10px; border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ - font-size: 20px; + font-size: 18px; } &:first-child:before { @@ -178,11 +178,11 @@ content: ''; position: absolute; top: 0; - right: -18px; // half of square's length + right: -14px; // half of square's length // same dimension as the line-height of .breadcrumb-item - width: 36px; - height: 36px; + width: 30px; + height: 30px; transform: scale(0.707) rotate(45deg); // we need to prevent the arrows from getting buried under the next link diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 766a900ae31..45f2e673372 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -42,7 +42,7 @@ div.flot-text { } .panel-content { - padding: 0px 10px 5px 10px; + padding: $panel-padding; height: calc(100% - 27px); position: relative; overflow: hidden;