From 01da81870818c364a67d9ba97ca84aec9afbcc4d Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Wed, 8 Jul 2020 15:46:43 -0700 Subject: 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 Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f --- src/assets/styles/bmc/custom/_alert.scss | 14 +++++++------- src/assets/styles/bmc/custom/_badge.scss | 2 +- src/assets/styles/bmc/custom/_base.scss | 2 +- src/assets/styles/bmc/custom/_buttons.scss | 10 +++++----- src/assets/styles/bmc/custom/_calendar.scss | 2 +- src/assets/styles/bmc/custom/_forms.scss | 16 ++++++++-------- src/assets/styles/bmc/custom/_modal.scss | 2 +- src/assets/styles/bmc/custom/_pagination.scss | 4 ++-- src/assets/styles/bmc/custom/_tables.scss | 14 +++++++------- src/assets/styles/bmc/custom/_toasts.scss | 12 ++++++------ 10 files changed, 39 insertions(+), 39 deletions(-) (limited to 'src/assets/styles/bmc/custom') diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss index 0b7b518a..1d28f2ae 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 7acd73a0..87b96e61 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 39a4aaa7..5a6a11ba 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 b9b8073b..3f111302 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 bf7572e2..641e4ed1 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 8d3ed9e4..1195f6cb 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 5d3b6014..a34a11bf 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 4fed21ba..0c2ac85c 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 b20feb0d..52bdcff2 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 9295b17e..c3e91b8a 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 -- cgit v1.2.3