Skip to content

B
bootstrap
Commit 8a7abc74 authored by Mark Otto's avatar Mark Otto
Browse files
Options

docs updates, forms updated to include error states and more examples, remove... 

docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug
parent 069ef6a0
Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 33 deletions
bootstrap.css
View file @ 8a7abc74
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -919,6 +919,9 @@ textarea[readonly] { ...@@ -919,6 +919,9 @@ textarea[readonly] {
.inline-inputs span { .inline-inputs span {
padding: 0 2px 0 1px; padding: 0 2px 0 1px;
} }
.input-prepend, .input-append {
overflow: hidden;
}
.input-prepend input, .input-append input { .input-prepend input, .input-append input {
-webkit-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;
...@@ -1534,7 +1537,6 @@ footer { ...@@ -1534,7 +1537,6 @@ footer {
.alert-message.danger, .alert-message.danger,
.btn.error, .btn.error,
.alert-message.error { .alert-message.error {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #c43c35; background-color: #c43c35;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
...@@ -1549,7 +1551,6 @@ footer { ...@@ -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); 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 { .btn.success, .alert-message.success {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #57a957; background-color: #57a957;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -moz-linear-gradient(top, #62c462, #57a957);
...@@ -1564,7 +1565,6 @@ footer { ...@@ -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); 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 { .btn.info, .alert-message.info {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #339bb9; background-color: #339bb9;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
...@@ -1619,7 +1619,6 @@ footer { ...@@ -1619,7 +1619,6 @@ footer {
} }
.btn.primary { .btn.primary {
color: #ffffff; color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0064cd; background-color: #0064cd;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #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 { ...@@ -1759,7 +1758,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-bottom: 18px; margin-bottom: 18px;
color: #404040; color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 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-color: #eedc94;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #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 { ...@@ -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); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
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 { .alert-message.block-message {
padding: 14px; padding: 14px;
background-image: none; background-image: none;
......
bootstrap.min.css
View file @ 8a7abc74
...@@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado ...@@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.inline-inputs input.mini{width:60px;} .inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;} .inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;} .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 .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 .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;} .input-prepend .add-on{*margin-top:1px;}
...@@ -212,12 +212,12 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} ...@@ -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;} 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;} .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.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.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{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.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{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.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{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: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.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;}
.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; ...@@ -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: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;} .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;} .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 h5{line-height:18px;}
.alert-message p{margin-bottom:0;} .alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .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 .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{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 ul{margin-bottom:0;}
.alert-message.block-message li{color:#404040;} .alert-message.block-message li{color:#404040;}
......
docs/base-css.html
View file @ 8a7abc74
...@@ -762,6 +762,43 @@ ...@@ -762,6 +762,43 @@
<h1>Forms</h1> <h1>Forms</h1>
</div> </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> <h2>Four types of forms</h2>
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<thead> <thead>
...@@ -842,7 +879,7 @@ ...@@ -842,7 +879,7 @@
</div> </div>
<div class="span9"> <div class="span9">
<form class="horizontal-form"> <form class="horizontal-form">
<legend>Example form</legend> <legend>Example form section</legend>
<fieldset class="control-group"> <fieldset class="control-group">
<label class="control-label" for="input01">Text input</label> <label class="control-label" for="input01">Text input</label>
<div class="controls"> <div class="controls">
...@@ -850,6 +887,16 @@ ...@@ -850,6 +887,16 @@
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
</div> </div>
</fieldset> </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"> <fieldset class="control-group">
<label class="control-label" for="select01">Select list</label> <label class="control-label" for="select01">Select list</label>
<div class="controls"> <div class="controls">
...@@ -874,23 +921,44 @@ ...@@ -874,23 +921,44 @@
</select> </select>
</div> </div>
</fieldset> </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"> <fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label> <label class="control-label" for="fileInput">File input</label>
<div class="controls"> <div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file"> <input class="input-file" id="fileInput" name="fileInput" type="file">
</div> </div>
</fieldset> </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> <label class="control-label" for="inputError">Input with error</label>
<div class="controls"> <div class="controls">
<input type="text" name="inputError"> <input type="text" name="inputError">
<span class="help-inline">Please correct the error</span>
</div> </div>
</fieldset> </fieldset>
<fieldset class="control-group has-error"> <fieldset class="control-group success">
<label class="control-label" for="textareaError">Textarea with error</label> <label class="control-label" for="inputError">Input with success</label>
<div class="controls"> <div class="controls">
<textarea class="input-xlarge" rows="3"></textarea> <input type="text" name="inputError">
<span class="help-inline">Woohoo!</span>
</div> </div>
</fieldset> </fieldset>
<fieldset class="control-group"> <fieldset class="control-group">
......
docs/components.html
View file @ 8a7abc74
...@@ -201,11 +201,33 @@ ...@@ -201,11 +201,33 @@
<!-- Navigation <!-- Autocomplete
================================================== --> ================================================== -->
<section id="navigation"> <section id="autocomplete">
<div class="page-header"> <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> </div>
<h2>Fixed navbar</h2> <h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown"> <div class="navbar navbar-static" data-dropdown="dropdown">
...@@ -262,11 +284,19 @@ ...@@ -262,11 +284,19 @@
</div> </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>&lt;body&gt;</code>.</p> <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>&lt;body&gt;</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="row">
<div class="span3"> <div class="span3">
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code>&lt;ul&gt;</code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Create simple secondary navigation with a <code>&lt;ul&gt;</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> <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> </div>
...@@ -428,10 +458,19 @@ ...@@ -428,10 +458,19 @@
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<!-- Breadcrumbs --> </section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
</div>
<div class="row"> <div class="row">
<div class="span3"> <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> <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>
<div class="span9"> <div class="span9">
...@@ -464,10 +503,20 @@ ...@@ -464,10 +503,20 @@
</div> </div>
</div> </div>
</section>
<!-- Step nav
================================================== -->
<section id="stepNav">
<div class="page-header">
<h1>Step nav <small></small></h1>
</div>
<!-- Step nav --> <!-- Step nav -->
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h2>Step nav</h2>
<p>Placeholder for now!</p> <p>Placeholder for now!</p>
</div> </div>
<div class="span9"> <div class="span9">
...@@ -486,7 +535,17 @@ ...@@ -486,7 +535,17 @@
</div> </div>
</div> </div>
<!-- Pagination --> </section>
<!-- Pagination
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Pagination <small></small></h1>
</div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h2>Pagination</h2> <h2>Pagination</h2>
...@@ -644,11 +703,11 @@ ...@@ -644,11 +703,11 @@
</section> </section>
<!-- Popovers <!-- Modals
================================================== --> ================================================== -->
<section id="popovers"> <section id="popovers">
<div class="page-header"> <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>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
...@@ -676,7 +735,17 @@ ...@@ -676,7 +735,17 @@
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<!-- Tooltips --> </section>
<!-- Twipsies
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Twipsy tooltips <small></small></h1>
</div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h2>Tooltips</h2> <h2>Tooltips</h2>
...@@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<!-- Popovers --> </section>
<!-- Popovers
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>Popovers <small></small></h1>
</div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h2>Popovers</h2> <h2>Popovers</h2>
...@@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section> </section>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">
......
docs/upgrading.html
View file @ 8a7abc74
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<li><a href="./base-css.html">Base CSS</a></li> <li><a href="./base-css.html">Base CSS</a></li>
<li><a href="./components.html">Components</a></li> <li><a href="./components.html">Components</a></li>
<li><a href="./javascript.html">Javascript plugins</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> </ul>
</div> </div>
</div> </div>
......
lib/forms.less
View file @ 8a7abc74
...@@ -325,6 +325,7 @@ textarea[readonly] { ...@@ -325,6 +325,7 @@ textarea[readonly] {
// Allow us to put symbols and text within the input field for a cleaner look // Allow us to put symbols and text within the input field for a cleaner look
.input-prepend, .input-prepend,
.input-append { .input-append {
overflow: hidden;
input { input {
.border-radius(0 3px 3px 0); .border-radius(0 3px 3px 0);
} }
......
lib/mixins.less
View file @ 8a7abc74
...@@ -205,7 +205,6 @@ ...@@ -205,7 +205,6 @@
// Gradient Bar Colors for buttons and alerts // Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) { .gradientBar(@primaryColor, @secondaryColor) {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(@primaryColor, @secondaryColor); #gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); 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%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
......
lib/patterns.less
View file @ 8a7abc74
...@@ -575,6 +575,12 @@ input[type=submit].btn { ...@@ -575,6 +575,12 @@ input[type=submit].btn {
.box-shadow(0 1px 0 rgba(255,255,255,.25)); .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 { &.block-message {
padding: 14px; padding: 14px;
background-image: none; background-image: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment