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.