From df7737eef8ad4f0a568d9c07d679935b851e6edd Mon Sep 17 00:00:00 2001 From: Aron Strandberg Date: Wed, 13 Sep 2017 14:30:12 +0200 Subject: [PATCH 1/5] Add variable for focused input background Adds a variable to make it possible to configure the input's background color when focused --- less/control.less | 27 +++++++++++++++++++++++++++ less/select.less | 1 + 2 files changed, 28 insertions(+) diff --git a/less/control.less b/less/control.less index bb23102630..be4017a3b3 100644 --- a/less/control.less +++ b/less/control.less @@ -8,11 +8,13 @@ .Select-focus-state(@color) { border-color: @color; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px fade(@color, 10%); + background: @select-input-bg-focus; } // "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: @select-input-box-shadow-focus; + background: @select-input-bg-focus; } // base @@ -128,9 +130,14 @@ .Select-input:focus { outline: none; + background: @select-input-bg-focus; } } +.is-focused > .Select-control { + background: @select-input-bg-focus; +} + // placeholder .Select-placeholder, .Select--single > .Select-control .Select-value { @@ -151,6 +158,26 @@ white-space: nowrap; } +.has-value.Select--single > .Select-control .Select-value, +.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value { + .Select-value-label { + color: @select-text-color; + } + a.Select-value-label { + cursor: pointer; + text-decoration: none; + + &:hover, + &:focus { + color: @select-link-hover-color; + outline: none; + text-decoration: underline; + background: @select-input-bg-focus; + } + } +} + + // the element users type in .Select-input { diff --git a/less/select.less b/less/select.less index abf0eead2f..c44fda32a5 100644 --- a/less/select.less +++ b/less/select.less @@ -15,6 +15,7 @@ // control options @select-input-bg: #fff; @select-input-bg-disabled: #f9f9f9; +@select-input-bg-focus: #fff; @select-input-border-color: #ccc; @select-input-border-radius: 4px; @select-input-border-focus: @select-primary-color; From f0d28be03a18666ada9dab47eeefde41e3b885b2 Mon Sep 17 00:00:00 2001 From: Aron Strandberg Date: Wed, 13 Sep 2017 15:22:16 +0200 Subject: [PATCH 2/5] Don't set focus color on hover --- less/control.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/less/control.less b/less/control.less index be4017a3b3..90618fb3dc 100644 --- a/less/control.less +++ b/less/control.less @@ -172,6 +172,9 @@ color: @select-link-hover-color; outline: none; text-decoration: underline; + } + + &:focus { background: @select-input-bg-focus; } } From d19f6ef964f14250198e8f4a64d65174f544f8bd Mon Sep 17 00:00:00 2001 From: Aron Strandberg Date: Wed, 13 Sep 2017 15:22:28 +0200 Subject: [PATCH 3/5] Also change scss files --- scss/control.scss | 2 +- scss/select.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/control.scss b/scss/control.scss index d682acee93..e044611f9f 100644 --- a/scss/control.scss +++ b/scss/control.scss @@ -117,6 +117,7 @@ .Select-input:focus { outline: none; + background: $select-input-bg-focus; } } @@ -140,7 +141,6 @@ white-space: nowrap; } - // the element users type in .Select-input { diff --git a/scss/select.scss b/scss/select.scss index 699dc19687..636f463695 100644 --- a/scss/select.scss +++ b/scss/select.scss @@ -12,6 +12,7 @@ // control options $select-input-bg: #fff !default; $select-input-bg-disabled: #f9f9f9 !default; +$select-input-bg-focus: #fff !default; $select-input-border-color: #ccc !default; $select-input-border-radius: 4px !default; $select-input-border-focus: #08c !default; // blue From 8af5d70e99f12fcc9a3afbb83245daa7e203700e Mon Sep 17 00:00:00 2001 From: Aron Strandberg Date: Wed, 13 Sep 2017 15:23:58 +0200 Subject: [PATCH 4/5] Default to input-bg --- less/select.less | 2 +- scss/select.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/less/select.less b/less/select.less index c44fda32a5..150d919c4f 100644 --- a/less/select.less +++ b/less/select.less @@ -15,7 +15,7 @@ // control options @select-input-bg: #fff; @select-input-bg-disabled: #f9f9f9; -@select-input-bg-focus: #fff; +@select-input-bg-focus: @select-input-bg; @select-input-border-color: #ccc; @select-input-border-radius: 4px; @select-input-border-focus: @select-primary-color; diff --git a/scss/select.scss b/scss/select.scss index 636f463695..c1b3fae420 100644 --- a/scss/select.scss +++ b/scss/select.scss @@ -12,7 +12,7 @@ // control options $select-input-bg: #fff !default; $select-input-bg-disabled: #f9f9f9 !default; -$select-input-bg-focus: #fff !default; +$select-input-bg-focus: $select-input-bg !default; $select-input-border-color: #ccc !default; $select-input-border-radius: 4px !default; $select-input-border-focus: #08c !default; // blue From 535bc2343042bbad6111430c09a39c730c25bdc8 Mon Sep 17 00:00:00 2001 From: Aron Strandberg Date: Wed, 27 Sep 2017 15:35:25 +0200 Subject: [PATCH 5/5] Rebase on master --- less/control.less | 35 ++++++++--------------------------- scss/control.scss | 9 +++++++++ 2 files changed, 17 insertions(+), 27 deletions(-) diff --git a/less/control.less b/less/control.less index 90618fb3dc..a88bb51fba 100644 --- a/less/control.less +++ b/less/control.less @@ -69,6 +69,10 @@ } } + &.is-focused > .Select-control { + background: @select-input-bg-focus; + } + &.is-focused:not(.is-open) > .Select-control { .Select-focus-state(@select-input-border-focus); } @@ -92,6 +96,10 @@ outline: none; text-decoration: underline; } + + &:focus { + background: @select-input-bg-focus; + } } } @@ -134,10 +142,6 @@ } } -.is-focused > .Select-control { - background: @select-input-bg-focus; -} - // placeholder .Select-placeholder, .Select--single > .Select-control .Select-value { @@ -158,29 +162,6 @@ white-space: nowrap; } -.has-value.Select--single > .Select-control .Select-value, -.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value { - .Select-value-label { - color: @select-text-color; - } - a.Select-value-label { - cursor: pointer; - text-decoration: none; - - &:hover, - &:focus { - color: @select-link-hover-color; - outline: none; - text-decoration: underline; - } - - &:focus { - background: @select-input-bg-focus; - } - } -} - - // the element users type in .Select-input { diff --git a/scss/control.scss b/scss/control.scss index e044611f9f..08435e1aaf 100644 --- a/scss/control.scss +++ b/scss/control.scss @@ -54,6 +54,10 @@ } } + &.is-focused > .Select-control { + background: $select-input-bg-focus; + } + &.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: $select-input-box-shadow-focus; @@ -79,6 +83,10 @@ outline: none; text-decoration: underline; } + + &:focus { + background: $select-input-bg-focus; + } } } @@ -141,6 +149,7 @@ white-space: nowrap; } + // the element users type in .Select-input {