diff --git a/less/control.less b/less/control.less index 6a5ced741d..33a8dc0128 100644 --- a/less/control.less +++ b/less/control.less @@ -12,7 +12,7 @@ // "classic" focused styles: maintain for legacy .Select-focus-state-classic() { border-color: @select-input-border-focus lighten(@select-input-border-focus, 5%) lighten(@select-input-border-focus, 5%); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@select-input-border-focus,50%); + box-shadow: @select-input-box-shadow-focus; } // base @@ -61,7 +61,7 @@ width: 100%; &:hover { - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-shadow: @select-input-hover-box-shadow; } .Select-input:focus { diff --git a/less/menu.less b/less/menu.less index 8b9fe457c0..5313865c84 100644 --- a/less/menu.less +++ b/less/menu.less @@ -14,7 +14,7 @@ background-color: @select-input-bg; border: 1px solid @select-input-border-color; border-top-color: mix(@select-input-bg, @select-input-border-color, 50%); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-shadow: @select-menu-box-shadow; box-sizing: border-box; margin-top: -1px; max-height: @select-menu-max-height; diff --git a/less/select.less b/less/select.less index a1875c7b58..abf0eead2f 100644 --- a/less/select.less +++ b/less/select.less @@ -18,12 +18,14 @@ @select-input-border-color: #ccc; @select-input-border-radius: 4px; @select-input-border-focus: @select-primary-color; +@select-input-box-shadow-focus: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@select-input-border-focus, 50%); @select-input-border-width: 1px; @select-input-height: 36px; @select-input-internal-height: (@select-input-height - (@select-input-border-width * 2)); @select-input-placeholder: #aaa; @select-text-color: #333; @select-link-hover-color: @select-input-border-focus; +@select-input-hover-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); @select-padding-vertical: 8px; @select-padding-horizontal: 10px; @@ -31,6 +33,7 @@ // menu options @select-menu-zindex: 1; @select-menu-max-height: 200px; +@select-menu-box-shadow: @select-input-hover-box-shadow; @select-option-color: lighten(@select-text-color, 20%); @select-option-bg: @select-input-bg; diff --git a/scss/control.scss b/scss/control.scss index 360a32f9ac..e1b48d6121 100644 --- a/scss/control.scss +++ b/scss/control.scss @@ -48,7 +48,7 @@ width: 100%; &:hover { - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-shadow: $select-input-hover-box-shadow; } .Select-input:focus { @@ -83,7 +83,7 @@ .is-focused:not(.is-open) > .Select-control { border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus,50%); + box-shadow: $select-input-box-shadow-focus; } // placeholder diff --git a/scss/menu.scss b/scss/menu.scss index 8c220333f0..68d6f7bc51 100644 --- a/scss/menu.scss +++ b/scss/menu.scss @@ -14,7 +14,7 @@ background-color: $select-input-bg; border: 1px solid $select-input-border-color; border-top-color: mix($select-input-bg, $select-input-border-color, 50%); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-shadow: $select-menu-box-shadow; box-sizing: border-box; margin-top: -1px; max-height: $select-menu-max-height; diff --git a/scss/select.scss b/scss/select.scss index de78f9d168..699dc19687 100644 --- a/scss/select.scss +++ b/scss/select.scss @@ -15,12 +15,14 @@ $select-input-bg-disabled: #f9f9f9 !default; $select-input-border-color: #ccc !default; $select-input-border-radius: 4px !default; $select-input-border-focus: #08c !default; // blue +$select-input-box-shadow-focus: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus, 50%) !default; $select-input-border-width: 1px !default; $select-input-height: 36px !default; $select-input-internal-height: ($select-input-height - ($select-input-border-width * 2)) !default; $select-input-placeholder: #aaa !default; $select-text-color: #333 !default; $select-link-hover-color: $select-input-border-focus !default; +$select-input-hover-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !default; $select-padding-vertical: 8px !default; $select-padding-horizontal: 10px !default; @@ -28,6 +30,7 @@ $select-padding-horizontal: 10px !default; // menu options $select-menu-zindex: 1000 !default; $select-menu-max-height: 200px !default; +$select-menu-box-shadow: $select-input-hover-box-shadow !default; $select-option-color: lighten($select-text-color, 20%) !default; $select-option-bg: $select-input-bg !default;