Updated gradients and transition docs to reflect changes in 2.0.0.rc1

togakangaroo · Mar 16, 2012 · 17ea029 · 17ea029
1 parent 857b11b
commit 17ea029
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 11 deletions.
diff --git a/_includes/linear-gradient-function.html b/_includes/linear-gradient-function.html
@@ -4,6 +4,15 @@ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/b
 
 {% highlight scss %}
 @include background-image(linear-gradient(white 0, yellow 50%, transparent 50%));
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+{% highlight scss %}
+@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
 {% endhighlight %}
 
   <h3>Demo</h3>

diff --git a/_includes/linear-gradient.html b/_includes/linear-gradient.html
@@ -8,6 +8,15 @@ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/b
 @include linear-gradient(top, #8fdce5, #3dc3d1);
 @include linear-gradient(top, #8fdce5, #3dc3d1, $fallback: red);
 @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+{% highlight scss %}
+@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
 {% endhighlight %}
 
   <h3>Demo</h3>

diff --git a/_includes/radial-gradient-function.html b/_includes/radial-gradient-function.html
@@ -3,10 +3,21 @@ <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/b
   <p>Outputs a radial-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#radial-gradient">radial-gradient mixin</a>.</p>
 
 {% highlight scss %}
+@include backgorund-image( radial-gradient(#1e5799, #3dc3d1) );
 @include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
 @include background-image( radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef) );
 {% endhighlight %}
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+{% highlight scss %}
+@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+{% endhighlight %}
   <h3>Demo</h3>
   <section class="demo">
   </section>

diff --git a/_includes/radial-gradient.html b/_includes/radial-gradient.html
@@ -1,14 +1,25 @@
 <section id="radial-gradient">
   <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_radial-gradient.scss">View source</a></h2>
-  <p>Takes up to 10 gradients. Position and shape are required. See also the <a href="#background-image">background-image mixin</a>.</p>
+  <p>Takes up to 10 gradients. See also the <a href="#background-image">background-image mixin</a>.</p>
   <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
 
 {% highlight scss %}
-@include radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1);
+@include radial-gradient(#1e5799, #3dc3d1);
 @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
 @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef, $fallback: red);
 {% endhighlight %}
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+{% highlight scss %}
+@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+{% endhighlight %}
+
   <h3>Demo</h3>
   <section class="demo">
   </section>

diff --git a/_includes/transitions.html b/_includes/transitions.html
@@ -3,8 +3,7 @@ <h2>Transitions <a class="view-source" href="https://github.com/thoughtbot/bourb
   <p>Shorthand mixin: Supports multiple parentheses-delimited values for each variable.</p>
 
 {% highlight scss %}
-@include transition (all, 2.0s, ease-in-out);
-@include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+@include transition (all 2.0s ease-in-out);
+@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
 {% endhighlight %}
-
 </section>
diff --git a/_site/index.html b/_site/index.html
@@ -288,22 +288,44 @@ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/b
 </div>
 
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
+</code></pre>
+</div>
+
+
   <h3>Demo</h3>
   <section class="demo"></section>
 </section>
 
           <section id="radial-gradient">
   <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_radial-gradient.scss">View source</a></h2>
-  <p>Takes up to 10 gradients. Position and shape are required. See also the <a href="#background-image">background-image mixin</a>.</p>
+  <p>Takes up to 10 gradients. See also the <a href="#background-image">background-image mixin</a>.</p>
   <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
 
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
 <span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">);</span>
 <span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="o">,</span> <span class="nv">$fallback</span><span class="o">:</span> <span class="nb">red</span><span class="p">);</span>
 </code></pre>
 </div>
 
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
+                         <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
+                         <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
+</code></pre>
+</div>
+
+
   <h3>Demo</h3>
   <section class="demo">
   </section>
@@ -325,12 +347,11 @@ <h2>Transform &amp; Transform-origin <a class="view-source" href="https://github
   <h2>Transitions <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transition.scss">View source</a></h2>
   <p>Shorthand mixin: Supports multiple parentheses-delimited values for each variable.</p>
 
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="n">all</span><span class="o">,</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span><span class="o">,</span> <span class="n">ease-in-out</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> transition</span> <span class="p">((</span><span class="no">opacity</span><span class="o">,</span> <span class="no">width</span><span class="p">)</span><span class="o">,</span> <span class="p">(</span><span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span><span class="o">,</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span><span class="p">)</span><span class="o">,</span> <span class="n">ease-in</span><span class="o">,</span> <span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">2</span><span class="kt">s</span><span class="p">));</span>
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="n">all</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">);</span>
+<span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="no">opacity</span> <span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">0</span><span class="kt">s</span><span class="o">,</span> <span class="no">width</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">2</span><span class="kt">s</span><span class="p">);</span>
 </code></pre>
 </div>
 
-
 </section>
 
           <section id="user-select">
@@ -432,6 +453,16 @@ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/b
 </div>
 
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
+</code></pre>
+</div>
+
+
   <h3>Demo</h3>
   <section class="demo">
   </section>
@@ -463,12 +494,24 @@ <h2>Modular Scale <a class="view-source" href="https://github.com/thoughtbot/bou
   <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_radial-gradient.scss">View source</a></h2>
   <p>Outputs a radial-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#radial-gradient">radial-gradient mixin</a>.</p>
 
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> backgorund-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
+<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
 <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">)</span> <span class="p">);</span>
 </code></pre>
 </div>
 
 
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
+                         <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
+                         <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
+</code></pre>
+</div>
+
   <h3>Demo</h3>
   <section class="demo">
   </section>