compass 0.11.alpha.0 → 0.11.alpha.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.
Files changed (59) hide show
  1. data/VERSION.yml +1 -1
  2. data/examples/compass/headers.txt +7 -0
  3. data/examples/compass/images/border2.png +0 -0
  4. data/examples/compass/images/icon-chrome.png +0 -0
  5. data/examples/compass/images/icon-firefox.png +0 -0
  6. data/examples/compass/images/icon-ie.png +0 -0
  7. data/examples/compass/images/icon-opera.png +0 -0
  8. data/examples/compass/images/icon-safari.png +0 -0
  9. data/examples/compass/pie.html.haml +73 -0
  10. data/examples/compass/src/pie.scss +110 -0
  11. data/features/command_line.feature +11 -33
  12. data/features/step_definitions/command_line_steps.rb +5 -5
  13. data/frameworks/blueprint/templates/project/screen.sass +5 -4
  14. data/frameworks/blueprint/templates/semantic/partials/_page.sass +3 -4
  15. data/frameworks/compass/stylesheets/compass/_css3.scss +16 -1
  16. data/frameworks/compass/stylesheets/compass/_support.scss +2 -0
  17. data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +1 -1
  18. data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +85 -12
  19. data/frameworks/compass/stylesheets/compass/css3/_gradient.scss +6 -13
  20. data/frameworks/compass/stylesheets/compass/css3/_images.scss +42 -2
  21. data/frameworks/compass/stylesheets/compass/css3/_pie.scss +73 -0
  22. data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +39 -4
  23. data/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss +87 -0
  24. data/frameworks/compass/stylesheets/compass/css3/_transform.scss +553 -54
  25. data/frameworks/compass/templates/ellipsis/manifest.rb +3 -3
  26. data/frameworks/compass/templates/extension/manifest.rb +1 -1
  27. data/frameworks/compass/templates/pie/LICENSE +12 -0
  28. data/frameworks/compass/templates/pie/LICENSE-APACHE2.txt +13 -0
  29. data/frameworks/compass/templates/pie/LICENSE-GPL2.txt +278 -0
  30. data/frameworks/compass/templates/pie/PIE.htc +77 -0
  31. data/frameworks/compass/templates/pie/manifest.rb +39 -0
  32. data/frameworks/compass/templates/pie/pie.scss +74 -0
  33. data/lib/compass.rb +1 -1
  34. data/lib/compass/exec/helpers.rb +1 -1
  35. data/lib/compass/installers/base.rb +15 -1
  36. data/lib/compass/rails.rb +2 -0
  37. data/lib/compass/sass_extensions/functions/colors.rb +1 -5
  38. data/lib/compass/sass_extensions/functions/constants.rb +52 -11
  39. data/lib/compass/sass_extensions/functions/gradient_support.rb +382 -190
  40. data/lib/compass/sass_extensions/functions/if.rb +2 -2
  41. data/lib/compass/sass_extensions/functions/lists.rb +2 -0
  42. data/lib/compass/sass_extensions/functions/urls.rb +1 -1
  43. data/lib/compass/util.rb +18 -0
  44. data/test/fixtures/stylesheets/compass/css/gradients.css +110 -85
  45. data/test/fixtures/stylesheets/compass/css/pie.css +25 -0
  46. data/test/fixtures/stylesheets/compass/css/text_shadow.css +14 -0
  47. data/test/fixtures/stylesheets/compass/sass/box.sass +1 -1
  48. data/test/fixtures/stylesheets/compass/sass/box_shadow.scss +2 -2
  49. data/test/fixtures/stylesheets/compass/sass/gradients.sass +1 -1
  50. data/test/fixtures/stylesheets/compass/sass/pie.scss +47 -0
  51. data/test/fixtures/stylesheets/compass/sass/text_shadow.scss +7 -0
  52. data/test/fixtures/stylesheets/compass/sass/transform.scss +1 -1
  53. metadata +30 -9
  54. data/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss +0 -98
  55. data/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss +0 -72
  56. data/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss +0 -584
  57. data/frameworks/compass/stylesheets/compass/css3/_version-1.scss +0 -16
  58. data/frameworks/compass/stylesheets/compass/css3/_version-2.scss +0 -16
  59. data/lib/rails/init.rb +0 -2
