simple-compass 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +2 -0
- data/.rspec +1 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +26 -0
- data/Rakefile +8 -0
- data/lib/simple-compass.rb +17 -0
- data/lib/simple-compass/sass/functions/display.rb +27 -0
- data/lib/simple-compass/sass/functions/lists.rb +101 -0
- data/lib/simple-compass/sass/functions/selectors.rb +64 -0
- data/lib/simple-compass/sass/functions/sprites.rb +218 -0
- data/lib/simple-compass/version.rb +3 -0
- data/sass/compass.scss +1 -0
- data/sass/compass/_css3.scss +20 -0
- data/sass/compass/_layout.scss +3 -0
- data/sass/compass/_reset-legacy.scss +3 -0
- data/sass/compass/_reset.scss +3 -0
- data/sass/compass/_support.scss +40 -0
- data/sass/compass/_typography.scss +4 -0
- data/sass/compass/_utilities.scss +9 -0
- data/sass/compass/css3/_appearance.scss +17 -0
- data/sass/compass/css3/_background-clip.scss +43 -0
- data/sass/compass/css3/_background-origin.scss +42 -0
- data/sass/compass/css3/_background-size.scss +26 -0
- data/sass/compass/css3/_border-radius.scss +130 -0
- data/sass/compass/css3/_box-shadow.scss +76 -0
- data/sass/compass/css3/_box-sizing.scss +13 -0
- data/sass/compass/css3/_box.scss +111 -0
- data/sass/compass/css3/_columns.scss +157 -0
- data/sass/compass/css3/_filter.scss +23 -0
- data/sass/compass/css3/_font-face.scss +48 -0
- data/sass/compass/css3/_hyphenation.scss +77 -0
- data/sass/compass/css3/_images.scss +132 -0
- data/sass/compass/css3/_inline-block.scss +22 -0
- data/sass/compass/css3/_opacity.scss +19 -0
- data/sass/compass/css3/_pie.scss +73 -0
- data/sass/compass/css3/_regions.scss +22 -0
- data/sass/compass/css3/_shared.scss +38 -0
- data/sass/compass/css3/_text-shadow.scss +87 -0
- data/sass/compass/css3/_transform-legacy.scss +87 -0
- data/sass/compass/css3/_transform.scss +598 -0
- data/sass/compass/css3/_transition.scss +221 -0
- data/sass/compass/css3/_user-interface.scss +17 -0
- data/sass/compass/layout/_grid-background.scss +178 -0
- data/sass/compass/layout/_sticky-footer.scss +23 -0
- data/sass/compass/layout/_stretching.scss +24 -0
- data/sass/compass/reset/_utilities-legacy.scss +135 -0
- data/sass/compass/reset/_utilities.scss +142 -0
- data/sass/compass/typography/_links.scss +3 -0
- data/sass/compass/typography/_lists.scss +4 -0
- data/sass/compass/typography/_text.scss +4 -0
- data/sass/compass/typography/_vertical_rhythm.scss +221 -0
- data/sass/compass/typography/links/_hover-link.scss +5 -0
- data/sass/compass/typography/links/_link-colors.scss +28 -0
- data/sass/compass/typography/links/_unstyled-link.scss +7 -0
- data/sass/compass/typography/lists/_bullets.scss +34 -0
- data/sass/compass/typography/lists/_horizontal-list.scss +61 -0
- data/sass/compass/typography/lists/_inline-block-list.scss +50 -0
- data/sass/compass/typography/lists/_inline-list.scss +44 -0
- data/sass/compass/typography/text/_ellipsis.scss +25 -0
- data/sass/compass/typography/text/_force-wrap.scss +12 -0
- data/sass/compass/typography/text/_nowrap.scss +2 -0
- data/sass/compass/typography/text/_replacement.scss +68 -0
- data/sass/compass/utilities/_color.scss +1 -0
- data/sass/compass/utilities/_general.scss +6 -0
- data/sass/compass/utilities/_links.scss +5 -0
- data/sass/compass/utilities/_lists.scss +6 -0
- data/sass/compass/utilities/_print.scss +17 -0
- data/sass/compass/utilities/_sprites.scss +2 -0
- data/sass/compass/utilities/_tables.scss +3 -0
- data/sass/compass/utilities/_text.scss +5 -0
- data/sass/compass/utilities/color/_contrast.scss +28 -0
- data/sass/compass/utilities/general/_clearfix.scss +44 -0
- data/sass/compass/utilities/general/_float.scss +30 -0
- data/sass/compass/utilities/general/_hacks.scss +46 -0
- data/sass/compass/utilities/general/_min.scss +16 -0
- data/sass/compass/utilities/general/_reset.scss +2 -0
- data/sass/compass/utilities/general/_tabs.scss +1 -0
- data/sass/compass/utilities/general/_tag-cloud.scss +18 -0
- data/sass/compass/utilities/links/_hover-link.scss +3 -0
- data/sass/compass/utilities/links/_link-colors.scss +3 -0
- data/sass/compass/utilities/links/_unstyled-link.scss +3 -0
- data/sass/compass/utilities/lists/_bullets.scss +3 -0
- data/sass/compass/utilities/lists/_horizontal-list.scss +3 -0
- data/sass/compass/utilities/lists/_inline-block-list.scss +3 -0
- data/sass/compass/utilities/lists/_inline-list.scss +3 -0
- data/sass/compass/utilities/sprites/_base.scss +66 -0
- data/sass/compass/utilities/sprites/_sprite-img.scss +79 -0
- data/sass/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
- data/sass/compass/utilities/tables/_borders.scss +33 -0
- data/sass/compass/utilities/tables/_scaffolding.scss +9 -0
- data/sass/compass/utilities/text/_ellipsis.scss +3 -0
- data/sass/compass/utilities/text/_nowrap.scss +3 -0
- data/sass/compass/utilities/text/_replacement.scss +3 -0
- data/simple-compass.gemspec +21 -0
- data/spec/fixtures/headings_test.sass +2 -0
- data/spec/fixtures/opacity_test.sass +7 -0
- data/spec/fixtures/reset_test.sass +1 -0
- data/spec/headings_spec.rb +9 -0
- data/spec/opacity_spec.rb +9 -0
- data/spec/reset_spec.rb +9 -0
- data/spec/spec_helper.rb +7 -0
- metadata +169 -0
@@ -0,0 +1,22 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Set `$inline-block-alignment` to `none` or `false` to disable the output
|
4
|
+
// of a vertical-align property in the inline-block mixin.
|
5
|
+
// Or set it to a legal value for `vertical-align` to change the default.
|
6
|
+
$inline-block-alignment: middle !default;
|
7
|
+
|
8
|
+
// Provides a cross-browser method to implement `display: inline-block;`
|
9
|
+
@mixin inline-block($alignment: $inline-block-alignment) {
|
10
|
+
@if $legacy-support-for-mozilla {
|
11
|
+
display: -moz-inline-stack;
|
12
|
+
}
|
13
|
+
display: inline-block;
|
14
|
+
@if $alignment and $alignment != none {
|
15
|
+
vertical-align: $alignment;
|
16
|
+
}
|
17
|
+
@if $legacy-support-for-ie {
|
18
|
+
*vertical-align: auto;
|
19
|
+
zoom: 1;
|
20
|
+
*display: inline;
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
|
4
|
+
//
|
5
|
+
// @param $opacity
|
6
|
+
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
|
7
|
+
|
8
|
+
@mixin opacity($opacity) {
|
9
|
+
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
|
10
|
+
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
|
11
|
+
}
|
12
|
+
opacity: $opacity;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Make an element completely transparent.
|
16
|
+
@mixin transparent { @include opacity(0); }
|
17
|
+
|
18
|
+
// Make an element completely opaque.
|
19
|
+
@mixin opaque { @include opacity(1); }
|
@@ -0,0 +1,73 @@
|
|
1
|
+
$experimental-support-for-pie: true;
|
2
|
+
|
3
|
+
// It is recommended that you use Sass's @extend directive to apply the behavior
|
4
|
+
// to your PIE elements. To assist you, Compass provides this variable.
|
5
|
+
// When set, it will cause the `@include pie` mixin to extend this class.
|
6
|
+
// The class name you provide should **not** include the `.`.
|
7
|
+
$pie-base-class: false !default;
|
8
|
+
|
9
|
+
// The default approach to using PIE.
|
10
|
+
// Can be one of:
|
11
|
+
//
|
12
|
+
// * relative (default)
|
13
|
+
// * z-index
|
14
|
+
// * none
|
15
|
+
$pie-default-approach: relative !default;
|
16
|
+
|
17
|
+
// The location of your PIE behavior file
|
18
|
+
// This should be root-relative to your web server
|
19
|
+
// relative assets don't work. It is recommended that
|
20
|
+
// you set this yourself.
|
21
|
+
$pie-behavior: stylesheet-url("PIE.htc") !default;
|
22
|
+
|
23
|
+
// When using the z-index approach, the
|
24
|
+
// first ancestor of the PIE element at
|
25
|
+
// or before the container's opaque background
|
26
|
+
// should have a z-index set as well to ensure
|
27
|
+
// propert z-index stacking.
|
28
|
+
//
|
29
|
+
// The `$position` argument must be some non-static
|
30
|
+
// value (absolute, relative, etc.)
|
31
|
+
@mixin pie-container($z-index: 0, $position: relative) {
|
32
|
+
z-index: $z-index;
|
33
|
+
position: $position;
|
34
|
+
}
|
35
|
+
|
36
|
+
// PIE elements must have this behavior attached to them.
|
37
|
+
// IE is broken -- it doesn't think of behavior urls as
|
38
|
+
// relative to the stylesheet. It considers them relative
|
39
|
+
// to the webpage. As a result, you cannot reliably use
|
40
|
+
// compass's relative_assets with PIE.
|
41
|
+
//
|
42
|
+
// * `$approach` - one of: relative, z-index, or none
|
43
|
+
// * `$z-index` - when using the z-index approach, this
|
44
|
+
// is the z-index that is applied.
|
45
|
+
@mixin pie-element(
|
46
|
+
$approach: $pie-default-approach,
|
47
|
+
$z-index: 0
|
48
|
+
) {
|
49
|
+
behavior: $pie-behavior;
|
50
|
+
@if $approach == relative {
|
51
|
+
position: relative;
|
52
|
+
}
|
53
|
+
@else if $approach == z-index {
|
54
|
+
z-index: $z-index;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
// a smart mixin that knows to extend or include pie-element according
|
59
|
+
// to your stylesheet's configuration variables.
|
60
|
+
@mixin pie($base-class: $pie-base-class) {
|
61
|
+
@if $base-class {
|
62
|
+
@extend .#{$base-class};
|
63
|
+
}
|
64
|
+
@else {
|
65
|
+
@include pie-element;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
// Watch `$n` levels of ancestors for changes to their class attribute
|
70
|
+
// So that cascading styles will work correctly on the PIE element.
|
71
|
+
@mixin pie-watch-ancestors($n) {
|
72
|
+
-pie-watch-ancestors: $n;
|
73
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
|
4
|
+
//
|
5
|
+
// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
|
6
|
+
//
|
7
|
+
// For a visual explanation, see the diagrams at Chris Coyier's
|
8
|
+
// [CSS-Tricks](http://css-tricks.com/content-folding/)
|
9
|
+
|
10
|
+
@mixin flow-into($target) {
|
11
|
+
$target: unquote($target);
|
12
|
+
@include experimental(flow-into, $target,
|
13
|
+
not -moz, -webkit, not -o, -ms, not -khtml, not official
|
14
|
+
);
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin flow-from($target) {
|
18
|
+
$target: unquote($target);
|
19
|
+
@include experimental(flow-from, $target,
|
20
|
+
not -moz, -webkit, not -o, -ms, not -khtml, not official
|
21
|
+
);
|
22
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@import "compass/support";
|
2
|
+
|
3
|
+
// This mixin provides basic support for CSS3 properties and
|
4
|
+
// their corresponding experimental CSS2 properties when
|
5
|
+
// the implementations are identical except for the property
|
6
|
+
// prefix.
|
7
|
+
@mixin experimental($property, $value,
|
8
|
+
$moz : $experimental-support-for-mozilla,
|
9
|
+
$webkit : $experimental-support-for-webkit,
|
10
|
+
$o : $experimental-support-for-opera,
|
11
|
+
$ms : $experimental-support-for-microsoft,
|
12
|
+
$khtml : $experimental-support-for-khtml,
|
13
|
+
$official : true
|
14
|
+
) {
|
15
|
+
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
|
16
|
+
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
|
17
|
+
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
|
18
|
+
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
|
19
|
+
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
|
20
|
+
@if $official { #{$property} : $value; }
|
21
|
+
}
|
22
|
+
|
23
|
+
// Same as experimental(), but for cases when the property is the same and the value is vendorized
|
24
|
+
@mixin experimental-value($property, $value,
|
25
|
+
$moz : $experimental-support-for-mozilla,
|
26
|
+
$webkit : $experimental-support-for-webkit,
|
27
|
+
$o : $experimental-support-for-opera,
|
28
|
+
$ms : $experimental-support-for-microsoft,
|
29
|
+
$khtml : $experimental-support-for-khtml,
|
30
|
+
$official : true
|
31
|
+
) {
|
32
|
+
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
|
33
|
+
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
|
34
|
+
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
|
35
|
+
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
|
36
|
+
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
|
37
|
+
@if $official { #{$property} : #{$value}; }
|
38
|
+
}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// These defaults make the arguments optional for this mixin
|
4
|
+
// If you like, set different defaults in your project
|
5
|
+
|
6
|
+
$default-text-shadow-color: #aaa !default;
|
7
|
+
$default-text-shadow-h-offset: 0px !default;
|
8
|
+
$default-text-shadow-v-offset: 0px !default;
|
9
|
+
$default-text-shadow-blur: 1px !default;
|
10
|
+
$default-text-shadow-spread: false !default;
|
11
|
+
|
12
|
+
// Provides cross-browser text shadows when one or more shadows are needed.
|
13
|
+
// Each shadow argument should adhere to the standard css3 syntax for the
|
14
|
+
// text-shadow property.
|
15
|
+
//
|
16
|
+
// Note: if any shadow has a spread parameter, this will cause the mixin
|
17
|
+
// to emit the shadow declaration twice, first without the spread,
|
18
|
+
// then with the spread included. This allows you to progressively
|
19
|
+
// enhance the browsers that do support the spread parameter.
|
20
|
+
@mixin text-shadow(
|
21
|
+
$shadow-1 : default,
|
22
|
+
$shadow-2 : false,
|
23
|
+
$shadow-3 : false,
|
24
|
+
$shadow-4 : false,
|
25
|
+
$shadow-5 : false,
|
26
|
+
$shadow-6 : false,
|
27
|
+
$shadow-7 : false,
|
28
|
+
$shadow-8 : false,
|
29
|
+
$shadow-9 : false,
|
30
|
+
$shadow-10: false
|
31
|
+
) {
|
32
|
+
@if $shadow-1 == default {
|
33
|
+
$shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
|
34
|
+
}
|
35
|
+
$shadows-without-spread: join((),(),comma);
|
36
|
+
$shadows: join((),(),comma);
|
37
|
+
$has-spread: false;
|
38
|
+
@each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
|
39
|
+
$shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
|
40
|
+
@if length($shadow) > 4 {
|
41
|
+
$has-spread: true;
|
42
|
+
$shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
|
43
|
+
$shadows: append($shadows, $shadow);
|
44
|
+
} else {
|
45
|
+
$shadows-without-spread: append($shadows-without-spread, $shadow);
|
46
|
+
$shadows: append($shadows, $shadow);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
@if $has-spread {
|
50
|
+
text-shadow: $shadows-without-spread;
|
51
|
+
}
|
52
|
+
text-shadow: $shadows;
|
53
|
+
}
|
54
|
+
|
55
|
+
// Provides a single cross-browser CSS text shadow.
|
56
|
+
//
|
57
|
+
// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
|
58
|
+
// according to the configuration defaults above.
|
59
|
+
@mixin single-text-shadow(
|
60
|
+
$hoff: false,
|
61
|
+
$voff: false,
|
62
|
+
$blur: false,
|
63
|
+
$spread: false,
|
64
|
+
$color: false
|
65
|
+
) {
|
66
|
+
// A lot of people think the color comes first. It doesn't.
|
67
|
+
@if type-of($hoff) == color {
|
68
|
+
$temp-color: $hoff;
|
69
|
+
$hoff: $voff;
|
70
|
+
$voff: $blur;
|
71
|
+
$blur: $spread;
|
72
|
+
$spread: $color;
|
73
|
+
$color: $temp-color;
|
74
|
+
}
|
75
|
+
// Can't rely on default assignment with multiple supported argument orders.
|
76
|
+
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset);
|
77
|
+
$voff: if($voff, $voff, $default-text-shadow-v-offset);
|
78
|
+
$blur: if($blur, $blur, $default-text-shadow-blur );
|
79
|
+
$spread: if($spread, $spread, $default-text-shadow-spread );
|
80
|
+
$color: if($color, $color, $default-text-shadow-color );
|
81
|
+
// We don't need experimental support for this property.
|
82
|
+
@if $color == none or $hoff == none {
|
83
|
+
@include text-shadow(none);
|
84
|
+
} @else {
|
85
|
+
@include text-shadow(compact($hoff $voff $blur $spread $color));
|
86
|
+
}
|
87
|
+
}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
@warn "This version of the transform module has been deprecated and will be removed.";
|
4
|
+
|
5
|
+
// CSS Transform and Transform-Origin
|
6
|
+
|
7
|
+
// Apply a transform sent as a complete string.
|
8
|
+
|
9
|
+
@mixin apply-transform($transform) {
|
10
|
+
@include experimental(transform, $transform,
|
11
|
+
-moz, -webkit, -o, not -ms, not -khtml, official
|
12
|
+
);
|
13
|
+
}
|
14
|
+
|
15
|
+
// Apply a transform-origin sent as a complete string.
|
16
|
+
|
17
|
+
@mixin apply-origin($origin) {
|
18
|
+
@include experimental(transform-origin, $origin,
|
19
|
+
-moz, -webkit, -o, not -ms, not -khtml, official
|
20
|
+
);
|
21
|
+
}
|
22
|
+
|
23
|
+
// transform-origin requires x and y coordinates
|
24
|
+
//
|
25
|
+
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
26
|
+
|
27
|
+
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
28
|
+
@if $originx or $originy {
|
29
|
+
@if $originy {
|
30
|
+
@include apply-origin($originx or 50% $originy);
|
31
|
+
} @else {
|
32
|
+
@include apply-origin($originx);
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
// A full transform mixin with everything you could want
|
38
|
+
//
|
39
|
+
// * including origin adjustments if you want them
|
40
|
+
// * scale, rotate and skew require units of degrees(deg)
|
41
|
+
// * scale takes a multiplier, rotate and skew take degrees
|
42
|
+
|
43
|
+
@mixin transform(
|
44
|
+
$scale: 1,
|
45
|
+
$rotate: 0deg,
|
46
|
+
$transx: 0,
|
47
|
+
$transy: 0,
|
48
|
+
$skewx: 0deg,
|
49
|
+
$skewy: 0deg,
|
50
|
+
$originx: false,
|
51
|
+
$originy: false
|
52
|
+
) {
|
53
|
+
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
54
|
+
@include apply-transform($transform);
|
55
|
+
@include transform-origin($originx, $originy);
|
56
|
+
}
|
57
|
+
|
58
|
+
// Transform Partials
|
59
|
+
//
|
60
|
+
// These work well on their own, but they don't add to each other, they override.
|
61
|
+
// Use them with extra origin args, or along side +transform-origin
|
62
|
+
|
63
|
+
// Adjust only the scale, with optional origin coordinates
|
64
|
+
|
65
|
+
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
66
|
+
@include apply-transform(scale($scale));
|
67
|
+
@include transform-origin($originx, $originy);
|
68
|
+
}
|
69
|
+
|
70
|
+
// Adjust only the rotation, with optional origin coordinates
|
71
|
+
|
72
|
+
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
73
|
+
@include apply-transform(rotate($rotate));
|
74
|
+
@include transform-origin($originx, $originy);
|
75
|
+
}
|
76
|
+
|
77
|
+
// Adjust only the translation
|
78
|
+
|
79
|
+
@mixin translate($transx: 0, $transy: 0) {
|
80
|
+
@include apply-transform(translate($transx, $transy));
|
81
|
+
}
|
82
|
+
|
83
|
+
// Adjust only the skew, with optional origin coordinates
|
84
|
+
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
85
|
+
@include apply-transform(skew($skewx, $skewy));
|
86
|
+
@include transform-origin($originx, $originy);
|
87
|
+
}
|
@@ -0,0 +1,598 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// @doc off
|
4
|
+
// Note ----------------------------------------------------------------------
|
5
|
+
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
6
|
+
// only in the most recent builds. You should also provide fallback 2d support for
|
7
|
+
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
8
|
+
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
9
|
+
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
10
|
+
// and also accepts 'true' (3D). Currently the lists are as follows:
|
11
|
+
// 2D: Mozilla, Webkit, Opera, Official
|
12
|
+
// 3D: Webkit, Firefox.
|
13
|
+
|
14
|
+
// Available Transforms ------------------------------------------------------
|
15
|
+
// - Scale (2d and 3d)
|
16
|
+
// - Rotate (2d and 3d)
|
17
|
+
// - Translate (2d and 3d)
|
18
|
+
// - Skew (2d only)
|
19
|
+
|
20
|
+
// Transform Parameters ------------------------------------------------------
|
21
|
+
// - Transform Origin (2d and 3d)
|
22
|
+
// - Perspective (3d)
|
23
|
+
// - Perspective Origin (3d)
|
24
|
+
// - Transform Style (3d)
|
25
|
+
// - Backface Visibility (3d)
|
26
|
+
|
27
|
+
// Mixins --------------------------------------------------------------------
|
28
|
+
// transform-origin
|
29
|
+
// - shortcuts: transform-origin2d, transform-origin3d
|
30
|
+
// - helpers: apply-origin
|
31
|
+
// transform
|
32
|
+
// - shortcuts: transform2d, transform3d
|
33
|
+
// - helpers: simple-transform, create-transform
|
34
|
+
// perspective
|
35
|
+
// - helpers: perspective-origin
|
36
|
+
// transform-style
|
37
|
+
// backface-visibility
|
38
|
+
// scale
|
39
|
+
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
40
|
+
// rotate
|
41
|
+
// - shortcuts: rotateX, rotateY, rotate3d
|
42
|
+
// translate
|
43
|
+
// - shortcuts: translateX, translateY, translateZ, translate3d
|
44
|
+
// skew
|
45
|
+
// - shortcuts: skewX, skewY
|
46
|
+
|
47
|
+
// Defaults ------------------------------------------------------------------
|
48
|
+
// @doc on
|
49
|
+
|
50
|
+
// The default x-origin for transforms
|
51
|
+
$default-origin-x : 50% !default;
|
52
|
+
// The default y-origin for transforms
|
53
|
+
$default-origin-y : 50% !default;
|
54
|
+
// The default z-origin for transforms
|
55
|
+
$default-origin-z : 50% !default;
|
56
|
+
|
57
|
+
|
58
|
+
// The default x-multiplier for scaling
|
59
|
+
$default-scale-x : 1.25 !default;
|
60
|
+
// The default y-multiplier for scaling
|
61
|
+
$default-scale-y : $default-scale-x !default;
|
62
|
+
// The default z-multiplier for scaling
|
63
|
+
$default-scale-z : $default-scale-x !default;
|
64
|
+
|
65
|
+
|
66
|
+
// The default angle for rotations
|
67
|
+
$default-rotate : 45deg !default;
|
68
|
+
|
69
|
+
|
70
|
+
// The default x-vector for the axis of 3d rotations
|
71
|
+
$default-vector-x : 1 !default;
|
72
|
+
// The default y-vector for the axis of 3d rotations
|
73
|
+
$default-vector-y : 1 !default;
|
74
|
+
// The default z-vector for the axis of 3d rotations
|
75
|
+
$default-vector-z : 1 !default;
|
76
|
+
|
77
|
+
|
78
|
+
// The default x-length for translations
|
79
|
+
$default-translate-x : 1em !default;
|
80
|
+
// The default y-length for translations
|
81
|
+
$default-translate-y : $default-translate-x !default;
|
82
|
+
// The default z-length for translations
|
83
|
+
$default-translate-z : $default-translate-x !default;
|
84
|
+
|
85
|
+
|
86
|
+
// The default x-angle for skewing
|
87
|
+
$default-skew-x : 5deg !default;
|
88
|
+
// The default y-angle for skewing
|
89
|
+
$default-skew-y : 5deg !default;
|
90
|
+
|
91
|
+
|
92
|
+
// **Transform-origin**
|
93
|
+
// Transform-origin sent as a complete string
|
94
|
+
//
|
95
|
+
// @include apply-origin( origin [, 3D-only ] )
|
96
|
+
//
|
97
|
+
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
98
|
+
// in percentages, absolute (px, cm, in, em etc..) or relative
|
99
|
+
// (left, top, right, bottom, center) units
|
100
|
+
//
|
101
|
+
// @param only3d Set this to true to only apply this
|
102
|
+
// mixin where browsers have 3D support.
|
103
|
+
@mixin apply-origin($origin, $only3d) {
|
104
|
+
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
105
|
+
@if $only3d {
|
106
|
+
@include experimental(transform-origin, $origin,
|
107
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
108
|
+
);
|
109
|
+
} @else {
|
110
|
+
@include experimental(transform-origin, $origin,
|
111
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
112
|
+
);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
// Transform-origin sent as individual arguments:
|
117
|
+
//
|
118
|
+
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
119
|
+
//
|
120
|
+
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
121
|
+
//
|
122
|
+
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
123
|
+
@mixin transform-origin(
|
124
|
+
$origin-x: $default-origin-x,
|
125
|
+
$origin-y: $default-origin-y,
|
126
|
+
$origin-z: false,
|
127
|
+
$only3d: if($origin-z, true, false)
|
128
|
+
) {
|
129
|
+
$origin: unquote('');
|
130
|
+
@if $origin-x or $origin-y or $origin-z {
|
131
|
+
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
132
|
+
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
133
|
+
@if $origin-z { $origin: $origin $origin-z; }
|
134
|
+
@include apply-origin($origin, $only3d);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// Transform sent as a complete string:
|
140
|
+
//
|
141
|
+
// @include transform( transforms [, 3D-only ] )
|
142
|
+
//
|
143
|
+
// where 'transforms' is a space separated list of all the transforms to be applied.
|
144
|
+
@mixin transform(
|
145
|
+
$transform,
|
146
|
+
$only3d: false
|
147
|
+
) {
|
148
|
+
@if $only3d {
|
149
|
+
@include experimental(transform, $transform,
|
150
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
151
|
+
);
|
152
|
+
} @else {
|
153
|
+
@include experimental(transform, $transform,
|
154
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
155
|
+
);
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
// Shortcut to target all browsers with 2D transform support
|
160
|
+
@mixin transform2d($trans) {
|
161
|
+
@include transform($trans, false);
|
162
|
+
}
|
163
|
+
|
164
|
+
// Shortcut to target only browsers with 3D transform support
|
165
|
+
@mixin transform3d($trans) {
|
166
|
+
@include transform($trans, true);
|
167
|
+
}
|
168
|
+
|
169
|
+
// @doc off
|
170
|
+
// 3D Parameters -------------------------------------------------------------
|
171
|
+
// @doc on
|
172
|
+
|
173
|
+
// Set the perspective of 3D transforms on the children of an element:
|
174
|
+
//
|
175
|
+
// @include perspective( perspective )
|
176
|
+
//
|
177
|
+
// where 'perspective' is a unitless number representing the depth of the
|
178
|
+
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
|
179
|
+
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
180
|
+
@mixin perspective($p) {
|
181
|
+
@include experimental(perspective, $p,
|
182
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
183
|
+
);
|
184
|
+
}
|
185
|
+
|
186
|
+
// Set the origin position for the perspective
|
187
|
+
//
|
188
|
+
// @include perspective-origin(origin-x [origin-y])
|
189
|
+
//
|
190
|
+
// where the two arguments represent x/y coordinates
|
191
|
+
@mixin perspective-origin($origin: 50%) {
|
192
|
+
@include experimental(perspective-origin, $origin,
|
193
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
194
|
+
);
|
195
|
+
}
|
196
|
+
|
197
|
+
// Determine whether a 3D objects children also live in the given 3D space
|
198
|
+
//
|
199
|
+
// @include transform-style( [ style ] )
|
200
|
+
//
|
201
|
+
// where `style` can be either `flat` or `preserve-3d`.
|
202
|
+
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
|
203
|
+
@mixin transform-style($style: preserve-3d) {
|
204
|
+
@include experimental(transform-style, $style,
|
205
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
206
|
+
);
|
207
|
+
}
|
208
|
+
|
209
|
+
// Determine the visibility of an element when it's back is turned
|
210
|
+
//
|
211
|
+
// @include backface-visibility( [ visibility ] )
|
212
|
+
//
|
213
|
+
// where `visibility` can be either `visible` or `hidden`.
|
214
|
+
// Browsers default to visible, mixin defaults to hidden
|
215
|
+
@mixin backface-visibility($visibility: hidden) {
|
216
|
+
@include experimental(backface-visibility, $visibility,
|
217
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
218
|
+
);
|
219
|
+
}
|
220
|
+
|
221
|
+
// @doc off
|
222
|
+
// Transform Partials --------------------------------------------------------
|
223
|
+
// These work well on their own, but they don't add to each other, they override.
|
224
|
+
// Use along with transform parameter mixins to adjust origin, perspective and style
|
225
|
+
// ---------------------------------------------------------------------------
|
226
|
+
|
227
|
+
|
228
|
+
// Scale ---------------------------------------------------------------------
|
229
|
+
// @doc on
|
230
|
+
|
231
|
+
// Scale an object along the x and y axis:
|
232
|
+
//
|
233
|
+
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
234
|
+
//
|
235
|
+
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
236
|
+
// and perspective, which works the same as the stand-alone perspective property/mixin
|
237
|
+
// but applies to the individual element (multiplied with any parent perspective)
|
238
|
+
//
|
239
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
240
|
+
@mixin scale(
|
241
|
+
$scale-x: $default-scale-x,
|
242
|
+
$scale-y: $scale-x,
|
243
|
+
$perspective: false,
|
244
|
+
$only3d: false
|
245
|
+
) {
|
246
|
+
$trans: scale($scale-x, $scale-y);
|
247
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
248
|
+
@include transform($trans, $only3d);
|
249
|
+
}
|
250
|
+
|
251
|
+
// Scale an object along the x axis
|
252
|
+
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
253
|
+
//
|
254
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
255
|
+
@mixin scaleX(
|
256
|
+
$scale: $default-scale-x,
|
257
|
+
$perspective: false,
|
258
|
+
$only3d: false
|
259
|
+
) {
|
260
|
+
$trans: scaleX($scale);
|
261
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
262
|
+
@include transform($trans, $only3d);
|
263
|
+
}
|
264
|
+
|
265
|
+
// Scale an object along the y axis
|
266
|
+
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
267
|
+
//
|
268
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
269
|
+
@mixin scaleY(
|
270
|
+
$scale: $default-scale-y,
|
271
|
+
$perspective: false,
|
272
|
+
$only3d: false
|
273
|
+
) {
|
274
|
+
$trans: scaleY($scale);
|
275
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
276
|
+
@include transform($trans, $only3d);
|
277
|
+
}
|
278
|
+
|
279
|
+
// Scale an object along the z axis
|
280
|
+
// @include scaleZ( [ scale-z, perspective ] )
|
281
|
+
//
|
282
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
283
|
+
@mixin scaleZ(
|
284
|
+
$scale: $default-scale-z,
|
285
|
+
$perspective: false
|
286
|
+
) {
|
287
|
+
$trans: scaleZ($scale);
|
288
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
289
|
+
@include transform3d($trans);
|
290
|
+
}
|
291
|
+
|
292
|
+
// Scale and object along all three axis
|
293
|
+
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
294
|
+
//
|
295
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
296
|
+
@mixin scale3d(
|
297
|
+
$scale-x: $default-scale-x,
|
298
|
+
$scale-y: $default-scale-y,
|
299
|
+
$scale-z: $default-scale-z,
|
300
|
+
$perspective: false
|
301
|
+
) {
|
302
|
+
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
303
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
304
|
+
@include transform3d($trans);
|
305
|
+
}
|
306
|
+
|
307
|
+
// @doc off
|
308
|
+
// Rotate --------------------------------------------------------------------
|
309
|
+
// @doc on
|
310
|
+
|
311
|
+
// Rotate an object around the z axis (2D)
|
312
|
+
// @include rotate( [ rotation, perspective, 3D-only ] )
|
313
|
+
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
314
|
+
//
|
315
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
316
|
+
@mixin rotate(
|
317
|
+
$rotate: $default-rotate,
|
318
|
+
$perspective: false,
|
319
|
+
$only3d: false
|
320
|
+
) {
|
321
|
+
$trans: rotate($rotate);
|
322
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
323
|
+
@include transform($trans, $only3d);
|
324
|
+
}
|
325
|
+
|
326
|
+
// A longcut for 'rotate' in case you forget that 'z' is implied
|
327
|
+
//
|
328
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
329
|
+
@mixin rotateZ(
|
330
|
+
$rotate: $default-rotate,
|
331
|
+
$perspective: false,
|
332
|
+
$only3d: false
|
333
|
+
) {
|
334
|
+
@include rotate($rotate, $perspective, $only3d);
|
335
|
+
}
|
336
|
+
|
337
|
+
// Rotate an object around the x axis (3D)
|
338
|
+
// @include rotateX( [ rotation, perspective ] )
|
339
|
+
//
|
340
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
341
|
+
@mixin rotateX(
|
342
|
+
$rotate: $default-rotate,
|
343
|
+
$perspective: false
|
344
|
+
) {
|
345
|
+
$trans: rotateX($rotate);
|
346
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
347
|
+
@include transform3d($trans);
|
348
|
+
}
|
349
|
+
|
350
|
+
// Rotate an object around the y axis (3D)
|
351
|
+
// @include rotate( [ rotation, perspective ] )
|
352
|
+
//
|
353
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
354
|
+
@mixin rotateY(
|
355
|
+
$rotate: $default-rotate,
|
356
|
+
$perspective: false
|
357
|
+
) {
|
358
|
+
$trans: rotateY($rotate);
|
359
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
360
|
+
@include transform3d($trans);
|
361
|
+
}
|
362
|
+
|
363
|
+
// Rotate an object around an arbitrary axis (3D)
|
364
|
+
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
365
|
+
// where the 'vector-' arguments accept unitless numbers.
|
366
|
+
// These numbers are not important on their own, but in relation to one another
|
367
|
+
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
|
368
|
+
//
|
369
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
370
|
+
@mixin rotate3d(
|
371
|
+
$vector-x: $default-vector-x,
|
372
|
+
$vector-y: $default-vector-y,
|
373
|
+
$vector-z: $default-vector-z,
|
374
|
+
$rotate: $default-rotate,
|
375
|
+
$perspective: false
|
376
|
+
) {
|
377
|
+
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
378
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
379
|
+
@include transform3d($trans);
|
380
|
+
}
|
381
|
+
|
382
|
+
// @doc off
|
383
|
+
// Translate -----------------------------------------------------------------
|
384
|
+
// @doc on
|
385
|
+
|
386
|
+
// Move an object along the x or y axis (2D)
|
387
|
+
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
388
|
+
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
|
389
|
+
//
|
390
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
391
|
+
@mixin translate(
|
392
|
+
$translate-x: $default-translate-x,
|
393
|
+
$translate-y: $default-translate-y,
|
394
|
+
$perspective: false,
|
395
|
+
$only3d: false
|
396
|
+
) {
|
397
|
+
$trans: translate($translate-x, $translate-y);
|
398
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
399
|
+
@include transform($trans, $only3d);
|
400
|
+
}
|
401
|
+
|
402
|
+
// Move an object along the x axis (2D)
|
403
|
+
// @include translate( [ translate-x, perspective, 3D-only ] )
|
404
|
+
//
|
405
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
406
|
+
@mixin translateX(
|
407
|
+
$trans-x: $default-translate-x,
|
408
|
+
$perspective: false,
|
409
|
+
$only3d: false
|
410
|
+
) {
|
411
|
+
$trans: translateX($trans-x);
|
412
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
413
|
+
@include transform($trans, $only3d);
|
414
|
+
}
|
415
|
+
|
416
|
+
// Move an object along the y axis (2D)
|
417
|
+
// @include translate( [ translate-y, perspective, 3D-only ] )
|
418
|
+
//
|
419
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
420
|
+
@mixin translateY(
|
421
|
+
$trans-y: $default-translate-y,
|
422
|
+
$perspective: false,
|
423
|
+
$only3d: false
|
424
|
+
) {
|
425
|
+
$trans: translateY($trans-y);
|
426
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
427
|
+
@include transform($trans, $only3d);
|
428
|
+
}
|
429
|
+
|
430
|
+
// Move an object along the z axis (3D)
|
431
|
+
// @include translate( [ translate-z, perspective ] )
|
432
|
+
//
|
433
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
434
|
+
@mixin translateZ(
|
435
|
+
$trans-z: $default-translate-z,
|
436
|
+
$perspective: false
|
437
|
+
) {
|
438
|
+
$trans: translateZ($trans-z);
|
439
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
440
|
+
@include transform3d($trans);
|
441
|
+
}
|
442
|
+
|
443
|
+
// Move an object along the x, y and z axis (3D)
|
444
|
+
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
445
|
+
//
|
446
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
447
|
+
@mixin translate3d(
|
448
|
+
$translate-x: $default-translate-x,
|
449
|
+
$translate-y: $default-translate-y,
|
450
|
+
$translate-z: $default-translate-z,
|
451
|
+
$perspective: false
|
452
|
+
) {
|
453
|
+
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
454
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
455
|
+
@include transform3d($trans);
|
456
|
+
}
|
457
|
+
|
458
|
+
// @doc off
|
459
|
+
// Skew ----------------------------------------------------------------------
|
460
|
+
// @doc on
|
461
|
+
|
462
|
+
// Skew an element:
|
463
|
+
//
|
464
|
+
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
465
|
+
//
|
466
|
+
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
|
467
|
+
//
|
468
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
469
|
+
@mixin skew(
|
470
|
+
$skew-x: $default-skew-x,
|
471
|
+
$skew-y: $default-skew-y,
|
472
|
+
$only3d: false
|
473
|
+
) {
|
474
|
+
$trans: skew($skew-x, $skew-y);
|
475
|
+
@include transform($trans, $only3d);
|
476
|
+
}
|
477
|
+
|
478
|
+
// Skew an element along the x axiz
|
479
|
+
//
|
480
|
+
// @include skew( [ skew-x, 3D-only ] )
|
481
|
+
//
|
482
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
483
|
+
@mixin skewX(
|
484
|
+
$skew-x: $default-skew-x,
|
485
|
+
$only3d: false
|
486
|
+
) {
|
487
|
+
$trans: skewX($skew-x);
|
488
|
+
@include transform($trans, $only3d);
|
489
|
+
}
|
490
|
+
|
491
|
+
// Skew an element along the y axis
|
492
|
+
//
|
493
|
+
// @include skew( [ skew-y, 3D-only ] )
|
494
|
+
//
|
495
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
496
|
+
@mixin skewY(
|
497
|
+
$skew-y: $default-skew-y,
|
498
|
+
$only3d: false
|
499
|
+
) {
|
500
|
+
$trans: skewY($skew-y);
|
501
|
+
@include transform($trans, $only3d);
|
502
|
+
}
|
503
|
+
|
504
|
+
|
505
|
+
// Full transform mixins
|
506
|
+
// For settings any combination of transforms as arguments
|
507
|
+
// These are complex and not highly recommended for daily use. They are mainly
|
508
|
+
// here for backward-compatibility purposes.
|
509
|
+
//
|
510
|
+
// * they include origin adjustments
|
511
|
+
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
512
|
+
//
|
513
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
514
|
+
@mixin create-transform(
|
515
|
+
$perspective: false,
|
516
|
+
$scale-x: false,
|
517
|
+
$scale-y: false,
|
518
|
+
$scale-z: false,
|
519
|
+
$rotate-x: false,
|
520
|
+
$rotate-y: false,
|
521
|
+
$rotate-z: false,
|
522
|
+
$rotate3d: false,
|
523
|
+
$trans-x: false,
|
524
|
+
$trans-y: false,
|
525
|
+
$trans-z: false,
|
526
|
+
$skew-x: false,
|
527
|
+
$skew-y: false,
|
528
|
+
$origin-x: false,
|
529
|
+
$origin-y: false,
|
530
|
+
$origin-z: false,
|
531
|
+
$only3d: false
|
532
|
+
) {
|
533
|
+
$trans: unquote("");
|
534
|
+
|
535
|
+
// perspective
|
536
|
+
@if $perspective { $trans: perspective($perspective) ; }
|
537
|
+
|
538
|
+
// scale
|
539
|
+
@if $scale-x and $scale-y {
|
540
|
+
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
541
|
+
@else { $trans: $trans scale($scale-x, $scale-y); }
|
542
|
+
} @else {
|
543
|
+
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
544
|
+
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
545
|
+
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
546
|
+
}
|
547
|
+
|
548
|
+
// rotate
|
549
|
+
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
550
|
+
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
551
|
+
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
552
|
+
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
553
|
+
|
554
|
+
// translate
|
555
|
+
@if $trans-x and $trans-y {
|
556
|
+
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
557
|
+
@else { $trans: $trans translate($trans-x, $trans-y); }
|
558
|
+
} @else {
|
559
|
+
@if $trans-x { $trans: $trans translateX($trans-x); }
|
560
|
+
@if $trans-y { $trans: $trans translateY($trans-y); }
|
561
|
+
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
562
|
+
}
|
563
|
+
|
564
|
+
// skew
|
565
|
+
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
566
|
+
@else {
|
567
|
+
@if $skew-x { $trans: $trans skewX($skew-x); }
|
568
|
+
@if $skew-y { $trans: $trans skewY($skew-y); }
|
569
|
+
}
|
570
|
+
|
571
|
+
// apply it!
|
572
|
+
@include transform($trans, $only3d);
|
573
|
+
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
574
|
+
}
|
575
|
+
|
576
|
+
|
577
|
+
// A simplified set of options
|
578
|
+
// backwards-compatible with the previous version of the 'transform' mixin
|
579
|
+
@mixin simple-transform(
|
580
|
+
$scale: false,
|
581
|
+
$rotate: false,
|
582
|
+
$trans-x: false,
|
583
|
+
$trans-y: false,
|
584
|
+
$skew-x: false,
|
585
|
+
$skew-y: false,
|
586
|
+
$origin-x: false,
|
587
|
+
$origin-y: false
|
588
|
+
) {
|
589
|
+
@include create-transform(
|
590
|
+
false,
|
591
|
+
$scale, $scale, false,
|
592
|
+
false, false, $rotate, false,
|
593
|
+
$trans-x, $trans-y, false,
|
594
|
+
$skew-x, $skew-y,
|
595
|
+
$origin-x, $origin-y, false,
|
596
|
+
false
|
597
|
+
);
|
598
|
+
}
|