diff options
Diffstat (limited to 'src/components/AppNavigation/AppNavigation.vue')
| -rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 20 |
1 files changed, 14 insertions, 6 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index cc024c86..62ffe982 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -142,7 +142,9 @@ export default { <style scoped lang="scss"> svg { - fill: $gray-900; + fill: currentColor; + height: 1.2rem; + width: 1.2rem; margin-left: 0 !important; //!important overriding button specificity vertical-align: text-bottom; &:not(.icon-expand) { @@ -192,20 +194,26 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: $gray-900 !important; //using important to avoid styling states + color: $secondary-dark; &:hover { - background-color: $gray-300; + background-color: $primary-nav-hover; + color: $secondary-dark; } &:focus { box-shadow: $btn-focus-box-shadow; + color: $secondary-dark; } } -.nav-link--current { +.nav-link--current, +.nav-link--current:hover, +.nav-link--current:focus { font-weight: $headings-font-weight; - background-color: $gray-300; + background-color: $secondary-dark; + color: $secondary-light; + cursor: default; &::before { content: ''; @@ -226,7 +234,7 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: $gray-200; + background-color: $container-bgd; transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; |