From b6b7d1343b74713a60e86401d8b625f097a7b8dc Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 25 Jan 2012 15:03:44 -0800
Subject: [PATCH] finish the rest of the less page mixins docs
---
docs/less.html | 147 ++++++++-------
docs/scaffolding.html | 2 +-
docs/templates/pages/less.mustache | 217 +++++++++++-----------
docs/templates/pages/scaffolding.mustache | 2 +-
lib/mixins.less | 35 +---
lib/scaffolding.less | 2 +-
6 files changed, 193 insertions(+), 212 deletions(-)
diff --git a/docs/less.html b/docs/less.html
index 23c2c53c65..f6321fc69b 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -406,14 +406,18 @@
<h3>Basic mixins</h3>
<p>A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.</p>
<pre class="prettyprint linenums">
- Coming soon!
+.element {
+ .clearfix();
+}
</pre>
</div><!-- /span4 -->
<div class="span4">
<h3>Parametric mixins</h3>
- <p>A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).</p>
+ <p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
<pre class="prettyprint linenums">
- Coming soon!
+.element {
+ .border-radius(4px);
+}
</pre>
</div><!-- /span4 -->
<div class="span4">
@@ -499,38 +503,38 @@
<tbody>
<tr>
<td><code>#font > #family > .serif()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>Make an element use a serif font stack</td>
</tr>
<tr>
<td><code>#font > #family > .sans-serif()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>Make an element use a sans-serif font stack</td>
</tr>
<tr>
<td><code>#font > #family > .monospace()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>Make an element use a monospace font stack</td>
</tr>
<tr>
<td><code>#font > .shorthand()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>Easily set font size, weight, and leading</td>
</tr>
<tr>
<td><code>#font > .serif()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>Set font family to serif, and control size, weight, and leading</td>
</tr>
<tr>
<td><code>#font > .sans-serif()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>Set font family to sans-serif, and control size, weight, and leading</td>
</tr>
<tr>
<td><code>#font > .monospace()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>Set font family to monospace, and control size, weight, and leading</td>
</tr>
</tbody>
</table>
@@ -545,24 +549,24 @@
</thead>
<tbody>
<tr>
- <td><code>.fixed-container()</code></td>
- <td></td>
- <td></td>
+ <td><code>.container-fixed()</code></td>
+ <td><em class="muted">none</em></td>
+ <td>Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content</td>
</tr>
<tr>
<td><code>.columns()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columns: 1</code></td>
+ <td>Build a grid column that spans any number of columns (defaults to 1 column)</td>
</tr>
<tr>
<td><code>.offset()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columns: 1</code></td>
+ <td>Offset a grid column with left margin that spans any number of columns</td>
</tr>
<tr>
<td><code>.gridColumn()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>Make an element float like a grid column</td>
</tr>
</tbody>
</table>
@@ -570,7 +574,7 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
+ <th class="span3">Mixin</th>
<th>Parameters</th>
<th>Usage</th>
</tr>
@@ -578,68 +582,63 @@
<tbody>
<tr>
<td><code>.border-radius()</code></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td><code>.border-radius-custom()</code></td>
- <td></td>
- <td></td>
+ <td><code>@radius: 5px</code></td>
+ <td>Round the corners of an element. Can be a single value or four space-separated values</td>
</tr>
<tr>
<td><code>.box-shadow()</code></td>
- <td></td>
- <td></td>
+ <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
+ <td>Add a drop shadow to an element</td>
</tr>
<tr>
<td><code>.transition()</code></td>
- <td></td>
- <td></td>
+ <td><code>@transition</code></td>
+ <td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
</tr>
<tr>
<td><code>.rotate()</code></td>
- <td></td>
- <td></td>
+ <td><code>@degrees</code></td>
+ <td>Rotate an element <em>n</em> degrees</td>
</tr>
<tr>
<td><code>.scale()</code></td>
- <td></td>
- <td></td>
+ <td><code>@ratio</code></td>
+ <td>Scale an element to <em>n</em> times it's original size</td>
</tr>
<tr>
<td><code>.translate()</code></td>
- <td></td>
- <td></td>
+ <td><code>@x: 0, @y: 0</code></td>
+ <td>Move an element on the x and y planes</td>
</tr>
<tr>
<td><code>.background-clip()</code></td>
- <td></td>
- <td></td>
+ <td><code>@clip</code></td>
+ <td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
</tr>
<tr>
<td><code>.background-size()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size</code></td>
+ <td>Control the size of background images via CSS3</td>
</tr>
<tr>
<td><code>.box-sizing()</code></td>
- <td></td>
- <td></td>
+ <td><code>@boxmodel</code></td>
+ <td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
</tr>
<tr>
<td><code>.user-select()</code></td>
- <td></td>
- <td></td>
+ <td><code>@select</code></td>
+ <td>Control cursor selection of text on a page</td>
</tr>
<tr>
<td><code>.resizable()</code></td>
- <td></td>
- <td></td>
+ <td><code>@direction: both</code></td>
+ <td>Make any element resizable on the right and bottom</td>
</tr>
<tr>
<td><code>.content-columns()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
+ <td>Make the content of any element use CSS3 columns</td>
</tr>
</tbody>
</table>
@@ -655,48 +654,48 @@
<tbody>
<tr>
<td><code>.#translucent > .background()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color: @white, @alpha: 1</code></td>
+ <td>Give an element a translucent background color</td>
</tr>
<tr>
<td><code>.#translucent > .border()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color: @white, @alpha: 1</code></td>
+ <td>Give an element a translucent border color</td>
</tr>
<tr>
<td><code>.#gradient > .vertical()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor</code></td>
+ <td>Create a cross-browser vertical background gradient</td>
</tr>
<tr>
<td><code>.#gradient > .horizontal()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor</code></td>
+ <td>Create a cross-browser horizontal background gradient</td>
</tr>
<tr>
<td><code>.#gradient > .directional()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor, @deg</code></td>
+ <td>Create a cross-browser directional background gradient</td>
</tr>
<tr>
<td><code>.#gradient > .vertical-three-colors()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
+ <td>Create a cross-browser three-color background gradient</td>
</tr>
<tr>
<td><code>.#gradient > .radial()</code></td>
- <td></td>
- <td></td>
+ <td><code>@innerColor, @outerColor</code></td>
+ <td>Create a cross-browser radial background gradient</td>
</tr>
<tr>
<td><code>.#gradient > .striped()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color, @angle</code></td>
+ <td>Create a cross-browser striped background gradient</td>
</tr>
<tr>
<td><code>.#gradientBar()</code></td>
- <td></td>
- <td></td>
+ <td><code>@primaryColor, @secondaryColor</code></td>
+ <td>Used for buttons to assign a gradient and slightly darker border</td>
</tr>
</tbody>
</table>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 8245f860cc..2ba8d5d7ad 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -212,7 +212,7 @@
<tr>
<td><code>@siteWidth</code></td>
<td><em>Computed sum of all columns and gutters</em></td>
- <td>Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin</td>
+ <td>Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin</td>
</tr>
</tbody>
</table>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 51d2295def..f2c2668421 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -270,7 +270,7 @@
</table>
</div>
<div class="span6">
- <h4>Form states and alerts</h4>
+ <h4>{{_i}}Form states and alerts{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
@@ -336,73 +336,77 @@
<div class="page-header">
<h1>{{_i}}Bootstrap mixins <small></small>{{/i}}</h1>
</div>
- <h2>About mixins</h2>
+ <h2>{{_i}}About mixins{{/i}}</h2>
<div class="row">
<div class="span4">
- <h3>Basic mixins</h3>
- <p>A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.</p>
+ <h3>{{_i}}Basic mixins{{/i}}</h3>
+ <p>{{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}</p>
<pre class="prettyprint linenums">
- Coming soon!
+.element {
+ .clearfix();
+}
</pre>
</div><!-- /span4 -->
<div class="span4">
- <h3>Parametric mixins</h3>
- <p>A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).</p>
+ <h3>{{_i}}Parametric mixins{{/i}}</h3>
+ <p>{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}</p>
<pre class="prettyprint linenums">
- Coming soon!
+.element {
+ .border-radius(4px);
+}
</pre>
</div><!-- /span4 -->
<div class="span4">
- <h3>Easily add your own</h3>
- <p>Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.</p>
- <p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
+ <h3>{{_i}}Easily add your own{{/i}}</h3>
+ <p>{{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}</p>
+ <p>{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}</p>
</div><!-- /span4 -->
</div><!-- /row -->
- <h2>Included mixins</h2>
- <h3>Utilities</h3>
+ <h2>{{_i}}Included mixins{{/i}}</h2>
+ <h3>{{_i}}Utilities{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span4">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.clearfix()</code></td>
<td><em class="muted">none</em></td>
- <td>Add to any parent to clear floats within</td>
+ <td>{{_i}}Add to any parent to clear floats within{{/i}}</td>
</tr>
<tr>
<td><code>.center-block()</code></td>
<td><em class="muted">none</em></td>
- <td>Auto center a block-level element using <code>margin: auto</code></td>
+ <td>{{_i}}Auto center a block-level element using <code>margin: auto</code>{{/i}}</td>
</tr>
<tr>
<td><code>.ie7-inline-block()</code></td>
<td><em class="muted">none</em></td>
- <td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
+ <td>{{_i}}Use in addition to regular <code>display: inline-block</code> to get IE7 support{{/i}}</td>
</tr>
<tr>
<td><code>.size()</code></td>
<td><code>@height: 5px, @width: 5px</code></td>
- <td>Quickly set the height and width on one line</td>
+ <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
</tr>
<tr>
<td><code>.square()</code></td>
<td><code>@size: 5px</code></td>
- <td>Builds on <code>.size()</code> to set the width and height as same value</td>
+ <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
</tr>
<tr>
<td><code>.opacity()</code></td>
<td><code>@opacity: 100</code></td>
- <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
+ <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
</tr>
<tr>
<td><code>.reset-filter()</code></td>
<td><em class="muted">none</em></td>
- <td>Resets any IE filter</td>
+ <td>{{_i}}Resets any IE filter{{/i}}</td>
</tr>
</tbody>
</table>
@@ -410,16 +414,16 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span4">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.placeholder()</code></td>
<td><code>@color: @placeholderText</code></td>
- <td>Set the <code>placeholder</code> text color for inputs</td>
+ <td>{{_i}}Set the <code>placeholder</code> text color for inputs{{/i}}</td>
</tr>
</tbody>
</table>
@@ -427,46 +431,46 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span4">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#font > #family > .serif()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>{{_i}}Make an element use a serif font stack{{/i}}</td>
</tr>
<tr>
<td><code>#font > #family > .sans-serif()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>{{_i}}Make an element use a sans-serif font stack{{/i}}</td>
</tr>
<tr>
<td><code>#font > #family > .monospace()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>{{_i}}Make an element use a monospace font stack{{/i}}</td>
</tr>
<tr>
<td><code>#font > .shorthand()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>{{_i}}Easily set font size, weight, and leading{{/i}}</td>
</tr>
<tr>
<td><code>#font > .serif()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}</td>
</tr>
<tr>
<td><code>#font > .sans-serif()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}</td>
</tr>
<tr>
<td><code>#font > .monospace()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+ <td>{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}</td>
</tr>
</tbody>
</table>
@@ -474,31 +478,31 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span4">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td><code>.fixed-container()</code></td>
- <td></td>
- <td></td>
+ <td><code>.container-fixed()</code></td>
+ <td><em class="muted">none</em></td>
+ <td>{{_i}}Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content{{/i}}</td>
</tr>
<tr>
<td><code>.columns()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columns: 1</code></td>
+ <td>{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}</td>
</tr>
<tr>
<td><code>.offset()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columns: 1</code></td>
+ <td>{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}</td>
</tr>
<tr>
<td><code>.gridColumn()</code></td>
- <td></td>
- <td></td>
+ <td><em class="muted">none</em></td>
+ <td>{{_i}}Make an element float like a grid column{{/i}}</td>
</tr>
</tbody>
</table>
@@ -506,76 +510,71 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span3">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.border-radius()</code></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td><code>.border-radius-custom()</code></td>
- <td></td>
- <td></td>
+ <td><code>@radius: 5px</code></td>
+ <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
</tr>
<tr>
<td><code>.box-shadow()</code></td>
- <td></td>
- <td></td>
+ <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
+ <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
</tr>
<tr>
<td><code>.transition()</code></td>
- <td></td>
- <td></td>
+ <td><code>@transition</code></td>
+ <td>{{_i}}Add CSS3 transition effect (e.g., <code>all .2s linear</code>){{/i}}</td>
</tr>
<tr>
<td><code>.rotate()</code></td>
- <td></td>
- <td></td>
+ <td><code>@degrees</code></td>
+ <td>{{_i}}Rotate an element <em>n</em> degrees{{/i}}</td>
</tr>
<tr>
<td><code>.scale()</code></td>
- <td></td>
- <td></td>
+ <td><code>@ratio</code></td>
+ <td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td>
</tr>
<tr>
<td><code>.translate()</code></td>
- <td></td>
- <td></td>
+ <td><code>@x: 0, @y: 0</code></td>
+ <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
</tr>
<tr>
<td><code>.background-clip()</code></td>
- <td></td>
- <td></td>
+ <td><code>@clip</code></td>
+ <td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td>
</tr>
<tr>
<td><code>.background-size()</code></td>
- <td></td>
- <td></td>
+ <td><code>@size</code></td>
+ <td>{{_i}}Control the size of background images via CSS3{{/i}}</td>
</tr>
<tr>
<td><code>.box-sizing()</code></td>
- <td></td>
- <td></td>
+ <td><code>@boxmodel</code></td>
+ <td>{{_i}}Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>){{/i}}</td>
</tr>
<tr>
<td><code>.user-select()</code></td>
- <td></td>
- <td></td>
+ <td><code>@select</code></td>
+ <td>{{_i}}Control cursor selection of text on a page{{/i}}</td>
</tr>
<tr>
<td><code>.resizable()</code></td>
- <td></td>
- <td></td>
+ <td><code>@direction: both</code></td>
+ <td>{{_i}}Make any element resizable on the right and bottom{{/i}}</td>
</tr>
<tr>
<td><code>.content-columns()</code></td>
- <td></td>
- <td></td>
+ <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
+ <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
</tr>
</tbody>
</table>
@@ -583,56 +582,56 @@
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th class="span4">Mixin</th>
- <th>Parameters</th>
- <th>Usage</th>
+ <th class="span4">{{_i}}Mixin{{/i}}</th>
+ <th>{{_i}}Parameters{{/i}}</th>
+ <th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.#translucent > .background()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color: @white, @alpha: 1</code></td>
+ <td>{{_i}}Give an element a translucent background color{{/i}}</td>
</tr>
<tr>
<td><code>.#translucent > .border()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color: @white, @alpha: 1</code></td>
+ <td>{{_i}}Give an element a translucent border color{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .vertical()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor</code></td>
+ <td>{{_i}}Create a cross-browser vertical background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .horizontal()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor</code></td>
+ <td>{{_i}}Create a cross-browser horizontal background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .directional()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @endColor, @deg</code></td>
+ <td>{{_i}}Create a cross-browser directional background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .vertical-three-colors()</code></td>
- <td></td>
- <td></td>
+ <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
+ <td>{{_i}}Create a cross-browser three-color background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .radial()</code></td>
- <td></td>
- <td></td>
+ <td><code>@innerColor, @outerColor</code></td>
+ <td>{{_i}}Create a cross-browser radial background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradient > .striped()</code></td>
- <td></td>
- <td></td>
+ <td><code>@color, @angle</code></td>
+ <td>{{_i}}Create a cross-browser striped background gradient{{/i}}</td>
</tr>
<tr>
<td><code>.#gradientBar()</code></td>
- <td></td>
- <td></td>
+ <td><code>@primaryColor, @secondaryColor</code></td>
+ <td>{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}</td>
</tr>
</tbody>
</table>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index a89f93d8e1..bc924e3ef7 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -148,7 +148,7 @@
<tr>
<td><code>@siteWidth</code></td>
<td><em>{{_i}}Computed sum of all columns and gutters{{/i}}</em></td>
- <td>{{_i}}Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin{{/i}}</td>
+ <td>{{_i}}Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin{{/i}}</td>
</tr>
</tbody>
</table>
diff --git a/lib/mixins.less b/lib/mixins.less
index e64b80ad36..4ebb94cfcb 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -100,7 +100,7 @@
// Site container
// -------------------------
-.fixed-container() {
+.container-fixed() {
width: @siteWidth;
margin-left: auto;
margin-right: auto;
@@ -137,23 +137,6 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
-.border-radius-custom(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0) {
- -webkit-border-top-left-radius: @topLeft;
- -moz-border-radius-topleft: @topLeft;
- border-top-left-radius: @topLeft;
- -webkit-border-top-right-radius: @topRight;
- -moz-border-radius-topright: @topRight;
- border-top-right-radius: @topRight;
- -webkit-border-bottom-right-radius: @bottomRight;
- -moz-border-radius-bottomright: @bottomRight;
- border-bottom-right-radius: @bottomRight;
- -webkit-border-bottom-left-radius: @bottomLeft;
- -moz-border-radius-bottomleft: @bottomLeft;
- border-bottom-left-radius: @bottomLeft;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
@@ -172,19 +155,19 @@
}
// Transformations
-.rotate(@degrees: 5deg) {
+.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
-.scale(@value: 1.5) {
- -webkit-transform: scale(@value);
- -moz-transform: scale(@value);
- -ms-transform: scale(@value);
- -o-transform: scale(@value);
- transform: scale(@value);
+.scale(@ratio) {
+ -webkit-transform: scale(@ratio);
+ -moz-transform: scale(@ratio);
+ -ms-transform: scale(@ratio);
+ -o-transform: scale(@ratio);
+ transform: scale(@ratio);
}
.translate(@x: 0, @y: 0) {
-webkit-transform: translate(@x, @y);
@@ -234,7 +217,7 @@
}
// CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: 20px) {
+.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index ff029e841b..7002b04083 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -18,7 +18,7 @@ body {
// Container (centered, fixed-width layouts)
.container {
- .fixed-container();
+ .container-fixed();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
--
GitLab