diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 9133f7dbdaed81467714d9e536ee3a3f8d7082bb..17211edbb7410440c22d190b628ae6457aabfa8e 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -23,29 +23,29 @@ opacity: 0; &:checked ~ .custom-control-indicator { - color: $custom-control-checked-indicator-color; - background-color: $custom-control-checked-indicator-bg; - @include box-shadow($custom-control-checked-indicator-box-shadow); + color: $custom-control-indicator-checked-color; + background-color: $custom-control-indicator-checked-bg; + @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-indicator { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-focus-indicator-box-shadow; + box-shadow: $custom-control-indicator-focus-box-shadow; } &:active ~ .custom-control-indicator { - color: $custom-control-active-indicator-color; - background-color: $custom-control-active-indicator-bg; - @include box-shadow($custom-control-active-indicator-box-shadow); + color: $custom-control-indicator-active-color; + background-color: $custom-control-indicator-active-bg; + @include box-shadow($custom-control-indicator-active-box-shadow); } &:disabled { ~ .custom-control-indicator { - background-color: $custom-control-disabled-indicator-bg; + background-color: $custom-control-indicator-disabled-bg; } ~ .custom-control-description { - color: $custom-control-disabled-description-color; + color: $custom-control-description-disabled-color; } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1643f24e85135c28b2410b31c36b11b08866f95f..94121a64b9a6011f90c09fec5fd5916c134a5109 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -444,29 +444,29 @@ $custom-control-indicator-bg: #ddd !default; $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; -$custom-control-disabled-indicator-bg: $gray-lighter !default; -$custom-control-disabled-description-color: $gray-light !default; +$custom-control-indicator-disabled-bg: $gray-lighter !default; +$custom-control-description-disabled-color: $gray-light !default; -$custom-control-checked-indicator-color: $white !default; -$custom-control-checked-indicator-bg: $brand-primary !default; -$custom-control-checked-indicator-box-shadow: none !default; +$custom-control-indicator-checked-color: $white !default; +$custom-control-indicator-checked-bg: $brand-primary !default; +$custom-control-indicator-checked-box-shadow: none !default; -$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; -$custom-control-active-indicator-color: $white !default; -$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default; -$custom-control-active-indicator-box-shadow: none !default; +$custom-control-indicator-active-color: $white !default; +$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default; +$custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-bg: $brand-primary !default; -$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; +$custom-checkbox-indeterminate-indicator-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; -$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-y: .375rem !default; $custom-select-padding-x: .75rem !default;