Skip to content

Commit b3cf600

Browse files
tu4moXhmikosR
tu4mo
authored and
XhmikosR
committed
Add possibility to define custom border color for disabled form controls (twbs#29257)
1 parent 294fcdd commit b3cf600

File tree

4 files changed

+23
-17
lines changed

4 files changed

+23
-17
lines changed

‎scss/_variables.scss

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -489,6 +489,7 @@ $input-line-height-lg: $input-btn-line-height-lg !default;
489489

490490
$input-bg: $white !default;
491491
$input-disabled-bg: $gray-200 !default;
492+
$input-disabled-border-color: null !default;
492493

493494
$input-color: $gray-700 !default;
494495
$input-border-color: $gray-400 !default;
@@ -581,23 +582,24 @@ $input-group-addon-bg: $gray-200 !default;
581582
$input-group-addon-border-color: $input-border-color !default;
582583

583584

584-
$form-select-padding-y: $input-padding-y !default;
585-
$form-select-padding-x: $input-padding-x !default;
586-
$form-select-font-family: $input-font-family !default;
587-
$form-select-font-size: $input-font-size !default;
588-
$form-select-height: $input-height !default;
589-
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
590-
$form-select-font-weight: $input-font-weight !default;
591-
$form-select-line-height: $input-line-height !default;
592-
$form-select-color: $input-color !default;
593-
$form-select-disabled-color: $gray-600 !default;
594-
$form-select-bg: $input-bg !default;
595-
$form-select-disabled-bg: $gray-200 !default;
596-
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
597-
$form-select-indicator-color: $gray-800 !default;
598-
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
599-
600-
$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)
585+
$form-select-padding-y: $input-padding-y !default;
586+
$form-select-padding-x: $input-padding-x !default;
587+
$form-select-font-family: $input-font-family !default;
588+
$form-select-font-size: $input-font-size !default;
589+
$form-select-height: $input-height !default;
590+
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
591+
$form-select-font-weight: $input-font-weight !default;
592+
$form-select-line-height: $input-line-height !default;
593+
$form-select-color: $input-color !default;
594+
$form-select-disabled-color: $gray-600 !default;
595+
$form-select-bg: $input-bg !default;
596+
$form-select-disabled-bg: $gray-200 !default;
597+
$form-select-disabled-border-color: $input-disabled-border-color !default;
598+
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
599+
$form-select-indicator-color: $gray-800 !default;
600+
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
601+
602+
$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)
601603

602604
$form-select-feedback-icon-padding-right: calc((1em + #{2 * $form-select-padding-y}) * 3 / 4 + #{$form-select-padding-x + $form-select-indicator-padding}) !default;
603605
$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;
645647
$form-file-focus-border-color: $input-focus-border-color !default;
646648
$form-file-focus-box-shadow: $input-focus-box-shadow !default;
647649
$form-file-disabled-bg: $input-disabled-bg !default;
650+
$form-file-disabled-border-color: $input-disabled-border-color !default;
648651

649652
$form-file-padding-y: $input-padding-y !default;
650653
$form-file-padding-x: $input-padding-x !default;

‎scss/forms/_form-control.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
&:disabled,
6060
&[readonly] {
6161
background-color: $input-disabled-bg;
62+
border-color: $input-disabled-border-color;
6263
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
6364
opacity: 1;
6465
}

‎scss/forms/_form-file.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
// Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
3131
&[disabled] ~ .form-file-label .form-file-text {
3232
background-color: $form-file-disabled-bg;
33+
border-color: $form-file-disabled-border-color;
3334
}
3435
}
3536

‎scss/forms/_form-select.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
&:disabled {
5151
color: $form-select-disabled-color;
5252
background-color: $form-select-disabled-bg;
53+
border-color: $form-select-disabled-border-color;
5354
}
5455

5556
// Hides the default caret in IE11

0 commit comments

Comments
 (0)