mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts
This commit is contained in:
Mark Otto
parent
2ba1b01f8d
commit
ae7f94eeff
Binary file not shown.
198
docs/assets/css/bootstrap-responsive.css
vendored
198
docs/assets/css/bootstrap-responsive.css
vendored
@ -83,7 +83,7 @@
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row > [class*="span"] {
|
||||
.row > [class*="span"], .row-fluid > [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
@ -91,10 +91,20 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
.container {
|
||||
width: 724px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.span1 {
|
||||
width: 42px;
|
||||
@ -129,7 +139,7 @@
|
||||
.span11 {
|
||||
width: 662px;
|
||||
}
|
||||
.span12 {
|
||||
.span12, .container {
|
||||
width: 724px;
|
||||
}
|
||||
.offset1 {
|
||||
@ -166,48 +176,94 @@
|
||||
margin-left: 702px;
|
||||
}
|
||||
.row-fluid {
|
||||
width: 102.76243093919337%;
|
||||
margin-left: -2.762430939%;
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before, .row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
float: left;
|
||||
margin-left: 2.762430939%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid .span1 {
|
||||
width: 5.6451612899588115%;
|
||||
width: 5.801104972%;
|
||||
}
|
||||
.row-fluid .span2 {
|
||||
width: 13.978494622708812%;
|
||||
width: 14.364640883%;
|
||||
}
|
||||
.row-fluid .span3 {
|
||||
width: 22.31182795545881%;
|
||||
width: 22.928176794%;
|
||||
}
|
||||
.row-fluid .span4 {
|
||||
width: 30.64516128820881%;
|
||||
width: 31.491712705%;
|
||||
}
|
||||
.row-fluid .span5 {
|
||||
width: 38.97849462095881%;
|
||||
width: 40.055248616%;
|
||||
}
|
||||
.row-fluid .span6 {
|
||||
width: 47.311827953708814%;
|
||||
width: 48.618784527%;
|
||||
}
|
||||
.row-fluid .span7 {
|
||||
width: 55.645161286458816%;
|
||||
width: 57.182320438000005%;
|
||||
}
|
||||
.row-fluid .span8 {
|
||||
width: 63.97849461920882%;
|
||||
width: 65.74585634900001%;
|
||||
}
|
||||
.row-fluid .span9 {
|
||||
width: 72.31182795195882%;
|
||||
width: 74.30939226%;
|
||||
}
|
||||
.row-fluid .span10 {
|
||||
width: 80.64516128470882%;
|
||||
width: 82.87292817100001%;
|
||||
}
|
||||
.row-fluid .span11 {
|
||||
width: 88.97849461745884%;
|
||||
width: 91.436464082%;
|
||||
}
|
||||
.row-fluid .span12 {
|
||||
width: 97.31182795020881%;
|
||||
width: 99.999999993%;
|
||||
}
|
||||
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||
width: 32px;
|
||||
}
|
||||
input.span2, textarea.span2, .uneditable-input.span2 {
|
||||
width: 94px;
|
||||
}
|
||||
input.span3, textarea.span3, .uneditable-input.span3 {
|
||||
width: 156px;
|
||||
}
|
||||
input.span4, textarea.span4, .uneditable-input.span4 {
|
||||
width: 218px;
|
||||
}
|
||||
input.span5, textarea.span5, .uneditable-input.span5 {
|
||||
width: 280px;
|
||||
}
|
||||
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||
width: 342px;
|
||||
}
|
||||
input.span7, textarea.span7, .uneditable-input.span7 {
|
||||
width: 404px;
|
||||
}
|
||||
input.span8, textarea.span8, .uneditable-input.span8 {
|
||||
width: 466px;
|
||||
}
|
||||
input.span9, textarea.span9, .uneditable-input.span9 {
|
||||
width: 528px;
|
||||
}
|
||||
input.span10, textarea.span10, .uneditable-input.span10 {
|
||||
width: 590px;
|
||||
}
|
||||
input.span11, textarea.span11, .uneditable-input.span11 {
|
||||
width: 652px;
|
||||
}
|
||||
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||
width: 714px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
@ -316,19 +372,19 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
.row {
|
||||
margin-left: -30px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.span1 {
|
||||
@ -364,7 +420,7 @@
|
||||
.span11 {
|
||||
width: 1070px;
|
||||
}
|
||||
.span12 {
|
||||
.span12, .container {
|
||||
width: 1170px;
|
||||
}
|
||||
.offset1 {
|
||||
@ -401,47 +457,99 @@
|
||||
margin-left: 1130px;
|
||||
}
|
||||
.row-fluid {
|
||||
width: 102.56143440326584%;
|
||||
margin-left: -2.56%;
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before, .row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
float: left;
|
||||
margin-left: 2.56%;
|
||||
margin-left: 2.564102564%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid .span1 {
|
||||
width: 5.832601732615312%;
|
||||
width: 5.982905983%;
|
||||
}
|
||||
.row-fluid .span2 {
|
||||
width: 14.16126839928198%;
|
||||
width: 14.529914530000001%;
|
||||
}
|
||||
.row-fluid .span3 {
|
||||
width: 22.489935065948643%;
|
||||
width: 23.076923077%;
|
||||
}
|
||||
.row-fluid .span4 {
|
||||
width: 30.818601732615313%;
|
||||
width: 31.623931624%;
|
||||
}
|
||||
.row-fluid .span5 {
|
||||
width: 39.14726839928198%;
|
||||
width: 40.170940171000005%;
|
||||
}
|
||||
.row-fluid .span6 {
|
||||
width: 47.47593506594863%;
|
||||
width: 48.717948718%;
|
||||
}
|
||||
.row-fluid .span7 {
|
||||
width: 55.8046017326153%;
|
||||
width: 57.264957265%;
|
||||
}
|
||||
.row-fluid .span8 {
|
||||
width: 64.13326839928197%;
|
||||
width: 65.81196581200001%;
|
||||
}
|
||||
.row-fluid .span9 {
|
||||
width: 72.46193506594864%;
|
||||
width: 74.358974359%;
|
||||
}
|
||||
.row-fluid .span10 {
|
||||
width: 80.7906017326153%;
|
||||
width: 82.905982906%;
|
||||
}
|
||||
.row-fluid .span11 {
|
||||
width: 89.11926839928198%;
|
||||
width: 91.45299145300001%;
|
||||
}
|
||||
.row-fluid .span12 {
|
||||
width: 97.44793506594864%;
|
||||
width: 100%;
|
||||
}
|
||||
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||
width: 60px;
|
||||
}
|
||||
input.span2, textarea.span2, .uneditable-input.span2 {
|
||||
width: 160px;
|
||||
}
|
||||
input.span3, textarea.span3, .uneditable-input.span3 {
|
||||
width: 260px;
|
||||
}
|
||||
input.span4, textarea.span4, .uneditable-input.span4 {
|
||||
width: 360px;
|
||||
}
|
||||
input.span5, textarea.span5, .uneditable-input.span5 {
|
||||
width: 460px;
|
||||
}
|
||||
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||
width: 560px;
|
||||
}
|
||||
input.span7, textarea.span7, .uneditable-input.span7 {
|
||||
width: 660px;
|
||||
}
|
||||
input.span8, textarea.span8, .uneditable-input.span8 {
|
||||
width: 760px;
|
||||
}
|
||||
input.span9, textarea.span9, .uneditable-input.span9 {
|
||||
width: 860px;
|
||||
}
|
||||
input.span10, textarea.span10, .uneditable-input.span10 {
|
||||
width: 960px;
|
||||
}
|
||||
input.span11, textarea.span11, .uneditable-input.span11 {
|
||||
width: 1060px;
|
||||
}
|
||||
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||
width: 1160px;
|
||||
}
|
||||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
78
docs/assets/css/bootstrap.css
vendored
78
docs/assets/css/bootstrap.css
vendored
@ -126,7 +126,7 @@ a:hover {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.span1 {
|
||||
width: 59.99999999999999px;
|
||||
width: 60px;
|
||||
}
|
||||
.span2 {
|
||||
width: 140px;
|
||||
@ -158,7 +158,7 @@ a:hover {
|
||||
.span11 {
|
||||
width: 860px;
|
||||
}
|
||||
.span12 {
|
||||
.span12, .container {
|
||||
width: 940px;
|
||||
}
|
||||
.offset1 {
|
||||
@ -195,48 +195,58 @@ a:hover {
|
||||
margin-left: 900px;
|
||||
}
|
||||
.row-fluid {
|
||||
width: 102.12765957421277%;
|
||||
margin-left: -2.127659574%;
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before, .row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
float: left;
|
||||
margin-left: 2.127659574%;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid .span1 {
|
||||
width: 6.249999999619791%;
|
||||
width: 6.382978723%;
|
||||
}
|
||||
.row-fluid .span2 {
|
||||
width: 14.58333333211979%;
|
||||
width: 14.89361702%;
|
||||
}
|
||||
.row-fluid .span3 {
|
||||
width: 22.91666666461979%;
|
||||
width: 23.404255317%;
|
||||
}
|
||||
.row-fluid .span4 {
|
||||
width: 31.24999999711979%;
|
||||
width: 31.914893614%;
|
||||
}
|
||||
.row-fluid .span5 {
|
||||
width: 39.58333332961979%;
|
||||
width: 40.425531911%;
|
||||
}
|
||||
.row-fluid .span6 {
|
||||
width: 47.91666666211979%;
|
||||
width: 48.93617020799999%;
|
||||
}
|
||||
.row-fluid .span7 {
|
||||
width: 56.24999999461979%;
|
||||
width: 57.446808505%;
|
||||
}
|
||||
.row-fluid .span8 {
|
||||
width: 64.58333332711977%;
|
||||
width: 65.95744680199999%;
|
||||
}
|
||||
.row-fluid .span9 {
|
||||
width: 72.91666665961978%;
|
||||
width: 74.468085099%;
|
||||
}
|
||||
.row-fluid .span10 {
|
||||
width: 81.24999999211977%;
|
||||
width: 82.97872339599999%;
|
||||
}
|
||||
.row-fluid .span11 {
|
||||
width: 89.58333332461977%;
|
||||
width: 91.489361693%;
|
||||
}
|
||||
.row-fluid .span12 {
|
||||
width: 97.91666665711978%;
|
||||
width: 99.99999998999999%;
|
||||
}
|
||||
.container {
|
||||
width: 940px;
|
||||
@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
|
||||
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||
width: 930px;
|
||||
}
|
||||
select.span1 {
|
||||
width: 70px;
|
||||
}
|
||||
select.span2 {
|
||||
width: 150px;
|
||||
}
|
||||
select.span3 {
|
||||
width: 230px;
|
||||
}
|
||||
select.span4 {
|
||||
width: 310px;
|
||||
}
|
||||
select.span5 {
|
||||
width: 390px;
|
||||
}
|
||||
select.span6 {
|
||||
width: 470px;
|
||||
}
|
||||
select.span7 {
|
||||
width: 550px;
|
||||
}
|
||||
select.span8 {
|
||||
width: 630px;
|
||||
}
|
||||
select.span9 {
|
||||
width: 710px;
|
||||
}
|
||||
select.span10 {
|
||||
width: 790px;
|
||||
}
|
||||
select.span11 {
|
||||
width: 870px;
|
||||
}
|
||||
select.span12 {
|
||||
width: 950px;
|
||||
}
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
|
||||
@ -553,6 +553,7 @@ form.well {
|
||||
}
|
||||
|
||||
/* For input sizes, make them display block */
|
||||
.docs-input-sizes select,
|
||||
.docs-input-sizes input[type=text] {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -1078,6 +1082,27 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<select class="span1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<select class="span2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<select class="span3">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="active">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="active">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
4
docs/templates/layout.mustache
vendored
4
docs/templates/layout.mustache
vendored
@ -62,6 +62,10 @@
|
||||
<li class="{{download}}">
|
||||
<a href="./download.html">{{_i}}Customize{{/i}}</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="{{examples}}">
|
||||
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
21
docs/templates/pages/base-css.mustache
vendored
21
docs/templates/pages/base-css.mustache
vendored
@ -1006,6 +1006,27 @@
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<select class="span1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<select class="span2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<select class="span3">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
<li class="">
|
||||
<a href="./download.html">Customize</a>
|
||||
</li>
|
||||
<li class="vertical-divider"></li>
|
||||
<li class="">
|
||||
<a href="./examples.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row row-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<div class="well sidebar-nav">
|
||||
<ul class="nav list">
|
||||
@ -84,7 +84,7 @@
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn primary large">Learn more »</a></p>
|
||||
</div>
|
||||
<div class="row row-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
@ -101,7 +101,7 @@
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row row-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
|
||||
@ -229,45 +229,13 @@ textarea[class*="span"],
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
|
||||
.inputColumns(@columnSpan: 1) {
|
||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
// Default columns
|
||||
&.span1 { .inputColumns(1); }
|
||||
&.span2 { .inputColumns(2); }
|
||||
&.span3 { .inputColumns(3); }
|
||||
&.span4 { .inputColumns(4); }
|
||||
&.span5 { .inputColumns(5); }
|
||||
&.span6 { .inputColumns(6); }
|
||||
&.span7 { .inputColumns(7); }
|
||||
&.span8 { .inputColumns(8); }
|
||||
&.span9 { .inputColumns(9); }
|
||||
&.span10 { .inputColumns(10); }
|
||||
&.span11 { .inputColumns(11); }
|
||||
&.span12 { .inputColumns(12); }
|
||||
}
|
||||
|
||||
.selectColumns(@columnSpan: 1) {
|
||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
|
||||
}
|
||||
select {
|
||||
&.span1 { .selectColumns(1); }
|
||||
&.span2 { .selectColumns(2); }
|
||||
&.span3 { .selectColumns(3); }
|
||||
&.span4 { .selectColumns(4); }
|
||||
&.span5 { .selectColumns(5); }
|
||||
&.span6 { .selectColumns(6); }
|
||||
&.span7 { .selectColumns(7); }
|
||||
&.span8 { .selectColumns(8); }
|
||||
&.span9 { .selectColumns(9); }
|
||||
&.span10 { .selectColumns(10); }
|
||||
&.span11 { .selectColumns(11); }
|
||||
&.span12 { .selectColumns(12); }
|
||||
}
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,81 +1,8 @@
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
|
||||
// Fixed (940px)
|
||||
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
// Grid rows and columns
|
||||
// ---------------------
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
||||
[class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
.span2 { .columns(2); }
|
||||
.span3 { .columns(3); }
|
||||
.span4 { .columns(4); }
|
||||
.span5 { .columns(5); }
|
||||
.span6 { .columns(6); }
|
||||
.span7 { .columns(7); }
|
||||
.span8 { .columns(8); }
|
||||
.span9 { .columns(9); }
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { .offset(1); }
|
||||
.offset2 { .offset(2); }
|
||||
.offset3 { .offset(3); }
|
||||
.offset4 { .offset(4); }
|
||||
.offset5 { .offset(5); }
|
||||
.offset6 { .offset(6); }
|
||||
.offset7 { .offset(7); }
|
||||
.offset8 { .offset(8); }
|
||||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
|
||||
|
||||
|
||||
// FLUID GRID SYSTEM
|
||||
// -----------------
|
||||
// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
|
||||
|
||||
.row-fluid {
|
||||
@gridColumnWidth: 6.382978723%;
|
||||
@gridGutterWidth: 2.127659574%;
|
||||
|
||||
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
|
||||
margin-left: 0 - @gridGutterWidth;
|
||||
|
||||
// Redeclare the mixins
|
||||
.gridColumn() {
|
||||
float: left;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
[class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
.fluidColumns(@columns: 1) {
|
||||
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
|
||||
}
|
||||
// Redeclare the columns
|
||||
.span1 { .fluidColumns(1); }
|
||||
.span2 { .fluidColumns(2); }
|
||||
.span3 { .fluidColumns(3); }
|
||||
.span4 { .fluidColumns(4); }
|
||||
.span5 { .fluidColumns(5); }
|
||||
.span6 { .fluidColumns(6); }
|
||||
.span7 { .fluidColumns(7); }
|
||||
.span8 { .fluidColumns(8); }
|
||||
.span9 { .fluidColumns(9); }
|
||||
.span10 { .fluidColumns(10); }
|
||||
.span11 { .fluidColumns(11); }
|
||||
.span12 { .fluidColumns(12); }
|
||||
}
|
||||
// Fluid (940px)
|
||||
#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
|
||||
|
||||
134
less/mixins.less
134
less/mixins.less
@ -133,25 +133,135 @@
|
||||
// Site container
|
||||
// -------------------------
|
||||
.container-fixed() {
|
||||
width: @gridTotalWidth;
|
||||
width: @gridRowWidth;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
// Columns and offseting mixins
|
||||
// ----------------------------
|
||||
.columns(@columns: 1) {
|
||||
//width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
|
||||
// Le grid system
|
||||
// -------------------------
|
||||
#gridSystem {
|
||||
// Setup the mixins to be used
|
||||
.columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@gridColumnWidth, @gridGutterWidth, @columns) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
.gridColumn(@gridGutterWidth) {
|
||||
float: left;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
// Take these values and mixins, and make 'em do their thang
|
||||
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
|
||||
// Row surrounds the columns
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
.clearfix();
|
||||
}
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
||||
[class*="span"] {
|
||||
#gridSystem > .gridColumn(@gridGutterWidth);
|
||||
}
|
||||
// Default columns
|
||||
.span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
||||
.span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
||||
.span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
||||
.span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
||||
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
||||
.span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
||||
.span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
||||
.span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
||||
.span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
||||
.span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
||||
.span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
||||
.span12,
|
||||
.container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
||||
// Offset column options
|
||||
.offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
|
||||
.offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
|
||||
.offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
|
||||
.offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
|
||||
.offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
|
||||
.offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
|
||||
.offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
|
||||
.offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
|
||||
.offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
|
||||
.offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
|
||||
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
|
||||
}
|
||||
}
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
|
||||
// Fluid grid system
|
||||
// -------------------------
|
||||
#fluidGridSystem {
|
||||
// Setup the mixins to be used
|
||||
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
|
||||
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.gridColumn(@fluidGridGutterWidth) {
|
||||
float: left;
|
||||
margin-left: @fluidGridGutterWidth;
|
||||
}
|
||||
// Take these values and mixins, and make 'em do their thang
|
||||
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
|
||||
// Row surrounds the columns
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
.clearfix();
|
||||
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
||||
[class*="span"] {
|
||||
#fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
|
||||
}
|
||||
[class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
// Default columns
|
||||
.span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
|
||||
.span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
|
||||
.span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
|
||||
.span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
|
||||
.span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
|
||||
.span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
|
||||
.span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
|
||||
.span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
|
||||
.span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
|
||||
.span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
|
||||
.span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
|
||||
.span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
|
||||
}
|
||||
}
|
||||
}
|
||||
// Necessary grid styles for every column to make them appear next to each other horizontally
|
||||
.gridColumn() {
|
||||
float: left;
|
||||
margin-left: @gridGutterWidth;
|
||||
|
||||
|
||||
|
||||
|
||||
// Input grid system
|
||||
// -------------------------
|
||||
#inputGridSystem {
|
||||
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
|
||||
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
|
||||
}
|
||||
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
||||
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
||||
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
||||
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
||||
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
||||
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
||||
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
||||
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
||||
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
||||
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
||||
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
||||
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -125,7 +125,8 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
// Make all columns even
|
||||
.row > [class*="span"] {
|
||||
.row > [class*="span"],
|
||||
.row-fluid > [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
@ -140,90 +141,15 @@
|
||||
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
|
||||
// Reset grid variables
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 42px;
|
||||
@gridGutterWidth: 20px;
|
||||
@siteWidth: 724px;
|
||||
// Fixed grid
|
||||
#gridSystem > .generate(12, 42px, 20px);
|
||||
|
||||
// Bring grid mixins to recalculate widths
|
||||
.columns(@columns: 1) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
// Fluid grid
|
||||
#fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
|
||||
|
||||
// 12cols at 44px wide with 20px gutters
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
// Input grid
|
||||
#inputGridSystem > .generate(12, 42px, 20px);
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
.span2 { .columns(2); }
|
||||
.span3 { .columns(3); }
|
||||
.span4 { .columns(4); }
|
||||
.span5 { .columns(5); }
|
||||
.span6 { .columns(6); }
|
||||
.span7 { .columns(7); }
|
||||
.span8 { .columns(8); }
|
||||
.span9 { .columns(9); }
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { .offset(1); }
|
||||
.offset2 { .offset(2); }
|
||||
.offset3 { .offset(3); }
|
||||
.offset4 { .offset(4); }
|
||||
.offset5 { .offset(5); }
|
||||
.offset6 { .offset(6); }
|
||||
.offset7 { .offset(7); }
|
||||
.offset8 { .offset(8); }
|
||||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
|
||||
// FLUID GRID
|
||||
// ----------
|
||||
.row-fluid {
|
||||
@gridColumnWidth: 5.801104972%;
|
||||
@gridGutterWidth: 2.762430939%;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
@gridTotalWidth: @gridRowWidth;
|
||||
|
||||
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
|
||||
margin-left: 0 - @gridGutterWidth;
|
||||
|
||||
// Redeclare the mixins
|
||||
.gridColumn() {
|
||||
float: left;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
[class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
.fluidColumns(@columns: 1) {
|
||||
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
|
||||
}
|
||||
// Redeclare the columns
|
||||
.span1 { .fluidColumns(1); }
|
||||
.span2 { .fluidColumns(2); }
|
||||
.span3 { .fluidColumns(3); }
|
||||
.span4 { .fluidColumns(4); }
|
||||
.span5 { .fluidColumns(5); }
|
||||
.span6 { .fluidColumns(6); }
|
||||
.span7 { .fluidColumns(7); }
|
||||
.span8 { .fluidColumns(8); }
|
||||
.span9 { .fluidColumns(9); }
|
||||
.span10 { .fluidColumns(10); }
|
||||
.span11 { .fluidColumns(11); }
|
||||
.span12 { .fluidColumns(12); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -362,99 +288,21 @@
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
// Reset grid variables
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 70px;
|
||||
@gridGutterWidth: 30px;
|
||||
@siteWidth: 1170px;
|
||||
// Fixed grid
|
||||
#gridSystem > .generate(12, 70px, 30px);
|
||||
|
||||
// Fluid grid
|
||||
#fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
|
||||
|
||||
// Input grid
|
||||
#inputGridSystem > .generate(12, 70px, 30px);
|
||||
|
||||
// Thumbnails
|
||||
.thumbnails {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: @gridGutterWidth;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
// Bring grid mixins to recalculate widths
|
||||
.columns(@columns: 1) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
}
|
||||
[class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
.span2 { .columns(2); }
|
||||
.span3 { .columns(3); }
|
||||
.span4 { .columns(4); }
|
||||
.span5 { .columns(5); }
|
||||
.span6 { .columns(6); }
|
||||
.span7 { .columns(7); }
|
||||
.span8 { .columns(8); }
|
||||
.span9 { .columns(9); }
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { .offset(1); }
|
||||
.offset2 { .offset(2); }
|
||||
.offset3 { .offset(3); }
|
||||
.offset4 { .offset(4); }
|
||||
.offset5 { .offset(5); }
|
||||
.offset6 { .offset(6); }
|
||||
.offset7 { .offset(7); }
|
||||
.offset8 { .offset(8); }
|
||||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
|
||||
|
||||
// FLUID GRID
|
||||
// ----------
|
||||
.row-fluid {
|
||||
@gridColumnWidth: 5.982%;
|
||||
@gridGutterWidth: 2.56%;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
@gridTotalWidth: @gridRowWidth;
|
||||
|
||||
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
|
||||
margin-left: 0 - @gridGutterWidth;
|
||||
|
||||
// Redeclare the mixins
|
||||
.gridColumn() {
|
||||
float: left;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
[class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
.fluidColumns(@columns: 1) {
|
||||
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
|
||||
}
|
||||
// Redeclare the columns
|
||||
.span1 { .fluidColumns(1); }
|
||||
.span2 { .fluidColumns(2); }
|
||||
.span3 { .fluidColumns(3); }
|
||||
.span4 { .fluidColumns(4); }
|
||||
.span5 { .fluidColumns(5); }
|
||||
.span6 { .fluidColumns(6); }
|
||||
.span7 { .fluidColumns(7); }
|
||||
.span8 { .fluidColumns(8); }
|
||||
.span9 { .fluidColumns(9); }
|
||||
.span10 { .fluidColumns(10); }
|
||||
.span11 { .fluidColumns(11); }
|
||||
.span12 { .fluidColumns(12); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,17 +40,6 @@
|
||||
|
||||
|
||||
|
||||
// GRID SYSTEM VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 60px;
|
||||
@gridGutterWidth: 20px;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
@gridTotalWidth: @gridRowWidth;
|
||||
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -94,3 +83,17 @@
|
||||
@infoBorder: darken(spin(@infoBackground, -10), 7%);
|
||||
|
||||
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default 940px grid
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 60px;
|
||||
@gridGutterWidth: 20px;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Fluid grid
|
||||
@fluidGridColumnWidth: 6.382978723%;
|
||||
@fluidGridGutterWidth: 2.127659574%;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user