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 | |
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')
-rw-r--r-- | src/assets/styles/_colors.scss | 32 | ||||
-rw-r--r-- | src/assets/styles/_obmc-custom.scss | 21 | ||||
-rw-r--r-- | src/assets/styles/_variables.scss | 12 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 20 |
4 files changed, 47 insertions, 38 deletions
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss index 4a8b62c9..e27984bc 100644 --- a/src/assets/styles/_colors.scss +++ b/src/assets/styles/_colors.scss @@ -1,14 +1,16 @@ // Custom Color system -$white: #fff; -$gray-100: #fafbfc; // gray-10 -$gray-200: #f0f2f5; // gray-20 -$gray-300: #dcdee0; // gray-30 -$gray-400: #cccccc; // gray-40 -$gray-600: #999999; // gray-60 -$gray-700: #495057; // gray-70 -$gray-800: #666666; // gray-80 -$gray-900: #333333; // gray-100 $black: #000; +$white: #fff; + +$gray-100: #fafafa; +$gray-200: #f4f4f4; +$gray-300: #dcdee0; +$gray-400: #cccccc; +$gray-500: #B3B3B3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #333333; +$gray-900: #161616; $blue-10: #eff2fb; $blue-20: #ccd7f4; @@ -86,12 +88,14 @@ $colors: ( $primary: $blue; $secondary: $gray-600; +$secondary-dark: $gray-800; +$secondary-light: $gray-200; $success: $green; $info: $teal; $warning: $yellow; $danger: $red; $light: $gray-100; -$dark: $black; +$dark: $gray-900; // Bootstrap will generate CSS variables for // all of the colors in this map. @@ -101,9 +105,11 @@ $theme-colors: ( "primary-dark": $blue-100, "primary-light": $blue-10, "secondary": $secondary, - "secondary-dark": $gray-800, - "secondary-light": $gray-200, + "secondary-dark": $secondary-dark, + "secondary-light": $secondary-light, "danger": $danger, "warning": $warning, - "info": $info + "info": $info, + "dark": $dark, + "light": $light ); diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 7328bb05..09240705 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,27 +1,10 @@ -$enable-rounded: false; -$enable-validation-icons: false; -$responsive-layout-bp: lg; -$header-height: 56px; -$navigation-width: 300px; - -// Required +@import "./variables"; @import "~bootstrap/scss/functions"; @import "./functions"; -@import "./colors"; -@import "./motion"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; +@import "./motion"; -// Removing colors we do not have maps for or need for -// the OpenBMC theme. There are some that are required by -// Bootstrap keys that cannot be removed from theme colors -// are primary, success, and danger. -// https://getbootstrap.com/docs/4.0/getting-started/theming/#required-keys -$grays: map-remove($grays, "500"); -$colors: map-remove($colors, "indigo", "purple", "pink", "orange", "cyan"); -$colors: map-remove($theme-colors, "light", "dark"); - -// Optional @import "~bootstrap/scss/root"; @import "~bootstrap/scss/reboot"; @import "~bootstrap/scss/alert"; diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss new file mode 100644 index 00000000..f59cfc1c --- /dev/null +++ b/src/assets/styles/_variables.scss @@ -0,0 +1,12 @@ +@import "./colors"; + +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$header-height: 56px; +$navigation-width: 300px; +$container-bgd: $gray-200; +$primary-nav-hover: $gray-300;
\ No newline at end of file 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; |