Commit 3b5d4f52 authored by Chris Rebert's avatar Chris Rebert
Browse files

fixes #5605: style as disabled all form controls & btns under a disabled fieldset

this is a resubmission of #5875, but now against branch 3.0.0-wip
does not exclude elements under a fieldset's legend
issue #6058 is a duplicate of #5605
parent bc0b94a3
Showing with 60 additions and 33 deletions
+60 -33
...@@ -1130,7 +1130,10 @@ select[disabled], ...@@ -1130,7 +1130,10 @@ select[disabled],
textarea[disabled], textarea[disabled],
input[readonly], input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly],
fieldset[disabled] input,
fieldset[disabled] select,
fieldset[disabled] textarea {
cursor: not-allowed; cursor: not-allowed;
background-color: #eeeeee; background-color: #eeeeee;
} }
...@@ -1138,7 +1141,9 @@ textarea[readonly] { ...@@ -1138,7 +1141,9 @@ textarea[readonly] {
input[type="radio"][disabled], input[type="radio"][disabled],
input[type="checkbox"][disabled], input[type="checkbox"][disabled],
input[type="radio"][readonly], input[type="radio"][readonly],
input[type="checkbox"][readonly] { input[type="checkbox"][readonly],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
background-color: transparent; background-color: transparent;
} }
...@@ -2777,7 +2782,8 @@ button.close { ...@@ -2777,7 +2782,8 @@ button.close {
.btn:active, .btn:active,
.btn.active, .btn.active,
.btn.disabled, .btn.disabled,
.btn[disabled] { .btn[disabled],
fieldset[disabled] .btn {
color: #333333; color: #333333;
background-color: #e6e6e6; background-color: #e6e6e6;
} }
...@@ -2812,7 +2818,8 @@ button.close { ...@@ -2812,7 +2818,8 @@ button.close {
} }
.btn.disabled, .btn.disabled,
.btn[disabled] { .btn[disabled],
fieldset[disabled] .btn {
cursor: default; cursor: default;
background-image: none; background-image: none;
opacity: 0.65; opacity: 0.65;
...@@ -2907,7 +2914,8 @@ input[type="button"].btn-block { ...@@ -2907,7 +2914,8 @@ input[type="button"].btn-block {
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
.btn-primary.disabled, .btn-primary.disabled,
.btn-primary[disabled] { .btn-primary[disabled],
fieldset[disabled] .btn-primary {
color: #ffffff; color: #ffffff;
background-color: #0044cc; background-color: #0044cc;
} }
...@@ -2937,7 +2945,8 @@ input[type="button"].btn-block { ...@@ -2937,7 +2945,8 @@ input[type="button"].btn-block {
.btn-warning:active, .btn-warning:active,
.btn-warning.active, .btn-warning.active,
.btn-warning.disabled, .btn-warning.disabled,
.btn-warning[disabled] { .btn-warning[disabled],
fieldset[disabled] .btn-warning {
color: #ffffff; color: #ffffff;
background-color: #f89406; background-color: #f89406;
} }
...@@ -2967,7 +2976,8 @@ input[type="button"].btn-block { ...@@ -2967,7 +2976,8 @@ input[type="button"].btn-block {
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
.btn-danger.disabled, .btn-danger.disabled,
.btn-danger[disabled] { .btn-danger[disabled],
fieldset[disabled] .btn-danger {
color: #ffffff; color: #ffffff;
background-color: #bd362f; background-color: #bd362f;
} }
...@@ -2997,7 +3007,8 @@ input[type="button"].btn-block { ...@@ -2997,7 +3007,8 @@ input[type="button"].btn-block {
.btn-success:active, .btn-success:active,
.btn-success.active, .btn-success.active,
.btn-success.disabled, .btn-success.disabled,
.btn-success[disabled] { .btn-success[disabled],
fieldset[disabled] .btn-success {
color: #ffffff; color: #ffffff;
background-color: #51a351; background-color: #51a351;
} }
...@@ -3027,7 +3038,8 @@ input[type="button"].btn-block { ...@@ -3027,7 +3038,8 @@ input[type="button"].btn-block {
.btn-info:active, .btn-info:active,
.btn-info.active, .btn-info.active,
.btn-info.disabled, .btn-info.disabled,
.btn-info[disabled] { .btn-info[disabled],
fieldset[disabled] .btn-info {
color: #ffffff; color: #ffffff;
background-color: #2f96b4; background-color: #2f96b4;
} }
...@@ -3057,7 +3069,8 @@ input[type="button"].btn-block { ...@@ -3057,7 +3069,8 @@ input[type="button"].btn-block {
.btn-inverse:active, .btn-inverse:active,
.btn-inverse.active, .btn-inverse.active,
.btn-inverse.disabled, .btn-inverse.disabled,
.btn-inverse[disabled] { .btn-inverse[disabled],
fieldset[disabled] .btn-inverse {
color: #ffffff; color: #ffffff;
background-color: #222222; background-color: #222222;
} }
...@@ -3069,7 +3082,8 @@ input[type="button"].btn-block { ...@@ -3069,7 +3082,8 @@ input[type="button"].btn-block {
.btn-link, .btn-link,
.btn-link:active, .btn-link:active,
.btn-link[disabled] { .btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
...@@ -3089,7 +3103,8 @@ input[type="button"].btn-block { ...@@ -3089,7 +3103,8 @@ input[type="button"].btn-block {
background-color: transparent; background-color: transparent;
} }
.btn-link[disabled]:hover { .btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover {
color: #333333; color: #333333;
text-decoration: none; text-decoration: none;
} }
...@@ -3883,7 +3898,8 @@ input[type="button"].btn-block { ...@@ -3883,7 +3898,8 @@ input[type="button"].btn-block {
.navbar .btn-navbar:active, .navbar .btn-navbar:active,
.navbar .btn-navbar.active, .navbar .btn-navbar.active,
.navbar .btn-navbar.disabled, .navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] { .navbar .btn-navbar[disabled],
fieldset[disabled] .navbar .btn-navbar {
color: #ffffff; color: #ffffff;
background-color: #e5e5e5; background-color: #e5e5e5;
} }
...@@ -4133,7 +4149,8 @@ input[type="button"].btn-block { ...@@ -4133,7 +4149,8 @@ input[type="button"].btn-block {
.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar.disabled,
.navbar-inverse .btn-navbar[disabled] { .navbar-inverse .btn-navbar[disabled],
fieldset[disabled] .navbar-inverse .btn-navbar {
color: #ffffff; color: #ffffff;
background-color: #040404; background-color: #040404;
} }
......
...@@ -48,7 +48,8 @@ ...@@ -48,7 +48,8 @@
// Disabled state // Disabled state
&.disabled, &.disabled,
&[disabled] { &[disabled],
fieldset[disabled] & {
cursor: default; cursor: default;
background-image: none; background-image: none;
.opacity(65); .opacity(65);
...@@ -174,7 +175,8 @@ input[type="button"] { ...@@ -174,7 +175,8 @@ input[type="button"] {
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link, .btn-link,
.btn-link:active, .btn-link:active,
.btn-link[disabled] { .btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
.box-shadow(none); .box-shadow(none);
...@@ -190,7 +192,12 @@ input[type="button"] { ...@@ -190,7 +192,12 @@ input[type="button"] {
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
.btn-link[disabled]:hover { .btn-link {
color: @grayDark; &[disabled],
text-decoration: none; fieldset[disabled] & {
&:hover {
color: @grayDark;
text-decoration: none;
}
}
} }
...@@ -330,21 +330,24 @@ textarea[class*="span"], ...@@ -330,21 +330,24 @@ textarea[class*="span"],
// -------------- // --------------
// Disabled and read-only inputs // Disabled and read-only inputs
input[disabled], input,
select[disabled], select,
textarea[disabled], textarea {
input[readonly], &[disabled],
select[readonly], &[readonly],
textarea[readonly] { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
background-color: @input-background-disabled; background-color: @input-background-disabled;
}
} }
// Explicitly reset the colors here // Explicitly reset the colors here
input[type="radio"][disabled], input[type="radio"],
input[type="checkbox"][disabled], input[type="checkbox"] {
input[type="radio"][readonly], &[disabled],
input[type="checkbox"][readonly] { &[readonly],
background-color: transparent; fieldset[disabled] & {
background-color: transparent;
}
} }
......
...@@ -416,7 +416,7 @@ ...@@ -416,7 +416,7 @@
.reset-filter(); .reset-filter();
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:active, &.active, &.disabled, &[disabled], fieldset[disabled] & {
color: @text-color; color: @text-color;
background-color: @endColor; background-color: @endColor;
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment