Skip to content
GitLab
Commit ce615d01 authored by Mark Otto's avatar Mark Otto
Browse files

merged in my pending changes from 1.2-wip branch, resolve diffs as best as i... 

merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts
parent 04b8e667
Hide whitespace changes
Inline Side-by-side
Showing
with 103 additions and 120 deletions
+103 -120
bootstrap-1.1.0.css
+ 27
- 32
View file @ ce615d01
......@@ -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: Thu Aug 25 13:52:00 PDT 2011
* Date: Thu Aug 25 22:35:30 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
......@@ -122,27 +122,27 @@ aside {
clear: both;
}
.btn.danger,
.alert.danger,
.alert-message.danger,
.btn.danger:hover,
.alert.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert.error,
.alert-message.error,
.btn.error:hover,
.alert.error:hover,
.alert-message.error:hover,
.btn.success,
.alert.success,
.alert-message.success,
.btn.success:hover,
.alert.success:hover,
.alert-message.success:hover,
.btn.info,
.alert.info,
.alert-message.info,
.btn.info:hover,
.alert.info:hover {
.alert-message.info:hover {
color: #ffffff;
}
.btn.danger,
.alert.danger,
.alert-message.danger,
.btn.error,
.alert.error {
.alert-message.error {
background-color: #d6463e;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));
......@@ -156,7 +156,7 @@ aside {
border-color: #d6463e #d6463e #a52a23;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert.success {
.btn.success, .alert-message.success {
background-color: #57a957;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
......@@ -170,7 +170,7 @@ aside {
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.info {
.btn.info, .alert-message.info {
background-color: #36b3d9;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));
......@@ -1368,7 +1368,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
.alert {
.alert-message {
background-color: #eedc94;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
......@@ -1394,23 +1394,23 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-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 h5 {
.alert-message h5 {
line-height: 18px;
}
.alert p {
.alert-message p {
margin-bottom: 0;
}
.alert div {
.alert-message div {
margin-top: 5px;
margin-bottom: 2px;
line-height: 28px;
}
.alert .btn {
.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 .close {
.alert-message .close {
float: right;
margin-top: -2px;
color: #000000;
......@@ -1422,7 +1422,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.2;
opacity: 0.2;
}
.alert .close:hover {
.alert-message .close:hover {
color: #000000;
text-decoration: none;
filter: alpha(opacity=40);
......@@ -1430,7 +1430,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.4;
opacity: 0.4;
}
.alert.alert-block, .alert.alert-block:hover {
.alert-message.block-message {
background-image: none;
background-color: #fdf5d9;
padding: 14px;
......@@ -1439,30 +1439,25 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: none;
box-shadow: none;
}
.alert.alert-block p, .alert.alert-block:hover p {
.alert-message.block-message p {
margin-right: 30px;
}
.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions {
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert.alert-block.error,
.alert.alert-block:hover.error,
.alert.alert-block.success,
.alert.alert-block:hover.success,
.alert.alert-block.info,
.alert.alert-block:hover.info {
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert.alert-block.error, .alert.alert-block:hover.error {
.alert-message.block-message.error {
background-color: #fddfde;
border-color: #fbc7c6;
}
.alert.alert-block.success, .alert.alert-block:hover.success {
.alert-message.block-message.success {
background-color: #d1eed1;
border-color: #bfe7bf;
}
.alert.alert-block.info, .alert.alert-block:hover.info {
.alert-message.block-message.info {
background-color: #ddf4fb;
border-color: #c6edf9;
}
......
bootstrap-1.1.0.min.css
+ 15
- 15
View file @ ce615d01
......@@ -9,10 +9,10 @@ header,section,footer,article,aside{display:block;}
.center-block{display:block;margin:0 auto;}
.container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";}
.container:after{clear:both;}
.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;}
.btn.danger,.alert.danger,.btn.error,.alert.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;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.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{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;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-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";}
.row:after{clear:both;}
.row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;}
......@@ -184,17 +184,17 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);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 h5{line-height:18px;}
.alert p{margin-bottom:0;}
.alert div{margin-top:5px;margin-bottom:2px;line-height:28px;}
.alert .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 .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;}
.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;}
.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;}
.alert-message{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);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 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 .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert-message .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert-message.block-message{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message p{margin-right:30px;}
.alert-message.block-message .alert-actions{margin-top:5px;}
.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
.tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
.tabs:after,.pills:after{clear:both;}
.tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;}
......
docs/assets/css/docs.css
+ 2
- 2
View file @ ce615d01
......@@ -171,7 +171,7 @@ div.mini-layout div {
div.mini-layout div.mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
width: 450px;
width: 340px;
height: 340px;
}
div.mini-layout.fluid div.mini-layout-sidebar,
......@@ -185,7 +185,7 @@ div.mini-layout.fluid div.mini-layout-sidebar {
height: 340px;
}
div.mini-layout.fluid div.mini-layout-body {
width: 400px;
width: 300px;
margin-left: 10px;
}
/* Topbar special styles
......
docs/index.html
+ 56
- 65
View file @ ce615d01
......@@ -94,7 +94,7 @@
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</div>
</div>
......@@ -137,7 +137,7 @@
<li>Example page template (more to come soon)</li>
</ul>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -167,7 +167,7 @@
&lt;/div&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="16 column layout">
<div class="span1 column">1</div>
<div class="span1 column">1</div>
......@@ -185,7 +185,7 @@
<div class="span1 column">1</div>
<div class="span1 column">1</div>
<div class="span1 column">1</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="8 column layout">
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
......@@ -195,7 +195,7 @@
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
<div class="span2 columns">2</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Example uncommon layout">
<div class="span3 columns">3</div>
<div class="span3 columns">3</div>
......@@ -203,45 +203,45 @@
<div class="span3 columns">3</div>
<div class="span3 columns">3</div>
<div class="span1 column">1</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Four column layout">
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
<div class="span4 columns">4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Irregular three column layout">
<div class="span4 columns">4</div>
<div class="span6 columns">6</div>
<div class="span6 columns">6</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Half and half">
<div class="span8 columns">8</div>
<div class="span8 columns">8</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Example uncommon two-column layout">
<div class="span5 columns">5</div>
<div class="span11 columns">11</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid" title="Unnecessary single column layout">
<div class="span16 columns">16</div>
</div> <!-- /row -->
</div><!-- /row -->
<h4>Offsetting columns</h4>
<div class="row show-grid">
<div class="span4 columns">4</div>
<div class="span8 columns offset4">8 offset 4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span4 columns offset4">4 offset 4</div>
<div class="span4 columns offset4">4 offset 4</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span5 columns offset3">5 offset 3</div>
<div class="span5 columns offset3">5 offset 3</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row show-grid">
<div class="span10 columns offset6">10 offset 6</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -253,13 +253,10 @@
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
<!-- Fixed layout -->
<div class="row">
<div class="span4 columns">
<div class="span8 columns">
<h2>Fixed layout</h2>
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
</div>
<div class="span12 columns">
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div.container&gt;</code>.</p>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
......@@ -270,16 +267,10 @@
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div> <!-- /row -->
<!-- Fluid layout -->
<div class="row">
<div class="span4 columns">
</div><!-- /col -->
<div class="span8 columns">
<h2>Fluid layout</h2>
<p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
</div>
<div class="span12 columns">
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
......@@ -296,8 +287,8 @@
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</section>
......@@ -360,7 +351,7 @@
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>&lt;abbr&gt;</code> tag (<code>&lt;acronym&gt;</code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Blockquotes -->
<div class="row">
......@@ -380,7 +371,7 @@
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<h2>Lists</h2>
<div class="row">
......@@ -449,7 +440,7 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -595,7 +586,7 @@
...
&lt;/table&gt;</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -616,15 +607,15 @@
<fieldset>
<legend>Example form legend</legend>
<div class="clearfix">
<label for="">X-Large Input</label>
<label for="xlInput">X-Large Input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="normalSelect">Select</label>
<div class="input">
<select>
<select name="normalSelect" id="normalSelect">
<option>1</option>
<option>2</option>
<option>3</option>
......@@ -634,9 +625,9 @@
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="mediumSelect">Select</label>
<div class="input">
<select class="medium">
<select class="medium" name="mediumSelect" id="mediumSelect">
<option>1</option>
<option>2</option>
<option>3</option>
......@@ -784,7 +775,7 @@
</fieldset>
</form>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<br />
......@@ -798,15 +789,15 @@
<fieldset>
<legend>Example form legend</legend>
<div class="clearfix">
<label for="">X-Large Input</label>
<label for="xlInput">X-Large Input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div> <!-- /clearfix -->
<div class="clearfix">
<label for="">Select</label>
<label for="stackedSelect">Select</label>
<div class="input">
<select>
<select name="stackedSelect" id="stackedSelect">
<option>1</option>
<option>2</option>
<option>3</option>
......@@ -853,7 +844,7 @@
</div>
</form>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<div class="row">
<div class="span4 columns">
......@@ -893,7 +884,7 @@
<button class="btn large primary disabled" disabled>Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -993,7 +984,7 @@
&lt;/ul&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Pagination -->
<div class="row">
......@@ -1057,7 +1048,7 @@
&lt;/div&gt;
</pre>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -1077,24 +1068,24 @@
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
</div>
<div class="span12 columns">
<div class="alert">
<div class="alert-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<div class="alert error">
<div class="alert-message error">
<a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<div class="alert success">
<div class="alert-message success">
<a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
<div class="alert info">
<div class="alert-message info">
<a class="close" href="#">&times;</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Block messages -->
<div class="row">
<div class="span4 columns">
......@@ -1103,28 +1094,28 @@
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
</div>
<div class="span12 columns">
<div class="alert alert-block">
<div class="alert-message block-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block error">
<div class="alert-message block-message error">
<a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block success">
<div class="alert-message block-message success">
<a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<div class="alert alert-block info">
<div class="alert-message block-message info">
<a class="close" href="#">&times;</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<div class="alert-actions">
......@@ -1132,7 +1123,7 @@
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......@@ -1165,7 +1156,7 @@
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Tooltips -->
<div class="row">
......@@ -1198,7 +1189,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
<!-- Popovers -->
<div class="row">
......@@ -1222,7 +1213,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div> <!-- /row -->
</div><!-- /row -->
</section>
......
lib/patterns.less
+ 2
- 3
View file @ ce615d01
......@@ -374,7 +374,7 @@ input[type=submit].btn {
// ------------
// Base alert styles
.alert {
.alert-message {
.gradientBar(#fceec1, #eedc94); // warning by default
margin-bottom: @baseline;
padding: 7px 14px;
......@@ -416,8 +416,7 @@ input[type=submit].btn {
}
}
&.alert-block,
&.alert-block:hover {
&.block-message {
background-image: none;
background-color: lighten(#fceec1, 5%);
padding: 14px;
......
lib/preboot.less
+ 1
- 3
View file @ ce615d01
......@@ -192,8 +192,7 @@
// Shared colors for buttons and alerts
.btn,
.alert {
.alert-message {
&.danger,
&.danger:hover,
&.error,
......@@ -217,7 +216,6 @@
&.info {
.gradientBar(#6bd0ee, #36b3d9);
}
}
// Gradients
......
Supports Markdown
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