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
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index 4a8b62c..e27984b 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 @@
$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 @@
"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 7328bb0..0924070 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 0000000..f59cfc1
--- /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 cc024c8..62ffe98 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,7 +142,9 @@
<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 @@
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 @@
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;