@@ -32,7 +32,9 @@
32
32
  // - Safari
33
33
  // - Firefox 3.6
34
34
  // - Opera
35
-
35
+ //
36
+ // @deprecated Use the linear-gradient() function in conjunction with a
37
+ // property mixin like `background-image`.
36
38
  @mixin linear-gradient($color-stops, $start: false, $image: false) {
37
39
  @if $image {
38
40
  @if $start {
@@ -51,17 +53,6 @@
51
53
  @include background-image($image, linear-gradient($start, $color-stops));
52
54
  }
53
55
 
54
- // Emit a IE-Specific filters that renders a simple linear gradient.
55
- // For use in IE 6 - 8. Best practice would have you apply this via a
56
- // conditional IE stylesheet, but if you must, you should place this before
57
- // any background-image properties that you have specified.
58
- @mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
59
- @include has-layout;
60
- $gradient-type: if($orientation == vertical, 0, 1);
61
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
62
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
63
- }
64
-
65
56
  // Because of webkit's limitations, the radial gradient mixin works best if you use
66
57
  // pixel-based color stops.
67
58
  //
@@ -86,7 +77,9 @@
86
77
  // - Safari
87
78
  // - Firefox 3.6
88
79
  // - Opera
89
-
80
+ //
81
+ // @deprecated Use the radial-gradient() function in conjunction with a
82
+ // property mixin like `background-image`.
90
83
  @mixin radial-gradient($color-stops, $center-position: false, $image: false) {
91
84
  @if $image {
92
85
  @if $center-position {
@@ -1,6 +1,29 @@
1
1
  @import "shared";
2
2
 
3
+ // Background property support for vendor prefixing within values.
4
+ @mixin background(
5
+ $background-1,
6
+ $background-2: false,
7
+ $background-3: false,
8
+ $background-4: false,
9
+ $background-5: false,
10
+ $background-6: false,
11
+ $background-7: false,
12
+ $background-8: false,
13
+ $background-9: false,
14
+ $background-10: false
15
+ ) {
16
+ $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
17
+ $background-6, $background-7, $background-8, $background-9, $background-10);
18
+
19
+ @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
20
+ @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
21
+ @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
22
+ @if $experimental-support-for-pie and (prefixed(-pie, $backgrounds) or -compass-list-size($backgrounds) > 1) { -pie-background: -pie($backgrounds); }
23
+ background: $backgrounds;
24
+ }
3
25
 
26
+ // Background image property support for vendor prefixing within values.
4
27
  @mixin background-image(
5
28
  $image-1,
6
29
  $image-2: false,
@@ -15,12 +38,26 @@
15
38
  ) {
16
39
  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
17
40
 
18
- @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); }
41
+ @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
19
42
  @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
20
43
  @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
21
- background-image: $images;
44
+ @if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
45
+ background-image: $images ;
22
46
  }
23
47
 
48
+ // Emit a IE-Specific filters that renders a simple linear gradient.
49
+ // For use in IE 6 - 8. Best practice would have you apply this via a
50
+ // conditional IE stylesheet, but if you must, you should place this before
51
+ // any background-image properties that you have specified.
52
+ @mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
53
+ @include has-layout;
54
+ $gradient-type: if($orientation == vertical, 0, 1);
55
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
56
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
57
+ }
58
+
59
+
60
+ // Border image property support for vendor prefixing properties and values.
24
61
  @mixin border-image($value) {
25
62
  @if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
26
63
  @if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
@@ -28,6 +65,7 @@
28
65
  border-image: $value;
29
66
  }
30
67
 
68
+ // List style image property support for vendor prefixing within values.
31
69
  @mixin list-style-image($image) {
32
70
  @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
33
71
  @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@@ -35,6 +73,7 @@
35
73
  list-style-image: $image ;
36
74
  }
37
75
 
76
+ // List style property support for vendor prefixing within values.
38
77
  @mixin list-style($value) {
39
78
  $value: -compass-list($value);
40
79
  @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
@@ -43,6 +82,7 @@
43
82
  list-style-image: $value ;
44
83
  }
45
84
 
