simple-compass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. data/.gitignore +2 -0
  2. data/.rspec +1 -0
  3. data/Gemfile +6 -0
  4. data/Gemfile.lock +26 -0
  5. data/Rakefile +8 -0
  6. data/lib/simple-compass.rb +17 -0
  7. data/lib/simple-compass/sass/functions/display.rb +27 -0
  8. data/lib/simple-compass/sass/functions/lists.rb +101 -0
  9. data/lib/simple-compass/sass/functions/selectors.rb +64 -0
  10. data/lib/simple-compass/sass/functions/sprites.rb +218 -0
  11. data/lib/simple-compass/version.rb +3 -0
  12. data/sass/compass.scss +1 -0
  13. data/sass/compass/_css3.scss +20 -0
  14. data/sass/compass/_layout.scss +3 -0
  15. data/sass/compass/_reset-legacy.scss +3 -0
  16. data/sass/compass/_reset.scss +3 -0
  17. data/sass/compass/_support.scss +40 -0
  18. data/sass/compass/_typography.scss +4 -0
  19. data/sass/compass/_utilities.scss +9 -0
  20. data/sass/compass/css3/_appearance.scss +17 -0
  21. data/sass/compass/css3/_background-clip.scss +43 -0
  22. data/sass/compass/css3/_background-origin.scss +42 -0
  23. data/sass/compass/css3/_background-size.scss +26 -0
  24. data/sass/compass/css3/_border-radius.scss +130 -0
  25. data/sass/compass/css3/_box-shadow.scss +76 -0
  26. data/sass/compass/css3/_box-sizing.scss +13 -0
  27. data/sass/compass/css3/_box.scss +111 -0
  28. data/sass/compass/css3/_columns.scss +157 -0
  29. data/sass/compass/css3/_filter.scss +23 -0
  30. data/sass/compass/css3/_font-face.scss +48 -0
  31. data/sass/compass/css3/_hyphenation.scss +77 -0
  32. data/sass/compass/css3/_images.scss +132 -0
  33. data/sass/compass/css3/_inline-block.scss +22 -0
  34. data/sass/compass/css3/_opacity.scss +19 -0
  35. data/sass/compass/css3/_pie.scss +73 -0
  36. data/sass/compass/css3/_regions.scss +22 -0
  37. data/sass/compass/css3/_shared.scss +38 -0
  38. data/sass/compass/css3/_text-shadow.scss +87 -0
  39. data/sass/compass/css3/_transform-legacy.scss +87 -0
  40. data/sass/compass/css3/_transform.scss +598 -0
  41. data/sass/compass/css3/_transition.scss +221 -0
  42. data/sass/compass/css3/_user-interface.scss +17 -0
  43. data/sass/compass/layout/_grid-background.scss +178 -0
  44. data/sass/compass/layout/_sticky-footer.scss +23 -0
  45. data/sass/compass/layout/_stretching.scss +24 -0
  46. data/sass/compass/reset/_utilities-legacy.scss +135 -0
  47. data/sass/compass/reset/_utilities.scss +142 -0
  48. data/sass/compass/typography/_links.scss +3 -0
  49. data/sass/compass/typography/_lists.scss +4 -0
  50. data/sass/compass/typography/_text.scss +4 -0
  51. data/sass/compass/typography/_vertical_rhythm.scss +221 -0
  52. data/sass/compass/typography/links/_hover-link.scss +5 -0
  53. data/sass/compass/typography/links/_link-colors.scss +28 -0
  54. data/sass/compass/typography/links/_unstyled-link.scss +7 -0
  55. data/sass/compass/typography/lists/_bullets.scss +34 -0
  56. data/sass/compass/typography/lists/_horizontal-list.scss +61 -0
  57. data/sass/compass/typography/lists/_inline-block-list.scss +50 -0
  58. data/sass/compass/typography/lists/_inline-list.scss +44 -0
  59. data/sass/compass/typography/text/_ellipsis.scss +25 -0
  60. data/sass/compass/typography/text/_force-wrap.scss +12 -0
  61. data/sass/compass/typography/text/_nowrap.scss +2 -0
  62. data/sass/compass/typography/text/_replacement.scss +68 -0
  63. data/sass/compass/utilities/_color.scss +1 -0
  64. data/sass/compass/utilities/_general.scss +6 -0
  65. data/sass/compass/utilities/_links.scss +5 -0
  66. data/sass/compass/utilities/_lists.scss +6 -0
  67. data/sass/compass/utilities/_print.scss +17 -0
  68. data/sass/compass/utilities/_sprites.scss +2 -0
  69. data/sass/compass/utilities/_tables.scss +3 -0
  70. data/sass/compass/utilities/_text.scss +5 -0
  71. data/sass/compass/utilities/color/_contrast.scss +28 -0
  72. data/sass/compass/utilities/general/_clearfix.scss +44 -0
  73. data/sass/compass/utilities/general/_float.scss +30 -0
  74. data/sass/compass/utilities/general/_hacks.scss +46 -0
  75. data/sass/compass/utilities/general/_min.scss +16 -0
  76. data/sass/compass/utilities/general/_reset.scss +2 -0
  77. data/sass/compass/utilities/general/_tabs.scss +1 -0
  78. data/sass/compass/utilities/general/_tag-cloud.scss +18 -0
  79. data/sass/compass/utilities/links/_hover-link.scss +3 -0
  80. data/sass/compass/utilities/links/_link-colors.scss +3 -0
  81. data/sass/compass/utilities/links/_unstyled-link.scss +3 -0
  82. data/sass/compass/utilities/lists/_bullets.scss +3 -0
  83. data/sass/compass/utilities/lists/_horizontal-list.scss +3 -0
  84. data/sass/compass/utilities/lists/_inline-block-list.scss +3 -0
  85. data/sass/compass/utilities/lists/_inline-list.scss +3 -0
  86. data/sass/compass/utilities/sprites/_base.scss +66 -0
  87. data/sass/compass/utilities/sprites/_sprite-img.scss +79 -0
  88. data/sass/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
  89. data/sass/compass/utilities/tables/_borders.scss +33 -0
  90. data/sass/compass/utilities/tables/_scaffolding.scss +9 -0
  91. data/sass/compass/utilities/text/_ellipsis.scss +3 -0
  92. data/sass/compass/utilities/text/_nowrap.scss +3 -0
  93. data/sass/compass/utilities/text/_replacement.scss +3 -0
  94. data/simple-compass.gemspec +21 -0
  95. data/spec/fixtures/headings_test.sass +2 -0
  96. data/spec/fixtures/opacity_test.sass +7 -0
  97. data/spec/fixtures/reset_test.sass +1 -0
  98. data/spec/headings_spec.rb +9 -0
  99. data/spec/opacity_spec.rb +9 -0
  100. data/spec/reset_spec.rb +9 -0
  101. data/spec/spec_helper.rb +7 -0
  102. 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
+ }