From 637d2c6f747104a3e74117097d59b53ace27b04e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2018 12:29:52 -0700 Subject: [PATCH] Update box-shadows on .custom-select - 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) --- scss/_custom-forms.scss | 7 ++++++- scss/_variables.scss | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 5b75fcbf9076..1311ba482c6d 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -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, diff --git a/scss/_variables.scss b/scss/_variables.scss index 51a453dea847..6531a934f78c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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;