bourbon 2.1.0 → 2.1.1

data/_includes/border-image.html

@@ -1,11 +0,0 @@
-<section id="border-image">
-  <h2>Border Image<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss">View source</a></h2>
-  <p>Border-image supports short-hand notation.</p>
-
-{% highlight scss %}
-@include border-image(url(/images/border.png) 27 repeat);
-{% endhighlight %}
-  <h3>Demo</h3>
-  <section class="demo">
-  </section>
-</section>

data/_includes/border-radius.html

@@ -1,26 +0,0 @@
-<section id="border-radius">
-  <h2>Border Radius <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss">View source</a></h2>
-
-  <p>The border-radius mixin can take short-hand notation or the full radius expression.</p>
-
-{% highlight scss %}
-@include border-radius(10px);
-@include border-radius(5px 5px 2px 2px);
-{% endhighlight %}
-
-  <p>You can also specify individual corners.</p>
-{% highlight scss %}
-@include border-top-left-radius(5px);
-@include border-top-right-radius(5px);
-@include border-bottom-right-radius(5px);
-@include border-bottom-left-radius(5px);
-{% endhighlight %}
-
-  <p>Individual sides are supported as well.</p>
-{% highlight scss %}
-@include border-top-radius(5px);
-@include border-bottom-radius(5px);
-@include border-left-radius(5px);
-@include border-right-radius(5px);
-{% endhighlight %}
-</section>

data/_includes/box-shadow.html

@@ -1,20 +0,0 @@
-<section id="box-shadow">
-  <h2>Box Shadow<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-shadow.scss">View source</a></h2>
-  <p>Box-shadow supports single or multiple arguments.</p>
-
-  <h3>Single Box Shadow</h3>
-{% highlight scss %}
-@include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));
-{% endhighlight %}
-  <section class="demo">
-    <div class="example single"></div>
-  </section>
-
-  <h3>Multiple Box Shadows</h3>
-{% highlight scss %}
-@include box-shadow(1px 1px 5px 1px green, -1px -1px 5px 1px blue);
-{% endhighlight %}
-  <section class="demo">
-    <div class="example double"></div>
-  </section>
-</section>

data/_includes/box-sizing.html

@@ -1,8 +0,0 @@
-<section id="box-sizing">
-  <h2>Box Sizing<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-sizing.scss">View source</a></h2>
-  <p>Box-sizing will change the box-model of the element it is applied to.</p>
-
-{% highlight scss %}
-@include box-sizing(border-box);
-{% endhighlight %}
-</section>

data/_includes/buttons.html

