diff options
author | Andrejs Verza <andrejs.verza@zabbix.com> | 2021-03-22 15:44:30 +0300 |
---|---|---|
committer | Andrejs Verza <andrejs.verza@zabbix.com> | 2021-03-22 15:44:30 +0300 |
commit | f9f0ad15159a270caf4f9aa312a36bbafa087928 (patch) | |
tree | 5e9b12c739facc12a2cd8bd424eae4908017d10d /sass | |
parent | 00b96961136164ff7a989f32d777ef35d6a4abf8 (diff) |
..F....... [ZBXNEXT-6309] added theme support to dashboard pages
Diffstat (limited to 'sass')
-rwxr-xr-x | sass/stylesheets/sass/components/_dashboard.scss | 15 | ||||
-rw-r--r-- | sass/stylesheets/sass/dark-theme.scss | 7 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-dark.scss | 24 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-light.scss | 24 | ||||
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 2 |
5 files changed, 66 insertions, 6 deletions
diff --git a/sass/stylesheets/sass/components/_dashboard.scss b/sass/stylesheets/sass/components/_dashboard.scss index 6713501aded..7bf74610c42 100755 --- a/sass/stylesheets/sass/components/_dashboard.scss +++ b/sass/stylesheets/sass/components/_dashboard.scss @@ -48,6 +48,7 @@ display: flex; padding: 0; margin: 0; + align-items: center; & > .csortable-item:focus:not(:active) { // Increase padding to accommodate the focused div's shadow. @@ -98,10 +99,11 @@ span { @extend %overflow-ellipsis; max-width: 300px; + color: $font-color; } button { - margin: 0 -8px 0 4px; + margin: 0 -9px 0 4px; } &:not(.selected-tab) { @@ -114,15 +116,18 @@ & .csortable > .csortable-item > div, & .csortable-list > .csortable-item > div:hover { - background: #e8f5ff; - border: 1px solid lighten($blue, 30%); + background: $action-hover-color; + border: 1px solid darken($action-hover-color, 20%); } & .csortable > .csortable-item > div.selected-tab, & .csortable-list > .csortable-item > div.selected-tab { - color: $white; - background: $ui-bg-selected-color; + background-color: $ui-bg-selected-color; border: 1px solid transparent; + + span { + color: $font-selected-color; + } } } diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss index d66a1be220b..7a17b7ae8c3 100644 --- a/sass/stylesheets/sass/dark-theme.scss +++ b/sass/stylesheets/sass/dark-theme.scss @@ -234,6 +234,13 @@ $multiselect-selected-bg-color: #696969; } } +.dashbrd-navigation-tabs { + & .csortable > .csortable-item > div, + & .csortable-list > .csortable-item > div:hover { + border: 1px solid transparent; + } +} + // Dashboard, widgets and iterators. // To maintain code clarity: // - Do not mix rules for dashboard view mode and dashboard edit mode. diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss index dcd1c6a1871..78d5269b9d5 100644 --- a/sass/stylesheets/sass/hc-dark.scss +++ b/sass/stylesheets/sass/hc-dark.scss @@ -320,6 +320,28 @@ $dashboard-my-bg-color: #e0e0e0; } } +.dashbrd-navigation-tabs { + .csortable-list { + & > .csortable-item:focus:not(:active) { + & > div { + box-shadow: 0 0 0 2px $blue; + } + } + } + + & .csortable > .csortable-item > div, + & .csortable-list > .csortable-item > div:hover { + border: 1px solid transparent; + } + + & .csortable > .csortable-item > div.selected-tab, + & .csortable-list > .csortable-item > div.selected-tab { + span { + color: $white; + } + } +} + // Dashboard, widgets and iterators. // To maintain code clarity: // - Do not mix rules for dashboard view mode and dashboard edit mode. @@ -482,6 +504,7 @@ $icon-btn: ( } $icon-widget-btn: ( + dashboard-page-properties: url($sprite-path) no-repeat -165px -618px, iterator-page-previous: url($sprite-path) no-repeat -397px -657px, iterator-page-next: url($sprite-path) no-repeat -395px -623px, widget-action: url($sprite-path) no-repeat -318px -618px, @@ -496,6 +519,7 @@ $icon-widget-btn: ( ); // Dynamically generated classes: +// .btn-dashboard-page-properties // .btn-iterator-page-previous // .btn-iterator-page-next // .btn-widget-action diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss index b3c36d1b536..2a62cb18757 100644 --- a/sass/stylesheets/sass/hc-light.scss +++ b/sass/stylesheets/sass/hc-light.scss @@ -297,6 +297,28 @@ $dashboard-my-bg-color: #555555; } } +.dashbrd-navigation-tabs { + .csortable-list { + & > .csortable-item:focus:not(:active) { + & > div { + box-shadow: 0 0 0 2px $blue; + } + } + } + + & .csortable > .csortable-item > div, + & .csortable-list > .csortable-item > div:hover { + border: 1px solid darken($action-hover-color, 40%); + } + + & .csortable > .csortable-item > div.selected-tab, + & .csortable-list > .csortable-item > div.selected-tab { + span { + color: $white; + } + } +} + // Dashboard, widgets and iterators. // To maintain code clarity: // - Do not mix rules for dashboard view mode and dashboard edit mode. @@ -383,6 +405,7 @@ $form-icon-btn: ( } $icon-widget-btn: ( + dashboard-page-properties: url($sprite-path) no-repeat -318px -618px, iterator-page-previous: url($sprite-path) no-repeat -244px -657px, iterator-page-next: url($sprite-path) no-repeat -242px -623px, widget-action: url($sprite-path) no-repeat -165px -618px, @@ -397,6 +420,7 @@ $icon-widget-btn: ( ); // Dynamically generated classes: +// .btn-dashboard-page-properties // .btn-iterator-page-previous // .btn-iterator-page-next // .btn-widget-action diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 7c41f2b473e..5fed2935d97 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -2096,7 +2096,7 @@ $icon-widget-btn: ( ); // Dynamically generated classes: -// .dashboard-page-properties +// .btn-dashboard-page-properties // .btn-iterator-page-previous // .btn-iterator-page-next // .btn-widget-action |