diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-02-28 20:22:31 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-04 10:29:21 +0300 |
commit | 66f903fb69e8d8b9d7564e82a3daa3697cb92c54 (patch) | |
tree | 6d3eda972684650a91bc87af9ca6e48565a760bf /src/components/AppNavigation | |
parent | e0b76c335780c322aacae1b4f1ecef7b6f5e78ac (diff) | |
download | webui-vue-66f903fb69e8d8b9d7564e82a3daa3697cb92c54.tar.xz |
Update application navigation colors
- Current navigation color did not match mockup
- Replace color variables with theme variables in .vue file
- Add $gray-500
- Delete the map-remove functions. Maps are based on the added
properties
- Increase navigaton icon size
- Add _variables.scss file for overrides to Bootstrap Sass
variables and adding custom variables
Testing:
1. Navigation item for current page will have a dark background,
light text, and a blue border.
2. Hovering over an active navigation item will display the cursor as
the default arrow.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id391364ee74ece59ba7b20d49fda859de0c12b17
Diffstat (limited to 'src/components/AppNavigation')
-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; |