85
+ // content property support for vendor prefixing within values.
46
86
  @mixin content($value) {
47
87
  $value: -compass-list($value);
48
88
  @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
@@ -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
+ }
@@ -4,13 +4,48 @@
4
4
  // If you like, set different defaults in your project
5
5
 
6
6
  $default-text-shadow-color: #aaa !default;
7
- $default-text-shadow-h-offset: 1px !default;
8
- $default-text-shadow-v-offset: 1px !default;
7
+ $default-text-shadow-h-offset: 0px !default;
8
+ $default-text-shadow-v-offset: 0px !default;
9
9
  $default-text-shadow-blur: 1px !default;
10
10
 
11
- // Provides CSS text shadows.
12
- // Arguments are color, horizontal offset, vertical offset, and blur
11
+ // Provides cross-browser text shadows when one or more shadows are needed.
13
12
  @mixin text-shadow(
13
+ $shadow-1 : default,
14
+ $shadow-2 : false,
15
+ $shadow-3 : false,
16
+ $shadow-4 : false,
17
+ $shadow-5 : false,
18
+ $shadow-6 : false,
19
+ $shadow-7 : false,
20
+ $shadow-8 : false,
21
+ $shadow-9 : false,
22
+ $shadow-10: false
23
+ ) {
24
+ // This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
25
+ $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);
26
+ @if $legacy {
27
+ @warn "Passing separate arguments for a single shadow to text-shadow is deprecated. " +
28
+ "Pass the values as a single space-separated list, or use the single-text-shadow mixin. " +
29
+ "See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
30
+ @include single-text-shadow(
31
+ $shadow-1,
32
+ if($shadow-2, $shadow-2, $default-text-shadow-h-offset),
33
+ if($shadow-3, $shadow-3, $default-text-shadow-v-offset),
34
+ if($shadow-4, $shadow-4, $default-text-shadow-blur)
35
+ );
36
+ } @else {
37
+ @if $shadow-1 == default {
38
+ $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
39
+ }
40
+ text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
41
+ $shadow-4, $shadow-5, $shadow-6,
42
+ $shadow-7, $shadow-8, $shadow-9, $shadow-10);
43
+ }
44
+ }
45
+
46
+ // Provides a single cross-browser CSS text shadow.
47
+ // Includes default arguments for color, horizontal offset, vertical offset, and blur
48
+ @mixin single-text-shadow(
14
49
  $color: $default-text-shadow-color,
15
50
  $hoff: $default-text-shadow-h-offset,
16
51
  $voff: $default-text-shadow-v-offset,
@@ -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
+ }
@@ -1,85 +1,584 @@
1
1
  @import "shared";
2
2
 
3
- // CSS Transform and Transform-Origin
3
+ // @doc off
4
+ // Note ----------------------------------------------------------------------
5
+ // Safari is the only browser that currently supports 3D transforms.
6
+ // Because of that it can be important to control whether a given 2D transform
7
+ // uses the full range of experimental browser prefixes, or only the 3D list.
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, Official **(Only Safari Supports 3D perspective)**
4
13
 
5
- // Apply a transform sent as a complete string.
14
+ // Available Transforms ------------------------------------------------------
15
+ // - Scale (2d and 3d)
16
+ // - Rotate (2d and 3d)
17
+ // - Translate (2d and 3d)
18
+ // - Skew (2d only)
6
19
 
