diff --git a/scss/_variables.scss b/scss/_variables.scss index 5539f31726a68fbce867efa3e74aa256a63cd0dd..1c5b31098177e0f0475b82c541ba6a13328f3c9b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -649,25 +649,18 @@ $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default; $form-check-input-checked-color: $component-active-color !default; $form-check-input-checked-bg-color: $component-active-bg !default; $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; -$form-check-input-checked-bg-repeat: no-repeat !default; -$form-check-input-checked-bg-position: center center !default; -$form-check-input-checked-bg-size: 1em !default; -$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default; $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default; $form-check-input-indeterminate-color: $component-active-color !default; $form-check-input-indeterminate-bg-color: $component-active-bg !default; $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; -$form-check-input-indeterminate-bg-repeat: no-repeat !default; -$form-check-input-indeterminate-bg-position: center center !default; -$form-check-input-indeterminate-bg-size: 1em !default; -$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/></svg>") !default; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default; $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; $form-switch-padding-left: $form-switch-width + .5em !default; $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default; -$form-switch-bg-size: contain !default; $form-switch-border-radius: $form-switch-width !default; $form-switch-focus-color: hsla(211, 100%, 75%, 1) !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 572bd547e4c8dd2fa004be785dc1fd29032f631a..3ce001ac755bec98ad9c074d7e6a2be1da495d7e 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -20,6 +20,9 @@ margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height vertical-align: top; background-color: $form-check-input-bg; + background-repeat: no-repeat; + background-position: center; + background-size: contain; border: $form-check-input-border; appearance: none; color-adjust: exact; // Keep themed appearance for print @@ -45,15 +48,11 @@ &:checked { background-color: $form-check-input-checked-bg-color; - background-repeat: $form-check-input-checked-bg-repeat; - background-position: $form-check-input-checked-bg-position; - background-size: $form-check-input-checked-bg-size; border-color: $form-check-input-checked-border-color; &[type="checkbox"] { @if $enable-gradients { background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); - background-size: $form-check-input-checked-bg-size, auto; } @else { background-image: escape-svg($form-check-input-checked-bg-image); } @@ -62,7 +61,6 @@ &[type="radio"] { @if $enable-gradients { background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); - background-size: $form-check-input-checked-bg-size, auto; } @else { background-image: escape-svg($form-check-radio-checked-bg-image); } @@ -71,16 +69,13 @@ &[type="checkbox"]:indeterminate { background-color: $form-check-input-indeterminate-bg-color; - background-repeat: $form-check-input-indeterminate-bg-repeat; - background-position: $form-check-input-indeterminate-bg-position; + border-color: $form-check-input-indeterminate-border-color; + @if $enable-gradients { background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); - background-size: $form-check-input-checked-bg-size, auto; } @else { background-image: escape-svg($form-check-input-indeterminate-bg-image); - background-size: $form-check-input-indeterminate-bg-size; } - border-color: $form-check-input-indeterminate-border-color; } &:disabled { @@ -115,11 +110,8 @@ width: $form-switch-width; margin-left: $form-switch-padding-left * -1; background-image: escape-svg($form-switch-bg-image); - background-repeat: no-repeat; background-position: left center; - background-size: $form-switch-bg-size; // Get a 1px separation @include border-radius($form-switch-border-radius); - color-adjust: exact; // Keep themed appearance for print &:focus { background-image: escape-svg($form-switch-focus-bg-image); @@ -130,7 +122,6 @@ @if $enable-gradients { background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%)); - background-size: $form-switch-bg-size, auto; } @else { background-image: escape-svg($form-switch-checked-bg-image); }