diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-09-23 16:27:33 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-09-23 16:27:33 +0300 |
commit | 67b301879dffb18aa63a28a89b76e6a943678873 (patch) | |
tree | 576899b673b9b02d61890a5f0ea0c24ec40f2877 /src/components/_sila/AppNavigation/AppNavigation.vue | |
parent | 339d1dd9d879235dffbb61fcf1dc86621495c3c2 (diff) | |
download | webui-vue-67b301879dffb18aa63a28a89b76e6a943678873.tar.xz |
SILABMC-263: Dark Theme
Diffstat (limited to 'src/components/_sila/AppNavigation/AppNavigation.vue')
-rw-r--r-- | src/components/_sila/AppNavigation/AppNavigation.vue | 35 |
1 files changed, 20 insertions, 15 deletions
diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue index a6fef6bb..2e79fc03 100644 --- a/src/components/_sila/AppNavigation/AppNavigation.vue +++ b/src/components/_sila/AppNavigation/AppNavigation.vue @@ -112,8 +112,9 @@ svg { list-style: none; padding-left: 0; margin-left: 0; - background-color: $gray-5; - + @include themify($themes) { + background-color: themed('nav-list'); + } .nav-item { outline: none; & > a { @@ -158,18 +159,17 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: theme-color('secondary'); - - &:hover { - background-color: theme-color-level(dark, -10.5); - color: theme-color('dark'); - } - - &:focus { - background-color: theme-color-level(light, 0); - box-shadow: inset 0 0 0 2px theme-color('primary'); - color: theme-color('dark'); - outline: 0; + @include themify($themes) { + color: themed('text-secondary'); + &:hover { + background-color: themed('nav-hover'); + color: themed('text-secondary'); + } + &:focus { + background-color: themed('nav-focus'); + color: themed('text-secondary'); + outline: 0; + } } &:active { @@ -217,11 +217,16 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: $white; transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; border-right: 1px solid theme-color-level('light', 2.85); + @include themify($themes) { + color: themed('text-primary'); + background-color: themed('surface-primary'); + border-right: 1px solid themed('gray-30'); + } + @include media-breakpoint-down(md) { z-index: $zindex-fixed + 2; } |