Skip to content

Commit

Permalink
Update box-shadows on .custom-select
Browse files Browse the repository at this point in the history
- Fixes #25656 where custom selects had the wrong focus shadow
- Fixes a comment in #25656 where custom selects had no inset shadow (also closes #26572 which had the wrong form classes on the first example anyway and closes #26668)
  • Loading branch information
mdo committed Jun 24, 2018
1 parent a31b23b commit 637d2c6
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
7 changes: 6 additions & 1 deletion scss/_custom-forms.scss
Expand Up @@ -177,12 +177,17 @@
} @else {
border-radius: 0;
}
@include box-shadow($custom-select-box-shadow);
appearance: none;

&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
box-shadow: $custom-select-focus-box-shadow;
@if $enable-shadows {
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
} @else {
box-shadow: $custom-select-focus-box-shadow;
}

&::-ms-value {
// For visual consistency with other platforms/browsers,
Expand Down
4 changes: 3 additions & 1 deletion scss/_variables.scss
Expand Up @@ -518,9 +518,11 @@ $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;

$custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-focus-width: $input-btn-focus-width !default;
$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;

$custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default;
Expand Down

0 comments on commit 637d2c6

Please sign in to comment.