aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/assets/css/bootstrap.css53
-rw-r--r--docs/javascript.html48
-rw-r--r--less/button-groups.less7
-rw-r--r--less/mixins.less6
4 files changed, 88 insertions, 26 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 26dddb1b8..f1e5dfa03 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 bbf54b53a..e42444541 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1172,16 +1172,28 @@ $('#my-alert').bind('closed', function () {
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 3
+ </label>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-checkbox">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox"> Option 3
+ </label>
</div>
{% endhighlight %}
@@ -1189,16 +1201,28 @@ $('#my-alert').bind('closed', function () {
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option1"> Option 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option2"> Option 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option3"> Option 3
+ </label>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option1"> Option 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option2"> Option 2
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option3"> Option 3
+ </label>
</div>
{% endhighlight %}
diff --git a/less/button-groups.less b/less/button-groups.less
index ddb549e4b..8a83ab3f2 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 15f6275b7..482e7e76f 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
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 16:54:21 +0000