@@ -1,52 +0,0 @@
-<section id="buttons">
-  <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
-  <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
-  <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
-  <ul>
-    <li>
-      <code>simple</code> (default)
-    </li>
-    <li>
-      <code>shiny</code>
-    </li>
-    <li>
-      <code>pill</code>
-    </li>
-  </ul>
-
-  <section class="demo">
-    <div class="wrapper">
-      <h3>Simple Button Style</h3>
-      <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
-{% highlight scss %}
-button {
-  @include button;
-}
-{% endhighlight %}
-      <button class="example-1">Simple button</button>
-    </div>
-
-    <div class="wrapper">
-      <h3>Pill Button Style</h3>
-{% highlight scss %}
-button {
-  @include button(pill);
-}
-{% endhighlight %}
-      <button class="example-2">Pill Button</button>
-    </div>
-
-    <div class="wrapper">
-      <h3>Shiny Button Style</h3>
-      <p>Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.</p>
-
-{% highlight scss %}
-button {
-  @include button(shiny, #ff0000);
-}
-{% endhighlight %}
-      <button class="example-3">Shiny Button</button>
-    </div>
-  </section>
-
-</section>

data/_includes/clearfix.html

@@ -1,11 +0,0 @@
-<section id="clearfix">
-  <h2>Clearfix <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix.scss">View source</a></h2>
-  <p>This mixin will output a clearfix to the selector where the mixin is declared.</p>
-  <p>This clearfix uses Nicolas Gallagher's <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a>.</p>
-
-{% highlight scss %}
-div {
-  @include clearfix;
-}
-{% endhighlight %}
-</section>

data/_includes/columns.html

@@ -1,9 +0,0 @@
-<section id="columns">
-  <h2>Columns <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_columns.scss">View source</a></h2>
-  <p>All current CSS3 column properties are supported. See the <a href="#complete-list-mixins">complete list of mixins</a> for more info.</p>
-
-{% highlight scss %}
-@include columns(12 8em);
-@include column-rule(1px solid green);
-{% endhighlight %}
-</section>

data/_includes/compact.html

@@ -1,9 +0,0 @@
-<section id="compact">
-  <h2>Compact <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/lib/bourbon/sass_extensions/functions/compact.rb">View Source</a></h2>
-  <p>The compact function will strip out any value from a list that is <code>false</code>. Takes up to 10 arguments.
-
-{% highlight scss %}
-$full:  compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
-{% endhighlight %}
-
-</section>

data/_includes/complete-list.html

@@ -1,115 +0,0 @@
-<section id="complete-list">
-  <h2>All Supported Functions, Mixins, and Addons</h2>
-  <p><code>@</code> denotes a mixin and must be prefaced with <code>@include</code>.</p>
-
-<h3 id="complete-list-mixins">Mixins</h3>
-{% highlight scss %}
-animation
-  @ animation(*args)
-  @ animation-delay(*args)
-  @ animation-direction(*args)
-  @ animation-duration(*args)
-  @ animation-fill-mode(*args)
-  @ animation-iteration-count(*args)
-  @ animation-name(*args)
-  @ animation-play-state(*args)
-  @ animation-timing-function(*args)
-
-@ appearance(*args)
-@ background-image(*args)
-@ background-size(*args)
-@ border-image(*args)
-
-border-radius
-  @ border-radius(*args)
-  @ border-top-radius(*args)
-  @ border-top-left-radius(*args)
-  @ border-top-right-radius(*args)
-  @ border-bottom-radius(*args)
-  @ border-bottom-left-radius(*args)
-  @ border-bottom-right-radius(*args)
-  @ border-left-radius(*args)
-  @ border-right-radius(*args)
-
-@ box-shadow(*args)
-@ box-sizing(*args)
-
-columns
-  @columns(*args)
-  @column-count(*args)
-  @column-fill(*args)
-  @column-gap(*args)
-  @column-rule(*args)
-    @column-rule-color(*args)
-    @column-rule-style(*args)
-    @column-rule-width(*args)
-  @column-span(*args)
-  @column-width(*args)
-
-flex-box
-  @ box(*args)
-  @ box-align(*args)
-  @ box-direction(*args)
-  @ box-flex(*args)
-  @ box-flex-group(*args)
-  @ box-lines(*args)
-  @ box-ordinal-group(*args)
-  @ box-orient(*args)
-  @ box-pack(*args)
-  @ display-box
-
-@ inline-block
-@ linear-gradient(*args)
-@ radial-gradient(*args)
-
-transform
-  @ transform(*args)
-  @ transform-origin(*args)
-
-transition
-  @ transition(*args)
-  @ transition-delay(*args)
-  @ transition-duration(*args)
-  @ transition-property(*args)
-  @ transition-timing-function(*args)
-
-@ user-select
-{% endhighlight %}
-
-<h3 id="complete-list-functions">Functions</h3>
-{% highlight scss %}
-compact(*args)
-flex-grid(*args)
-golden-ratio(*args)
-grid-width(*args)
-linear-gradient(*args)
-modular-scale(*args)
-radial-gradient(*args)
-shade(*args)
-tint(*args)
-{% endhighlight %}
-
-<h3 id="complete-list-addons">Addons</h3>
-{% highlight scss %}
-@ button(*args)
-@ clearfix
-@ hide-text
-
-HTML5 Inputs
-  #{$all-text-inputs}
-
-font-family
-  $georgia
-  $helvetica
-  $lucida-grande
-  $monospace
-  $verdana
-
-timing-functions
-  $ease-in-*
-  $ease-out-*
-  $ease-in-out-*
-  * = quad, cubic, quart, quint, sine, expo, circ, back
-{% endhighlight %}
-
-</section>

data/_includes/flex-box.html

@@ -1,23 +0,0 @@
-<section id="flex-box">
-  <h2>Flex Box <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss">View source</a></h2>
-  <p>The flex-box mixin is based on the 2009 w3c spec. <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">More info</a></p>
-
-{% highlight scss %}
-div.parent {
-  @include display-box;
-  @include box-align(start);
-  @include box-orient(horizontal);
-  @include box-pack(start);
-}
-
-div.parent > div.child {
-  @include box-flex(2);
-}
-
-// Alternative custom shorthand mixin.
-div.parent {
-  @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
-  @include box(vertical, start, stretch);
-}
-{% endhighlight %}
-</section>

data/_includes/flex-grid.html

@@ -1,28 +0,0 @@
-<section id="flex-grid">
-  <h2>Flex Grid <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss">View source</a></h2>
-  <p>Use this mixin to easily create a flexible-grid layout.</p>
-  <p>The <code>$fg-column</code>, <code>$fg-gutter</code> and <code>$fg-max-columns</code> variables must be defined in your base stylesheet to properly use the flex-grid function.</p>
-  <p>This function takes the fluid grid equation (target / context = result) and uses columns to help define each.</p>
-
-{% highlight scss %}
-$fg-column: 60px;             // Column Width
-$fg-gutter: 25px;             // Gutter Width
-$fg-max-columns: 12;          // Total Columns For Main Container
-
-div {
-  width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
-  margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
-
-  p {
-    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;
-    float: left;
-    margin: flex-gutter(4);   // returns (25px / 315px) = 7.936508%;
-  }
-
-  blockquote {
-    float: left;
-    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;
-  }
-}
-{% endhighlight %}
-</section>

data/_includes/font-family.html

@@ -1,21 +0,0 @@
-<section id="font-family">
-  <h2>Font-Family <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-family.scss">View source</a></h2>
-  <p>Bourbon defines four default font-families as variables for the sake of convenience:</p>
-
-{% highlight scss %}
-font-family: $helvetica;
-font-family: $georgia;
-font-family: $lucida-grande;
-font-family: $monospace;
-font-family: $verdana;
-{% endhighlight %}
-
-  <h3>CSS Output</h3>
-{% highlight scss %}
-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
-font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
-font-family: Verdana, Geneva, sans-serif;
-{% endhighlight %}
-</section>

data/_includes/footer.html

@@ -1,37 +0,0 @@
-<section id="browser-support">
-  <h2>Browser Support &amp; Pull Requests</h2>
-  <p>Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.</p>
-  <p>A general rule when submitting a pull request for a new mixin, ask yourself the following: Do the following browsers <em>only</em> support the CSS3 properties using vendor specific prefixes?</p>
-  <p>If the answer is yes, there is a high chance the mixin will be accepted via a pull request. </p>
-  <ul>
-    <li>Firefox 3.6+</li>
-    <li>Safari 4.0+</li>
-    <li>Chrome 4.0+</li>
-    <li>Opera 10+</li>
-    <li>IE 9+</li>
-  </ul>
-
-  <p><strong>Bourbon does not intend to support IE filters.</strong></p>
-
-  <p>Resources for checking browser support:</p>
-  <ul>
-    <li><a href="https://developer.mozilla.org/en-US/">MDN - Moz Dev Network</a></li>
-    <li><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a></li>
-    <li><a href="http://css-infos.net/properties/webkit.php">Webkit CSS Properties</a></li>
-    <li><a href="http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx">MSDN - Microsoft Dev Network</a></p></li>
-  </ul>
-</section>
-
-<section id="credits">
-  <a href="http://thoughtbot.com"><img src="http://thoughtbot.com/images/tm/logo.png"/></a>
-
-  <h3>Got questions? Need help?</h3>
-  <p>Tweet at <a href="http://twitter.com/phillapier">Phil LaPier</a> on twiiter.</p>
-
-  <h3>Credits</h3>
-  <p>Bourbon is maintained and funded by <a href="http://thoughtbot.com/community">thoughtbot</a>.</p>
-  <p>The names and logos for thoughtbot are trademarks of thoughtbot, inc.</p>
-
-  <h3>License</h3>
-  <p>Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.</p>
-</section>

data/_includes/golden-ratio.html

@@ -1,16 +0,0 @@
-<section id="golden-ratio">
-  <h2>Golden Ratio <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_modular-scale.scss">View Source</a></h2>
-  <p>Returns the golden ratio of a given number. Must provide a pixel or em value for the first argument. Also takes a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3...</p>
-  <p>Note: The golden-ratio function can be wrapped in sass's <code>abs()</code>, <code>floor()</code>, or <code>ceil()</code> functions to get the absolute value, round down, or round up respectively.</p>
-
-{% highlight scss %}
-// Positive number will increment up the golden-ratio
-font-size: golden-ratio(14px,  1);
-// returns: 22.652px
-
-// Negative number will increment down the golden-ratio
-font-size: golden-ratio(14px, -1);
-// returns: 8.653px
-{% endhighlight %}
-  <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
-</section>

data/_includes/grid-width.html

@@ -1,15 +0,0 @@
-<section id="grid-width">
-  <h2>Grid Width <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_grid-width.scss">View source</a></h2>
-  <p>Easily setup and follow a grid based design. Check out <a href="http://gridulator.com/">gridulator.com</a></p>
-  <p>The <code>$gw-column</code> and <code>$gw-gutter</code> variables must be defined in your base stylesheet to properly use the grid-width function.</p>
-
-{% highlight scss %}
-$gw-column: 100px;          // Column Width
-$gw-gutter: 40px;           // Gutter Width
-
-div {
-  width: grid-width(4);     // returns 520px;
-  margin-left: $gw-gutter;  // returns 40px;
-}
-{% endhighlight %}
-</section>

data/_includes/hide-text.html

@@ -1,12 +0,0 @@
-<section id="hide-text">
-  <h2>Hide Text<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_hide-text.scss">View Source</a></h2>
-  <p>Hide-text is an image replacement mixin. It is based off the <a href="https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7">HTML5-Boilerplate image-replacement</a>.</p>
-  <p>This image replacement technique is an alternative to the text-indent technique, which has <a href="http://nicolasgallagher.com/another-css-image-replacement-technique/">performance and other benefits</a>.</p>
-
-{% highlight scss %}
-div {
-  @include hide-text;
-  background-image: url(logo.png);
-}
-{% endhighlight %}
-</section>

data/_includes/html5-input-types.html

@@ -1,22 +0,0 @@
-<section id="html5-input-types">
-  <h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2>
-  <p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
-  <p>Note: You must use interpolation with the variable&mdash;<code>#{}</code>.</p>
-
-{% highlight scss %}
-#{$all-text-inputs} {
-  border: 1px solid green;
-}
-{% endhighlight %}
-
-<h3>CSS Output</h3>
-{% highlight scss %}
-input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
-input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
-input[type="date"],  input[type="datetime"], input[type="datetime-local"],
-input[type="month"], input[type="time"],     input[type="week"] {
-  border: 1px solid green;
-}
-{% endhighlight %}
-
-</section>