compass 0.11.alpha.0 → 0.11.alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. data/VERSION.yml +1 -1
  2. data/examples/compass/headers.txt +7 -0
  3. data/examples/compass/images/border2.png +0 -0
  4. data/examples/compass/images/icon-chrome.png +0 -0
  5. data/examples/compass/images/icon-firefox.png +0 -0
  6. data/examples/compass/images/icon-ie.png +0 -0
  7. data/examples/compass/images/icon-opera.png +0 -0
  8. data/examples/compass/images/icon-safari.png +0 -0
  9. data/examples/compass/pie.html.haml +73 -0
  10. data/examples/compass/src/pie.scss +110 -0
  11. data/features/command_line.feature +11 -33
  12. data/features/step_definitions/command_line_steps.rb +5 -5
  13. data/frameworks/blueprint/templates/project/screen.sass +5 -4
  14. data/frameworks/blueprint/templates/semantic/partials/_page.sass +3 -4
  15. data/frameworks/compass/stylesheets/compass/_css3.scss +16 -1
  16. data/frameworks/compass/stylesheets/compass/_support.scss +2 -0
  17. data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +1 -1
  18. data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +85 -12
  19. data/frameworks/compass/stylesheets/compass/css3/_gradient.scss +6 -13
  20. data/frameworks/compass/stylesheets/compass/css3/_images.scss +42 -2
  21. data/frameworks/compass/stylesheets/compass/css3/_pie.scss +73 -0
  22. data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +39 -4
  23. data/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss +87 -0
  24. data/frameworks/compass/stylesheets/compass/css3/_transform.scss +553 -54
  25. data/frameworks/compass/templates/ellipsis/manifest.rb +3 -3
  26. data/frameworks/compass/templates/extension/manifest.rb +1 -1
  27. data/frameworks/compass/templates/pie/LICENSE +12 -0
  28. data/frameworks/compass/templates/pie/LICENSE-APACHE2.txt +13 -0
  29. data/frameworks/compass/templates/pie/LICENSE-GPL2.txt +278 -0
  30. data/frameworks/compass/templates/pie/PIE.htc +77 -0
  31. data/frameworks/compass/templates/pie/manifest.rb +39 -0
  32. data/frameworks/compass/templates/pie/pie.scss +74 -0
  33. data/lib/compass.rb +1 -1
  34. data/lib/compass/exec/helpers.rb +1 -1
  35. data/lib/compass/installers/base.rb +15 -1
  36. data/lib/compass/rails.rb +2 -0
  37. data/lib/compass/sass_extensions/functions/colors.rb +1 -5
  38. data/lib/compass/sass_extensions/functions/constants.rb +52 -11
  39. data/lib/compass/sass_extensions/functions/gradient_support.rb +382 -190
  40. data/lib/compass/sass_extensions/functions/if.rb +2 -2
  41. data/lib/compass/sass_extensions/functions/lists.rb +2 -0
  42. data/lib/compass/sass_extensions/functions/urls.rb +1 -1
  43. data/lib/compass/util.rb +18 -0
  44. data/test/fixtures/stylesheets/compass/css/gradients.css +110 -85
  45. data/test/fixtures/stylesheets/compass/css/pie.css +25 -0
  46. data/test/fixtures/stylesheets/compass/css/text_shadow.css +14 -0
  47. data/test/fixtures/stylesheets/compass/sass/box.sass +1 -1
  48. data/test/fixtures/stylesheets/compass/sass/box_shadow.scss +2 -2
  49. data/test/fixtures/stylesheets/compass/sass/gradients.sass +1 -1
  50. data/test/fixtures/stylesheets/compass/sass/pie.scss +47 -0
  51. data/test/fixtures/stylesheets/compass/sass/text_shadow.scss +7 -0
  52. data/test/fixtures/stylesheets/compass/sass/transform.scss +1 -1
  53. metadata +30 -9
  54. data/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss +0 -98
  55. data/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss +0 -72
  56. data/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss +0 -584
  57. data/frameworks/compass/stylesheets/compass/css3/_version-1.scss +0 -16
  58. data/frameworks/compass/stylesheets/compass/css3/_version-2.scss +0 -16
  59. data/lib/rails/init.rb +0 -2
@@ -0,0 +1,14 @@
1
+ .legacy-text-shadow {
2
+ text-shadow: #777777 5px 5px 10px; }
3
+
4
+ .single-text-shadow {
5
+ text-shadow: #aaaaaa 0px 0px 1px; }
6
+
7
+ .default-text-shadow {
8
+ text-shadow: #aaaaaa 0px 0px 1px; }
9
+
10
+ .multiple-text-shadows-with-default {
11
+ text-shadow: #aaaaaa 0px 0px 1px, 2px 2px 5px #222222; }
12
+
13
+ .multiple-text-shadows {
14
+ text-shadow: 4px 4px 10px #444444, 2px 2px 5px #222222; }
@@ -1,4 +1,4 @@
1
- @import compass/css3
1
+ @import compass/css3/box
2
2
 
3
3
  .hbox
4
4
  +display-box
@@ -1,5 +1,5 @@
1
- @import "compass/css3/box-shadow-v2";
1
+ @import "compass/css3/box-shadow";
2
2
 
3
3
  .box-shadow { @include box-shadow(default, 2px 2px 5px #222);}
4
4
  .single-box-shadow { @include single-box-shadow;}
5
- .multiple-box-shadows { @include multiple-box-shadows(default, 2px 2px 5px #222);}
5
+ .multiple-box-shadows { @include box-shadow(default, 2px 2px 5px #222);}
@@ -1,4 +1,4 @@
1
- @import compass/css3
1
+ @import compass/css3/images, compass/css3/gradient
2
2
 
3
3
  $experimental-support-for-svg: true
4
4
  .bg-simple-image
@@ -0,0 +1,47 @@
1
+ @import "compass/css3";
2
+ @import "compass/css3/pie";
3
+
4
+
5
+ // There are two approaches to creating PIE elements
6
+ // The default approach is to make the element position: relative.
7
+ $pie-base-class: pie-element;
8
+ .pie-element {
9
+ // relative is the default, so passing relative
10
+ // is redundant, but we do it here for clarity.
11
+ @include pie-element(relative);
12
+ }
13
+
14
+ .bordered {
15
+ @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
16
+ @include border-radius(5px);
17
+ }
18
+
19
+ .gradient {
20
+ @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
21
+ @include background(linear-gradient(#f00, #00f));
22
+ }
23
+
24
+
25
+ // But sometimes this messes up your positioning
26
+ // So you can also use z-indexing. In this case
27
+ // an ancestor element before or having the first
28
+ // opaque background should be marked as a pie-container
29
+ // which gives it a z-index of 0 (actually any z-index
30
+ // can be provided to the pie-container mixin).
31
+ // And then the pie element itself should be given
32
+ // a z-index of -1.
33
+ .pie-container {
34
+ @include pie-container;
35
+ }
36
+
37
+ .z-pie-element {
38
+ // this will get a z-index of 0, you can pass a z-index value if you want
39
+ @include pie-element(z-index);
40
+ }
41
+
42
+ .widget {
43
+ @extend .pie-container; // This will
44
+ h3 {
45
+ @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
46
+ }
47
+ }
@@ -0,0 +1,7 @@
1
+ @import "compass/css3/text-shadow";
2
+
3
+ .legacy-text-shadow { @include text-shadow(#777, 5px, 5px, 10px); }
4
+ .single-text-shadow { @include single-text-shadow;}
5
+ .default-text-shadow { @include text-shadow;}
6
+ .multiple-text-shadows-with-default { @include text-shadow(default, 2px 2px 5px #222);}
7
+ .multiple-text-shadows { @include text-shadow(4px 4px 10px #444, 2px 2px 5px #222);}
@@ -1,4 +1,4 @@
1
- @import "compass/css3/transform-v2";
1
+ @import "compass/css3/transform";
2
2
 
3
3
  .apply-origin-2d { @include apply-origin(2px 5%, false); }
4
4
  .apply-origin-3d { @include apply-origin(2px 5% 2in, true); }
metadata CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
6
6
  - 0
7
7
  - 11
8
8
  - alpha
9
- - 0
10
- version: 0.11.alpha.0
9
+ - 1
10
+ version: 0.11.alpha.1
11
11
  platform: ruby
12
12
  authors:
13
13
  - Chris Eppstein
@@ -17,7 +17,7 @@ autorequire:
17
17
  bindir: bin
18
18
  cert_chain: []
19
19
 
20
- date: 2010-11-15 00:00:00 -08:00
20
+ date: 2010-11-24 00:00:00 -08:00
21
21
  default_executable: compass
22
22
  dependencies:
23
23
  - !ruby/object:Gem::Dependency
@@ -115,10 +115,19 @@ files:
115
115
  - examples/compass/clean.rb
116
116
  - examples/compass/compass.html.haml
117
117
  - examples/compass/config.rb
118
+ - examples/compass/headers.txt
118
119
  - examples/compass/images/blue_arrow.gif
120
+ - examples/compass/images/border2.png
121
+ - examples/compass/images/icon-chrome.png
122
+ - examples/compass/images/icon-firefox.png
123
+ - examples/compass/images/icon-ie.png
124
+ - examples/compass/images/icon-opera.png
125
+ - examples/compass/images/icon-safari.png
126
+ - examples/compass/pie.html.haml
119
127
  - examples/compass/src/bp_layout.scss
120
128
  - examples/compass/src/compass.scss
121
129
  - examples/compass/src/images/blue_arrow.gif
130
+ - examples/compass/src/pie.scss
122
131
  - examples/compass/src/sticky_footer.scss
123
132
  - examples/compass/src/utilities.scss
124
133
  - examples/compass/sticky_footer.html.haml
@@ -226,7 +235,6 @@ files:
226
235
  - frameworks/compass/stylesheets/compass/css3/_background-origin.scss
227
236
  - frameworks/compass/stylesheets/compass/css3/_background-size.scss
228
237
  - frameworks/compass/stylesheets/compass/css3/_border-radius.scss
229
- - frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss
230
238
  - frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
231
239
  - frameworks/compass/stylesheets/compass/css3/_box-sizing.scss
232
240
  - frameworks/compass/stylesheets/compass/css3/_box.scss
@@ -236,14 +244,12 @@ files:
236
244
  - frameworks/compass/stylesheets/compass/css3/_images.scss
237
245
  - frameworks/compass/stylesheets/compass/css3/_inline-block.scss
238
246
  - frameworks/compass/stylesheets/compass/css3/_opacity.scss
247
+ - frameworks/compass/stylesheets/compass/css3/_pie.scss
239
248
  - frameworks/compass/stylesheets/compass/css3/_shared.scss
240
- - frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss
241
249
  - frameworks/compass/stylesheets/compass/css3/_text-shadow.scss
242
- - frameworks/compass/stylesheets/compass/css3/_transform-v2.scss
250
+ - frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss
243
251
  - frameworks/compass/stylesheets/compass/css3/_transform.scss
244
252
  - frameworks/compass/stylesheets/compass/css3/_transition.scss
245
- - frameworks/compass/stylesheets/compass/css3/_version-1.scss
246
- - frameworks/compass/stylesheets/compass/css3/_version-2.scss
247
253
  - frameworks/compass/stylesheets/compass/layout/_sticky-footer.scss
248
254
  - frameworks/compass/stylesheets/compass/layout/_stretching.scss
249
255
  - frameworks/compass/stylesheets/compass/reset/_utilities.scss
@@ -282,6 +288,12 @@ files:
282
288
  - frameworks/compass/templates/extension/stylesheets/main.sass
283
289
  - frameworks/compass/templates/extension/templates/project/manifest.rb
284
290
  - frameworks/compass/templates/extension/templates/project/screen.sass
291
+ - frameworks/compass/templates/pie/LICENSE
292
+ - frameworks/compass/templates/pie/LICENSE-APACHE2.txt
293
+ - frameworks/compass/templates/pie/LICENSE-GPL2.txt
294
+ - frameworks/compass/templates/pie/manifest.rb
295
+ - frameworks/compass/templates/pie/PIE.htc
296
+ - frameworks/compass/templates/pie/pie.scss
285
297
  - frameworks/compass/templates/project/ie.sass
286
298
  - frameworks/compass/templates/project/manifest.rb
287
299
  - frameworks/compass/templates/project/print.sass
@@ -351,6 +363,7 @@ files:
351
363
  - lib/compass/installers/template_context.rb
352
364
  - lib/compass/installers.rb
353
365
  - lib/compass/logger.rb
366
+ - lib/compass/rails.rb
354
367
  - lib/compass/sass_extensions/functions/colors.rb
355
368
  - lib/compass/sass_extensions/functions/constants.rb
356
369
  - lib/compass/sass_extensions/functions/display.rb
@@ -370,10 +383,10 @@ files:
370
383
  - lib/compass/sass_extensions.rb
371
384
  - lib/compass/stats.rb
372
385
  - lib/compass/test_case.rb
386
+ - lib/compass/util.rb
373
387
  - lib/compass/validator.rb
374
388
  - lib/compass/version.rb
375
389
  - lib/compass.rb
376
- - lib/rails/init.rb
377
390
  - lib/vendor/fssm/fssm/backends/fsevents.rb
378
391
  - lib/vendor/fssm/fssm/backends/inotify.rb
379
392
  - lib/vendor/fssm/fssm/backends/polling.rb
@@ -454,9 +467,11 @@ files:
454
467
  - test/fixtures/stylesheets/compass/css/layout.css
455
468
  - test/fixtures/stylesheets/compass/css/legacy_clearfix.css
456
469
  - test/fixtures/stylesheets/compass/css/lists.css
470
+ - test/fixtures/stylesheets/compass/css/pie.css
457
471
  - test/fixtures/stylesheets/compass/css/print.css
458
472
  - test/fixtures/stylesheets/compass/css/reset.css
459
473
  - test/fixtures/stylesheets/compass/css/stretching.css
474
+ - test/fixtures/stylesheets/compass/css/text_shadow.css
460
475
  - test/fixtures/stylesheets/compass/css/transform.css
461
476
  - test/fixtures/stylesheets/compass/css/utilities.css
462
477
  - test/fixtures/stylesheets/compass/images/100x150.gif
@@ -475,9 +490,11 @@ files:
475
490
  - test/fixtures/stylesheets/compass/sass/layout.sass
476
491
  - test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
477
492
  - test/fixtures/stylesheets/compass/sass/lists.scss
493
+ - test/fixtures/stylesheets/compass/sass/pie.scss
478
494
  - test/fixtures/stylesheets/compass/sass/print.sass
479
495
  - test/fixtures/stylesheets/compass/sass/reset.sass
480
496
  - test/fixtures/stylesheets/compass/sass/stretching.sass
497
+ - test/fixtures/stylesheets/compass/sass/text_shadow.scss
481
498
  - test/fixtures/stylesheets/compass/sass/transform.scss
482
499
  - test/fixtures/stylesheets/compass/sass/utilities.scss
483
500
  - test/fixtures/stylesheets/image_urls/config.rb
@@ -606,9 +623,11 @@ test_files:
606
623
  - test/fixtures/stylesheets/compass/css/layout.css
607
624
  - test/fixtures/stylesheets/compass/css/legacy_clearfix.css
608
625
  - test/fixtures/stylesheets/compass/css/lists.css
626
+ - test/fixtures/stylesheets/compass/css/pie.css
609
627
  - test/fixtures/stylesheets/compass/css/print.css
610
628
  - test/fixtures/stylesheets/compass/css/reset.css
611
629
  - test/fixtures/stylesheets/compass/css/stretching.css
630
+ - test/fixtures/stylesheets/compass/css/text_shadow.css
612
631
  - test/fixtures/stylesheets/compass/css/transform.css
613
632
  - test/fixtures/stylesheets/compass/css/utilities.css
614
633
  - test/fixtures/stylesheets/compass/images/100x150.gif
@@ -627,9 +646,11 @@ test_files:
627
646
  - test/fixtures/stylesheets/compass/sass/layout.sass
628
647
  - test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
629
648
  - test/fixtures/stylesheets/compass/sass/lists.scss
649
+ - test/fixtures/stylesheets/compass/sass/pie.scss
630
650
  - test/fixtures/stylesheets/compass/sass/print.sass
631
651
  - test/fixtures/stylesheets/compass/sass/reset.sass
632
652
  - test/fixtures/stylesheets/compass/sass/stretching.sass
653
+ - test/fixtures/stylesheets/compass/sass/text_shadow.scss
633
654
  - test/fixtures/stylesheets/compass/sass/transform.scss
634
655
  - test/fixtures/stylesheets/compass/sass/utilities.scss
635
656
  - test/fixtures/stylesheets/image_urls/config.rb
@@ -1,98 +0,0 @@
1
- // @doc off
2
- // These defaults make the arguments optional for this mixin
3
- // If you like, set different defaults before importing.
4
- // @doc on
5
-
6
- @import "shared";
7
-
8
-
9
- // The default color for box shadows
10
- $default-box-shadow-color: #333333 !default;
11
-
12
- // The default horizontal offset. Positive is to the right.
13
- $default-box-shadow-h-offset: 0px !default;
14
-
15
- // The default vertical offset. Positive is down.
16
- $default-box-shadow-v-offset: 0px !default;
17
-
18
- // The default blur length.
19
- $default-box-shadow-blur: 5px !default;
20
-
21
- // The default spread length.
22
- $default-box-shadow-spread : false !default;
23
-
24
- // The default shadow instet: inset or false (for standard shadow).
25
- $default-box-shadow-inset : false !default;
26
-
27
- // Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
28
- // Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
29
- @mixin single-box-shadow(
30
- $color : $default-box-shadow-color,
31
- $hoff : $default-box-shadow-h-offset,
32
- $voff : $default-box-shadow-v-offset,
33
- $blur : $default-box-shadow-blur,
34
- $spread : $default-box-shadow-spread,
35
- $inset : $default-box-shadow-inset
36
- ) {
37
- @if not ($inset == true or $inset == false or $inset == inset) {
38
- @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
39
- }
40
-
41
- @if $color == none {
42
- @include multiple-box-shadows(none);
43
- } @else {
44
- $full : $hoff $voff;
45
- @if $blur { $full: $full $blur; }
46
- @if $spread { $full: $full $spread; }
47
- @if $color { $full: $full $color; }
48
- @if $inset { $full: inset $full; }
49
- @include multiple-box-shadows($full);
50
- }
51
- }
52
-
53
- // Provides cross-browser box shadows when one or more box shadows are needed.
54
- @mixin multiple-box-shadows(
55
- $shadow-1 : default,
56
- $shadow-2 : false,
57
- $shadow-3 : false,
58
- $shadow-4 : false,
59
- $shadow-5 : false,
60
- $shadow-6 : false,
61
- $shadow-7 : false,
62
- $shadow-8 : false,
63
- $shadow-9 : false,
64
- $shadow-10: false
65
- ) {
66
-
67
- @if not ($default-box-shadow-inset == true or $default-box-shadow-inset == false or $default-box-shadow-inset == inset) {
68
- @warn "$default-box-shadow-inset expected to be true or the inset keyword. Got #{$default-box-shadow-inset} instead. Using: inset";
69
- }
70
-
71
- @if $shadow-1 == default {
72
- $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
73
- }
74
-
75
- $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
76
- @include experimental(box-shadow, $shadow,
77
- -moz, -webkit, -o, not -ms, not -khtml, official
78
- );
79
- }
80
-
81
- @mixin box-shadow(
82
- $shadow-1 : default,
83
- $shadow-2 : false,
84
- $shadow-3 : false,
85
- $shadow-4 : false,
86
- $shadow-5 : false,
87
- $shadow-6 : false,
88
- $shadow-7 : false,
89
- $shadow-8 : false,
90
- $shadow-9 : false,
91
- $shadow-10: false
92
- ) {
93
- @include multiple-box-shadows(
94
- $shadow-1, $shadow-2, $shadow-3,
95
- $shadow-4, $shadow-5, $shadow-6,
96
- $shadow-7, $shadow-8, $shadow-9, $shadow-10
97
- );
98
- }
@@ -1,72 +0,0 @@
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
-
11
- // Provides CSS text shadows.
12
- // Arguments are color, horizontal offset, vertical offset, and blur
13
- @mixin single-text-shadow(
14
- $color: $default-text-shadow-color,
15
- $hoff: $default-text-shadow-h-offset,
16
- $voff: $default-text-shadow-v-offset,
17
- $blur: $default-text-shadow-blur
18
- ) {
19
- // XXX I'm surprised we don't need experimental support for this property.
20
- @if $color == none {
21
- text-shadow: none;
22
- } @else {
23
- text-shadow: $color $hoff $voff $blur;
24
- }
25
- }
26
-
27
- // Provides cross-browser text shadows when one or more shadows are needed.
28
- @mixin multiple-text-shadows(
29
- $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
30
- $shadow-2 : false,
31
- $shadow-3 : false,
32
- $shadow-4 : false,
33
- $shadow-5 : false,
34
- $shadow-6 : false,
35
- $shadow-7 : false,
36
- $shadow-8 : false,
37
- $shadow-9 : false,
38
- $shadow-10: false
39
- ) {
40
- // Ugh. Sass needs variable argument support.
41
- $shadow : $shadow-1;
42
- @if $shadow-2 { $shadow: $shadow, $shadow-2; }
43
- @if $shadow-3 { $shadow: $shadow, $shadow-3; }
44
- @if $shadow-4 { $shadow: $shadow, $shadow-4; }
45
- @if $shadow-5 { $shadow: $shadow, $shadow-5; }
46
- @if $shadow-6 { $shadow: $shadow, $shadow-6; }
47
- @if $shadow-7 { $shadow: $shadow, $shadow-7; }
48
- @if $shadow-8 { $shadow: $shadow, $shadow-8; }
49
- @if $shadow-9 { $shadow: $shadow, $shadow-9; }
50
- @if $shadow-10 { $shadow: $shadow, $shadow-10; }
51
- // Anticlimactic, we know.
52
- text-shadow: $shadow
53
- }
54
-
55
- @mixin text-shadow(
56
- $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
57
- $shadow-2 : false,
58
- $shadow-3 : false,
59
- $shadow-4 : false,
60
- $shadow-5 : false,
61
- $shadow-6 : false,
62
- $shadow-7 : false,
63
- $shadow-8 : false,
64
- $shadow-9 : false,
65
- $shadow-10: false
66
- ) {
67
- @include multiple-text-shadows(
68
- $shadow-1, $shadow-2, $shadow-3,
69
- $shadow-4, $shadow-5, $shadow-6,
70
- $shadow-7, $shadow-8, $shadow-9, $shadow-10
71
- );
72
- }
@@ -1,584 +0,0 @@
1
- @import "shared";
2
-
3
- // @doc off
4
- // Note ----------------------------------------------------------------------
5
- // Safari is the only browser that currently supports 3D transforms.
6
- // Because of that it can be important to control whether a given 2D transform
7
- // uses the full range of experimental browser prefixes, or only the 3D list.
8
- // To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
9
- // to switch between the two support lists. The toggle defaults to 'false' (2D),
10
- // and also accepts 'true' (3D). Currently the lists are as follows:
11
- // 2D: Mozilla, Webkit, Opera, Official
12
- // 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
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
- // Transform Origin
51
- $default-origin-x : 50% !default;
52
- $default-origin-y : 50% !default;
53
- $default-origin-z : 50% !default;
54
-
55
- // Scale
56
- $default-scale-x : 1.25 !default;
57
- $default-scale-y : $default-scale-x !default;
58
- $default-scale-z : $default-scale-x !default;
59
-
60
- // Rotate
61
- $default-rotate : 45deg !default;
62
-
63
- // Rotate3d
64
- $default-vector-x : 1 !default;
65
- $default-vector-y : 1 !default;
66
- $default-vector-z : 1 !default;
67
-
68
- // Translate
69
- $default-translate-x : 1em !default;
70
- $default-translate-y : $default-translate-x !default;
71
- $default-translate-z : $default-translate-x !default;
72
-
73
- // Skew
74
- $default-skew-x : 5deg !default;
75
- $default-skew-y : 5deg !default;
76
-
77
-
78
- // **Transform-origin**
79
- // Transform-origin sent as a complete string
80
- //
81
- // @include apply-origin( origin [, 3D-only ] )
82
- //
83
- // where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
84
- // in percentages, absolute (px, cm, in, em etc..) or relative
85
- // (left, top, right, bottom, center) units
86
- //
87
- // @param only3d Set this to true to only apply this
88
- // mixin where browsers have 3D support.
89
- @mixin apply-origin($origin, $only3d) {
90
- $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
91
- @if $only3d {
92
- @include experimental(transform-origin, $origin,
93
- not -moz, -webkit, not -o, not -ms, not -khtml, official
94
- );
95
- } @else {
96
- @include experimental(transform-origin, $origin,
97
- -moz, -webkit, -o, not -ms, not -khtml, official
98
- );
99
- }
100
- }
101
-
102
- // Transform-origin sent as individual arguments:
103
- //
104
- // @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
105
- //
106
- // where the 3 'origin-' arguments represent x/y/z coordinates.
107
- //
108
- // **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
109
- @mixin transform-origin(
110
- $origin-x: $default-origin-x,
111
- $origin-y: $default-origin-y,
112
- $origin-z: false,
113
- $only3d: false
114
- ) {
115
- $origin: unquote('');
116
- @if $origin-x or $origin-y or $origin-z {
117
- @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
118
- @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
119
- @if $origin-z { $origin: $origin $origin-z; }
120
- @include apply-origin($origin, $only3d);
121
- }
122
- }
123
-
124
-
125
- // Transform sent as a complete string:
126
- //
127
- // @include transform( transforms [, 3D-only ] )
128
- //
129
- // where 'transforms' is a space separated list of all the transforms to be applied
130
- @mixin transform(
131
- $transform,
132
- $only3d: false
133
- ) {
134
- @if $only3d {
135
- @include experimental(transform, $transform,
136
- not -moz, -webkit, not -o, not -ms, not -khtml, official
137
- );
138
- } @else {
139
- @include experimental(transform, $transform,
140
- -moz, -webkit, -o, not -ms, not -khtml, official
141
- );
142
- }
143
- }
144
-
145
- // Shortcut to target all browsers with 2D transform support
146
- @mixin transform2d($trans) {
147
- @include transform($trans, false);
148
- }
149
-
150
- // Shortcut to target only browsers with 3D transform support
151
- @mixin transform3d($trans) {
152
- @include transform($trans, true);
153
- }
154
-
155
- // @doc off
156
- // 3D Parameters -------------------------------------------------------------
157
- // @doc on
158
-
159
- // Set the perspective of 3D transforms on the children of an element:
160
- //
161
- // @include perspective( perspective )
162
- //
163
- // where 'perspective' is a uniless number representing the depth of the z-axis
164
- // the higher the perspective, the more exagerated the foreshortening.
165
- // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
166
- @mixin perspective($p) {
167
- @include experimental(perspective, $p,
168
- not -moz, -webkit, not -o, not -ms, not -khtml, official
169
- );
170
- }
171
-
172
- // Set the origin position for the perspective
173
- //
174
- // @include perspective-origin(origin-x [origin-y])
175
- //
176
- // where the two arguments represent x/y coordinates
177
- @mixin perspective-origin($origin: 50%) {
178
- @include experimental(perspective-origin, $origin,
179
- not -moz, -webkit, not -o, not -ms, not -khtml, official
180
- );
181
- }
182
-
183
- // Determine whether a 3D objects children also live in the given 3D space
184
- //
185
- // @include transform-style( [ style ] )
186
- //
187
- // where `style` can be either `flat` or `preserves-3d`
188
- // browsers default to `flat`, mixin defaults to `preserves-3d`
189
- @mixin transform-style($style: preserves-3d) {
190
- @include experimental(perspective-origin, $style,
191
- not -moz, -webkit, not -o, not -ms, not -khtml, official
192
- );
193
- }
194
-
195
- // Determine the visibility of an element when it's back is turned
196
- //
197
- // @include backface-visibility( [ visibility ] )
198
- //
199
- // where `visibility` can be either `visible` or `hidden`
200
- // browsers default to visible, mixin defaults to hidden
201
- @mixin backface-visibility($visibility: hidden) {
202
- @include experimental(backface-visibility, $visibility,
203
- not -moz, -webkit, not -o, not -ms, not -khtml, official
204
- );
205
- }
206
-
207
- // @doc off
208
- // Transform Partials --------------------------------------------------------
209
- // These work well on their own, but they don't add to each other, they override.
210
- // Use along with transform parameter mixins to adjust origin, perspective and style
211
- // ---------------------------------------------------------------------------
212
-
213
-
214
- // Scale ---------------------------------------------------------------------
215
- // @doc on
216
-
217
- // Scale an object along the x and y axis:
218
- //
219
- // @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
220
- //
221
- // where the 'scale-' arguments are unitless multipliers of the x and y dimensions
222
- // and perspective, which works the same as the stand-alone perspective property/mixin
223
- // but applies to the individual element (multiplied with any parent perspective)
224
- //
225
- // **Note** This mixin cannot be combined with other transform mixins.
226
- @mixin scale(
227
- $scale-x: $default-scale-x,
228
- $scale-y: $scale-x,
229
- $perspective: false,
230
- $only3d: false
231
- ) {
232
- $trans: scale($scale-x, $scale-y);
233
- @if $perspective { $trans: perspective($perspective) $trans; }
234
- @include transform($trans, $only3d);
235
- }
236
-
237
- // Scale an object along the x axis
238
- // @include scaleX( [ scale-x, perspective, 3D-only ] )
239
- //
240
- // **Note** This mixin cannot be combined with other transform mixins.
241
- @mixin scaleX(
242
- $scale: $default-scale-x,
243
- $perspective: false,
244
- $only3d: false
245
- ) {
246
- $trans: scaleX($scale);
247
- @if $perspective { $trans: perspective($perspective) $trans; }
248
- @include transform($trans, $only3d);
249
- }
250
-
251
- // Scale an object along the y axis
252
- // @include scaleY( [ scale-y, perspective, 3D-only ] )
253
- //
254
- // **Note** This mixin cannot be combined with other transform mixins.
255
- @mixin scaleY(
256
- $scale: $default-scale-y,
257
- $perspective: false,
258
- $only3d: false
259
- ) {
260
- $trans: scaleY($scale);
261
- @if $perspective { $trans: perspective($perspective) $trans; }
262
- @include transform($trans, $only3d);
263
- }
264
-
265
- // Scale an object along the z axis
266
- // @include scaleZ( [ scale-z, perspective ] )
267
- //
268
- // **Note** This mixin cannot be combined with other transform mixins.
269
- @mixin scaleZ(
270
- $scale: $default-scale-z,
271
- $perspective: false
272
- ) {
273
- $trans: scaleZ($scale);
274
- @if $perspective { $trans: perspective($perspective) $trans; }
275
- @include transform3d($trans);
276
- }
277
-
278
- // Scale and object along all three axis
279
- // @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
280
- //
281
- // **Note** This mixin cannot be combined with other transform mixins.
282
- @mixin scale3d(
283
- $scale-x: $default-scale-x,
284
- $scale-y: $default-scale-y,
285
- $scale-z: $default-scale-z,
286
- $perspective: false
287
- ) {
288
- $trans: scale3d($scale-x, $scale-y, $scale-z);
289
- @if $perspective { $trans: perspective($perspective) $trans; }
290
- @include transform3d($trans);
291
- }
292
-
293
- // @doc off
294
- // Rotate --------------------------------------------------------------------
295
- // @doc on
296
-
297
- // Rotate an object around the z axis (2D)
298
- // @include rotate( [ rotation, perspective, 3D-only ] )
299
- // where 'rotation' is an angle set in degrees (deg) or radian (rad) units
300
- //
301
- // **Note** This mixin cannot be combined with other transform mixins.
302
- @mixin rotate(
303
- $rotate: $default-rotate,
304
- $perspective: false,
305
- $only3d: false
306
- ) {
307
- $trans: rotate($rotate);
308
- @if $perspective { $trans: perspective($perspective) $trans; }
309
- @include transform($trans, $only3d);
310
- }
311
-
312
- // A longcut for 'rotate' in case you forget that 'z' is implied
313
- //
314
- // **Note** This mixin cannot be combined with other transform mixins.
315
- @mixin rotateZ(
316
- $rotate: $default-rotate,
317
- $perspective: false,
318
- $only3d: false
319
- ) {
320
- @include rotate($rotate, $perspective, $only3d);
321
- }
322
-
323
- // Rotate an object around the x axis (3D)
324
- // @include rotateX( [ rotation, perspective ] )
325
- //
326
- // **Note** This mixin cannot be combined with other transform mixins.
327
- @mixin rotateX(
328
- $rotate: $default-rotate,
329
- $perspective: false
330
- ) {
331
- $trans: rotateX($rotate);
332
- @if $perspective { $trans: perspective($perspective) $trans; }
333
- @include transform3d($trans);
334
- }
335
-
336
- // Rotate an object around the y axis (3D)
337
- // @include rotate( [ rotation, perspective ] )
338
- //
339
- // **Note** This mixin cannot be combined with other transform mixins.
340
- @mixin rotateY(
341
- $rotate: $default-rotate,
342
- $perspective: false
343
- ) {
344
- $trans: rotateY($rotate);
345
- @if $perspective { $trans: perspective($perspective) $trans; }
346
- @include transform3d($trans);
347
- }
348
-
349
- // Rotate an object around an arbitrary axis (3D)
350
- // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
351
- // where the 'vector-' arguments accept unitless numbers
352
- // these numbers are not important on their own, but in relation to one another
353
- // creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
354
- //
355
- // **Note** This mixin cannot be combined with other transform mixins.
356
- @mixin rotate3d(
357
- $vector-x: $default-vector-x,
358
- $vector-y: $default-vector-y,
359
- $vector-z: $default-vector-z,
360
- $rotate: $default-rotate,
361
- $perspective: false
362
- ) {
363
- $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
364
- @if $perspective { $trans: perspective($perspective) $trans; }
365
- @include transform3d($trans);
366
- }
367
-
368
- // @doc off
369
- // Translate -----------------------------------------------------------------
370
- // @doc on
371
-
372
- // Move an object along the x or y axis (2D)
373
- // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
374
- // where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
375
- //
376
- // **Note** This mixin cannot be combined with other transform mixins.
377
- @mixin translate(
378
- $translate-x: $default-translate-x,
379
- $translate-y: $default-translate-y,
380
- $perspective: false,
381
- $only3d: false
382
- ) {
383
- $trans: translate($translate-x, $translate-y);
384
- @if $perspective { $trans: perspective($perspective) $trans; }
385
- @include transform($trans, $only3d);
386
- }
387
-
388
- // Move an object along the x axis (2D)
389
- // @include translate( [ translate-x, perspective, 3D-only ] )
390
- //
391
- // **Note** This mixin cannot be combined with other transform mixins.
392
- @mixin translateX(
393
- $trans-x: $default-translate-x,
394
- $perspective: false,
395
- $only3d: false
396
- ) {
397
- $trans: translateX($trans-x);
398
- @if $perspective { $trans: perspective($perspective) $trans; }
399
- @include transform($trans, $only3d);
400
- }
401
-
402
- // Move an object along the y axis (2D)
403
- // @include translate( [ translate-y, perspective, 3D-only ] )
404
- //
405
- // **Note** This mixin cannot be combined with other transform mixins.
406
- @mixin translateY(
407
- $trans-y: $default-translate-y,
408
- $perspective: false,
409
- $only3d: false
410
- ) {
411
- $trans: translateY($trans-y);
412
- @if $perspective { $trans: perspective($perspective) $trans; }
413
- @include transform($trans, $only3d);
414
- }
415
-
416
- // Move an object along the z axis (3D)
417
- // @include translate( [ translate-z, perspective ] )
418
- //
419
- // **Note** This mixin cannot be combined with other transform mixins.
420
- @mixin translateZ(
421
- $trans-z: $default-translate-z,
422
- $perspective: false
423
- ) {
424
- $trans: translateZ($trans-z);
425
- @if $perspective { $trans: perspective($perspective) $trans; }
426
- @include transform3d($trans);
427
- }
428
-
429
- // Move an object along the x, y and z axis (3D)
430
- // @include translate( [ translate-x, translate-y, translate-z, perspective ] )
431
- //
432
- // **Note** This mixin cannot be combined with other transform mixins.
433
- @mixin translate3d(
434
- $translate-x: $default-translate-x,
435
- $translate-y: $default-translate-y,
436
- $translate-z: $default-translate-z,
437
- $perspective: false
438
- ) {
439
- $trans: translate3d($translate-x, $translate-y, $translate-z);
440
- @if $perspective { $trans: perspective($perspective) $trans; }
441
- @include transform3d($trans);
442
- }
443
-
444
- // @doc off
445
- // Skew ----------------------------------------------------------------------
446
- // @doc on
447
-
448
- // Skew an element:
449
- //
450
- // @include skew( [ skew-x, skew-y, 3D-only ] )
451
- //
452
- // where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
453
- //
454
- // **Note** This mixin cannot be combined with other transform mixins.
455
- @mixin skew(
456
- $skew-x: $default-skew-x,
457
- $skew-y: $default-skew-y,
458
- $only3d: false
459
- ) {
460
- $trans: skew($skew-x, $skew-y);
461
- @include transform($trans, $only3d);
462
- }
463
-
464
- // Skew an element along the x axiz
465
- //
466
- // @include skew( [ skew-x, 3D-only ] )
467
- //
468
- // **Note** This mixin cannot be combined with other transform mixins.
469
- @mixin skewX(
470
- $skew-x: $default-skew-x,
471
- $only3d: false
472
- ) {
473
- $trans: skewX($skew-x);
474
- @include transform($trans, $only3d);
475
- }
476
-
477
- // Skew an element along the y axis
478
- //
479
- // @include skew( [ skew-y, 3D-only ] )
480
- //
481
- // **Note** This mixin cannot be combined with other transform mixins.
482
- @mixin skewY(
483
- $skew-y: $default-skew-y,
484
- $only3d: false
485
- ) {
486
- $trans: skewY($skew-y);
487
- @include transform($trans, $only3d);
488
- }
489
-
490
-
491
- // Full transform mixins
492
- // For settings any combination of transforms as arguments
493
- // These are complex and not highly recommended for daily use
494
- // They are mainly here for backwards-compatability purposes
495
- //
496
- // * they include origin adjustments
497
- // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
498
- //
499
- // **Note** This mixin cannot be combined with other transform mixins.
500
- @mixin create-transform(
501
- $perspective: false,
502
- $scale-x: false,
503
- $scale-y: false,
504
- $scale-z: false,
505
- $rotate-x: false,
506
- $rotate-y: false,
507
- $rotate-z: false,
508
- $rotate3d: false,
509
- $trans-x: false,
510
- $trans-y: false,
511
- $trans-z: false,
512
- $skew-x: false,
513
- $skew-y: false,
514
- $origin-x: false,
515
- $origin-y: false,
516
- $origin-z: false,
517
- $only3d: false
518
- ) {
519
- $trans: unquote("");
520
-
521
- // perspective
522
- @if $perspective { $trans: perspective($perspective) ; }
523
-
524
- // scale
525
- @if $scale-x and $scale-y {
526
- @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
527
- @else { $trans: $trans scale($scale-x, $scale-y); }
528
- } @else {
529
- @if $scale-x { $trans: $trans scaleX($scale-x); }
530
- @if $scale-y { $trans: $trans scaleY($scale-y); }
531
- @if $scale-z { $trans: $trans scaleZ($scale-z); }
532
- }
533
-
534
- // rotate
535
- @if $rotate-x { $trans: $trans rotateX($rotate-x); }
536
- @if $rotate-y { $trans: $trans rotateY($rotate-y); }
537
- @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
538
- @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
539
-
540
- // translate
541
- @if $trans-x and $trans-y {
542
- @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
543
- @else { $trans: $trans translate($trans-x, $trans-y); }
544
- } @else {
545
- @if $trans-x { $trans: $trans translateX($trans-x); }
546
- @if $trans-y { $trans: $trans translateY($trans-y); }
547
- @if $trans-z { $trans: $trans translateZ($trans-z); }
548
- }
549
-
550
- // skew
551
- @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
552
- @else {
553
- @if $skew-x { $trans: $trans skewX($skew-x); }
554
- @if $skew-y { $trans: $trans skewY($skew-y); }
555
- }
556
-
557
- // apply it!
558
- @include transform($trans, $only3d);
559
- @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
560
- }
561
-
562
-
563
- // A simplified set of options
564
- // backwards-compatible with the previous version of the 'transform' mixin
565
- @mixin simple-transform(
566
- $scale: false,
567
- $rotate: false,
568
- $trans-x: false,
569
- $trans-y: false,
570
- $skew-x: false,
571
- $skew-y: false,
572
- $origin-x: false,
573
- $origin-y: false
574
- ) {
575
- @include create-transform(
576
- false,
577
- $scale, $scale, false,
578
- false, false, $rotate, false,
579
- $trans-x, $trans-y, false,
580
- $skew-x, $skew-y,
581
- $origin-x, $origin-y, false,
582
- false
583
- );
584
- }