[Compass Core] [CSS3] Refactored the css3 modules to share a common implementation for experimental css3 properties.
This commit is contained in:
Chris Eppstein
parent
070675e48a
commit
8a1433b279
@ -3,7 +3,15 @@ COMPASS CHANGELOG
|
||||
|
||||
0.10.0.rc4 (Unreleased)
|
||||
-----------------------
|
||||
* The `unobtrusive-logo` mixin is deprecated and will be removed. If you use this, please move the source to your project.
|
||||
* The `unobtrusive-logo` mixin is deprecated and will be removed.
|
||||
If you use this, please move the source to your project.
|
||||
* The CSS3 modules were refactored to share a common implementation that
|
||||
abstracts the browser prefixes that are supported and gives
|
||||
greater control to the user over which prefixes are generated.
|
||||
Depending on what mixins you were using you might see some changes to
|
||||
what prefixes get generated by default and the order that they are
|
||||
emitted. The goal of this change is to provide a more future-proof
|
||||
implementation.
|
||||
|
||||
0.10.0.rc3 (April 13, 2010)
|
||||
---------------------------
|
||||
|
||||
@ -13,4 +13,9 @@ layout: core
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example <code id="border-radius">border-radius</code> and <code id="text-shadow">text-shadow</code>.
|
||||
The CSS3 module provides cross-browser mixins for CSS properties
|
||||
introduced in CSS3, for example <code id="border-radius">border-radius</code>
|
||||
and <code id="text-shadow">text-shadow</code>.
|
||||
%p
|
||||
What rendering engines you support for the experimental css properties is governed by
|
||||
the configurable variables defined in <a href="/docs/reference/compass/css3/shared/">the css3 shared module</a>.
|
||||
17
doc-src/content/reference/compass/css3/shared.haml
Normal file
17
doc-src/content/reference/compass/css3/shared.haml
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Compass Shared Utilities
|
||||
crumb: Shared CSS Utilities
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_shared.scss
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
This module provides support to the other CSS3 modules.
|
||||
You may want to use it to provide your own support for other
|
||||
CSS3 proposals as they are being worked on and before support
|
||||
is added to compass.
|
||||
@ -1,4 +1,5 @@
|
||||
//
|
||||
@import "shared";
|
||||
|
||||
// The default value is `padding-box` -- the box model used by modern browsers.
|
||||
//
|
||||
// If you wish to do so, you can override the default constant with `border-box`
|
||||
@ -19,6 +20,21 @@ $default-background-clip: padding-box !default;
|
||||
// webkit and mozilla use the deprecated short [border | padding]
|
||||
$deprecated: padding;
|
||||
@if $clip == border-box { $deprecated: border; }
|
||||
background-clip: $clip;
|
||||
-webkit-background-clip: $deprecated;
|
||||
-moz-background-clip: $deprecated; }
|
||||
// Support for webkit and mozilla's use of the deprecated short form
|
||||
@include experimental(background-clip, $deprecated,
|
||||
$experimental-support-for-mozilla,
|
||||
$experimental-support-for-webkit,
|
||||
false, // opera
|
||||
false, // microsoft
|
||||
false, // khtml
|
||||
false // official
|
||||
);
|
||||
@include experimental(background-clip, $clip,
|
||||
false, // mozilla
|
||||
false, // webkit
|
||||
$experimental-support-for-opera,
|
||||
$experimental-support-for-microsoft,
|
||||
$experimental-support-for-khtml,
|
||||
true // official
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
// Override `$default-background-origin` to change the default.
|
||||
|
||||
@import "shared";
|
||||
|
||||
$default-background-origin: content-box !default;
|
||||
|
||||
// Position the background off the edge of the padding, border or content
|
||||
@ -14,11 +16,26 @@ $default-background-origin: content-box !default;
|
||||
|
||||
@mixin background-origin($origin: $default-background-origin) {
|
||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||
$deprecated: padding;
|
||||
@if $origin == border-box { $deprecated: border; }
|
||||
$deprecated: $origin;
|
||||
@if $origin == padding-box { $deprecated: padding; }
|
||||
@if $origin == border-box { $deprecated: border; }
|
||||
@if $origin == content-box { $deprecated: content; }
|
||||
|
||||
background-origin: $origin;
|
||||
-webkit-background-origin: $deprecated;
|
||||
-moz-background-origin: $deprecated;
|
||||
// Support for webkit and mozilla's use of the deprecated short form
|
||||
@include experimental(background-origin, $deprecated,
|
||||
$experimental-support-for-mozilla,
|
||||
$experimental-support-for-webkit,
|
||||
false, // opera
|
||||
false, // microsoft
|
||||
false, // khtml
|
||||
false // official
|
||||
);
|
||||
@include experimental(background-origin, $origin,
|
||||
false, // mozilla
|
||||
false, // webkit
|
||||
$experimental-support-for-opera,
|
||||
$experimental-support-for-microsoft,
|
||||
$experimental-support-for-khtml,
|
||||
true // official
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
// Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit.
|
||||
//
|
||||
// * percentages are relative to the background-origin (default = padding-box)
|
||||
// * mixin defaults to "100% auto"
|
||||
@import "shared";
|
||||
|
||||
// override constants to change defaults
|
||||
// override to change the default
|
||||
$default-background-size: 100% auto !default;
|
||||
|
||||
// Set the size of background images using px, width and height, or percentages.
|
||||
// Currently supported in: Opera, Gecko, Webkit.
|
||||
//
|
||||
// * percentages are relative to the background-origin (default = padding-box)
|
||||
// * mixin defaults to: `$default-background-size`
|
||||
@mixin background-size($size: $default-background-size) {
|
||||
background-size: $size;
|
||||
-webkit-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
-khtml-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
@include experimental(background-size, $size);
|
||||
}
|
||||
|
||||
@ -1,58 +1,78 @@
|
||||
@import "shared";
|
||||
|
||||
$default-border-radius: 5px !default;
|
||||
|
||||
// Round all borders by a specific amount, defaults to value of $default-border-radius
|
||||
// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
|
||||
|
||||
@mixin border-radius($radius: $default-border-radius) {
|
||||
border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius; }
|
||||
@include experimental(border-radius, $radius);
|
||||
}
|
||||
|
||||
// Round radius at position by amount.
|
||||
//
|
||||
// * values for $vert: "top", "bottom"
|
||||
// * values for $horz: "left", "right"
|
||||
// * legal values for `$vert`: `top`, `bottom`
|
||||
// * legal values for `$horz`: `left`, `right`
|
||||
|
||||
@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
|
||||
border-#{$vert}-#{$horz}-radius: $radius;
|
||||
-moz-border-radius-#{$vert}#{$horz}: $radius;
|
||||
-webkit-border-#{$vert}-#{$horz}-radius: $radius; }
|
||||
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
|
||||
// Support for mozilla's syntax for specifying a corner
|
||||
@include experimental("border-radius-#{$vert}#{$horz}", $radius,
|
||||
$experimental-support-for-mozilla,
|
||||
false, // webkit
|
||||
false, // opera
|
||||
false, // microsoft
|
||||
false, // khtml
|
||||
false // official
|
||||
);
|
||||
@include experimental("border-#{$vert}-#{$horz}-radius", $radius,
|
||||
false, // mozilla
|
||||
$experimental-support-for-webkit,
|
||||
$experimental-support-for-opera,
|
||||
$experimental-support-for-microsoft,
|
||||
$experimental-support-for-khtml,
|
||||
true // official
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
// Round top-left radius only
|
||||
// Round top-left corner only
|
||||
|
||||
@mixin border-top-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, left, $radius); }
|
||||
|
||||
// Round top-right radius only
|
||||
// Round top-right corner only
|
||||
|
||||
@mixin border-top-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, right, $radius); }
|
||||
|
||||
// Round bottom-left radius only
|
||||
// Round bottom-left corner only
|
||||
|
||||
@mixin border-bottom-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, left, $radius); }
|
||||
|
||||
// Round bottom-right radius only
|
||||
// Round bottom-right corner only
|
||||
|
||||
@mixin border-bottom-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, right, $radius); }
|
||||
|
||||
// Round top corners by amount
|
||||
// Round both top corners by amount
|
||||
@mixin border-top-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-top-right-radius($radius); }
|
||||
|
||||
// Round right corners by amount
|
||||
// Round both right corners by amount
|
||||
@mixin border-right-radius($radius: $default-border-radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round bottom corners by amount
|
||||
// Round both bottom corners by amount
|
||||
@mixin border-bottom-radius($radius: $default-border-radius) {
|
||||
@include border-bottom-left-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round left corners by amount
|
||||
// Round both left corners by amount
|
||||
@mixin border-left-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius); }
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
// If you like, set different defaults before importing.
|
||||
// @doc on
|
||||
|
||||
@import "shared";
|
||||
|
||||
// The default color for box shadows
|
||||
$default-box-shadow-color: #333333 !default;
|
||||
|
||||
@ -18,10 +20,11 @@ $default-box-shadow-blur: 5px !default;
|
||||
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
||||
// Arguments are color, horizontal offset, vertical offset, and blur length.
|
||||
|
||||
@mixin box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur) {
|
||||
/* Webkit (Safari, Chrome) */
|
||||
-webkit-box-shadow: $color $hoff $voff $blur;
|
||||
/* Gecko (Firefox, Camino) */
|
||||
-moz-box-shadow: $color $hoff $voff $blur;
|
||||
/* CSS3 */
|
||||
box-shadow: $color $hoff $voff $blur; }
|
||||
@mixin box-shadow(
|
||||
$color: $default-box-shadow-color,
|
||||
$hoff: $default-box-shadow-h-offset,
|
||||
$voff: $default-box-shadow-v-offset,
|
||||
$blur: $default-box-shadow-blur
|
||||
) {
|
||||
@include experimental(box-shadow, $color $hoff $voff $blur);
|
||||
}
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
@import "shared";
|
||||
|
||||
// Change the box model for Mozilla, Webkit, IE8 and the future
|
||||
//
|
||||
// @param $bs
|
||||
// [ content-box | border-box ]
|
||||
|
||||
@mixin box-sizing($bs) {
|
||||
/* Mozilla (FireFox, Camino) */
|
||||
-moz-box-sizing: $bs;
|
||||
/* Webkit (Safari, Chrome) */
|
||||
-webkit-box-sizing: $bs;
|
||||
/* IE (8) */
|
||||
-ms-box-sizing: $bs;
|
||||
/* CSS3 */
|
||||
box-sizing: $bs; }
|
||||
@include experimental(box-sizing, $bs);
|
||||
}
|
||||
|
||||
@ -1,50 +1,29 @@
|
||||
// Specify the # of columns
|
||||
@import "shared";
|
||||
|
||||
@mixin column-count($n) {
|
||||
-moz-column-count: $n;
|
||||
-webkit-column-count: $n;
|
||||
column-count: $n; }
|
||||
// Specify the number of columns
|
||||
@mixin column-count($n) { @include experimental(column-count, $n); }
|
||||
|
||||
// Specify the gap between columns e.g. 20px
|
||||
// Specify the gap between columns e.g. `20px`
|
||||
@mixin column-gap($u) { @include experimental(column-gap, $u); }
|
||||
|
||||
@mixin column-gap($u) {
|
||||
-moz-column-gap: $u;
|
||||
-webkit-column-gap: $u;
|
||||
column-gap: $u; }
|
||||
// Specify the width of columns e.g. `100px`
|
||||
@mixin column-width($u) { @include experimental(column-width, $u); }
|
||||
|
||||
// Specify the width of columns e.g. 100px
|
||||
// Specify the width of the rule between columns e.g. `1px`
|
||||
@mixin column-rule-width($w) { @include experimental(rule-width, $w); }
|
||||
|
||||
@mixin column-width($u) {
|
||||
-moz-column-width: $u;
|
||||
-webkit-column-width: $u;
|
||||
column-width: $u; }
|
||||
// Specify the style of the rule between columns e.g. `dotted`.
|
||||
// This works like border-style.
|
||||
@mixin column-rule-style($s) { @include experimental(rule-style, $s); }
|
||||
|
||||
// Specify the width of the rule between columns e.g. 1px
|
||||
// Specify the style of the rule between columns e.g. `dotted`.
|
||||
// This works like border-color.
|
||||
|
||||
@mixin column-rule-width($w) {
|
||||
-moz-column-rule-width: $w;
|
||||
-webkit-column-rule-width: $w;
|
||||
column-rule-width: $w; }
|
||||
|
||||
// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style.
|
||||
|
||||
@mixin column-rule-style($s) {
|
||||
-moz-column-rule-style: $s;
|
||||
-webkit-column-rule-style: $s;
|
||||
column-rule-style: $s; }
|
||||
|
||||
// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color.
|
||||
|
||||
@mixin column-rule-color($c) {
|
||||
-moz-column-rule-color: $c;
|
||||
-webkit-column-rule-color: $c;
|
||||
column-rule-color: $c; }
|
||||
@mixin column-rule-color($c) { @include experimental(rule-color, $s); }
|
||||
|
||||
// Mixin encompassing all column rule rules
|
||||
// For example:
|
||||
// +column-rule('1px', 'solid', '#000')
|
||||
|
||||
@mixin column-rule($w, $s: solid, $c: unquote(" ")) {
|
||||
@include column-rule-width($w);
|
||||
@include column-rule-style($s);
|
||||
@include column-rule-color($c); }
|
||||
// +column-rule(1px, solid, #c00)
|
||||
@mixin column-rule($w, $s: solid, $c: black) {
|
||||
@include experimental(column-rule, $w $s $c);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "shared";
|
||||
|
||||
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
|
||||
//
|
||||
// * $name is required, arbitrary, and what you will use in font stacks.
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "shared";
|
||||
|
||||
// This yields a linear gradient spanning from top to bottom
|
||||
//
|
||||
// +linear-gradient(color-stops(white, black))
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
@import "shared";
|
||||
|
||||
// Provides a cross-browser method to implement `display: inline-block;`
|
||||
//
|
||||
// This file is a sass file to work around the fact that the
|
||||
// SCSS parser does not support the #prop hack at this time.
|
||||
// http://github.com/nex3/haml/issues/issue/119
|
||||
|
||||
@mixin inline-block {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
#display: inline;
|
||||
#vertical-align: auto; }
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
}
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
@import "shared";
|
||||
|
||||
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
|
||||
//
|
||||
// @param $opacity
|
||||
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
-moz-opacity: $opacity;
|
||||
-khtml-opacity: $opacity;
|
||||
-ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")");
|
||||
filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); }
|
||||
@include experimental(opacity, $opacity,
|
||||
$experimental-support-for-mozilla,
|
||||
$experimental-support-for-webkit,
|
||||
$experimental-support-for-opera,
|
||||
false, // microsoft uses filters below instead
|
||||
$experimental-support-for-khtml,
|
||||
true // official
|
||||
);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)});
|
||||
}
|
||||
|
||||
// Make an element completely transparent.
|
||||
@mixin transparent {
|
||||
@include opacity(0); }
|
||||
@mixin transparent { @include opacity(0); }
|
||||
|
||||
// Make an element completely opaque.
|
||||
@mixin opaque {
|
||||
@include opacity(1); }
|
||||
@mixin opaque { @include opacity(1); }
|
||||
|
||||
30
frameworks/compass/stylesheets/compass/css3/_shared.scss
Normal file
30
frameworks/compass/stylesheets/compass/css3/_shared.scss
Normal file
@ -0,0 +1,30 @@
|
||||
// Support for mozilla in experimental css3 properties.
|
||||
$experimental-support-for-mozilla : true !default;
|
||||
// Support for webkit in experimental css3 properties.
|
||||
$experimental-support-for-webkit : true !default;
|
||||
// Support for opera in experimental css3 properties.
|
||||
$experimental-support-for-opera : false !default;
|
||||
// Support for microsoft in experimental css3 properties.
|
||||
$experimental-support-for-microsoft : false !default;
|
||||
// Support for khtml in experimental css3 properties.
|
||||
$experimental-support-for-khtml : false !default;
|
||||
|
||||
// This mixin provides basic support for CSS3 properties and
|
||||
// their corresponding experimental CSS2 properties when
|
||||
// the implementations are identical except for the property
|
||||
// prefix.
|
||||
@mixin experimental($property, $value,
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $moz { -moz-#{$property} : $value; }
|
||||
@if $webkit { -webkit-#{$property} : $value; }
|
||||
@if $o { -o-#{$property} : $value; }
|
||||
@if $ms { -ms-#{$property} : $value; }
|
||||
@if $khtml { -khtml-#{$property} : $value; }
|
||||
@if $official { #{$property} : $value; }
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import "shared";
|
||||
|
||||
// Provides CSS text shadows.
|
||||
//
|
||||
// Arguments are color, horizontal offset, vertical offset, and blur
|
||||
@ -14,5 +16,11 @@ $default-text-shadow-v-offset: 1px !default;
|
||||
|
||||
$default-text-shadow-blur: 1px !default;
|
||||
|
||||
@mixin text-shadow($color: $default-text-shadow-color, $hoff: $default-text-shadow-h-offset, $voff: $default-text-shadow-v-offset, $blur: $default-text-shadow-blur) {
|
||||
text-shadow: $color $hoff $voff $blur; }
|
||||
@mixin text-shadow(
|
||||
$color: $default-text-shadow-color,
|
||||
$hoff: $default-text-shadow-h-offset,
|
||||
$voff: $default-text-shadow-v-offset,
|
||||
$blur: $default-text-shadow-blur
|
||||
) {
|
||||
text-shadow: $color $hoff $voff $blur;
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
@import "shared";
|
||||
|
||||
// CSS Transform and Transform-Origin
|
||||
|
||||
// Apply a transform sent as a complete string.
|
||||
|
||||
@mixin apply-transform($transform: false) {
|
||||
transform: $transform;
|
||||
-webkit-transform: $transform;
|
||||
-moz-transform: $transform; }
|
||||
@mixin apply-transform($transform) {
|
||||
@include experimental(transform, $transform);
|
||||
}
|
||||
|
||||
// Apply a transform-origin sent as a complete string.
|
||||
|
||||
@mixin apply-origin($origin: false) {
|
||||
transform-origin: $origin;
|
||||
-webkit-transform-origin: $origin;
|
||||
-moz-transform-origin: $origin; }
|
||||
@mixin apply-origin($origin) {
|
||||
@include experimental(transform-origin, $origin);
|
||||
}
|
||||
|
||||
// transform-origin requires x and y coordinates
|
||||
//
|
||||
@ -23,7 +23,10 @@
|
||||
@if $originy {
|
||||
@include apply-origin($originx or 50% $originy);
|
||||
} @else {
|
||||
@include apply-origin($originx); } } }
|
||||
@include apply-origin($originx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A full transform mixin with everything you could want
|
||||
//
|
||||
@ -31,10 +34,20 @@
|
||||
// * scale, rotate and skew require units of degrees(deg)
|
||||
// * scale takes a multiplier, rotate and skew take degrees
|
||||
|
||||
@mixin transform($scale: 1, $rotate: 0deg, $transx: 0, $transy: 0, $skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
||||
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
||||
@include apply-transform($transform);
|
||||
@include transform-origin($originx, $originy); }
|
||||
@mixin transform(
|
||||
$scale: 1,
|
||||
$rotate: 0deg,
|
||||
$transx: 0,
|
||||
$transy: 0,
|
||||
$skewx: 0deg,
|
||||
$skewy: 0deg,
|
||||
$originx: false,
|
||||
$originy: false
|
||||
) {
|
||||
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
||||
@include apply-transform($transform);
|
||||
@include transform-origin($originx, $originy);
|
||||
}
|
||||
|
||||
// Transform Partials
|
||||
//
|
||||
@ -45,20 +58,24 @@
|
||||
|
||||
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
||||
@include apply-transform(scale($scale));
|
||||
@include transform-origin($originx, $originy); }
|
||||
@include transform-origin($originx, $originy);
|
||||
}
|
||||
|
||||
// Adjust only the rotation, with optional origin coordinates
|
||||
|
||||
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
||||
@include apply-transform(rotate($rotate));
|
||||
@include transform-origin($originx, $originy); }
|
||||
@include transform-origin($originx, $originy);
|
||||
}
|
||||
|
||||
// Adjust only the translation
|
||||
|
||||
@mixin translate($transx: 0, $transy: 0) {
|
||||
@include apply-transform(translate($transx, $transy)); }
|
||||
@include apply-transform(translate($transx, $transy));
|
||||
}
|
||||
|
||||
// Adjust only the skew, with optional origin coordinates
|
||||
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
||||
@include apply-transform(skew($skewx, $skewy));
|
||||
@include transform-origin($originx, $originy); }
|
||||
@include transform-origin($originx, $originy);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "shared";
|
||||
|
||||
// CSS Transitions
|
||||
// Currently only works in Webkit.
|
||||
//
|
||||
@ -27,10 +29,8 @@ $default-transition-delay: false !default;
|
||||
// * also accepts "all" or "none"
|
||||
|
||||
@mixin transition-property($properties: $default-transition-property) {
|
||||
transition-property: $properties;
|
||||
-webkit-transition-property: $properties;
|
||||
-moz-transition-property: $properties;
|
||||
-o-transition-property: $properties; }
|
||||
@include experimental(transition-property, $properties);
|
||||
}
|
||||
|
||||
// One or more durations in seconds
|
||||
//
|
||||
@ -38,10 +38,8 @@ $default-transition-delay: false !default;
|
||||
// * these durations will affect the properties in the same list position
|
||||
|
||||
@mixin transition-duration($duration: $default-transition-duration) {
|
||||
transition-duration: $duration;
|
||||
-webkit-transition-duration: $duration;
|
||||
-moz-transition-duration: $duration;
|
||||
-o-transition-duration: $duration; }
|
||||
@include experimental(transition-duration, $duration);
|
||||
}
|
||||
|
||||
// One or more timing functions
|
||||
//
|
||||
@ -50,10 +48,8 @@ $default-transition-delay: false !default;
|
||||
// * These functions will effect the properties in the same list position
|
||||
|
||||
@mixin transition-timing-function($function: $default-transition-function) {
|
||||
transition-timing-function: $function;
|
||||
-webkit-transition-timing-function: $function;
|
||||
-moz-transition-timing-function: $function;
|
||||
-o-transition-timing-function: $function; }
|
||||
@include experimental(transition-timing-function, $function);
|
||||
}
|
||||
|
||||
// One or more transition-delays in seconds
|
||||
//
|
||||
@ -61,17 +57,19 @@ $default-transition-delay: false !default;
|
||||
// * these delays will effect the properties in the same list position
|
||||
|
||||
@mixin transition-delay($delay: $default-transition-delay) {
|
||||
transition-delay: $delay;
|
||||
-webkit-transition-delay: $delay;
|
||||
-moz-transition-delay: $delay;
|
||||
-o-transition-delay: $delay; }
|
||||
@include experimental(transition-delay, $delay);
|
||||
}
|
||||
|
||||
// Transition all-in-one shorthand
|
||||
|
||||
@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
|
||||
@mixin transition(
|
||||
$properties: $default-transition-property,
|
||||
$duration: $default-transition-duration,
|
||||
$function: $default-transition-function,
|
||||
$delay: $default-transition-delay
|
||||
) {
|
||||
@include transition-property($properties);
|
||||
@include transition-duration($duration);
|
||||
@if $function {
|
||||
@include transition-timing-function($function); }
|
||||
@if $delay {
|
||||
@include transition-delay($delay); } }
|
||||
@if $function { @include transition-timing-function($function); }
|
||||
@if $delay { @include transition-delay($delay); }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user