simple-compass 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
+ }