From e2014e8ed71a0c68a5cc436b0393486d0945fafe Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sun, 21 Oct 2018 09:25:07 +0200 Subject: [PATCH] Custom checkboxes and radios retheming (#27064) --- scss/_custom-forms.scss | 20 +++++++++++++------- scss/_variables.scss | 25 ++++++++++++++++--------- scss/mixins/_forms.scss | 9 +++++++-- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index a0ec3f6b16..23e50ba3e3 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -26,18 +26,28 @@ &:checked ~ .custom-control-label::before { color: $custom-control-indicator-checked-color; + border-color: $custom-control-indicator-checked-border-color; @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-indicator-focus-box-shadow; + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $custom-control-indicator-focus-box-shadow; + } + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; } &:active ~ .custom-control-label::before { color: $custom-control-indicator-active-color; background-color: $custom-control-indicator-active-bg; + border-color: $custom-control-indicator-active-border-color; @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -71,6 +81,7 @@ pointer-events: none; content: ""; background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width; @include box-shadow($custom-control-indicator-box-shadow); } @@ -100,9 +111,6 @@ } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { background-image: $custom-checkbox-indicator-icon-checked; } @@ -110,6 +118,7 @@ .custom-control-input:indeterminate ~ .custom-control-label { &::before { + border-color: $custom-checkbox-indicator-indeterminate-border-color; @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } @@ -138,9 +147,6 @@ } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { background-image: $custom-radio-indicator-icon-checked; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 0d6d648582..3189611475 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -494,31 +494,38 @@ $custom-control-gutter: 1.5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-control-indicator-bg: $input-bg !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: $input-box-shadow !default; +$custom-control-indicator-border-color: $gray-500 !default; +$custom-control-indicator-border-width: $input-border-width !default; + +$custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%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-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%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; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index fbddd78039..7895b983de 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -151,7 +151,7 @@ color: $color; &::before { - background-color: lighten($color, 25%); + border-color: $color; } } @@ -162,13 +162,18 @@ &:checked { ~ .custom-control-label::before { + border-color: lighten($color, 10%); @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + &:not(:checked) ~ .custom-control-label::before { + border-color: $color; } } }