7
- @mixin apply-transform($transform) {
8
- @include experimental(transform, $transform,
9
- -moz, -webkit, -o, not -ms, not -khtml, official
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
+ // Transform Origin
51
+ $default-origin-x : 50% !default;
52
+ $default-origin-y : 50% !default;
53
+ $default-origin-z : 50% !default;
54
+
55
+ // Scale
56
+ $default-scale-x : 1.25 !default;
57
+ $default-scale-y : $default-scale-x !default;
58
+ $default-scale-z : $default-scale-x !default;
59
+
60
+ // Rotate
61
+ $default-rotate : 45deg !default;
62
+
63
+ // Rotate3d
64
+ $default-vector-x : 1 !default;
65
+ $default-vector-y : 1 !default;
66
+ $default-vector-z : 1 !default;
67
+
68
+ // Translate
69
+ $default-translate-x : 1em !default;
70
+ $default-translate-y : $default-translate-x !default;
71
+ $default-translate-z : $default-translate-x !default;
72
+
73
+ // Skew
74
+ $default-skew-x : 5deg !default;
75
+ $default-skew-y : 5deg !default;
76
+
77
+
78
+ // **Transform-origin**
79
+ // Transform-origin sent as a complete string
80
+ //
81
+ // @include apply-origin( origin [, 3D-only ] )
82
+ //
83
+ // where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
84
+ // in percentages, absolute (px, cm, in, em etc..) or relative
85
+ // (left, top, right, bottom, center) units
86
+ //
87
+ // @param only3d Set this to true to only apply this
88
+ // mixin where browsers have 3D support.
89
+ @mixin apply-origin($origin, $only3d) {
90
+ $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
91
+ @if $only3d {
92
+ @include experimental(transform-origin, $origin,
93
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
94
+ );
95
+ } @else {
96
+ @include experimental(transform-origin, $origin,
97
+ -moz, -webkit, -o, not -ms, not -khtml, official
98
+ );
99
+ }
100
+ }
101
+
102
+ // Transform-origin sent as individual arguments:
103
+ //
104
+ // @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
105
+ //
106
+ // where the 3 'origin-' arguments represent x/y/z coordinates.
107
+ //
108
+ // **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
109
+ @mixin transform-origin(
110
+ $origin-x: $default-origin-x,
111
+ $origin-y: $default-origin-y,
112
+ $origin-z: false,
113
+ $only3d: if($origin-z)
114
+ ) {
115
+ $origin: unquote('');
116
+ @if $origin-x or $origin-y or $origin-z {
117
+ @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
118
+ @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
119
+ @if $origin-z { $origin: $origin $origin-z; }
120
+ @include apply-origin($origin, $only3d);
121
+ }
122
+ }
123
+
124
+
125
+ // Transform sent as a complete string:
126
+ //
127
+ // @include transform( transforms [, 3D-only ] )
128
+ //
129
+ // where 'transforms' is a space separated list of all the transforms to be applied
130
+ @mixin transform(
131
+ $transform,
132
+ $only3d: false
133
+ ) {
134
+ @if $only3d {
135
+ @include experimental(transform, $transform,
136
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
137
+ );
138
+ } @else {
139
+ @include experimental(transform, $transform,
140
+ -moz, -webkit, -o, not -ms, not -khtml, official
141
+ );
142
+ }
143
+ }
144
+
145
+ // Shortcut to target all browsers with 2D transform support
146
+ @mixin transform2d($trans) {
147
+ @include transform($trans, false);
148
+ }
149
+
150
+ // Shortcut to target only browsers with 3D transform support
151
+ @mixin transform3d($trans) {
152
+ @include transform($trans, true);
153
+ }
154
+
155
+ // @doc off
156
+ // 3D Parameters -------------------------------------------------------------
157
+ // @doc on
158
+
159
+ // Set the perspective of 3D transforms on the children of an element:
160
+ //
161
+ // @include perspective( perspective )
162
+ //
163
+ // where 'perspective' is a uniless number representing the depth of the z-axis
164
+ // the higher the perspective, the more exagerated the foreshortening.
165
+ // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
166
+ @mixin perspective($p) {
167
+ @include experimental(perspective, $p,
168
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
10
169
  );
11
170
  }
12
171
 
13
- // Apply a transform-origin sent as a complete string.
172
+ // Set the origin position for the perspective
173
+ //
174
+ // @include perspective-origin(origin-x [origin-y])
175
+ //
176
+ // where the two arguments represent x/y coordinates
177
+ @mixin perspective-origin($origin: 50%) {
178
+ @include experimental(perspective-origin, $origin,
179
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
180
+ );
181
+ }
14
182
 
15
- @mixin apply-origin($origin) {
16
- @include experimental(transform-origin, $origin,
17
- -moz, -webkit, -o, not -ms, not -khtml, official
183
+ // Determine whether a 3D objects children also live in the given 3D space
184
+ //
185
+ // @include transform-style( [ style ] )
186
+ //
187
+ // where `style` can be either `flat` or `preserves-3d`
188
+ // browsers default to `flat`, mixin defaults to `preserves-3d`
189
+ @mixin transform-style($style: preserves-3d) {
190
+ @include experimental(perspective-origin, $style,
191
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
18
192
  );
19
193
  }
20
194
 
21
- // transform-origin requires x and y coordinates
195
+ // Determine the visibility of an element when it's back is turned
196
+ //
197
+ // @include backface-visibility( [ visibility ] )
22
198
  //
23
- // * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
199
+ // where `visibility` can be either `visible` or `hidden`
200
+ // browsers default to visible, mixin defaults to hidden
201
+ @mixin backface-visibility($visibility: hidden) {
202
+ @include experimental(backface-visibility, $visibility,
203
+ not -moz, -webkit, not -o, not -ms, not -khtml, official
204
+ );
205
+ }
24
206
 
25
- @mixin transform-origin($originx: 50%, $originy: 50%) {
26
- @if $originx or $originy {
27
- @if $originy {
28
- @include apply-origin($originx or 50% $originy);
29
- } @else {
30
- @include apply-origin($originx);
31
- }
32
- }
33
- }
207
+ // @doc off
208
+ // Transform Partials --------------------------------------------------------
209
+ // These work well on their own, but they don't add to each other, they override.
210
+ // Use along with transform parameter mixins to adjust origin, perspective and style
211
+ // ---------------------------------------------------------------------------
212
+
213
+
214
+ // Scale ---------------------------------------------------------------------
215
+ // @doc on
34
216
 
35
- // A full transform mixin with everything you could want
217
+ // Scale an object along the x and y axis:
36
218
  //
37
- // * including origin adjustments if you want them
38
- // * scale, rotate and skew require units of degrees(deg)
39
- // * scale takes a multiplier, rotate and skew take degrees
219
+ // @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
220
+ //
221
+ // where the 'scale-' arguments are unitless multipliers of the x and y dimensions
222
+ // and perspective, which works the same as the stand-alone perspective property/mixin
223
+ // but applies to the individual element (multiplied with any parent perspective)
224
+ //
225
+ // **Note** This mixin cannot be combined with other transform mixins.
226
+ @mixin scale(
227
+ $scale-x: $default-scale-x,
228
+ $scale-y: $scale-x,
229
+ $perspective: false,
230
+ $only3d: false
231
+ ) {
232
+ $trans: scale($scale-x, $scale-y);
233
+ @if $perspective { $trans: perspective($perspective) $trans; }
234
+ @include transform($trans, $only3d);
235
+ }
40
236
 
41
- @mixin transform(
42
- $scale: 1,
43
- $rotate: 0deg,
44
- $transx: 0,
45
- $transy: 0,
46
- $skewx: 0deg,
47
- $skewy: 0deg,
48
- $originx: false,
49
- $originy: false
237
+ // Scale an object along the x axis
238
+ // @include scaleX( [ scale-x, perspective, 3D-only ] )
239
+ //
240
+ // **Note** This mixin cannot be combined with other transform mixins.
241
+ @mixin scaleX(
242
+ $scale: $default-scale-x,
243
+ $perspective: false,
244
+ $only3d: false
50
245
  ) {
51
- $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
52
- @include apply-transform($transform);
53
- @include transform-origin($originx, $originy);
246
+ $trans: scaleX($scale);
247
+ @if $perspective { $trans: perspective($perspective) $trans; }
248
+ @include transform($trans, $only3d);
54
249
  }
55
250
 
56
- // Transform Partials
251
+ // Scale an object along the y axis
252
+ // @include scaleY( [ scale-y, perspective, 3D-only ] )
57
253
  //
58
- // These work well on their own, but they don't add to each other, they override.
59
- // Use them with extra origin args, or along side +transform-origin
254
+ // **Note** This mixin cannot be combined with other transform mixins.
255
+ @mixin scaleY(
256
+ $scale: $default-scale-y,
257
+ $perspective: false,
258
+ $only3d: false
259
+ ) {
260
+ $trans: scaleY($scale);
261
+ @if $perspective { $trans: perspective($perspective) $trans; }
262
+ @include transform($trans, $only3d);
263
+ }
264
+
265
+ // Scale an object along the z axis
266
+ // @include scaleZ( [ scale-z, perspective ] )
267
+ //
268
+ // **Note** This mixin cannot be combined with other transform mixins.
269
+ @mixin scaleZ(
270
+ $scale: $default-scale-z,
271
+ $perspective: false
272
+ ) {
273
+ $trans: scaleZ($scale);
274
+ @if $perspective { $trans: perspective($perspective) $trans; }
275
+ @include transform3d($trans);
276
+ }
277
+
278
+ // Scale and object along all three axis
279
+ // @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
280
+ //
281
+ // **Note** This mixin cannot be combined with other transform mixins.
282
+ @mixin scale3d(
283
+ $scale-x: $default-scale-x,
284
+ $scale-y: $default-scale-y,
285
+ $scale-z: $default-scale-z,
286
+ $perspective: false
287
+ ) {
288
+ $trans: scale3d($scale-x, $scale-y, $scale-z);
289
+ @if $perspective { $trans: perspective($perspective) $trans; }
290
+ @include transform3d($trans);
291
+ }
60
292
 
61
- // Adjust only the scale, with optional origin coordinates
293
+ // @doc off
294
+ // Rotate --------------------------------------------------------------------
295
+ // @doc on
62
296
 
63
- @mixin scale($scale: 1.25, $originx: false, $originy: false) {
64
- @include apply-transform(scale($scale));
65
- @include transform-origin($originx, $originy);
297
+ // Rotate an object around the z axis (2D)
298
+ // @include rotate( [ rotation, perspective, 3D-only ] )
299
+ // where 'rotation' is an angle set in degrees (deg) or radian (rad) units
300
+ //
301
+ // **Note** This mixin cannot be combined with other transform mixins.
302
+ @mixin rotate(
303
+ $rotate: $default-rotate,
304
+ $perspective: false,
305
+ $only3d: false
306
+ ) {
307
+ $trans: rotate($rotate);
308
+ @if $perspective { $trans: perspective($perspective) $trans; }
309
+ @include transform($trans, $only3d);
310
+ }
311
+
312
+ // A longcut for 'rotate' in case you forget that 'z' is implied
313
+ //
314
+ // **Note** This mixin cannot be combined with other transform mixins.
315
+ @mixin rotateZ(
316
+ $rotate: $default-rotate,
317
+ $perspective: false,
318
+ $only3d: false
319
+ ) {
320
+ @include rotate($rotate, $perspective, $only3d);
321
+ }
322
+
323
+ // Rotate an object around the x axis (3D)
324
+ // @include rotateX( [ rotation, perspective ] )
325
+ //
326
+ // **Note** This mixin cannot be combined with other transform mixins.
327
+ @mixin rotateX(
328
+ $rotate: $default-rotate,
329
+ $perspective: false
330
+ ) {
331
+ $trans: rotateX($rotate);
332
+ @if $perspective { $trans: perspective($perspective) $trans; }
333
+ @include transform3d($trans);
334
+ }
335
+
336
+ // Rotate an object around the y axis (3D)
337
+ // @include rotate( [ rotation, perspective ] )
338
+ //
339
+ // **Note** This mixin cannot be combined with other transform mixins.
340
+ @mixin rotateY(
341
+ $rotate: $default-rotate,
342
+ $perspective: false
343
+ ) {
344
+ $trans: rotateY($rotate);
345
+ @if $perspective { $trans: perspective($perspective) $trans; }
346
+ @include transform3d($trans);
347
+ }
348
+
349
+ // Rotate an object around an arbitrary axis (3D)
350
+ // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
351
+ // where the 'vector-' arguments accept unitless numbers
352
+ // these numbers are not important on their own, but in relation to one another
353
+ // creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
354
+ //
355
+ // **Note** This mixin cannot be combined with other transform mixins.
356
+ @mixin rotate3d(
357
+ $vector-x: $default-vector-x,
358
+ $vector-y: $default-vector-y,
359
+ $vector-z: $default-vector-z,
360
+ $rotate: $default-rotate,
361
+ $perspective: false
362
+ ) {
363
+ $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
364
+ @if $perspective { $trans: perspective($perspective) $trans; }
365
+ @include transform3d($trans);
366
+ }
367
+
368
+ // @doc off
369
+ // Translate -----------------------------------------------------------------
370
+ // @doc on
371
+
372
+ // Move an object along the x or y axis (2D)
373
+ // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
374
+ // where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
375
+ //
376
+ // **Note** This mixin cannot be combined with other transform mixins.
377
+ @mixin translate(
378
+ $translate-x: $default-translate-x,
379
+ $translate-y: $default-translate-y,
380
+ $perspective: false,
381
+ $only3d: false
382
+ ) {
383
+ $trans: translate($translate-x, $translate-y);
384
+ @if $perspective { $trans: perspective($perspective) $trans; }
385
+ @include transform($trans, $only3d);
386
+ }
387
+
388
+ // Move an object along the x axis (2D)
389
+ // @include translate( [ translate-x, perspective, 3D-only ] )
390
+ //
391
+ // **Note** This mixin cannot be combined with other transform mixins.
392
+ @mixin translateX(
393
+ $trans-x: $default-translate-x,
394
+ $perspective: false,
395
+ $only3d: false
396
+ ) {
397
+ $trans: translateX($trans-x);
398
+ @if $perspective { $trans: perspective($perspective) $trans; }
399
+ @include transform($trans, $only3d);
400
+ }
401
+
402
+ // Move an object along the y axis (2D)
403
+ // @include translate( [ translate-y, perspective, 3D-only ] )
404
+ //
405
+ // **Note** This mixin cannot be combined with other transform mixins.
406
+ @mixin translateY(
407
+ $trans-y: $default-translate-y,
408
+ $perspective: false,
409
+ $only3d: false
410
+ ) {
411
+ $trans: translateY($trans-y);
412
+ @if $perspective { $trans: perspective($perspective) $trans; }
413
+ @include transform($trans, $only3d);
414
+ }
415
+
416
+ // Move an object along the z axis (3D)
417
+ // @include translate( [ translate-z, perspective ] )
418
+ //
419
+ // **Note** This mixin cannot be combined with other transform mixins.
420
+ @mixin translateZ(
421
+ $trans-z: $default-translate-z,
422
+ $perspective: false
423
+ ) {
424
+ $trans: translateZ($trans-z);
425
+ @if $perspective { $trans: perspective($perspective) $trans; }
426
+ @include transform3d($trans);
427
+ }
428
+
429
+ // Move an object along the x, y and z axis (3D)
430
+ // @include translate( [ translate-x, translate-y, translate-z, perspective ] )
431
+ //
432
+ // **Note** This mixin cannot be combined with other transform mixins.
433
+ @mixin translate3d(
434
+ $translate-x: $default-translate-x,
435
+ $translate-y: $default-translate-y,
436
+ $translate-z: $default-translate-z,
437
+ $perspective: false
438
+ ) {
439
+ $trans: translate3d($translate-x, $translate-y, $translate-z);
440
+ @if $perspective { $trans: perspective($perspective) $trans; }
441
+ @include transform3d($trans);
66
442
  }
67
443
 
68
- // Adjust only the rotation, with optional origin coordinates
444
+ // @doc off
445
+ // Skew ----------------------------------------------------------------------
446
+ // @doc on
69
447
 
70
- @mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
71
- @include apply-transform(rotate($rotate));
72
- @include transform-origin($originx, $originy);
448
+ // Skew an element:
449
+ //
450
+ // @include skew( [ skew-x, skew-y, 3D-only ] )
451
+ //
452
+ // where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
453
+ //
454
+ // **Note** This mixin cannot be combined with other transform mixins.
455
+ @mixin skew(
456
+ $skew-x: $default-skew-x,
457
+ $skew-y: $default-skew-y,
458
+ $only3d: false
459
+ ) {
460
+ $trans: skew($skew-x, $skew-y);
461
+ @include transform($trans, $only3d);
462
+ }
463
+
464
+ // Skew an element along the x axiz
465
+ //
466
+ // @include skew( [ skew-x, 3D-only ] )
467
+ //
468
+ // **Note** This mixin cannot be combined with other transform mixins.
469
+ @mixin skewX(
470
+ $skew-x: $default-skew-x,
471
+ $only3d: false
472
+ ) {
473
+ $trans: skewX($skew-x);
474
+ @include transform($trans, $only3d);
475
+ }
476
+
477
+ // Skew an element along the y axis
478
+ //
479
+ // @include skew( [ skew-y, 3D-only ] )
480
+ //
481
+ // **Note** This mixin cannot be combined with other transform mixins.
482
+ @mixin skewY(
483
+ $skew-y: $default-skew-y,
484
+ $only3d: false
485
+ ) {
486
+ $trans: skewY($skew-y);
487
+ @include transform($trans, $only3d);
73
488
  }
74
489
 
75
- // Adjust only the translation
76
490
 
77
- @mixin translate($transx: 0, $transy: 0) {
78
- @include apply-transform(translate($transx, $transy));
491
+ // Full transform mixins
492
+ // For settings any combination of transforms as arguments
493
+ // These are complex and not highly recommended for daily use
494
+ // They are mainly here for backwards-compatability purposes
495
+ //
496
+ // * they include origin adjustments
497
+ // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
498
+ //
499
+ // **Note** This mixin cannot be combined with other transform mixins.
500
+ @mixin create-transform(
501
+ $perspective: false,
502
+ $scale-x: false,
503
+ $scale-y: false,
504
+ $scale-z: false,
505
+ $rotate-x: false,
506
+ $rotate-y: false,
507
+ $rotate-z: false,
508
+ $rotate3d: false,
509
+ $trans-x: false,
510
+ $trans-y: false,
511
+ $trans-z: false,
512
+ $skew-x: false,
513
+ $skew-y: false,
514
+ $origin-x: false,
515
+ $origin-y: false,
516
+ $origin-z: false,
517
+ $only3d: false
518
+ ) {
519
+ $trans: unquote("");
520
+
521
+ // perspective
522
+ @if $perspective { $trans: perspective($perspective) ; }
523
+
524
+ // scale
525
+ @if $scale-x and $scale-y {
526
+ @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
527
+ @else { $trans: $trans scale($scale-x, $scale-y); }
528
+ } @else {
529
+ @if $scale-x { $trans: $trans scaleX($scale-x); }
530
+ @if $scale-y { $trans: $trans scaleY($scale-y); }
531
+ @if $scale-z { $trans: $trans scaleZ($scale-z); }
532
+ }
533
+
534
+ // rotate
535
+ @if $rotate-x { $trans: $trans rotateX($rotate-x); }
536
+ @if $rotate-y { $trans: $trans rotateY($rotate-y); }
537
+ @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
538
+ @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
539
+
540
+ // translate
541
+ @if $trans-x and $trans-y {
542
+ @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
543
+ @else { $trans: $trans translate($trans-x, $trans-y); }
544
+ } @else {
545
+ @if $trans-x { $trans: $trans translateX($trans-x); }
546
+ @if $trans-y { $trans: $trans translateY($trans-y); }
547
+ @if $trans-z { $trans: $trans translateZ($trans-z); }
548
+ }
549
+
550
+ // skew
551
+ @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
552
+ @else {
553
+ @if $skew-x { $trans: $trans skewX($skew-x); }
554
+ @if $skew-y { $trans: $trans skewY($skew-y); }
555
+ }
556
+
557
+ // apply it!
558
+ @include transform($trans, $only3d);
559
+ @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
79
560
  }
80
561
 
81
- // Adjust only the skew, with optional origin coordinates
82
- @mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
83
- @include apply-transform(skew($skewx, $skewy));
84
- @include transform-origin($originx, $originy);
562
+
563
+ // A simplified set of options
564
+ // backwards-compatible with the previous version of the 'transform' mixin
565
+ @mixin simple-transform(
566
+ $scale: false,
567
+ $rotate: false,
568
+ $trans-x: false,
569
+ $trans-y: false,
570
+ $skew-x: false,
571
+ $skew-y: false,
572
+ $origin-x: false,
573
+ $origin-y: false
574
+ ) {
575
+ @include create-transform(
576
+ false,
577
+ $scale, $scale, false,
578
+ false, false, $rotate, false,
579
+ $trans-x, $trans-y, false,
580
+ $skew-x, $skew-y,
581
+ $origin-x, $origin-y, false,
582
+ false
583
+ );
85
584
  }