diff options
Diffstat (limited to 'docs')
-rw-r--r-- | docs/assets/css/bootstrap.css | 106 | ||||
-rw-r--r-- | docs/css.html | 23 | ||||
-rw-r--r-- | docs/templates/pages/css.mustache | 23 |
3 files changed, 94 insertions, 58 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> |