From 4fc2a1ca910ae3b3aa9b8dc42b3559421c563a2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 Nov 2017 00:13:28 -0600 Subject: [PATCH 1/5] Add support for size attribute on custom selects --- docs/4.0/components/forms.md | 22 ++++++++++++++++++++++ scss/_custom-forms.scss | 5 ++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 3668fbb122fa..f2dbe6bd550e 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -1018,6 +1018,28 @@ Custom ` {% endexample %} +The `multiple` attribute is also supported: + +{% example html %} + +{% endexample %} + +As is the `size` attribute: + +{% example html %} + +{% endexample %} + ### File browser The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text. diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 455a208865aa..19d3ef67d003 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -162,9 +162,12 @@ } } - &[multiple] { + &[multiple], + &[size]:not([size="1"]) { height: auto; + padding-right: $custom-select-padding-x; background-image: none; + } &:disabled { From c53dcb233e590d08bab41ba5901eefd62aff47f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 Nov 2017 00:13:54 -0600 Subject: [PATCH 2/5] Add large custom select, document it and the small variant --- docs/4.0/components/forms.md | 18 ++++++++++++++++++ scss/_custom-forms.scss | 7 +++++++ scss/_variables.scss | 3 +++ 3 files changed, 28 insertions(+) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index f2dbe6bd550e..7b4fa0e19633 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -1018,6 +1018,24 @@ Custom ` {% endexample %} +You may also choose from small and large custom selects to match our similarly sized text inputs. + +{% example html %} + + + +{% endexample %} + The `multiple` attribute is also supported: {% example html %} diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 19d3ef67d003..26280bbe6e7f 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -188,6 +188,13 @@ font-size: $custom-select-font-size-sm; } +.custom-select-lg { + height: $custom-select-height-lg; + padding-top: $custom-select-padding-y; + padding-bottom: $custom-select-padding-y; + font-size: $custom-select-font-size-lg; +} + // File // diff --git a/scss/_variables.scss b/scss/_variables.scss index 99a5179a8119..e59977c9a231 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -489,6 +489,9 @@ $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + $custom-file-height: $input-height !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; From 327cae1824fe8ac5b820efcc1c5792eb8cd6d74a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 Nov 2017 09:46:20 -0600 Subject: [PATCH 3/5] fix custom select focus state --- scss/_custom-forms.scss | 2 +- scss/_variables.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 26280bbe6e7f..7de149f93051 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -149,7 +149,7 @@ &:focus { border-color: $custom-select-focus-border-color; outline: 0; - @include box-shadow($custom-select-focus-box-shadow); + 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 e59977c9a231..563c0216e3cc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -483,8 +483,8 @@ $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-focus-border-color: lighten(theme-color("primary"), 25%) !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-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default; $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; From cbd0c503ee4f3a3228e805807b08bf433174e9a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 Nov 2017 09:55:38 -0600 Subject: [PATCH 4/5] fix custom file input focus styles --- scss/_custom-forms.scss | 5 +++++ scss/_variables.scss | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 7de149f93051..85c59674a1cf 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -216,7 +216,12 @@ opacity: 0; &:focus ~ .custom-file-control { + border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; + + &::before { + border-color: $custom-file-focus-border-color; + } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 563c0216e3cc..cabf14a7fc90 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -494,7 +494,8 @@ $custom-select-height-lg: $input-height-lg !default; $custom-file-height: $input-height !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; $custom-file-padding-y: $input-btn-padding-y !default; $custom-file-padding-x: $input-btn-padding-x !default; From 7b630a6771d69a302eca1efc4140ddfc280e37b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 Nov 2017 00:53:20 -0600 Subject: [PATCH 5/5] remove empty line --- scss/_custom-forms.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 85c59674a1cf..12568a6f9755 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -167,7 +167,6 @@ height: auto; padding-right: $custom-select-padding-x; background-image: none; - } &:disabled {