From 17ea0293ae471b12d66280515750238d7843d1da Mon Sep 17 00:00:00 2001 From: Phil LaPier Date: Fri, 16 Mar 2012 18:45:45 -0400 Subject: [PATCH] Updated gradients and transition docs to reflect changes in 2.0.0.rc1 --- _includes/linear-gradient-function.html | 9 ++++ _includes/linear-gradient.html | 9 ++++ _includes/radial-gradient-function.html | 11 +++++ _includes/radial-gradient.html | 15 ++++++- _includes/transitions.html | 5 +-- _site/index.html | 55 ++++++++++++++++++++++--- 6 files changed, 93 insertions(+), 11 deletions(-) diff --git a/_includes/linear-gradient-function.html b/_includes/linear-gradient-function.html index ff9398eaf..1592eb078 100644 --- a/_includes/linear-gradient-function.html +++ b/_includes/linear-gradient-function.html @@ -4,6 +4,15 @@

Linear Gradient background-image mixin. The function takes the same arguments as the radial-gradient mixin.

{% 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 %} +
+

Optional variables can be passed to control the deprecated -webkit-gradient() function (iOS 4): +
+$deprecated-pos1, $deprecated-pos2, $deprecated-radius1, $deprecated-radius2

+ +{% highlight scss %} +@include radial-gradient(#1e5799, #3dc3d1, + $deprecated-pos1: left center, $deprecated-pos2: left top, + $deprecated-radius1: 50, $deprecated-radius2: 360); +{% endhighlight %}

Demo

diff --git a/_includes/radial-gradient.html b/_includes/radial-gradient.html index 8a8af02ad..37370de3a 100644 --- a/_includes/radial-gradient.html +++ b/_includes/radial-gradient.html @@ -1,14 +1,25 @@

Radial Gradient View source

-

Takes up to 10 gradients. Position and shape are required. See also the background-image mixin.

+

Takes up to 10 gradients. See also the background-image mixin.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

{% 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 %} +
+

Optional variables can be passed to control the deprecated -webkit-gradient() function (iOS 4): +
+$deprecated-pos1, $deprecated-pos2, $deprecated-radius1, $deprecated-radius2

+ +{% highlight scss %} +@include radial-gradient(#1e5799, #3dc3d1, + $deprecated-pos1: left center, $deprecated-pos2: left top, + $deprecated-radius1: 50, $deprecated-radius2: 360); +{% endhighlight %} +

Demo

diff --git a/_includes/transitions.html b/_includes/transitions.html index adad3e283..6250d696f 100644 --- a/_includes/transitions.html +++ b/_includes/transitions.html @@ -3,8 +3,7 @@

Transitions 
@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
+
+ + +

Demo

Radial Gradient View source

-

Takes up to 10 gradients. Position and shape are required. See also the background-image mixin.

+

Takes up to 10 gradients. See also the background-image mixin.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

-
@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);
 

 

 
 
+

+
Optional variables can be passed to control the deprecated -webkit-gradient() function (iOS 4):
+

+$deprecated-pos1, $deprecated-pos2, $deprecated-radius1, $deprecated-radius2

+
+
@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+

+

+
+
   
Demo

   

   

@@ -325,12 +347,11 @@ 
Transform & Transform-origin View source

   
Shorthand mixin: Supports multiple parentheses-delimited values for each variable.

 
-
@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);
 

 

 
-
@@ -432,6 +453,16 @@

Linear Gradient 
@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
+
+ + +

Demo

@@ -463,12 +494,24 @@

Modular Scale View source

Outputs a radial-gradient. Use in conjunction with the background-image mixin. The function takes the same arguments as the radial-gradient mixin.

-
@include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
+
@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) );
 

 

 
 
+

+
Optional variables can be passed to control the deprecated -webkit-gradient() function (iOS 4):
+

+$deprecated-pos1, $deprecated-pos2, $deprecated-radius1, $deprecated-radius2

+
+
@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+

+

+
   
Demo