From b3cf60018c38b7da84e46f0362a39d5eecbfecaa Mon Sep 17 00:00:00 2001 From: tu4mo Date: Sun, 18 Aug 2019 17:08:59 +0300 Subject: [PATCH] Add possibility to define custom border color for disabled form controls (#29257) --- scss/_variables.scss | 35 +++++++++++++++++++---------------- scss/forms/_form-control.scss | 1 + scss/forms/_form-file.scss | 1 + scss/forms/_form-select.scss | 1 + 4 files changed, 22 insertions(+), 16 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 5a271b08a9..9ef33a9048 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -489,6 +489,7 @@ $input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; $input-disabled-bg: $gray-200 !default; +$input-disabled-border-color: null !default; $input-color: $gray-700 !default; $input-border-color: $gray-400 !default; @@ -581,23 +582,24 @@ $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; -$form-select-padding-y: $input-padding-y !default; -$form-select-padding-x: $input-padding-x !default; -$form-select-font-family: $input-font-family !default; -$form-select-font-size: $input-font-size !default; -$form-select-height: $input-height !default; -$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$form-select-font-weight: $input-font-weight !default; -$form-select-line-height: $input-line-height !default; -$form-select-color: $input-color !default; -$form-select-disabled-color: $gray-600 !default; -$form-select-bg: $input-bg !default; -$form-select-disabled-bg: $gray-200 !default; -$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions -$form-select-indicator-color: $gray-800 !default; -$form-select-indicator: url("data:image/svg+xml,") !default; +$form-select-padding-y: $input-padding-y !default; +$form-select-padding-x: $input-padding-x !default; +$form-select-font-family: $input-font-family !default; +$form-select-font-size: $input-font-size !default; +$form-select-height: $input-height !default; +$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$form-select-font-weight: $input-font-weight !default; +$form-select-line-height: $input-line-height !default; +$form-select-color: $input-color !default; +$form-select-disabled-color: $gray-600 !default; +$form-select-bg: $input-bg !default; +$form-select-disabled-bg: $gray-200 !default; +$form-select-disabled-border-color: $input-disabled-border-color !default; +$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions +$form-select-indicator-color: $gray-800 !default; +$form-select-indicator: url("data:image/svg+xml,") !default; -$form-select-background: no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) +$form-select-background: no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) $form-select-feedback-icon-padding-right: calc((1em + #{2 * $form-select-padding-y}) * 3 / 4 + #{$form-select-padding-x + $form-select-indicator-padding}) !default; $form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default; @@ -645,6 +647,7 @@ $form-file-height: $input-height !default; $form-file-focus-border-color: $input-focus-border-color !default; $form-file-focus-box-shadow: $input-focus-box-shadow !default; $form-file-disabled-bg: $input-disabled-bg !default; +$form-file-disabled-border-color: $input-disabled-border-color !default; $form-file-padding-y: $input-padding-y !default; $form-file-padding-x: $input-padding-x !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index ce2b426627..83579e7273 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -59,6 +59,7 @@ &:disabled, &[readonly] { background-color: $input-disabled-bg; + border-color: $input-disabled-border-color; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss index b3c0d0df02..3748f495cf 100644 --- a/scss/forms/_form-file.scss +++ b/scss/forms/_form-file.scss @@ -30,6 +30,7 @@ // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231 &[disabled] ~ .form-file-label .form-file-text { background-color: $form-file-disabled-bg; + border-color: $form-file-disabled-border-color; } } diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 903c5517e8..a9cd8676de 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -50,6 +50,7 @@ &:disabled { color: $form-select-disabled-color; background-color: $form-select-disabled-bg; + border-color: $form-select-disabled-border-color; } // Hides the default caret in IE11