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.
- data/VERSION.yml +1 -1
- data/examples/compass/headers.txt +7 -0
- data/examples/compass/images/border2.png +0 -0
- data/examples/compass/images/icon-chrome.png +0 -0
- data/examples/compass/images/icon-firefox.png +0 -0
- data/examples/compass/images/icon-ie.png +0 -0
- data/examples/compass/images/icon-opera.png +0 -0
- data/examples/compass/images/icon-safari.png +0 -0
- data/examples/compass/pie.html.haml +73 -0
- data/examples/compass/src/pie.scss +110 -0
- data/features/command_line.feature +11 -33
- data/features/step_definitions/command_line_steps.rb +5 -5
- data/frameworks/blueprint/templates/project/screen.sass +5 -4
- data/frameworks/blueprint/templates/semantic/partials/_page.sass +3 -4
- data/frameworks/compass/stylesheets/compass/_css3.scss +16 -1
- data/frameworks/compass/stylesheets/compass/_support.scss +2 -0
- data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +1 -1
- data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +85 -12
- data/frameworks/compass/stylesheets/compass/css3/_gradient.scss +6 -13
- data/frameworks/compass/stylesheets/compass/css3/_images.scss +42 -2
- data/frameworks/compass/stylesheets/compass/css3/_pie.scss +73 -0
- data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +39 -4
- data/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss +87 -0
- data/frameworks/compass/stylesheets/compass/css3/_transform.scss +553 -54
- data/frameworks/compass/templates/ellipsis/manifest.rb +3 -3
- data/frameworks/compass/templates/extension/manifest.rb +1 -1
- data/frameworks/compass/templates/pie/LICENSE +12 -0
- data/frameworks/compass/templates/pie/LICENSE-APACHE2.txt +13 -0
- data/frameworks/compass/templates/pie/LICENSE-GPL2.txt +278 -0
- data/frameworks/compass/templates/pie/PIE.htc +77 -0
- data/frameworks/compass/templates/pie/manifest.rb +39 -0
- data/frameworks/compass/templates/pie/pie.scss +74 -0
- data/lib/compass.rb +1 -1
- data/lib/compass/exec/helpers.rb +1 -1
- data/lib/compass/installers/base.rb +15 -1
- data/lib/compass/rails.rb +2 -0
- data/lib/compass/sass_extensions/functions/colors.rb +1 -5
- data/lib/compass/sass_extensions/functions/constants.rb +52 -11
- data/lib/compass/sass_extensions/functions/gradient_support.rb +382 -190
- data/lib/compass/sass_extensions/functions/if.rb +2 -2
- data/lib/compass/sass_extensions/functions/lists.rb +2 -0
- data/lib/compass/sass_extensions/functions/urls.rb +1 -1
- data/lib/compass/util.rb +18 -0
- data/test/fixtures/stylesheets/compass/css/gradients.css +110 -85
- data/test/fixtures/stylesheets/compass/css/pie.css +25 -0
- data/test/fixtures/stylesheets/compass/css/text_shadow.css +14 -0
- data/test/fixtures/stylesheets/compass/sass/box.sass +1 -1
- data/test/fixtures/stylesheets/compass/sass/box_shadow.scss +2 -2
- data/test/fixtures/stylesheets/compass/sass/gradients.sass +1 -1
- data/test/fixtures/stylesheets/compass/sass/pie.scss +47 -0
- data/test/fixtures/stylesheets/compass/sass/text_shadow.scss +7 -0
- data/test/fixtures/stylesheets/compass/sass/transform.scss +1 -1
- metadata +30 -9
- data/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss +0 -98
- data/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss +0 -72
- data/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss +0 -584
- data/frameworks/compass/stylesheets/compass/css3/_version-1.scss +0 -16
- data/frameworks/compass/stylesheets/compass/css3/_version-2.scss +0 -16
- 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,5 +1,5 @@
|
|
1
|
-
@import "compass/css3/box-shadow
|
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
|
5
|
+
.multiple-box-shadows { @include box-shadow(default, 2px 2px 5px #222);}
|
@@ -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);}
|
metadata
CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
|
|
6
6
|
- 0
|
7
7
|
- 11
|
8
8
|
- alpha
|
9
|
-
-
|
10
|
-
version: 0.11.alpha.
|
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-
|
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-
|
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
|
-
}
|