docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug
This commit is contained in:
Mark Otto
parent
069ef6a020
commit
8a7abc7493
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Mon Dec 19 22:58:34 PST 2011
|
||||
* Date: Wed Dec 21 15:58:57 CST 2011
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -919,6 +919,9 @@ textarea[readonly] {
|
|||
.inline-inputs span {
|
||||
padding: 0 2px 0 1px;
|
||||
}
|
||||
.input-prepend, .input-append {
|
||||
overflow: hidden;
|
||||
}
|
||||
.input-prepend input, .input-append input {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
|
|
@ -1534,7 +1537,6 @@ footer {
|
|||
.alert-message.danger,
|
||||
.btn.error,
|
||||
.alert-message.error {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #c43c35;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
|
|
@ -1549,7 +1551,6 @@ footer {
|
|||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.success, .alert-message.success {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #57a957;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
|
|
@ -1564,7 +1565,6 @@ footer {
|
|||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.info, .alert-message.info {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #339bb9;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
|
|
@ -1619,7 +1619,6 @@ footer {
|
|||
}
|
||||
.btn.primary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #0064cd;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
|
||||
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
|
||||
|
|
@ -1759,7 +1758,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
margin-bottom: 18px;
|
||||
color: #404040;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #eedc94;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
|
||||
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
|
||||
|
|
@ -1802,6 +1800,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.alert-message.error, .alert-message.success, .alert-message.info {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.alert-message.block-message {
|
||||
padding: 14px;
|
||||
background-image: none;
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
|
|||
.inline-inputs input.mini{width:60px;}
|
||||
.inline-inputs input.small{width:90px;}
|
||||
.inline-inputs span{padding:0 2px 0 1px;}
|
||||
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
|
||||
.input-prepend .add-on{*margin-top:1px;}
|
||||
|
|
@ -212,12 +212,12 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
|
|||
footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;}
|
||||
.btn:focus{outline:1px dotted #666;}
|
||||
.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
|
|
@ -234,11 +234,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
|
||||
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
|
||||
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
|
||||
.alert-message h5{line-height:18px;}
|
||||
.alert-message p{margin-bottom:0;}
|
||||
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
|
||||
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
|
||||
.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
|
||||
.alert-message.block-message ul{margin-bottom:0;}
|
||||
.alert-message.block-message li{color:#404040;}
|
||||
|
|
|
|||
|
|
@ -762,6 +762,43 @@
|
|||
<h1>Forms</h1>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
Types of forms
|
||||
default (stacked)
|
||||
horizontal (change the class)
|
||||
search
|
||||
inline
|
||||
Form elements
|
||||
form
|
||||
fieldset
|
||||
legend
|
||||
label
|
||||
input
|
||||
text (password, email, etc)
|
||||
radio
|
||||
checkbox
|
||||
textarea
|
||||
rows
|
||||
select
|
||||
single
|
||||
multiple
|
||||
size
|
||||
Custom form elements
|
||||
Input prepend and append (for @ and $)
|
||||
checkbox and radio lists
|
||||
Explaining the default Bootstrap form structure
|
||||
Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
|
||||
Form vertical and horizontal forms, we require a wrapping element.
|
||||
we suggest a fieldset
|
||||
but could be anthing so long as it uses the proper class
|
||||
Form states
|
||||
warning
|
||||
error
|
||||
success
|
||||
|
||||
-->
|
||||
|
||||
<h2>Four types of forms</h2>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
|
|
@ -842,7 +879,7 @@
|
|||
</div>
|
||||
<div class="span9">
|
||||
<form class="horizontal-form">
|
||||
<legend>Example form</legend>
|
||||
<legend>Example form section</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="input01">Text input</label>
|
||||
<div class="controls">
|
||||
|
|
@ -850,6 +887,16 @@
|
|||
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
|
||||
</div>
|
||||
<span class="help-block">Here's some help text</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="select01">Select list</label>
|
||||
<div class="controls">
|
||||
|
|
@ -874,23 +921,44 @@
|
|||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<legend>Example form</legend>
|
||||
<legend>Example form section</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="textarea">Textarea</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="fileInput">Disabled input</label>
|
||||
<div class="controls">
|
||||
<input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="fileInput">File input</label>
|
||||
<div class="controls">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
<fieldset class="control-group warning">
|
||||
<label class="control-label" for="inputError">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
<label class="control-label" for="textareaError">Textarea with error</label>
|
||||
<fieldset class="control-group success">
|
||||
<label class="control-label" for="inputError">Input with success</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xlarge" rows="3"></textarea>
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
|
|
|
|||
|
|
@ -201,11 +201,33 @@
|
|||
|
||||
|
||||
|
||||
<!-- Navigation
|
||||
<!-- Autocomplete
|
||||
================================================== -->
|
||||
<section id="navigation">
|
||||
<section id="autocomplete">
|
||||
<div class="page-header">
|
||||
<h1>Navigation</h1>
|
||||
<h1>Autocomplete <small></small></h1>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Carousel
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Carousel <small></small></h1>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<section id="navbar">
|
||||
<div class="page-header">
|
||||
<h1>Navbar</h1>
|
||||
</div>
|
||||
<h2>Fixed navbar</h2>
|
||||
<div class="navbar navbar-static" data-dropdown="dropdown">
|
||||
|
|
@ -262,11 +284,19 @@
|
|||
</div>
|
||||
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Tabs & Pills
|
||||
================================================== -->
|
||||
<section id="tabsAndPills">
|
||||
<div class="page-header">
|
||||
<h1>Tabs and pills <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tabs and pills</h2>
|
||||
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
|
||||
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
|
||||
</div>
|
||||
|
|
@ -428,10 +458,19 @@
|
|||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Breadcrumbs
|
||||
================================================== -->
|
||||
<section id="breadcrumbs">
|
||||
<div class="page-header">
|
||||
<h1>Breadcrumbs <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Breadcrumbs</h2>
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
|
@ -464,10 +503,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Step nav
|
||||
================================================== -->
|
||||
<section id="stepNav">
|
||||
<div class="page-header">
|
||||
<h1>Step nav <small></small></h1>
|
||||
</div>
|
||||
|
||||
<!-- Step nav -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Step nav</h2>
|
||||
<p>Placeholder for now!</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
|
@ -486,7 +535,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Pagination
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Pagination <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Pagination</h2>
|
||||
|
|
@ -644,11 +703,11 @@
|
|||
</section>
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
<!-- Modals
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
|
||||
<h1>Modals <small></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
|
@ -676,7 +735,17 @@
|
|||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Tooltips -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsies
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy tooltips <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tooltips</h2>
|
||||
|
|
@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Popovers -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Popovers</h2>
|
||||
|
|
@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<li><a href="./base-css.html">Base CSS</a></li>
|
||||
<li><a href="./components.html">Components</a></li>
|
||||
<li><a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li class="active"><a href="./less.html">Using LESS</a></li>
|
||||
<li><a href="./less.html">Using LESS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -325,6 +325,7 @@ textarea[readonly] {
|
|||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
overflow: hidden;
|
||||
input {
|
||||
.border-radius(0 3px 3px 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,7 +205,6 @@
|
|||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
.gradientBar(@primaryColor, @secondaryColor) {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
|
|
|
|||
|
|
@ -575,6 +575,12 @@ input[type=submit].btn {
|
|||
.box-shadow(0 1px 0 rgba(255,255,255,.25));
|
||||
}
|
||||
|
||||
&.error,
|
||||
&.success,
|
||||
&.info {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
&.block-message {
|
||||
padding: 14px;
|
||||
background-image: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue