From 07ef67da20c800eb3afa51d2064549ed325cc145 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 18 Dec 2014 19:07:22 -0800 Subject: [PATCH 1/5] Remove .hidden and .show classes .hidden is incompatible with jQuery's $(...).hide() --- docs/components/helpers.md | 23 +++++------------------ scss/_utilities.scss | 12 ------------ 2 files changed, 5 insertions(+), 30 deletions(-) diff --git a/docs/components/helpers.md b/docs/components/helpers.md index fea487860f..a5be35679e 100644 --- a/docs/components/helpers.md +++ b/docs/components/helpers.md @@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} -### Showing and hiding content +### Making content invisible -Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins. - -Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. +The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. {% highlight html %} -
...
- + {% endhighlight %} {% highlight scss %} // Classes -.show { - display: block !important; -} -.hidden { - display: none !important; - visibility: hidden !important; -} .invisible { visibility: hidden; } -// Usage as mixins +// Usage as mixin .element { - .show(); -} -.another-element { - .hidden(); + .invisible(); } {% endhighlight %} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6b82d2fc3f..d334001251 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -48,9 +48,6 @@ // Toggling content -.show { - display: block !important; -} .invisible { visibility: hidden; } @@ -59,15 +56,6 @@ } -// Hide from screenreaders and browsers -// -// Credit: HTML5 Boilerplate -.hidden { - display: none !important; - visibility: hidden !important; -} - - // For Affix plugin .affix { position: fixed; From 5b03c9ad634499ff00a0248602d9f097c3be5e00 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 22 Dec 2014 13:33:58 -0800 Subject: [PATCH 2/5] [disabled] => :disabled :disabled is supported in IE9+ and all modern browsers --- scss/_buttons.scss | 6 +++--- scss/_forms.scss | 4 ++-- scss/_navbar.scss | 4 ++-- scss/mixins/_buttons.scss | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 08feff3b65..8f75cbec16 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -43,7 +43,7 @@ } &.disabled, - &[disabled], + &:disabled, fieldset[disabled] & { pointer-events: none; // Future-proof disabling of clicks cursor: $cursor-disabled; @@ -88,7 +88,7 @@ &, &:active, &.active, - &[disabled], + &:disabled, fieldset[disabled] & { background-color: transparent; @include box-shadow(none); @@ -105,7 +105,7 @@ text-decoration: underline; background-color: transparent; } - &[disabled], + &:disabled, fieldset[disabled] & { &:hover, &:focus { diff --git a/scss/_forms.scss b/scss/_forms.scss index 1f68383f92..8d6d00af0d 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -140,7 +140,7 @@ output { // HTML5 says that controls under a fieldset > legend:first-child won't be // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. - &[disabled], + &:disabled, &[readonly], fieldset[disabled] & { cursor: $cursor-disabled; @@ -263,7 +263,7 @@ input[type="search"] { // Note: Neither radios nor checkboxes can be readonly. input[type="radio"], input[type="checkbox"] { - &[disabled], + &:disabled, &.disabled, fieldset[disabled] & { cursor: $cursor-disabled; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index d021ab0def..d4dcb673f0 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -309,7 +309,7 @@ &:focus { color: $navbar-default-link-hover-color; } - &[disabled], + &:disabled, fieldset[disabled] & { &:hover, &:focus { @@ -422,7 +422,7 @@ color: $navbar-inverse-link-hover-color; } - &[disabled], + &:disabled, fieldset[disabled] & { &:hover, &:focus { diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 7233b4dc22..b043d60de3 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -28,7 +28,7 @@ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } &.disabled, - &[disabled], + &:disabled, fieldset[disabled] & { &, &:hover, From 9a6477662ab737bdcaca90a292a3ac0b48351a53 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 22 Dec 2014 13:37:31 -0800 Subject: [PATCH 3/5] grunt dist --- dist/css/bootstrap.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 8a4088844e..fed8394241 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -1963,7 +1963,7 @@ output { .form-control::placeholder { color: #999; } -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { +.form-control:disabled, .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eceeef; opacity: 1; @@ -2035,7 +2035,7 @@ input[type="search"] { margin-left: 10px; } -input[type="radio"][disabled], input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"][disabled], input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] { +input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] { cursor: not-allowed; } @@ -2364,7 +2364,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn.disabled, .btn[disabled], fieldset[disabled] .btn { +.btn.disabled, .btn:disabled, fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; -webkit-box-shadow: none; @@ -2387,7 +2387,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { +.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled.focus, .btn-primary:disabled:active, .btn-primary:disabled.active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { background-color: #0275d8; border-color: #0267bf; } @@ -2411,7 +2411,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-secondary.disabled, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary.disabled:active, .btn-secondary.disabled.active, .btn-secondary[disabled], .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus, .btn-secondary[disabled]:active, .btn-secondary[disabled].active, fieldset[disabled] .btn-secondary, fieldset[disabled] .btn-secondary:hover, fieldset[disabled] .btn-secondary:focus, fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary:active, fieldset[disabled] .btn-secondary.active { +.btn-secondary.disabled, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary.disabled:active, .btn-secondary.disabled.active, .btn-secondary:disabled, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus, .btn-secondary:disabled:active, .btn-secondary:disabled.active, fieldset[disabled] .btn-secondary, fieldset[disabled] .btn-secondary:hover, fieldset[disabled] .btn-secondary:focus, fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary:active, fieldset[disabled] .btn-secondary.active { background-color: #fff; border-color: #eceeef; } @@ -2435,7 +2435,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active { +.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info:disabled, .btn-info:disabled:hover, .btn-info:disabled:focus, .btn-info:disabled.focus, .btn-info:disabled:active, .btn-info:disabled.active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da; } @@ -2459,7 +2459,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active { +.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success:disabled, .btn-success:disabled:hover, .btn-success:disabled:focus, .btn-success:disabled.focus, .btn-success:disabled:active, .btn-success:disabled.active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; } @@ -2483,7 +2483,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active { +.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning:disabled, .btn-warning:disabled:hover, .btn-warning:disabled:focus, .btn-warning:disabled.focus, .btn-warning:disabled:active, .btn-warning:disabled.active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236; } @@ -2507,7 +2507,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } -.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active { +.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger:disabled, .btn-danger:disabled:hover, .btn-danger:disabled:focus, .btn-danger:disabled.focus, .btn-danger:disabled:active, .btn-danger:disabled.active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a; } @@ -2521,7 +2521,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te color: #0275d8; border-radius: 0; } -.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link { +.btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled, fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; @@ -2534,7 +2534,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te text-decoration: underline; background-color: transparent; } -.btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus { +.btn-link:disabled:hover, .btn-link:disabled:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus { color: #818a91; text-decoration: none; } @@ -3308,7 +3308,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; } -.navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus { +.navbar-default .btn-link:disabled:hover, .navbar-default .btn-link:disabled:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus { color: #ccc; } @@ -3374,7 +3374,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #fff; } -.navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus { +.navbar-inverse .btn-link:disabled:hover, .navbar-inverse .btn-link:disabled:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444; } From 4d8559f8956ae26f0c967fe6d3143be8bc793ae6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 22 Dec 2014 16:32:25 -0800 Subject: [PATCH 4/5] Remove min--moz-device-pixel-ratio Bootstrap v4 no longer supports the old versions of Firefox affected by this typo bug. --- scss/mixins/_image.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index f25e0ab21d..bec9626f60 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -16,15 +16,13 @@ // Retina image // -// Short retina mixin for setting background-image and -size. Note that the -// spelling of `min--moz-device-pixel-ratio` is intentional. +// Short retina mixin for setting background-image and -size. @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url("#{file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), From 96d273e28f721f5a8e22c3fd870955e213e955aa Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 22 Dec 2014 17:27:08 -0800 Subject: [PATCH 5/5] Re-add Firefox placeholder opacity workaround --- scss/_forms.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/_forms.scss b/scss/_forms.scss index 1f68383f92..9ea0ebc674 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -133,6 +133,7 @@ output { // Placeholder &::placeholder { color: $input-color-placeholder; + opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 } // Disabled and read-only inputs