From efbf8373a5060b2c9b4d97cdfd2c288124d339c6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 16 Mar 2013 12:34:07 -0700 Subject: [PATCH] Use form elements in checkbox and radio button groups * Uses .btn on label elements with nested checkbox and radio controls within * Updated examples to reflect change in HTML and CSS * Had to add .active all buttons for proper state highlighting (mimicing the :active pseudo state) * Still needs JavaScript plugin updated by @fat --- docs/assets/css/bootstrap.css | 53 +++++++++++++++++++++++++++-------- docs/javascript.html | 48 +++++++++++++++++++++++-------- less/button-groups.less | 7 +++++ less/mixins.less | 6 ++-- 4 files changed, 88 insertions(+), 26 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 26dddb1b8a..f1e5dfa034 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1771,7 +1771,8 @@ input[type="button"].btn-block { .btn:hover, .btn:focus, -.btn:active { +.btn:active, +.btn.active { background-color: #9a9c9d; border-color: #8d9091; } @@ -1784,7 +1785,10 @@ fieldset[disabled] .btn:hover, fieldset[disabled] .btn:focus, .btn.disabled:active, .btn[disabled]:active, -fieldset[disabled] .btn:active { +fieldset[disabled] .btn:active, +.btn.disabled.active, +.btn[disabled].active, +fieldset[disabled] .btn.active { background-color: #a7a9aa; border-color: #a7a9aa; } @@ -1796,7 +1800,8 @@ fieldset[disabled] .btn:active { .btn-primary:hover, .btn-primary:focus, -.btn-primary:active { +.btn-primary:active, +.btn-primary.active { background-color: #357ebd; border-color: #3071a9; } @@ -1809,7 +1814,10 @@ fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, -fieldset[disabled] .btn-primary:active { +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { background-color: #428bca; border-color: #428bca; } @@ -1821,7 +1829,8 @@ fieldset[disabled] .btn-primary:active { .btn-warning:hover, .btn-warning:focus, -.btn-warning:active { +.btn-warning:active, +.btn-warning.active { background-color: #eea236; border-color: #ec971f; } @@ -1834,7 +1843,10 @@ fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, -fieldset[disabled] .btn-warning:active { +fieldset[disabled] .btn-warning:active, +.btn-warning.disabled.active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #f0ad4e; } @@ -1846,7 +1858,8 @@ fieldset[disabled] .btn-warning:active { .btn-danger:hover, .btn-danger:focus, -.btn-danger:active { +.btn-danger:active, +.btn-danger.active { background-color: #d43f3a; border-color: #c9302c; } @@ -1859,7 +1872,10 @@ fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, -fieldset[disabled] .btn-danger:active { +fieldset[disabled] .btn-danger:active, +.btn-danger.disabled.active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d9534f; } @@ -1871,7 +1887,8 @@ fieldset[disabled] .btn-danger:active { .btn-success:hover, .btn-success:focus, -.btn-success:active { +.btn-success:active, +.btn-success.active { background-color: #4cae4c; border-color: #449d44; } @@ -1884,7 +1901,10 @@ fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, -fieldset[disabled] .btn-success:active { +fieldset[disabled] .btn-success:active, +.btn-success.disabled.active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #5cb85c; } @@ -1896,7 +1916,8 @@ fieldset[disabled] .btn-success:active { .btn-info:hover, .btn-info:focus, -.btn-info:active { +.btn-info:active, +.btn-info.active { background-color: #46b8da; border-color: #31b0d5; } @@ -1909,7 +1930,10 @@ fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, -fieldset[disabled] .btn-info:active { +fieldset[disabled] .btn-info:active, +.btn-info.disabled.active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #5bc0de; } @@ -3671,6 +3695,11 @@ button.close { width: 1%; } +.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"], +.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] { + display: none; +} + .breadcrumb { padding: 8px 15px; margin: 0 0 20px; diff --git a/docs/javascript.html b/docs/javascript.html index bbf54b53ae..e424445416 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1172,16 +1172,28 @@ $('#my-alert').bind('closed', function () {

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

- - - + + +
{% highlight html linenos %}
- - - + + +
{% endhighlight %} @@ -1189,16 +1201,28 @@ $('#my-alert').bind('closed', function () {

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

- - - + + +
{% highlight html linenos %}
- - - + + +
{% endhighlight %} diff --git a/less/button-groups.less b/less/button-groups.less index ddb549e4b6..8a83ab3f2e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -156,3 +156,10 @@ width: 1%; } } + + +// Checkbox and radio options +.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"], +.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] { + display: none; +} diff --git a/less/mixins.less b/less/mixins.less index 15f6275b71..482e7e76f3 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -401,7 +401,8 @@ &:hover, &:focus, - &:active { + &:active, + &.active { background-color: darken(@background, 5%); border-color: darken(@border, 10%); } @@ -411,7 +412,8 @@ fieldset[disabled] & { &:hover, &:focus, - &:active { + &:active, + &.active { background-color: @background; border-color: @border }