Custom form control box shadow missing on focus when shadows are enabled
Created by: jdanil
When shadows are enabled in bootstrap, focus box shadows are missing for certain form control input states.
For example...
$enable-shadows: true;
// _variables.scss
$enable-shadows: false !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
// mixins/_box-shadow.scss
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
// _custom-forms.scss
.custom-checkbox {
.custom-control-input:indeterminate ~ .custom-control-label {
&::before {
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
}
}
Testing in SassMeister, this evaluates to...
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
box-shadow: none;
}
Since .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before
is more specific, it overrides the focus box shadow in .custom-control-input:focus ~ .custom-control-label::before
.
This affects indeterminate
checkboxes and active
inputs. checked
appears to be okay, as the focus
styling is declared after it.
Can I suggest that the default values of the following variables be updated from none
to null
, so that they don't override the focus styling unless they are set explicitly?
$custom-control-indicator-checked-box-shadow
$custom-control-indicator-active-box-shadow
$custom-control-indicator-indeterminate-box-shadow
Also the focus
styling for custom control input should be declared after active
, and the specificity of the rule should be increased so that it applies to indeterminate
checkboxes if the box shadows are modified by consumers.
Happy to contribute if you're OK with the proposed solution.