Versioned modules was a bad idea.
This commit is contained in:
Chris Eppstein
parent
cf8ee88abd
commit
c8daf8a440
@ -2,7 +2,7 @@
|
||||
title: Transform
|
||||
description: css3 mixin for css transforms
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
stylesheet: compass/css3/_transform-legacy.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -1,4 +1,4 @@
|
||||
@import compass/css3
|
||||
@import compass/css3, compass/css3/transform-legacy
|
||||
|
||||
.transform-example
|
||||
width: 40px
|
||||
|
||||
@ -6,21 +6,19 @@ classnames:
|
||||
- tutorial
|
||||
---
|
||||
# Upgrading to Compass CSS3 v2
|
||||
The `css3` import is deprecated as well as the following css3 modules:
|
||||
`box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`,
|
||||
`box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively.
|
||||
However, you will only get deprecation warnings if you actually use
|
||||
one of the deprecated mixins. The imports will be restored by 1.0
|
||||
with the new, betterer APIs.
|
||||
Many mixins and certain uses of mixins have been deprecated, but your
|
||||
existing stylesheets should still work out of the box with one exception:
|
||||
users who are using the `css3/transform` module should update their imports
|
||||
to import `css/transform-legacy` when they upgrade. They should then upgrade
|
||||
to the new `css/transform` module at their convenience.
|
||||
|
||||
You should read about what changed, update your stylesheets accordingly
|
||||
and then update your imports to the new version.
|
||||
|
||||
<a name="box-shadow"></a>
|
||||
## Box Shadow
|
||||
The arguments to the [`box-shadow`][new_box_shadow] mixin have changed.
|
||||
As a result you should change your import of `compass/css3/box-shadow`
|
||||
to `compass/css3/box-shadow-v2` once you do one of the following choices:
|
||||
You may get a deprecation warning using the `box-shadow` mixin.
|
||||
You can resolve this in one of the following ways:
|
||||
|
||||
1. Change your use of the `box-shadow` and instead use `single-box-shadow`.
|
||||
This mixin has the same behavior and arguments as the old `box-shadow` mixin.
|
||||
@ -31,10 +29,8 @@ to `compass/css3/box-shadow-v2` once you do one of the following choices:
|
||||
<a name="text-shadow"></a>
|
||||
## Text Shadow
|
||||
|
||||
Similarly to how the box shadow changed. The new [text-shadow][new_text_shadow]
|
||||
mixin now accepts multiple shadows. As a result you should change your import of
|
||||
`compass/css3/text-shadow` to `compass/css3/text-shadow-v2` once you do one of
|
||||
the following choices:
|
||||
You may get a deprecation warning using the `text-shadow` mixin.
|
||||
You can resolve this in one of the following ways:
|
||||
|
||||
1. Change your use of the `text-shadow` and instead use `single-text-shadow`.
|
||||
This mixin has the same behavior and arguments as the old `text-shadow` mixin.
|
||||
@ -47,6 +43,8 @@ the following choices:
|
||||
The transform module was largely re-written to support 3D transforms. If you
|
||||
are using it, it is suggested that you read the [new module's documentation][new_transform]
|
||||
and adjust your code appropriately. Many mixin names and constants have changed.
|
||||
For your convenience, the [old CSS transform module][old_transform] can still be imported, but it
|
||||
is deprecated and will be removed in the next release.
|
||||
|
||||
<a name="gradients"></a>
|
||||
## Gradients
|
||||
@ -77,10 +75,6 @@ Or for sass files:
|
||||
=linear-gradient($color-stops, $start: top, $image: false)
|
||||
+background-image($image, linear-gradient($start, $color-stops))
|
||||
|
||||
|
||||
[old_box_shadow]: /reference/compass/css3/box_shadow/#mixin-box-shadow
|
||||
[new_box_shadow]: /reference/compass/css3/box_shadow_v2/#mixin-box-shadow
|
||||
[old_text_shadow]: /reference/compass/css3/text_shadow/#mixin-text-shadow
|
||||
[new_text_shadow]: /reference/compass/css3/text-shadow-v2/#mixin-text-shadow
|
||||
[new_transform]: /reference/compass/css3/transform-v2/
|
||||
[new_transform]: /reference/compass/css3/transform/
|
||||
[old_transform]: /reference/compass/css3/transform-legacy/
|
||||
[image_stylesheet]: /reference/compass/css3/images/
|
||||
@ -16,7 +16,7 @@ layout: core
|
||||
The CSS3 module provides cross-browser mixins for CSS properties
|
||||
introduced in CSS3, for example
|
||||
<a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
|
||||
and <a href="/reference/compass/css3/text-shadow-v2/"><code>text-shadow</code></a>.
|
||||
and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
|
||||
%p
|
||||
What rendering engines you support for the experimental css properties is governed by
|
||||
the configurable variables defined in <a href="/reference/compass/support/">the browser
|
||||
@ -24,6 +24,4 @@ layout: core
|
||||
%h3 Importing the Entire CSS3 Library
|
||||
%p
|
||||
To import the CSS3 Module add the following to your stylesheets:<br>
|
||||
<code>@import "compass/css3/version-2"</code><br>
|
||||
Many of the mixins in version-1 are deprecated, and this import will make sure you don't
|
||||
load them during this transition.
|
||||
<code>@import "compass/css3"</code><br>
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
---
|
||||
title: Compass Box Shadow
|
||||
crumb: Box Shadow (v1)
|
||||
crumb: Box Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box-shadow.scss
|
||||
meta_description: Specify the box shadow for all browsers.
|
||||
layout: core
|
||||
deprecated: true
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p.warning
|
||||
This import is deprecated. Please import
|
||||
<a href="/reference/compass/css3/box_shadow_v2/" class="better">box-shadow-v2</a> instead.
|
||||
%p
|
||||
The box-shadow mixins are used to apply an inset or drop shadow to a block element.
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Compass Box Shadow (v2)
|
||||
crumb: Box Shadow (v2)
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box-shadow-v2.scss
|
||||
meta_description: Specify the box shadow for all browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
The box-shadow mixins are used to apply an inset or drop shadow to a block element.
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Compass Text Shadow (v2)
|
||||
crumb: Text Shadow (v2)
|
||||
title: Compass Text Shadow
|
||||
crumb: Text Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text-shadow-v2.scss
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
meta_description: Specify the text shadow for all browsers.
|
||||
beta: true
|
||||
layout: core
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
title: Compass Text Shadow
|
||||
crumb: Text Shadow (v1)
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
meta_description: Specify the text shadow for all browsers.
|
||||
layout: core
|
||||
deprecated: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p.warning
|
||||
This import is deprecated. Please import
|
||||
<a href="/reference/compass/css3/text-shadow-v2/" class="better">text-shadow-v2</a>
|
||||
instead.
|
||||
17
doc-src/content/reference/compass/css3/transform-legacy.haml
Normal file
17
doc-src/content/reference/compass/css3/transform-legacy.haml
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Compass Transform (Legacy)
|
||||
crumb: Transform (legacy)
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform-legacy.scss
|
||||
meta_description: Specify the 2D transformation for many browsers.
|
||||
layout: core
|
||||
deprecated: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p.warning
|
||||
This import is deprecated. Please import
|
||||
<a href="/reference/compass/css3/transform/" class="better">transform</a> instead.
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
title: Compass Transform (v2)
|
||||
crumb: Transform (v2)
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform-v2.scss
|
||||
meta_description: Specify the 2D transformation for all browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Provides mixins for CSS3 2D and 3D transforms. See
|
||||
<a href="http://www.w3.org/TR/css3-2d-transforms/">W3C: CSS 2D transforms</a>
|
||||
and See <a href="http://www.w3.org/TR/css3-3d-transforms/">W3C: CSS 3D transforms</a>.
|
||||
%p
|
||||
Safari is the only browser that currently supports 3D transforms.
|
||||
Because of that it can be important to control whether a given 2D transform
|
||||
uses the full range of experimental browser prefixes, or only the 3D list.
|
||||
To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
2D: Mozilla, Webkit, Opera, Official
|
||||
3D: Webkit, Official **(Only Safari Supports 3D perspective)**
|
||||
|
||||
@ -1,17 +1,28 @@
|
||||
---
|
||||
title: Compass Transform
|
||||
crumb: Transform (v1)
|
||||
crumb: Transform
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
meta_description: Specify the 2D transformation for all browsers.
|
||||
meta_description: Specify transformations for many browsers.
|
||||
layout: core
|
||||
deprecated: true
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p.warning
|
||||
This import is deprecated. Please import
|
||||
<a href="/reference/compass/css3/transform-v2/" class="better">transform-v2</a> instead.
|
||||
%p
|
||||
Provides mixins for CSS3 2D and 3D transforms. See
|
||||
<a href="http://www.w3.org/TR/css3-2d-transforms/">W3C: CSS 2D transforms</a>
|
||||
and See <a href="http://www.w3.org/TR/css3-3d-transforms/">W3C: CSS 3D transforms</a>.
|
||||
%p
|
||||
Safari is the only browser that currently supports 3D transforms.
|
||||
Because of that it can be important to control whether a given 2D transform
|
||||
uses the full range of experimental browser prefixes, or only the 3D list.
|
||||
To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
2D: Mozilla, Webkit, Opera, Official
|
||||
3D: Webkit, Official **(Only Safari Supports 3D perspective)**
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
// you to style in CSS things that you'd have to do using image chops otherwise.
|
||||
//
|
||||
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/pie";
|
||||
@import "compass/css3/version-2";
|
||||
|
||||
$pie-behavior: url("/stylesheets/PIE.htc");
|
||||
|
||||
|
||||
@ -1 +1,16 @@
|
||||
@import "css3/version-1";
|
||||
@import "css3/border-radius";
|
||||
@import "css3/inline-block";
|
||||
@import "css3/opacity";
|
||||
@import "css3/box-shadow";
|
||||
@import "css3/text-shadow";
|
||||
@import "css3/columns";
|
||||
@import "css3/box-sizing";
|
||||
@import "css3/box";
|
||||
@import "css3/gradient";
|
||||
@import "css3/images";
|
||||
@import "css3/background-clip";
|
||||
@import "css3/background-origin";
|
||||
@import "css3/background-size";
|
||||
@import "css3/font-face";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
// @doc off
|
||||
// These defaults make the arguments optional for this mixin
|
||||
// If you like, set different defaults before importing.
|
||||
// @doc on
|
||||
|
||||
@import "shared";
|
||||
|
||||
|
||||
// The default color for box shadows
|
||||
$default-box-shadow-color: #333333 !default;
|
||||
|
||||
// The default horizontal offset. Positive is to the right.
|
||||
$default-box-shadow-h-offset: 0px !default;
|
||||
|
||||
// The default vertical offset. Positive is down.
|
||||
$default-box-shadow-v-offset: 0px !default;
|
||||
|
||||
// The default blur length.
|
||||
$default-box-shadow-blur: 5px !default;
|
||||
|
||||
// The default spread length.
|
||||
$default-box-shadow-spread : false !default;
|
||||
|
||||
// The default shadow instet: inset or false (for standard shadow).
|
||||
$default-box-shadow-inset : false !default;
|
||||
|
||||
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
||||
// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
||||
@mixin single-box-shadow(
|
||||
$color : $default-box-shadow-color,
|
||||
$hoff : $default-box-shadow-h-offset,
|
||||
$voff : $default-box-shadow-v-offset,
|
||||
$blur : $default-box-shadow-blur,
|
||||
$spread : $default-box-shadow-spread,
|
||||
$inset : $default-box-shadow-inset
|
||||
) {
|
||||
@if not ($inset == true or $inset == false or $inset == inset) {
|
||||
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
||||
}
|
||||
|
||||
@if $color == none {
|
||||
@include multiple-box-shadows(none);
|
||||
} @else {
|
||||
$full : $hoff $voff;
|
||||
@if $blur { $full: $full $blur; }
|
||||
@if $spread { $full: $full $spread; }
|
||||
@if $color { $full: $full $color; }
|
||||
@if $inset { $full: inset $full; }
|
||||
@include multiple-box-shadows($full);
|
||||
}
|
||||
}
|
||||
|
||||
// Provides cross-browser box shadows when one or more box shadows are needed.
|
||||
@mixin multiple-box-shadows(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
|
||||
@if not ($default-box-shadow-inset == true or $default-box-shadow-inset == false or $default-box-shadow-inset == inset) {
|
||||
@warn "$default-box-shadow-inset expected to be true or the inset keyword. Got #{$default-box-shadow-inset} instead. Using: inset";
|
||||
}
|
||||
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
|
||||
}
|
||||
|
||||
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
@include experimental(box-shadow, $shadow,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
@mixin box-shadow(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
@include multiple-box-shadows(
|
||||
$shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10
|
||||
);
|
||||
}
|
||||
@ -1,17 +1,111 @@
|
||||
@import "box-shadow-v2";
|
||||
// @doc off
|
||||
// These defaults make the arguments optional for this mixin
|
||||
// If you like, set different defaults before importing.
|
||||
// @doc on
|
||||
|
||||
// This mixin is deprecated.
|
||||
// Use the box-shadow mixin from compass/css3/box-shadow-v2 instead.
|
||||
// @deprecated
|
||||
@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,
|
||||
$spread : $default-box-shadow-spread,
|
||||
@import "shared";
|
||||
|
||||
|
||||
// The default color for box shadows
|
||||
$default-box-shadow-color: #333333 !default;
|
||||
|
||||
// The default horizontal offset. Positive is to the right.
|
||||
$default-box-shadow-h-offset: 0px !default;
|
||||
|
||||
// The default vertical offset. Positive is down.
|
||||
$default-box-shadow-v-offset: 0px !default;
|
||||
|
||||
// The default blur length.
|
||||
$default-box-shadow-blur: 5px !default;
|
||||
|
||||
// The default spread length.
|
||||
$default-box-shadow-spread : false !default;
|
||||
|
||||
// The default shadow inset: inset or false (for standard shadow).
|
||||
$default-box-shadow-inset : false !default;
|
||||
|
||||
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
||||
// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
||||
@mixin single-box-shadow(
|
||||
$color : $default-box-shadow-color,
|
||||
$hoff : $default-box-shadow-h-offset,
|
||||
$voff : $default-box-shadow-v-offset,
|
||||
$blur : $default-box-shadow-blur,
|
||||
$spread : $default-box-shadow-spread,
|
||||
$inset : $default-box-shadow-inset
|
||||
) {
|
||||
@warn "This version of the box-shadow mixin has been deprecated. Please read: http://beta.compass-style.org/upgrading/css3-v2/#box-shadow for details.";
|
||||
@include single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset);
|
||||
@if not ($inset == true or $inset == false or $inset == inset) {
|
||||
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
||||
}
|
||||
|
||||
@if $color == none {
|
||||
@include multiple-box-shadows(none);
|
||||
} @else {
|
||||
$full : $hoff $voff;
|
||||
@if $blur { $full: $full $blur; }
|
||||
@if $spread { $full: $full $spread; }
|
||||
@if $color { $full: $full $color; }
|
||||
@if $inset { $full: inset $full; }
|
||||
@include multiple-box-shadows($full);
|
||||
}
|
||||
}
|
||||
|
||||
// Provides cross-browser box shadows when one or more box shadows are needed.
|
||||
@mixin multiple-box-shadows(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
|
||||
}
|
||||
|
||||
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
@include experimental(box-shadow, $shadow,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
@mixin box-shadow(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
|
||||
$legacy: (type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6));
|
||||
@if $legacy {
|
||||
@warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " +
|
||||
"Pass the values as a single space-separated list, or use the single-box-shadow mixin. " +
|
||||
"See http://beta.compass-style.org/help/tutorials/upgrading/css3-v2/ for more info.";
|
||||
@include single-box-shadow(
|
||||
if($shadow-1, $shadow-1, $default-box-shadow-color),
|
||||
if($shadow-2, $shadow-2, $default-box-shadow-h-offset),
|
||||
if($shadow-3, $shadow-3, $default-box-shadow-v-offset),
|
||||
if($shadow-4, $shadow-4, $default-box-shadow-blur),
|
||||
if($shadow-5, $shadow-5, $default-box-shadow-spread),
|
||||
if($shadow-6, $shadow-6, $default-box-shadow-inset)
|
||||
);
|
||||
}
|
||||
@else {
|
||||
@include multiple-box-shadows(
|
||||
$shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,6 @@
|
||||
@import "compass/utilities/general/hacks";
|
||||
@import "images";
|
||||
|
||||
@warn "The css3 gradient module is deprecated. For more information see: http://beta.compass-style.org/help/tutorials/upgrading/css3-v2/#gradients";
|
||||
|
||||
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
|
||||
//
|
||||
// Examples:
|
||||
@ -34,7 +32,9 @@
|
||||
// - Safari
|
||||
// - Firefox 3.6
|
||||
// - Opera
|
||||
|
||||
//
|
||||
// @deprecated Use the linear-gradient() function in conjunction with a
|
||||
// property mixin like `background-image`.
|
||||
@mixin linear-gradient($color-stops, $start: false, $image: false) {
|
||||
@if $image {
|
||||
@if $start {
|
||||
@ -77,7 +77,9 @@
|
||||
// - Safari
|
||||
// - Firefox 3.6
|
||||
// - Opera
|
||||
|
||||
//
|
||||
// @deprecated Use the radial-gradient() function in conjunction with a
|
||||
// property mixin like `background-image`.
|
||||
@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
|
||||
@if $image {
|
||||
@if $center-position {
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
@import "shared";
|
||||
|
||||
// These defaults make the arguments optional for this mixin
|
||||
// If you like, set different defaults in your project
|
||||
|
||||
$default-text-shadow-color: #aaa !default;
|
||||
$default-text-shadow-h-offset: 0px !default;
|
||||
$default-text-shadow-v-offset: 0px !default;
|
||||
$default-text-shadow-blur: 1px !default;
|
||||
|
||||
// Provides CSS text shadows.
|
||||
// Arguments are color, horizontal offset, vertical offset, and blur
|
||||
@mixin single-text-shadow(
|
||||
$color: $default-text-shadow-color,
|
||||
$hoff: $default-text-shadow-h-offset,
|
||||
$voff: $default-text-shadow-v-offset,
|
||||
$blur: $default-text-shadow-blur
|
||||
) {
|
||||
// XXX I'm surprised we don't need experimental support for this property.
|
||||
@if $color == none {
|
||||
text-shadow: none;
|
||||
} @else {
|
||||
text-shadow: $color $hoff $voff $blur;
|
||||
}
|
||||
}
|
||||
|
||||
// Provides cross-browser text shadows when one or more shadows are needed.
|
||||
@mixin multiple-text-shadows(
|
||||
$shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
// Ugh. Sass needs variable argument support.
|
||||
$shadow : $shadow-1;
|
||||
@if $shadow-2 { $shadow: $shadow, $shadow-2; }
|
||||
@if $shadow-3 { $shadow: $shadow, $shadow-3; }
|
||||
@if $shadow-4 { $shadow: $shadow, $shadow-4; }
|
||||
@if $shadow-5 { $shadow: $shadow, $shadow-5; }
|
||||
@if $shadow-6 { $shadow: $shadow, $shadow-6; }
|
||||
@if $shadow-7 { $shadow: $shadow, $shadow-7; }
|
||||
@if $shadow-8 { $shadow: $shadow, $shadow-8; }
|
||||
@if $shadow-9 { $shadow: $shadow, $shadow-9; }
|
||||
@if $shadow-10 { $shadow: $shadow, $shadow-10; }
|
||||
// Anticlimactic, we know.
|
||||
text-shadow: $shadow
|
||||
}
|
||||
|
||||
@mixin text-shadow(
|
||||
$shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
@include multiple-text-shadows(
|
||||
$shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10
|
||||
);
|
||||
}
|
||||
@ -4,13 +4,13 @@
|
||||
// If you like, set different defaults in your project
|
||||
|
||||
$default-text-shadow-color: #aaa !default;
|
||||
$default-text-shadow-h-offset: 1px !default;
|
||||
$default-text-shadow-v-offset: 1px !default;
|
||||
$default-text-shadow-h-offset: 0px !default;
|
||||
$default-text-shadow-v-offset: 0px !default;
|
||||
$default-text-shadow-blur: 1px !default;
|
||||
|
||||
// Provides CSS text shadows.
|
||||
// Arguments are color, horizontal offset, vertical offset, and blur
|
||||
@mixin text-shadow(
|
||||
@mixin single-text-shadow(
|
||||
$color: $default-text-shadow-color,
|
||||
$hoff: $default-text-shadow-h-offset,
|
||||
$voff: $default-text-shadow-v-offset,
|
||||
@ -23,3 +23,57 @@ $default-text-shadow-blur: 1px !default;
|
||||
text-shadow: $color $hoff $voff $blur;
|
||||
}
|
||||
}
|
||||
|
||||
// Provides cross-browser text shadows when one or more shadows are needed.
|
||||
@mixin multiple-text-shadows(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
|
||||
}
|
||||
text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
}
|
||||
|
||||
@mixin text-shadow(
|
||||
$shadow-1 : default,
|
||||
$shadow-2 : false,
|
||||
$shadow-3 : false,
|
||||
$shadow-4 : false,
|
||||
$shadow-5 : false,
|
||||
$shadow-6 : false,
|
||||
$shadow-7 : false,
|
||||
$shadow-8 : false,
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
|
||||
$legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and ($shadow-2 or $shadow-3 or $shadow-4) and not($shadow-5 or $shadow-6 or $shadow-7 or $shadow-8 or $shadow-9 or $shadow-10);
|
||||
@if $legacy {
|
||||
@warn "Passing separate arguments for a single shadow to text-shadow is deprecated. " +
|
||||
"Pass the values as a single space-separated list, or use the single-text-shadow mixin. " +
|
||||
"See http://beta.compass-style.org/help/tutorials/upgrading/css3-v2/ for more info.";
|
||||
@include single-text-shadow(
|
||||
$shadow-1,
|
||||
if($shadow-2, $shadow-2, $default-text-shadow-h-offset),
|
||||
if($shadow-3, $shadow-3, $default-text-shadow-v-offset),
|
||||
if($shadow-4, $shadow-4, $default-text-shadow-blur)
|
||||
);
|
||||
} @else {
|
||||
@include multiple-text-shadows(
|
||||
$shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
@import "shared";
|
||||
|
||||
@warn "This version of the transform module has been deprecated and will be removed.";
|
||||
|
||||
// CSS Transform and Transform-Origin
|
||||
|
||||
// Apply a transform sent as a complete string.
|
||||
|
||||
@mixin apply-transform($transform) {
|
||||
@include experimental(transform, $transform,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Apply a transform-origin sent as a complete string.
|
||||
|
||||
@mixin apply-origin($origin) {
|
||||
@include experimental(transform-origin, $origin,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// transform-origin requires x and y coordinates
|
||||
//
|
||||
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
||||
|
||||
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
||||
@if $originx or $originy {
|
||||
@if $originy {
|
||||
@include apply-origin($originx or 50% $originy);
|
||||
} @else {
|
||||
@include apply-origin($originx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A full transform mixin with everything you could want
|
||||
//
|
||||
// * including origin adjustments if you want them
|
||||
// * 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);
|
||||
}
|
||||
|
||||
// Transform Partials
|
||||
//
|
||||
// These work well on their own, but they don't add to each other, they override.
|
||||
// Use them with extra origin args, or along side +transform-origin
|
||||
|
||||
// Adjust only the scale, with optional origin coordinates
|
||||
|
||||
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
||||
@include apply-transform(scale($scale));
|
||||
@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);
|
||||
}
|
||||
|
||||
// Adjust only the translation
|
||||
|
||||
@mixin translate($transx: 0, $transy: 0) {
|
||||
@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);
|
||||
}
|
||||
@ -1,584 +0,0 @@
|
||||
@import "shared";
|
||||
|
||||
// @doc off
|
||||
// Note ----------------------------------------------------------------------
|
||||
// Safari is the only browser that currently supports 3D transforms.
|
||||
// Because of that it can be important to control whether a given 2D transform
|
||||
// uses the full range of experimental browser prefixes, or only the 3D list.
|
||||
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
// and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
// 2D: Mozilla, Webkit, Opera, Official
|
||||
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
|
||||
|
||||
// Available Transforms ------------------------------------------------------
|
||||
// - Scale (2d and 3d)
|
||||
// - Rotate (2d and 3d)
|
||||
// - Translate (2d and 3d)
|
||||
// - Skew (2d only)
|
||||
|
||||
// Transform Parameters ------------------------------------------------------
|
||||
// - Transform Origin (2d and 3d)
|
||||
// - Perspective (3d)
|
||||
// - Perspective Origin (3d)
|
||||
// - Transform Style (3d)
|
||||
// - Backface Visibility (3d)
|
||||
|
||||
// Mixins --------------------------------------------------------------------
|
||||
// transform-origin
|
||||
// - shortcuts: transform-origin2d, transform-origin3d
|
||||
// - helpers: apply-origin
|
||||
// transform
|
||||
// - shortcuts: transform2d, transform3d
|
||||
// - helpers: simple-transform, create-transform
|
||||
// perspective
|
||||
// - helpers: perspective-origin
|
||||
// transform-style
|
||||
// backface-visibility
|
||||
// scale
|
||||
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
||||
// rotate
|
||||
// - shortcuts: rotateX, rotateY, rotate3d
|
||||
// translate
|
||||
// - shortcuts: translateX, translateY, translateZ, translate3d
|
||||
// skew
|
||||
// - shortcuts: skewX, skewY
|
||||
|
||||
// Defaults ------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Transform Origin
|
||||
$default-origin-x : 50% !default;
|
||||
$default-origin-y : 50% !default;
|
||||
$default-origin-z : 50% !default;
|
||||
|
||||
// Scale
|
||||
$default-scale-x : 1.25 !default;
|
||||
$default-scale-y : $default-scale-x !default;
|
||||
$default-scale-z : $default-scale-x !default;
|
||||
|
||||
// Rotate
|
||||
$default-rotate : 45deg !default;
|
||||
|
||||
// Rotate3d
|
||||
$default-vector-x : 1 !default;
|
||||
$default-vector-y : 1 !default;
|
||||
$default-vector-z : 1 !default;
|
||||
|
||||
// Translate
|
||||
$default-translate-x : 1em !default;
|
||||
$default-translate-y : $default-translate-x !default;
|
||||
$default-translate-z : $default-translate-x !default;
|
||||
|
||||
// Skew
|
||||
$default-skew-x : 5deg !default;
|
||||
$default-skew-y : 5deg !default;
|
||||
|
||||
|
||||
// **Transform-origin**
|
||||
// Transform-origin sent as a complete string
|
||||
//
|
||||
// @include apply-origin( origin [, 3D-only ] )
|
||||
//
|
||||
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
||||
// in percentages, absolute (px, cm, in, em etc..) or relative
|
||||
// (left, top, right, bottom, center) units
|
||||
//
|
||||
// @param only3d Set this to true to only apply this
|
||||
// mixin where browsers have 3D support.
|
||||
@mixin apply-origin($origin, $only3d) {
|
||||
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
||||
@if $only3d {
|
||||
@include experimental(transform-origin, $origin,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
} @else {
|
||||
@include experimental(transform-origin, $origin,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Transform-origin sent as individual arguments:
|
||||
//
|
||||
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
||||
//
|
||||
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
||||
//
|
||||
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
||||
@mixin transform-origin(
|
||||
$origin-x: $default-origin-x,
|
||||
$origin-y: $default-origin-y,
|
||||
$origin-z: false,
|
||||
$only3d: if($origin-z)
|
||||
) {
|
||||
$origin: unquote('');
|
||||
@if $origin-x or $origin-y or $origin-z {
|
||||
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
||||
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
||||
@if $origin-z { $origin: $origin $origin-z; }
|
||||
@include apply-origin($origin, $only3d);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Transform sent as a complete string:
|
||||
//
|
||||
// @include transform( transforms [, 3D-only ] )
|
||||
//
|
||||
// where 'transforms' is a space separated list of all the transforms to be applied
|
||||
@mixin transform(
|
||||
$transform,
|
||||
$only3d: false
|
||||
) {
|
||||
@if $only3d {
|
||||
@include experimental(transform, $transform,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
} @else {
|
||||
@include experimental(transform, $transform,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Shortcut to target all browsers with 2D transform support
|
||||
@mixin transform2d($trans) {
|
||||
@include transform($trans, false);
|
||||
}
|
||||
|
||||
// Shortcut to target only browsers with 3D transform support
|
||||
@mixin transform3d($trans) {
|
||||
@include transform($trans, true);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// 3D Parameters -------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Set the perspective of 3D transforms on the children of an element:
|
||||
//
|
||||
// @include perspective( perspective )
|
||||
//
|
||||
// where 'perspective' is a uniless number representing the depth of the z-axis
|
||||
// the higher the perspective, the more exagerated the foreshortening.
|
||||
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
||||
@mixin perspective($p) {
|
||||
@include experimental(perspective, $p,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Set the origin position for the perspective
|
||||
//
|
||||
// @include perspective-origin(origin-x [origin-y])
|
||||
//
|
||||
// where the two arguments represent x/y coordinates
|
||||
@mixin perspective-origin($origin: 50%) {
|
||||
@include experimental(perspective-origin, $origin,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Determine whether a 3D objects children also live in the given 3D space
|
||||
//
|
||||
// @include transform-style( [ style ] )
|
||||
//
|
||||
// where `style` can be either `flat` or `preserves-3d`
|
||||
// browsers default to `flat`, mixin defaults to `preserves-3d`
|
||||
@mixin transform-style($style: preserves-3d) {
|
||||
@include experimental(perspective-origin, $style,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Determine the visibility of an element when it's back is turned
|
||||
//
|
||||
// @include backface-visibility( [ visibility ] )
|
||||
//
|
||||
// where `visibility` can be either `visible` or `hidden`
|
||||
// browsers default to visible, mixin defaults to hidden
|
||||
@mixin backface-visibility($visibility: hidden) {
|
||||
@include experimental(backface-visibility, $visibility,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Transform Partials --------------------------------------------------------
|
||||
// These work well on their own, but they don't add to each other, they override.
|
||||
// Use along with transform parameter mixins to adjust origin, perspective and style
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
// Scale ---------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Scale an object along the x and y axis:
|
||||
//
|
||||
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
||||
// and perspective, which works the same as the stand-alone perspective property/mixin
|
||||
// but applies to the individual element (multiplied with any parent perspective)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scale($scale-x, $scale-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the x axis
|
||||
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleX(
|
||||
$scale: $default-scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleX($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the y axis
|
||||
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleY(
|
||||
$scale: $default-scale-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleY($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the z axis
|
||||
// @include scaleZ( [ scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleZ(
|
||||
$scale: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scaleZ($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Scale and object along all three axis
|
||||
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale3d(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $default-scale-y,
|
||||
$scale-z: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Rotate --------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Rotate an object around the z axis (2D)
|
||||
// @include rotate( [ rotation, perspective, 3D-only ] )
|
||||
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: rotate($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// A longcut for 'rotate' in case you forget that 'z' is implied
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateZ(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
@include rotate($rotate, $perspective, $only3d);
|
||||
}
|
||||
|
||||
// Rotate an object around the x axis (3D)
|
||||
// @include rotateX( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateX(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateX($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around the y axis (3D)
|
||||
// @include rotate( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateY(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateY($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around an arbitrary axis (3D)
|
||||
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
||||
// where the 'vector-' arguments accept unitless numbers
|
||||
// these numbers are not important on their own, but in relation to one another
|
||||
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate3d(
|
||||
$vector-x: $default-vector-x,
|
||||
$vector-y: $default-vector-y,
|
||||
$vector-z: $default-vector-z,
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Translate -----------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Move an object along the x or y axis (2D)
|
||||
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
||||
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translate($translate-x, $translate-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the x axis (2D)
|
||||
// @include translate( [ translate-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateX(
|
||||
$trans-x: $default-translate-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateX($trans-x);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the y axis (2D)
|
||||
// @include translate( [ translate-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateY(
|
||||
$trans-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateY($trans-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the z axis (3D)
|
||||
// @include translate( [ translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateZ(
|
||||
$trans-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translateZ($trans-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Move an object along the x, y and z axis (3D)
|
||||
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate3d(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$translate-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Skew ----------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Skew an element:
|
||||
//
|
||||
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
||||
//
|
||||
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skew(
|
||||
$skew-x: $default-skew-x,
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skew($skew-x, $skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the x axiz
|
||||
//
|
||||
// @include skew( [ skew-x, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewX(
|
||||
$skew-x: $default-skew-x,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewX($skew-x);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the y axis
|
||||
//
|
||||
// @include skew( [ skew-y, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewY(
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewY($skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// Full transform mixins
|
||||
// For settings any combination of transforms as arguments
|
||||
// These are complex and not highly recommended for daily use
|
||||
// They are mainly here for backwards-compatability purposes
|
||||
//
|
||||
// * they include origin adjustments
|
||||
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin create-transform(
|
||||
$perspective: false,
|
||||
$scale-x: false,
|
||||
$scale-y: false,
|
||||
$scale-z: false,
|
||||
$rotate-x: false,
|
||||
$rotate-y: false,
|
||||
$rotate-z: false,
|
||||
$rotate3d: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$trans-z: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false,
|
||||
$origin-z: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: unquote("");
|
||||
|
||||
// perspective
|
||||
@if $perspective { $trans: perspective($perspective) ; }
|
||||
|
||||
// scale
|
||||
@if $scale-x and $scale-y {
|
||||
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
||||
@else { $trans: $trans scale($scale-x, $scale-y); }
|
||||
} @else {
|
||||
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
||||
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
||||
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
||||
}
|
||||
|
||||
// rotate
|
||||
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
||||
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
||||
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
||||
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
||||
|
||||
// translate
|
||||
@if $trans-x and $trans-y {
|
||||
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
||||
@else { $trans: $trans translate($trans-x, $trans-y); }
|
||||
} @else {
|
||||
@if $trans-x { $trans: $trans translateX($trans-x); }
|
||||
@if $trans-y { $trans: $trans translateY($trans-y); }
|
||||
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
||||
}
|
||||
|
||||
// skew
|
||||
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
||||
@else {
|
||||
@if $skew-x { $trans: $trans skewX($skew-x); }
|
||||
@if $skew-y { $trans: $trans skewY($skew-y); }
|
||||
}
|
||||
|
||||
// apply it!
|
||||
@include transform($trans, $only3d);
|
||||
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// A simplified set of options
|
||||
// backwards-compatible with the previous version of the 'transform' mixin
|
||||
@mixin simple-transform(
|
||||
$scale: false,
|
||||
$rotate: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false
|
||||
) {
|
||||
@include create-transform(
|
||||
false,
|
||||
$scale, $scale, false,
|
||||
false, false, $rotate, false,
|
||||
$trans-x, $trans-y, false,
|
||||
$skew-x, $skew-y,
|
||||
$origin-x, $origin-y, false,
|
||||
false
|
||||
);
|
||||
}
|
||||
@ -1,85 +1,584 @@
|
||||
@import "shared";
|
||||
|
||||
// CSS Transform and Transform-Origin
|
||||
// @doc off
|
||||
// Note ----------------------------------------------------------------------
|
||||
// Safari is the only browser that currently supports 3D transforms.
|
||||
// Because of that it can be important to control whether a given 2D transform
|
||||
// uses the full range of experimental browser prefixes, or only the 3D list.
|
||||
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
// and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
// 2D: Mozilla, Webkit, Opera, Official
|
||||
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
|
||||
|
||||
// Apply a transform sent as a complete string.
|
||||
// Available Transforms ------------------------------------------------------
|
||||
// - Scale (2d and 3d)
|
||||
// - Rotate (2d and 3d)
|
||||
// - Translate (2d and 3d)
|
||||
// - Skew (2d only)
|
||||
|
||||
@mixin apply-transform($transform) {
|
||||
@include experimental(transform, $transform,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
// Transform Parameters ------------------------------------------------------
|
||||
// - Transform Origin (2d and 3d)
|
||||
// - Perspective (3d)
|
||||
// - Perspective Origin (3d)
|
||||
// - Transform Style (3d)
|
||||
// - Backface Visibility (3d)
|
||||
|
||||
// Apply a transform-origin sent as a complete string.
|
||||
// Mixins --------------------------------------------------------------------
|
||||
// transform-origin
|
||||
// - shortcuts: transform-origin2d, transform-origin3d
|
||||
// - helpers: apply-origin
|
||||
// transform
|
||||
// - shortcuts: transform2d, transform3d
|
||||
// - helpers: simple-transform, create-transform
|
||||
// perspective
|
||||
// - helpers: perspective-origin
|
||||
// transform-style
|
||||
// backface-visibility
|
||||
// scale
|
||||
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
||||
// rotate
|
||||
// - shortcuts: rotateX, rotateY, rotate3d
|
||||
// translate
|
||||
// - shortcuts: translateX, translateY, translateZ, translate3d
|
||||
// skew
|
||||
// - shortcuts: skewX, skewY
|
||||
|
||||
@mixin apply-origin($origin) {
|
||||
@include experimental(transform-origin, $origin,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
// Defaults ------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// transform-origin requires x and y coordinates
|
||||
// Transform Origin
|
||||
$default-origin-x : 50% !default;
|
||||
$default-origin-y : 50% !default;
|
||||
$default-origin-z : 50% !default;
|
||||
|
||||
// Scale
|
||||
$default-scale-x : 1.25 !default;
|
||||
$default-scale-y : $default-scale-x !default;
|
||||
$default-scale-z : $default-scale-x !default;
|
||||
|
||||
// Rotate
|
||||
$default-rotate : 45deg !default;
|
||||
|
||||
// Rotate3d
|
||||
$default-vector-x : 1 !default;
|
||||
$default-vector-y : 1 !default;
|
||||
$default-vector-z : 1 !default;
|
||||
|
||||
// Translate
|
||||
$default-translate-x : 1em !default;
|
||||
$default-translate-y : $default-translate-x !default;
|
||||
$default-translate-z : $default-translate-x !default;
|
||||
|
||||
// Skew
|
||||
$default-skew-x : 5deg !default;
|
||||
$default-skew-y : 5deg !default;
|
||||
|
||||
|
||||
// **Transform-origin**
|
||||
// Transform-origin sent as a complete string
|
||||
//
|
||||
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
||||
|
||||
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
||||
@if $originx or $originy {
|
||||
@if $originy {
|
||||
@include apply-origin($originx or 50% $originy);
|
||||
} @else {
|
||||
@include apply-origin($originx);
|
||||
}
|
||||
// @include apply-origin( origin [, 3D-only ] )
|
||||
//
|
||||
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
||||
// in percentages, absolute (px, cm, in, em etc..) or relative
|
||||
// (left, top, right, bottom, center) units
|
||||
//
|
||||
// @param only3d Set this to true to only apply this
|
||||
// mixin where browsers have 3D support.
|
||||
@mixin apply-origin($origin, $only3d) {
|
||||
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
||||
@if $only3d {
|
||||
@include experimental(transform-origin, $origin,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
} @else {
|
||||
@include experimental(transform-origin, $origin,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A full transform mixin with everything you could want
|
||||
// Transform-origin sent as individual arguments:
|
||||
//
|
||||
// * including origin adjustments if you want them
|
||||
// * 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
|
||||
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
||||
//
|
||||
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
||||
//
|
||||
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
||||
@mixin transform-origin(
|
||||
$origin-x: $default-origin-x,
|
||||
$origin-y: $default-origin-y,
|
||||
$origin-z: false,
|
||||
$only3d: if($origin-z)
|
||||
) {
|
||||
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
||||
@include apply-transform($transform);
|
||||
@include transform-origin($originx, $originy);
|
||||
$origin: unquote('');
|
||||
@if $origin-x or $origin-y or $origin-z {
|
||||
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
||||
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
||||
@if $origin-z { $origin: $origin $origin-z; }
|
||||
@include apply-origin($origin, $only3d);
|
||||
}
|
||||
}
|
||||
|
||||
// Transform Partials
|
||||
|
||||
// Transform sent as a complete string:
|
||||
//
|
||||
// @include transform( transforms [, 3D-only ] )
|
||||
//
|
||||
// where 'transforms' is a space separated list of all the transforms to be applied
|
||||
@mixin transform(
|
||||
$transform,
|
||||
$only3d: false
|
||||
) {
|
||||
@if $only3d {
|
||||
@include experimental(transform, $transform,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
} @else {
|
||||
@include experimental(transform, $transform,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Shortcut to target all browsers with 2D transform support
|
||||
@mixin transform2d($trans) {
|
||||
@include transform($trans, false);
|
||||
}
|
||||
|
||||
// Shortcut to target only browsers with 3D transform support
|
||||
@mixin transform3d($trans) {
|
||||
@include transform($trans, true);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// 3D Parameters -------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Set the perspective of 3D transforms on the children of an element:
|
||||
//
|
||||
// @include perspective( perspective )
|
||||
//
|
||||
// where 'perspective' is a uniless number representing the depth of the z-axis
|
||||
// the higher the perspective, the more exagerated the foreshortening.
|
||||
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
||||
@mixin perspective($p) {
|
||||
@include experimental(perspective, $p,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Set the origin position for the perspective
|
||||
//
|
||||
// @include perspective-origin(origin-x [origin-y])
|
||||
//
|
||||
// where the two arguments represent x/y coordinates
|
||||
@mixin perspective-origin($origin: 50%) {
|
||||
@include experimental(perspective-origin, $origin,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Determine whether a 3D objects children also live in the given 3D space
|
||||
//
|
||||
// @include transform-style( [ style ] )
|
||||
//
|
||||
// where `style` can be either `flat` or `preserves-3d`
|
||||
// browsers default to `flat`, mixin defaults to `preserves-3d`
|
||||
@mixin transform-style($style: preserves-3d) {
|
||||
@include experimental(perspective-origin, $style,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Determine the visibility of an element when it's back is turned
|
||||
//
|
||||
// @include backface-visibility( [ visibility ] )
|
||||
//
|
||||
// where `visibility` can be either `visible` or `hidden`
|
||||
// browsers default to visible, mixin defaults to hidden
|
||||
@mixin backface-visibility($visibility: hidden) {
|
||||
@include experimental(backface-visibility, $visibility,
|
||||
not -moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Transform Partials --------------------------------------------------------
|
||||
// These work well on their own, but they don't add to each other, they override.
|
||||
// Use them with extra origin args, or along side +transform-origin
|
||||
// Use along with transform parameter mixins to adjust origin, perspective and style
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Adjust only the scale, with optional origin coordinates
|
||||
|
||||
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
||||
@include apply-transform(scale($scale));
|
||||
@include transform-origin($originx, $originy);
|
||||
// Scale ---------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Scale an object along the x and y axis:
|
||||
//
|
||||
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
||||
// and perspective, which works the same as the stand-alone perspective property/mixin
|
||||
// but applies to the individual element (multiplied with any parent perspective)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scale($scale-x, $scale-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// 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);
|
||||
// Scale an object along the x axis
|
||||
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleX(
|
||||
$scale: $default-scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleX($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Adjust only the translation
|
||||
|
||||
@mixin translate($transx: 0, $transy: 0) {
|
||||
@include apply-transform(translate($transx, $transy));
|
||||
// Scale an object along the y axis
|
||||
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleY(
|
||||
$scale: $default-scale-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleY($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// 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);
|
||||
// Scale an object along the z axis
|
||||
// @include scaleZ( [ scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleZ(
|
||||
$scale: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scaleZ($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Scale and object along all three axis
|
||||
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale3d(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $default-scale-y,
|
||||
$scale-z: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Rotate --------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Rotate an object around the z axis (2D)
|
||||
// @include rotate( [ rotation, perspective, 3D-only ] )
|
||||
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: rotate($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// A longcut for 'rotate' in case you forget that 'z' is implied
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateZ(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
@include rotate($rotate, $perspective, $only3d);
|
||||
}
|
||||
|
||||
// Rotate an object around the x axis (3D)
|
||||
// @include rotateX( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateX(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateX($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around the y axis (3D)
|
||||
// @include rotate( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateY(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateY($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around an arbitrary axis (3D)
|
||||
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
||||
// where the 'vector-' arguments accept unitless numbers
|
||||
// these numbers are not important on their own, but in relation to one another
|
||||
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate3d(
|
||||
$vector-x: $default-vector-x,
|
||||
$vector-y: $default-vector-y,
|
||||
$vector-z: $default-vector-z,
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Translate -----------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Move an object along the x or y axis (2D)
|
||||
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
||||
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translate($translate-x, $translate-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the x axis (2D)
|
||||
// @include translate( [ translate-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateX(
|
||||
$trans-x: $default-translate-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateX($trans-x);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the y axis (2D)
|
||||
// @include translate( [ translate-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateY(
|
||||
$trans-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateY($trans-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the z axis (3D)
|
||||
// @include translate( [ translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateZ(
|
||||
$trans-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translateZ($trans-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Move an object along the x, y and z axis (3D)
|
||||
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate3d(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$translate-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Skew ----------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Skew an element:
|
||||
//
|
||||
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
||||
//
|
||||
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skew(
|
||||
$skew-x: $default-skew-x,
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skew($skew-x, $skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the x axiz
|
||||
//
|
||||
// @include skew( [ skew-x, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewX(
|
||||
$skew-x: $default-skew-x,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewX($skew-x);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the y axis
|
||||
//
|
||||
// @include skew( [ skew-y, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewY(
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewY($skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// Full transform mixins
|
||||
// For settings any combination of transforms as arguments
|
||||
// These are complex and not highly recommended for daily use
|
||||
// They are mainly here for backwards-compatability purposes
|
||||
//
|
||||
// * they include origin adjustments
|
||||
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin create-transform(
|
||||
$perspective: false,
|
||||
$scale-x: false,
|
||||
$scale-y: false,
|
||||
$scale-z: false,
|
||||
$rotate-x: false,
|
||||
$rotate-y: false,
|
||||
$rotate-z: false,
|
||||
$rotate3d: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$trans-z: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false,
|
||||
$origin-z: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: unquote("");
|
||||
|
||||
// perspective
|
||||
@if $perspective { $trans: perspective($perspective) ; }
|
||||
|
||||
// scale
|
||||
@if $scale-x and $scale-y {
|
||||
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
||||
@else { $trans: $trans scale($scale-x, $scale-y); }
|
||||
} @else {
|
||||
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
||||
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
||||
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
||||
}
|
||||
|
||||
// rotate
|
||||
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
||||
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
||||
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
||||
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
||||
|
||||
// translate
|
||||
@if $trans-x and $trans-y {
|
||||
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
||||
@else { $trans: $trans translate($trans-x, $trans-y); }
|
||||
} @else {
|
||||
@if $trans-x { $trans: $trans translateX($trans-x); }
|
||||
@if $trans-y { $trans: $trans translateY($trans-y); }
|
||||
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
||||
}
|
||||
|
||||
// skew
|
||||
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
||||
@else {
|
||||
@if $skew-x { $trans: $trans skewX($skew-x); }
|
||||
@if $skew-y { $trans: $trans skewY($skew-y); }
|
||||
}
|
||||
|
||||
// apply it!
|
||||
@include transform($trans, $only3d);
|
||||
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// A simplified set of options
|
||||
// backwards-compatible with the previous version of the 'transform' mixin
|
||||
@mixin simple-transform(
|
||||
$scale: false,
|
||||
$rotate: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false
|
||||
) {
|
||||
@include create-transform(
|
||||
false,
|
||||
$scale, $scale, false,
|
||||
false, false, $rotate, false,
|
||||
$trans-x, $trans-y, false,
|
||||
$skew-x, $skew-y,
|
||||
$origin-x, $origin-y, false,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@import "border-radius";
|
||||
@import "inline-block";
|
||||
@import "opacity";
|
||||
@import "box-shadow";
|
||||
@import "text-shadow";
|
||||
@import "columns";
|
||||
@import "box-sizing";
|
||||
@import "box";
|
||||
@import "images";
|
||||
@import "gradient";
|
||||
@import "background-clip";
|
||||
@import "background-origin";
|
||||
@import "background-size";
|
||||
@import "font-face";
|
||||
@import "transform";
|
||||
@import "transition";
|
||||
@ -1,15 +0,0 @@
|
||||
@import "border-radius";
|
||||
@import "inline-block";
|
||||
@import "opacity";
|
||||
@import "box-shadow-v2";
|
||||
@import "text-shadow-v2";
|
||||
@import "columns";
|
||||
@import "box-sizing";
|
||||
@import "box";
|
||||
@import "images";
|
||||
@import "background-clip";
|
||||
@import "background-origin";
|
||||
@import "background-size";
|
||||
@import "font-face";
|
||||
@import "transform-v2";
|
||||
@import "transition";
|
||||
@ -270,7 +270,6 @@ module Compass::SassExtensions::Functions::GradientSupport
|
||||
a.options = options
|
||||
if a.is_a?(Sass::Script::List)
|
||||
Sass::Script::List.new(a.value.map do |v|
|
||||
v.options = options
|
||||
v.respond_to?(:to_#{prefix}) ? v.to_#{prefix} : v
|
||||
end, a.separator)
|
||||
else
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
list-style-image: url('/images/4x6.png?busted=true'); }
|
||||
|
||||
.shorthand-list-image-plain {
|
||||
list-style-image: outside url('/images/4x6.png?busted=true'); }
|
||||
list-style-image: outside url("/images/4x6.png?busted=true"); }
|
||||
|
||||
.direct-list-image-with-gradient {
|
||||
list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px);
|
||||
|
||||
14
test/fixtures/stylesheets/compass/css/text_shadow.css
vendored
Normal file
14
test/fixtures/stylesheets/compass/css/text_shadow.css
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
.legacy-text-shadow {
|
||||
text-shadow: #777777 5px 5px 10px; }
|
||||
|
||||
.single-text-shadow {
|
||||
text-shadow: #aaaaaa 0px 0px 1px; }
|
||||
|
||||
.default-text-shadow {
|
||||
text-shadow: #aaaaaa 0px 0px 1px; }
|
||||
|
||||
.multiple-text-shadows-with-default {
|
||||
text-shadow: #aaaaaa 0px 0px 1px, 2px 2px 5px #222222; }
|
||||
|
||||
.multiple-text-shadows {
|
||||
text-shadow: 4px 4px 10px #444444, 2px 2px 5px #222222; }
|
||||
@ -1,4 +1,4 @@
|
||||
@import compass/css3
|
||||
@import compass/css3/box
|
||||
|
||||
.hbox
|
||||
+display-box
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "compass/css3/box-shadow-v2";
|
||||
@import "compass/css3/box-shadow";
|
||||
|
||||
.box-shadow { @include box-shadow(default, 2px 2px 5px #222);}
|
||||
.single-box-shadow { @include single-box-shadow;}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import compass/css3
|
||||
@import compass/css3/images, compass/css3/gradient
|
||||
|
||||
$experimental-support-for-svg: true
|
||||
.bg-simple-image
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "compass/css3/pie";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/pie";
|
||||
|
||||
|
||||
// There are two approaches to creating PIE elements
|
||||
|
||||
7
test/fixtures/stylesheets/compass/sass/text_shadow.scss
vendored
Normal file
7
test/fixtures/stylesheets/compass/sass/text_shadow.scss
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
@import "compass/css3/text-shadow";
|
||||
|
||||
.legacy-text-shadow { @include text-shadow(#777, 5px, 5px, 10px); }
|
||||
.single-text-shadow { @include single-text-shadow;}
|
||||
.default-text-shadow { @include text-shadow;}
|
||||
.multiple-text-shadows-with-default { @include multiple-text-shadows(default, 2px 2px 5px #222);}
|
||||
.multiple-text-shadows { @include multiple-text-shadows(4px 4px 10px #444, 2px 2px 5px #222);}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "compass/css3/transform-v2";
|
||||
@import "compass/css3/transform";
|
||||
|
||||
.apply-origin-2d { @include apply-origin(2px 5%, false); }
|
||||
.apply-origin-3d { @include apply-origin(2px 5% 2in, true); }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user