diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-09 01:46:43 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-21 01:28:16 +0300 |
commit | 01da81870818c364a67d9ba97ca84aec9afbcc4d (patch) | |
tree | 5962f489c9f86a46b3dab40734b882723a347f42 /src/components | |
parent | 330585760167d233a67a9301be991ba26b8e57df (diff) | |
download | webui-vue-01da81870818c364a67d9ba97ca84aec9afbcc4d.tar.xz |
Update use of Sass variables for better theming
Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 12 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 16 | ||||
-rw-r--r-- | src/components/Global/PageSection.vue | 2 | ||||
-rw-r--r-- | src/components/Global/Search.vue | 2 | ||||
-rw-r--r-- | src/components/Global/TableToolbar.vue | 2 |
5 files changed, 17 insertions, 17 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index a69d6d9f..7f18e1d2 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -179,7 +179,7 @@ export default { } .nav-item { - fill: $light; + fill: theme-color('light'); } .navbar { @@ -194,7 +194,7 @@ export default { .helper-menu { @include media-breakpoint-down(sm) { - background-color: $gray-800; + background-color: gray('800'); width: 100%; justify-content: flex-end; @@ -217,7 +217,7 @@ export default { } .nav-trigger { - fill: $light; + fill: theme-color('light'); width: $header-height; height: $header-height; transition: none; @@ -227,12 +227,12 @@ export default { } &:hover { - fill: $light; - background-color: $dark; + fill: theme-color('light'); + background-color: theme-color('dark'); } &.open { - background-color: $gray-800; + background-color: gray('800'); } @include media-breakpoint-up($responsive-layout-bp) { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 175b0aa0..37f0f717 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -212,16 +212,16 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: $secondary; + color: theme-color('secondary'); &:hover { - background-color: $primary-nav-hover; - color: $dark; + background-color: gray('300'); + color: theme-color('dark'); } &:focus { box-shadow: $btn-focus-box-shadow; - color: $dark; + color: theme-color('dark'); } } @@ -229,8 +229,8 @@ svg { .nav-link--current:hover, .nav-link--current:focus { font-weight: $headings-font-weight; - background-color: $secondary; - color: $light; + background-color: theme-color('secondary'); + color: theme-color('light'); cursor: default; &::before { @@ -240,7 +240,7 @@ svg { bottom: 0; left: 0; width: 4px; - background-color: $primary; + background-color: theme-color('primary'); } } @@ -252,7 +252,7 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: $container-bgd; + background-color: gray('200'); transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; @include media-breakpoint-down(md) { diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue index 58119986..6f44a3a3 100644 --- a/src/components/Global/PageSection.vue +++ b/src/components/Global/PageSection.vue @@ -31,7 +31,7 @@ h2 { content: ''; display: block; width: 100px; - border: 1px solid $gray-300; + border: 1px solid gray('300'); margin-top: 10px; } } diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index b4be4637..c385740b 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -59,6 +59,6 @@ export default { left: 10px; top: 12px; z-index: 4; - stroke: $gray-400; + stroke: gray('400'); } </style> diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 05b96699..2fbbd6cd 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -79,7 +79,7 @@ $toolbar-height: 46px; .toolbar-content { height: $toolbar-height; - background-color: $primary; + background-color: theme-color('primary'); color: $white; position: absolute; left: 0; |