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
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 0b7b518..1d28f2a 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -2,7 +2,7 @@
display: flex;
padding: $spacer;
border-width: 0 0 0 3px;
- color: $gray-800;
+ color: gray("800");
margin-bottom: $spacer;
&.small {
@@ -45,20 +45,20 @@
}
&.alert-info {
- border-left-color: $info;
+ border-left-color: theme-color("info");
background-color: $info-light;
- fill: $info;
+ fill: theme-color("info");
}
&.alert-danger {
- border-left-color: $danger;
+ border-left-color: theme-color("danger");
background-color: $danger-light;
- fill: $danger;
+ fill: theme-color("danger");
}
&.alert-warning {
- border-left-color: $warning;
+ border-left-color: theme-color("warning");
background-color: $warning-light;
- fill: $warning;
+ fill: theme-color("warning");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 7acd73a..87b96e6 100644
--- a/src/assets/styles/bmc/custom/_badge.scss
+++ b/src/assets/styles/bmc/custom/_badge.scss
@@ -17,5 +17,5 @@
.badge-primary {
background-color: $info-light;
- color: $info;
+ color: theme-color("info");
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 39a4aaa..5a6a11b 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,7 +1,7 @@
dt,
legend,
label {
- color: $gray-800;
+ color: gray("800");
font-size: 14px;
font-weight: 400;
}
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index b9b8073..3f11130 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,23 +21,23 @@
}
.btn-link {
- fill: $primary;
+ fill: theme-color("primary");
text-decoration: none !important;
&:focus {
box-shadow: $btn-focus-box-shadow;
}
&:hover {
- fill: darken($primary, 15%);
+ fill: darken(theme-color("primary"), 15%);
}
}
.btn:disabled {
- color: $gray-600;
+ color: gray("600");
fill: currentColor;
&:not(.btn-link) {
- border-color: $gray-400;
- background-color: $gray-400;
+ border-color: gray("400");
+ background-color: gray("400");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index bf7572e..641e4ed 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -2,7 +2,7 @@
.btn {
&:hover {
background: none;
- color: $dark;
+ color: theme-color("dark");
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8d3ed9e..1195f6c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,11 +1,11 @@
.form-text {
margin-top: -$spacer / 4;
margin-bottom: $spacer / 2;
- color: $gray-800;
+ color: gray("800");
}
.col-form-label {
- color: $gray-800;
+ color: gray("800");
font-size: 14px;
}
@@ -17,12 +17,12 @@
.custom-control-label,
.form-control {
//important needed to override validation colors on radio labels
- color: $dark !important;
+ color: theme-color("dark") !important;
font-size: 16px;
- border-color: $gray-400 !important;
+ border-color: gray("400") !important;
&.is-invalid,
&:invalid {
- border-bottom: 2px solid $danger !important;
+ border-bottom: 2px solid theme-color("danger") !important;
}
}
@@ -31,7 +31,7 @@
& + .custom-control-label {
// Disabled label for checkbox, radio,
// switch bootstrap form components
- color: $gray-700!important;
+ color: gray("700")!important;
}
}
}
@@ -46,11 +46,11 @@
white-space: nowrap;
margin-right: -$spacer;
&.btn-link-primary {
- color: $primary;
+ color: theme-color("primary");
fill: currentColor;
}
}
.form-background {
- background-color: $container-bgd;
+ background-color: gray("200");
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index 5d3b601..a34a11b 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,7 +1,7 @@
.modal-header {
.close {
font-weight: normal;
- color: $dark;
+ color: theme-color("dark");
opacity: 1;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 4fed21b..0c2ac85 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -12,9 +12,9 @@
.b-pagination {
.page-item.active button {
- color: $dark;
+ color: theme-color("dark");
background-color: $white;
border-color: $border-color;
- box-shadow: inset 0px -3px $primary;
+ box-shadow: inset 0px -3px theme-color("primary");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b20feb0..52bdcff 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -3,20 +3,20 @@
z-index: $zindex-dropdown;
td {
- border-top: 1px solid $gray-300;
- border-bottom: 1px solid $gray-300;
+ border-top: 1px solid gray("300");
+ border-bottom: 1px solid gray("300");
&:first-of-type {
- border-left: 1px solid $gray-300;
+ border-left: 1px solid gray("300");
}
&:last-of-type {
- border-right: 1px solid $gray-300;
+ border-right: 1px solid gray("300");
}
}
// thead-light added for specificiy
.thead-light th {
border: none;
- color: $dark;
+ color: theme-color("dark");
}
.status-icon svg {
@@ -34,7 +34,7 @@
}
.b-table-details {
- background-color: $light;
+ background-color: theme-color("light");
td {
padding-left: calc(50px + (#{$table-cell-padding} * 2));
}
@@ -57,7 +57,7 @@
width: 50px;
}
svg {
- fill: $dark;
+ fill: theme-color("dark");
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 9295b17..c3e91b8 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -14,31 +14,31 @@
.toast-header {
background-color: inherit!important; //override specificity
border: none;
- color: $dark!important; //override specificity
+ color: theme-color("dark")!important; //override specificity
padding-bottom: 0;
}
.toast-body {
- color: $dark;
+ color: theme-color("dark");
padding-top: 0;
}
.b-toast-success .toast {
- border-left-color: $success!important;
+ border-left-color: theme-color("success")!important;
background-color: $success-light;
}
.b-toast-info .toast {
- border-left-color: $info!important;
+ border-left-color: theme-color("info")!important;
background-color: $info-light;
}
.b-toast-danger .toast {
- border-left-color: $danger!important;
+ border-left-color: theme-color("danger")!important;
background-color: $danger-light;
}
.b-toast-warning .toast {
- border-left-color: $warning!important;
+ border-left-color: theme-color("warning")!important;
background-color: $warning-light;
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index cbee2df..ea300ec 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,6 +8,4 @@
// 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
+$navigation-width: 300px;
\ No newline at end of file