compass-core 1.0.0.alpha.13

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