From 14844db862a61c92be982921e14a526484f3b8a9 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 19 Dec 2012 23:37:33 -0800
Subject: [PATCH] Holy shit, buttons, button states, and input states updated
---
docs/assets/css/bootstrap.css | 106 ++++++++++++++++++++----------
docs/css.html | 23 ++++---
docs/templates/pages/css.mustache | 23 ++++---
less/buttons.less | 11 ++--
less/forms.less | 2 +-
less/mixins.less | 7 +-
less/variables.less | 2 +-
7 files changed, 107 insertions(+), 67 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 83fec25aeb..b88f21cd73 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1100,7 +1100,7 @@ input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
- height: 30px;
+ height: 34px;
}
.controls-row:before,
@@ -2550,21 +2550,11 @@ button.close {
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
- color: #555555;
text-align: center;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
- background-color: #dadada;
- background-image: -moz-linear-gradient(top, #fafafa, #dadada);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#dadada));
- background-image: -webkit-linear-gradient(top, #fafafa, #dadada);
- background-image: -o-linear-gradient(top, #fafafa, #dadada);
- background-image: linear-gradient(to bottom, #fafafa, #dadada);
- background-repeat: repeat-x;
- border: 1px solid #c7c7c7;
+ border: 1px solid #ccc;
border-radius: 4px;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffdadada', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@@ -2583,8 +2573,8 @@ button.close {
.btn.active {
background-image: none;
outline: 0;
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 1px 0 rgba(255, 255, 255, 0.1);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn.disabled,
@@ -2649,30 +2639,63 @@ input[type="button"].btn-block {
width: 100%;
}
+.btn {
+ color: #555555;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+ background-color: #dadada;
+ background-image: -moz-linear-gradient(top, #fafafa, #dadada);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#dadada));
+ background-image: -webkit-linear-gradient(top, #fafafa, #dadada);
+ background-image: -o-linear-gradient(top, #fafafa, #dadada);
+ background-image: linear-gradient(to bottom, #fafafa, #dadada);
+ background-repeat: repeat-x;
+ border-color: #c7c7c7;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffdadada', GradientType=0);
+}
+
+.btn:hover,
+.btn:active,
+.btn.active {
+ color: #555555;
+ background-color: #dadada;
+ background-position: 0 -15px;
+}
+
+.btn:active,
+.btn.active,
+.btn[disabled],
+.btn.disabled,
+fieldset[disabled] .btn {
+ background-image: none;
+}
+
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- background-color: #0044cc;
- background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
- background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
- background-image: -o-linear-gradient(top, #0088cc, #0044cc);
- background-image: linear-gradient(to bottom, #0088cc, #0044cc);
+ background-color: #006699;
+ background-image: -moz-linear-gradient(top, #0088cc, #006699);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#006699));
+ background-image: -webkit-linear-gradient(top, #0088cc, #006699);
+ background-image: -o-linear-gradient(top, #0088cc, #006699);
+ background-image: linear-gradient(to bottom, #0088cc, #006699);
background-repeat: repeat-x;
- border-color: #003bb3;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
+ border-color: #004c73;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006699', GradientType=0);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
color: #ffffff;
- background-color: #0044cc;
+ background-color: #006699;
background-position: 0 -15px;
}
.btn-primary:active,
-.btn-primary.active {
+.btn-primary.active,
+.btn-primary[disabled],
+.btn-primary.disabled,
+fieldset[disabled] .btn-primary {
background-image: none;
}
@@ -2686,7 +2709,7 @@ input[type="button"].btn-block {
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
- border-color: #df8505;
+ border-color: #d37e05;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
@@ -2699,7 +2722,10 @@ input[type="button"].btn-block {
}
.btn-warning:active,
-.btn-warning.active {
+.btn-warning.active,
+.btn-warning[disabled],
+.btn-warning.disabled,
+fieldset[disabled] .btn-warning {
background-image: none;
}
@@ -2713,7 +2739,7 @@ input[type="button"].btn-block {
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-repeat: repeat-x;
- border-color: #a9302a;
+ border-color: #9e2d27;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
}
@@ -2726,7 +2752,10 @@ input[type="button"].btn-block {
}
.btn-danger:active,
-.btn-danger.active {
+.btn-danger.active,
+.btn-danger[disabled],
+.btn-danger.disabled,
+fieldset[disabled] .btn-danger {
background-image: none;
}
@@ -2740,7 +2769,7 @@ input[type="button"].btn-block {
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-repeat: repeat-x;
- border-color: #499249;
+ border-color: #448944;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
}
@@ -2753,7 +2782,10 @@ input[type="button"].btn-block {
}
.btn-success:active,
-.btn-success.active {
+.btn-success.active,
+.btn-success[disabled],
+.btn-success.disabled,
+fieldset[disabled] .btn-success {
background-image: none;
}
@@ -2901,7 +2933,7 @@ fieldset[disabled] .btn-link:hover {
}
.btn-group.open .btn-primary.dropdown-toggle {
- background-color: #0044cc;
+ background-color: #006699;
}
.btn-group.open .btn-warning.dropdown-toggle {
@@ -3551,7 +3583,7 @@ fieldset[disabled] .btn-link:hover {
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
- border-color: #d9d9d9;
+ border-color: #d2d2d2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@@ -3566,7 +3598,10 @@ fieldset[disabled] .btn-link:hover {
}
.navbar .btn-navbar:active,
-.navbar .btn-navbar.active {
+.navbar .btn-navbar.active,
+.navbar .btn-navbar[disabled],
+.navbar .btn-navbar.disabled,
+fieldset[disabled] .navbar .btn-navbar {
background-image: none;
}
@@ -3813,7 +3848,10 @@ fieldset[disabled] .btn-link:hover {
}
.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,
+fieldset[disabled] .navbar-inverse .btn-navbar {
background-image: none;
}
diff --git a/docs/css.html b/docs/css.html
index 3ad55d0803..ddf4e08a78 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1650,13 +1650,17 @@ For example, <code><section></code> should be wrapped as inlin
</pre>
<h3>Disabled fieldsets</h3>
- <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p>
+ <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
<form class="bs-docs-example form-inline">
<fieldset disabled>
- <input type="text" class="span4" placeholder="These controls are all disabled just">
- <select class="span4">
- <option>by being under a disabled fieldset</option>
- </select>
+ <div>
+ <input type="text" class="span4" placeholder="Disabled input">
+ </div>
+ <div>
+ <select class="span4">
+ <option>Disabled select</option>
+ </select>
+ </div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
@@ -1668,9 +1672,9 @@ For example, <code><section></code> should be wrapped as inlin
<pre class="prettyprint linenums">
<form class="form-inline">
<fieldset disabled>
- <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <input type="text" class="span4" placeholder="Disabled input">
<select class="span4">
- <option>by being under a disabled fieldset</option>
+ <option>Disabled select</option>
</select>
<div class="checkbox">
<label>
@@ -1681,11 +1685,6 @@ For example, <code><section></code> should be wrapped as inlin
</fieldset>
</form>
</pre>
- <p>
- <span class="label label-info">Heads up!</span>
- Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br>
- Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
- </p>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 0e39c80de0..8f4342e26d 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1590,13 +1590,17 @@ For example, <code><section></code> should be wrapped as inlin
</pre>
<h3>Disabled fieldsets</h3>
- <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p>
+ <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
<form class="bs-docs-example form-inline">
<fieldset disabled>
- <input type="text" class="span4" placeholder="These controls are all disabled just">
- <select class="span4">
- <option>by being under a disabled fieldset</option>
- </select>
+ <div>
+ <input type="text" class="span4" placeholder="Disabled input">
+ </div>
+ <div>
+ <select class="span4">
+ <option>Disabled select</option>
+ </select>
+ </div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
@@ -1608,9 +1612,9 @@ For example, <code><section></code> should be wrapped as inlin
<pre class="prettyprint linenums">
<form class="form-inline">
<fieldset disabled>
- <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <input type="text" class="span4" placeholder="Disabled input">
<select class="span4">
- <option>by being under a disabled fieldset</option>
+ <option>Disabled select</option>
</select>
<div class="checkbox">
<label>
@@ -1621,11 +1625,6 @@ For example, <code><section></code> should be wrapped as inlin
</fieldset>
</form>
</pre>
- <p>
- <span class="label label-info">Heads up!</span>
- Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br>
- Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
- </p>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
diff --git a/less/buttons.less b/less/buttons.less
index 14de3529ca..fe80fa44b9 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -13,13 +13,10 @@
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
line-height: @line-height-base;
- color: @gray;
text-align: center;
- text-shadow: 0 1px 0 rgba(255,255,255,.75);
vertical-align: middle;
cursor: pointer;
- #gradient > .vertical(@btn-background, @btn-background-highlight);
- border: 1px solid darken(@btn-background, 20%);
+ border: 1px solid #ccc;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
@@ -35,7 +32,7 @@
&.active {
outline: 0;
background-image: none;
- .box-shadow(~"inset 0 3px 5px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.1)");
+ .box-shadow(~"inset 0 3px 5px rgba(0,0,0,.125), 0 1px 0 rgba(255,255,255,.1)");
}
&.disabled,
@@ -116,6 +113,10 @@ input[type="button"] {
// Alternate buttons
// --------------------------------------------------
+.btn {
+ .buttonBackground(@btn-background, @btn-background-highlight, @gray, 0 1px 0 rgba(255,255,255,.75));
+}
+// Primary appears as blue
.btn-primary {
.buttonBackground(@btn-background-primary, @btn-background-primary-highlight);
}
diff --git a/less/forms.less b/less/forms.less
index 8fa9854151..b444ba765d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -307,7 +307,7 @@ input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
- height: 30px;
+ height: @input-height;
}
// Control row for multiple inputs per line
.controls-row {
diff --git a/less/mixins.less b/less/mixins.less
index ebfce5f912..a90e61bc73 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -409,7 +409,7 @@
color: @text-color;
text-shadow: @text-shadow;
#gradient > .vertical(@background-start, @background-end);
- border-color: darken(@background-end, 5%);
+ border-color: darken(@background-end, 7.5%);
&:hover,
&:active,
@@ -419,7 +419,10 @@
background-position: 0 -15px;
}
&:active,
- &.active {
+ &.active,
+ &[disabled],
+ &.disabled,
+ fieldset[disabled] & {
background-image: none;
}
}
diff --git a/less/variables.less b/less/variables.less
index 7daff461e6..358784e57d 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -79,7 +79,7 @@
@btn-background-highlight: #dadada;
@btn-background-primary: @link-color;
-@btn-background-primary-highlight: spin(@btn-background-primary, 20%);
+@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
--
GitLab