comixins 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +8 -0
- data/.rubocop.yml +26 -0
- data/Gemfile +2 -0
- data/README.md +35 -0
- data/comixins.gemspec +20 -0
- data/lib/comixins/version.rb +1 -1
- data/vendor/assets/stylesheets/LICENSE.markdown +29 -0
- data/vendor/assets/stylesheets/LICENSE_backup.md +29 -0
- data/vendor/assets/stylesheets/_animate.scss +3 -0
- data/vendor/assets/stylesheets/_compass.scss +4 -0
- data/vendor/assets/stylesheets/_lemonade.scss +38 -0
- data/vendor/assets/stylesheets/animation/_animate.scss +31 -0
- data/vendor/assets/stylesheets/animation/_core.scss +127 -0
- data/vendor/assets/stylesheets/animation/_shared.scss +22 -0
- data/vendor/assets/stylesheets/animation/animate/_attention-seekers.scss +152 -0
- data/vendor/assets/stylesheets/animation/animate/_bouncing.scss +3 -0
- data/vendor/assets/stylesheets/animation/animate/_classes.scss +21 -0
- data/vendor/assets/stylesheets/animation/animate/_fading.scss +3 -0
- data/vendor/assets/stylesheets/animation/animate/_flippers.scss +87 -0
- data/vendor/assets/stylesheets/animation/animate/_lightspeed.scss +24 -0
- data/vendor/assets/stylesheets/animation/animate/_rotating.scss +3 -0
- data/vendor/assets/stylesheets/animation/animate/_specials.scss +42 -0
- data/vendor/assets/stylesheets/animation/animate/bouncing/_bouncing-entrances.scss +68 -0
- data/vendor/assets/stylesheets/animation/animate/bouncing/_bouncing-exits.scss +60 -0
- data/vendor/assets/stylesheets/animation/animate/fading/_fading-entrances.scss +86 -0
- data/vendor/assets/stylesheets/animation/animate/fading/_fading-exits.scss +86 -0
- data/vendor/assets/stylesheets/animation/animate/rotating/_rotating-entrances.scss +58 -0
- data/vendor/assets/stylesheets/animation/animate/rotating/_rotating-exits.scss +58 -0
- data/vendor/assets/stylesheets/comixins.scss +1 -0
- data/vendor/assets/stylesheets/compass/_css3.scss +22 -0
- data/vendor/assets/stylesheets/compass/_functions.scss +6 -0
- data/vendor/assets/stylesheets/compass/_layout.scss +3 -0
- data/vendor/assets/stylesheets/compass/_reset-legacy.scss +3 -0
- data/vendor/assets/stylesheets/compass/_reset.scss +3 -0
- data/vendor/assets/stylesheets/compass/_support.scss +40 -0
- data/vendor/assets/stylesheets/compass/_typography.scss +4 -0
- data/vendor/assets/stylesheets/compass/_utilities.scss +9 -0
- data/vendor/assets/stylesheets/compass/css3/_animation.scss +2 -0
- data/vendor/assets/stylesheets/compass/css3/_appearance.scss +16 -0
- data/vendor/assets/stylesheets/compass/css3/_background-clip.scss +43 -0
- data/vendor/assets/stylesheets/compass/css3/_background-origin.scss +42 -0
- data/vendor/assets/stylesheets/compass/css3/_background-size.scss +26 -0
- data/vendor/assets/stylesheets/compass/css3/_border-radius.scss +130 -0
- data/vendor/assets/stylesheets/compass/css3/_box-shadow.scss +76 -0
- data/vendor/assets/stylesheets/compass/css3/_box-sizing.scss +13 -0
- data/vendor/assets/stylesheets/compass/css3/_box.scss +111 -0
- data/vendor/assets/stylesheets/compass/css3/_columns.scss +148 -0
- data/vendor/assets/stylesheets/compass/css3/_filter.scss +23 -0
- data/vendor/assets/stylesheets/compass/css3/_flexbox.scss +86 -0
- data/vendor/assets/stylesheets/compass/css3/_font-face.scss +48 -0
- data/vendor/assets/stylesheets/compass/css3/_hyphenation.scss +77 -0
- data/vendor/assets/stylesheets/compass/css3/_images.scss +133 -0
- data/vendor/assets/stylesheets/compass/css3/_inline-block.scss +22 -0
- data/vendor/assets/stylesheets/compass/css3/_opacity.scss +19 -0
- data/vendor/assets/stylesheets/compass/css3/_pie.scss +73 -0
- data/vendor/assets/stylesheets/compass/css3/_regions.scss +22 -0
- data/vendor/assets/stylesheets/compass/css3/_shared.scss +38 -0
- data/vendor/assets/stylesheets/compass/css3/_text-shadow.scss +87 -0
- data/vendor/assets/stylesheets/compass/css3/_transform-legacy.scss +87 -0
- data/vendor/assets/stylesheets/compass/css3/_transform.scss +598 -0
- data/vendor/assets/stylesheets/compass/css3/_transition.scss +221 -0
- data/vendor/assets/stylesheets/compass/css3/_user-interface.scss +47 -0
- data/vendor/assets/stylesheets/compass/functions/_colors.scss +37 -0
- data/vendor/assets/stylesheets/compass/functions/_constants.scss +18 -0
- data/vendor/assets/stylesheets/compass/functions/_cross_browser_support.scss +72 -0
- data/vendor/assets/stylesheets/compass/functions/_display.scss +36 -0
- data/vendor/assets/stylesheets/compass/functions/_gradient_support.scss +15 -0
- data/vendor/assets/stylesheets/compass/functions/_lists.scss +90 -0
- data/vendor/assets/stylesheets/compass/layout/_grid-background.scss +178 -0
- data/vendor/assets/stylesheets/compass/layout/_sticky-footer.scss +23 -0
- data/vendor/assets/stylesheets/compass/layout/_stretching.scss +24 -0
- data/vendor/assets/stylesheets/compass/reset/_utilities-legacy.scss +135 -0
- data/vendor/assets/stylesheets/compass/reset/_utilities.scss +142 -0
- data/vendor/assets/stylesheets/compass/typography/_links.scss +3 -0
- data/vendor/assets/stylesheets/compass/typography/_lists.scss +4 -0
- data/vendor/assets/stylesheets/compass/typography/_text.scss +4 -0
- data/vendor/assets/stylesheets/compass/typography/_vertical_rhythm.scss +219 -0
- data/vendor/assets/stylesheets/compass/typography/links/_hover-link.scss +5 -0
- data/vendor/assets/stylesheets/compass/typography/links/_link-colors.scss +28 -0
- data/vendor/assets/stylesheets/compass/typography/links/_unstyled-link.scss +7 -0
- data/vendor/assets/stylesheets/compass/typography/lists/_bullets.scss +34 -0
- data/vendor/assets/stylesheets/compass/typography/lists/_horizontal-list.scss +61 -0
- data/vendor/assets/stylesheets/compass/typography/lists/_inline-block-list.scss +50 -0
- data/vendor/assets/stylesheets/compass/typography/lists/_inline-list.scss +44 -0
- data/vendor/assets/stylesheets/compass/typography/text/_ellipsis.scss +25 -0
- data/vendor/assets/stylesheets/compass/typography/text/_force-wrap.scss +12 -0
- data/vendor/assets/stylesheets/compass/typography/text/_nowrap.scss +2 -0
- data/vendor/assets/stylesheets/compass/typography/text/_replacement.scss +68 -0
- data/vendor/assets/stylesheets/compass/utilities/_color.scss +1 -0
- data/vendor/assets/stylesheets/compass/utilities/_general.scss +6 -0
- data/vendor/assets/stylesheets/compass/utilities/_links.scss +5 -0
- data/vendor/assets/stylesheets/compass/utilities/_lists.scss +6 -0
- data/vendor/assets/stylesheets/compass/utilities/_print.scss +17 -0
- data/vendor/assets/stylesheets/compass/utilities/_sprites.scss +2 -0
- data/vendor/assets/stylesheets/compass/utilities/_tables.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/_text.scss +5 -0
- data/vendor/assets/stylesheets/compass/utilities/color/_contrast.scss +28 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_clearfix.scss +44 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_float.scss +30 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_hacks.scss +46 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_min.scss +16 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_reset.scss +2 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_tabs.scss +1 -0
- data/vendor/assets/stylesheets/compass/utilities/general/_tag-cloud.scss +18 -0
- data/vendor/assets/stylesheets/compass/utilities/links/_hover-link.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/links/_link-colors.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/links/_unstyled-link.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/lists/_bullets.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/lists/_horizontal-list.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/lists/_inline-block-list.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/lists/_inline-list.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/sprites/_base.scss +66 -0
- data/vendor/assets/stylesheets/compass/utilities/sprites/_sprite-img.scss +79 -0
- data/vendor/assets/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
- data/vendor/assets/stylesheets/compass/utilities/tables/_borders.scss +33 -0
- data/vendor/assets/stylesheets/compass/utilities/tables/_scaffolding.scss +9 -0
- data/vendor/assets/stylesheets/compass/utilities/text/_ellipsis.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/text/_nowrap.scss +3 -0
- data/vendor/assets/stylesheets/compass/utilities/text/_replacement.scss +3 -0
- metadata +119 -1
@@ -0,0 +1,76 @@
|
|
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 inset: inset or false (for standard shadow).
|
25
|
+
$default-box-shadow-inset : false !default;
|
26
|
+
|
27
|
+
// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box
|
28
|
+
// shadows are needed.
|
29
|
+
// Each shadow argument should adhere to the standard css3 syntax for the
|
30
|
+
// box-shadow property.
|
31
|
+
@mixin box-shadow(
|
32
|
+
$shadow-1 : default,
|
33
|
+
$shadow-2 : false,
|
34
|
+
$shadow-3 : false,
|
35
|
+
$shadow-4 : false,
|
36
|
+
$shadow-5 : false,
|
37
|
+
$shadow-6 : false,
|
38
|
+
$shadow-7 : false,
|
39
|
+
$shadow-8 : false,
|
40
|
+
$shadow-9 : false,
|
41
|
+
$shadow-10: false
|
42
|
+
) {
|
43
|
+
@if $shadow-1 == default {
|
44
|
+
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
|
45
|
+
}
|
46
|
+
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
47
|
+
@include experimental(box-shadow, $shadow,
|
48
|
+
-moz, -webkit, not(-o), not(-ms), not(-khtml), official
|
49
|
+
);
|
50
|
+
}
|
51
|
+
|
52
|
+
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
|
53
|
+
// Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset.
|
54
|
+
@mixin single-box-shadow(
|
55
|
+
$hoff : $default-box-shadow-h-offset,
|
56
|
+
$voff : $default-box-shadow-v-offset,
|
57
|
+
$blur : $default-box-shadow-blur,
|
58
|
+
$spread : $default-box-shadow-spread,
|
59
|
+
$color : $default-box-shadow-color,
|
60
|
+
$inset : $default-box-shadow-inset
|
61
|
+
) {
|
62
|
+
@if not ($inset == true or $inset == false or $inset == inset) {
|
63
|
+
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
64
|
+
}
|
65
|
+
|
66
|
+
@if $color == none {
|
67
|
+
@include box-shadow(none);
|
68
|
+
} @else {
|
69
|
+
$full : $hoff $voff;
|
70
|
+
@if $blur { $full: $full $blur; }
|
71
|
+
@if $spread { $full: $full $spread; }
|
72
|
+
@if $color { $full: $full $color; }
|
73
|
+
@if $inset { $full: inset $full; }
|
74
|
+
@include box-shadow($full);
|
75
|
+
}
|
76
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Change the box model for Mozilla, Webkit, IE8 and the future
|
4
|
+
//
|
5
|
+
// @param $bs
|
6
|
+
// [ content-box | border-box ]
|
7
|
+
|
8
|
+
@mixin box-sizing($bs) {
|
9
|
+
$bs: unquote($bs);
|
10
|
+
@include experimental(box-sizing, $bs,
|
11
|
+
-moz, -webkit, not(-o), not(-ms), not(-khtml), official
|
12
|
+
);
|
13
|
+
}
|
@@ -0,0 +1,111 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// display:box; must be used for any of the other flexbox mixins to work properly
|
4
|
+
@mixin display-box {
|
5
|
+
@include experimental-value(display, box,
|
6
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
7
|
+
);
|
8
|
+
}
|
9
|
+
|
10
|
+
// Default box orientation, assuming that the user wants something less block-like
|
11
|
+
$default-box-orient: horizontal !default;
|
12
|
+
|
13
|
+
// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
|
14
|
+
@mixin box-orient(
|
15
|
+
$orientation: $default-box-orient
|
16
|
+
) {
|
17
|
+
$orientation : unquote($orientation);
|
18
|
+
@include experimental(box-orient, $orientation,
|
19
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
20
|
+
);
|
21
|
+
}
|
22
|
+
|
23
|
+
// Default box-align
|
24
|
+
$default-box-align: stretch !default;
|
25
|
+
|
26
|
+
// Box align [ start | end | center | baseline | stretch ]
|
27
|
+
@mixin box-align(
|
28
|
+
$alignment: $default-box-align
|
29
|
+
) {
|
30
|
+
$alignment : unquote($alignment);
|
31
|
+
@include experimental(box-align, $alignment,
|
32
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
33
|
+
);
|
34
|
+
}
|
35
|
+
|
36
|
+
// Default box flex
|
37
|
+
$default-box-flex: 0 !default;
|
38
|
+
|
39
|
+
// mixin which takes an int argument for box flex. Apply this to the children inside the box.
|
40
|
+
//
|
41
|
+
// For example: "div.display-box > div.child-box" would get the box flex mixin.
|
42
|
+
@mixin box-flex(
|
43
|
+
$flex: $default-box-flex
|
44
|
+
) {
|
45
|
+
@include experimental(box-flex, $flex,
|
46
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
47
|
+
);
|
48
|
+
}
|
49
|
+
|
50
|
+
// Default flex group
|
51
|
+
$default-box-flex-group: 1 !default;
|
52
|
+
|
53
|
+
// mixin which takes an int argument for flexible grouping
|
54
|
+
@mixin box-flex-group(
|
55
|
+
$group: $default-box-flex-group
|
56
|
+
) {
|
57
|
+
@include experimental(box-flex-group, $group,
|
58
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
59
|
+
);
|
60
|
+
}
|
61
|
+
|
62
|
+
// default for ordinal group
|
63
|
+
$default-box-ordinal-group: 1 !default;
|
64
|
+
|
65
|
+
// mixin which takes an int argument for ordinal grouping and rearranging the order
|
66
|
+
@mixin box-ordinal-group(
|
67
|
+
$group: $default-ordinal-flex-group
|
68
|
+
) {
|
69
|
+
@include experimental(box-ordinal-group, $group,
|
70
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
71
|
+
);
|
72
|
+
}
|
73
|
+
|
74
|
+
// Box direction default value
|
75
|
+
$default-box-direction: normal !default;
|
76
|
+
|
77
|
+
// mixin for box-direction [ normal | reverse | inherit ]
|
78
|
+
@mixin box-direction(
|
79
|
+
$direction: $default-box-direction
|
80
|
+
) {
|
81
|
+
$direction: unquote($direction);
|
82
|
+
@include experimental(box-direction, $direction,
|
83
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
84
|
+
);
|
85
|
+
}
|
86
|
+
|
87
|
+
// default for box lines
|
88
|
+
$default-box-lines: single !default;
|
89
|
+
|
90
|
+
// mixin for box lines [ single | multiple ]
|
91
|
+
@mixin box-lines(
|
92
|
+
$lines: $default-box-lines
|
93
|
+
) {
|
94
|
+
$lines: unquote($lines);
|
95
|
+
@include experimental(box-lines, $lines,
|
96
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
97
|
+
);
|
98
|
+
}
|
99
|
+
|
100
|
+
// default for box pack
|
101
|
+
$default-box-pack: start !default;
|
102
|
+
|
103
|
+
// mixin for box pack [ start | end | center | justify ]
|
104
|
+
@mixin box-pack(
|
105
|
+
$pack: $default-box-pack
|
106
|
+
) {
|
107
|
+
$pack: unquote($pack);
|
108
|
+
@include experimental(box-pack, $pack,
|
109
|
+
-moz, -webkit, not(-o), -ms, not(-khtml), official
|
110
|
+
);
|
111
|
+
}
|
@@ -0,0 +1,148 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Specify the shorthand `columns` property.
|
4
|
+
//
|
5
|
+
// Example:
|
6
|
+
//
|
7
|
+
// @include columns(20em 2)
|
8
|
+
@mixin columns($width-and-count) {
|
9
|
+
@include experimental(columns, $width-and-count,
|
10
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
11
|
+
);
|
12
|
+
}
|
13
|
+
|
14
|
+
// Specify the number of columns
|
15
|
+
@mixin column-count($count) {
|
16
|
+
@include experimental(column-count, $count,
|
17
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
18
|
+
);
|
19
|
+
}
|
20
|
+
|
21
|
+
// Specify the gap between columns e.g. `20px`
|
22
|
+
@mixin column-gap($width) {
|
23
|
+
@include experimental(column-gap, $width,
|
24
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
25
|
+
);
|
26
|
+
}
|
27
|
+
|
28
|
+
// Specify the width of columns e.g. `100px`
|
29
|
+
@mixin column-width($width) {
|
30
|
+
@include experimental(column-width, $width,
|
31
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
32
|
+
);
|
33
|
+
}
|
34
|
+
|
35
|
+
// Specify the width of the rule between columns e.g. `1px`
|
36
|
+
@mixin column-rule-width($width) {
|
37
|
+
@include experimental(column-rule-width, $width,
|
38
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
39
|
+
);
|
40
|
+
}
|
41
|
+
|
42
|
+
// Specify the style of the rule between columns e.g. `dotted`.
|
43
|
+
// This works like border-style.
|
44
|
+
@mixin column-rule-style($style) {
|
45
|
+
@include experimental(column-rule-style, unquote($style),
|
46
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
47
|
+
);
|
48
|
+
}
|
49
|
+
|
50
|
+
// Specify the color of the rule between columns e.g. `blue`.
|
51
|
+
// This works like border-color.
|
52
|
+
@mixin column-rule-color($color) {
|
53
|
+
@include experimental(column-rule-color, $color,
|
54
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
55
|
+
);
|
56
|
+
}
|
57
|
+
|
58
|
+
// Mixin encompassing all column rule properties
|
59
|
+
// For example:
|
60
|
+
//
|
61
|
+
// @include column-rule(1px, solid, #c00)
|
62
|
+
//
|
63
|
+
// Or the values can be space separated:
|
64
|
+
//
|
65
|
+
// @include column-rule(1px solid #c00)
|
66
|
+
@mixin column-rule($width, $style: false, $color: false) {
|
67
|
+
$full : -compass-space-list(compact($width, $style, $color));
|
68
|
+
@include experimental(column-rule, $full,
|
69
|
+
-moz, -webkit, -o, -ms, not(-khtml), official
|
70
|
+
);
|
71
|
+
}
|
72
|
+
|
73
|
+
// Mixin for setting column-break-before
|
74
|
+
//
|
75
|
+
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
76
|
+
//
|
77
|
+
// Example:
|
78
|
+
// h2.before {@include column-break-before(always);}
|
79
|
+
//
|
80
|
+
// Which generates:
|
81
|
+
//
|
82
|
+
// h2.before {
|
83
|
+
// -webkit-column-break-before: always;
|
84
|
+
// column-break-before: always;}
|
85
|
+
@mixin column-break-before($value: auto){
|
86
|
+
@include experimental(column-break-before, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );
|
87
|
+
}
|
88
|
+
|
89
|
+
// Mixin for setting column-break-after
|
90
|
+
//
|
91
|
+
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
92
|
+
//
|
93
|
+
// Example:
|
94
|
+
// h2.after {@include column-break-after(always); }
|
95
|
+
//
|
96
|
+
// Which generates:
|
97
|
+
//
|
98
|
+
// h2.after {
|
99
|
+
// -webkit-column-break-after: always;
|
100
|
+
// column-break-after: always; }
|
101
|
+
@mixin column-break-after($value: auto){
|
102
|
+
@include experimental(column-break-after, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );
|
103
|
+
}
|
104
|
+
|
105
|
+
// Mixin for setting column-break-inside
|
106
|
+
//
|
107
|
+
// * legal values are auto, avoid, avoid-page, avoid-column
|
108
|
+
//
|
109
|
+
// Example:
|
110
|
+
// h2.inside {@include column-break-inside();}
|
111
|
+
// Which generates:
|
112
|
+
//
|
113
|
+
// h2.inside {
|
114
|
+
// -webkit-column-break-inside: auto;
|
115
|
+
// column-break-inside: auto;}
|
116
|
+
@mixin column-break-inside($value: auto){
|
117
|
+
@include experimental(column-break-inside, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );
|
118
|
+
}
|
119
|
+
|
120
|
+
// All-purpose mixin for setting column breaks.
|
121
|
+
//
|
122
|
+
// * legal values for $type : before, after, inside
|
123
|
+
// * legal values for '$value' are dependent on $type
|
124
|
+
// * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
125
|
+
// * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
126
|
+
// * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
|
127
|
+
//
|
128
|
+
// Examples:
|
129
|
+
// h2.before {@include column-break(before, always);}
|
130
|
+
// h2.after {@include column-break(after, always); }
|
131
|
+
// h2.inside {@include column-break(inside); }
|
132
|
+
//
|
133
|
+
// Which generates:
|
134
|
+
// h2.before {
|
135
|
+
// -webkit-column-break-before: always;
|
136
|
+
// column-break-before: always;}
|
137
|
+
//
|
138
|
+
// h2.after {
|
139
|
+
// -webkit-column-break-after: always;
|
140
|
+
// column-break-after: always; }
|
141
|
+
//
|
142
|
+
// h2.inside {
|
143
|
+
// -webkit-column-break-inside: auto;
|
144
|
+
// column-break-inside: auto;}
|
145
|
+
|
146
|
+
@mixin column-break($type: before, $value: auto){
|
147
|
+
@include experimental("column-break-#{$type}", $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );
|
148
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Provides cross-browser support for the upcoming (?) css3 filter property.
|
4
|
+
//
|
5
|
+
// Each filter argument should adhere to the standard css3 syntax for the
|
6
|
+
// filter property.
|
7
|
+
@mixin filter (
|
8
|
+
$filter-1,
|
9
|
+
$filter-2 : false,
|
10
|
+
$filter-3 : false,
|
11
|
+
$filter-4 : false,
|
12
|
+
$filter-5 : false,
|
13
|
+
$filter-6 : false,
|
14
|
+
$filter-7 : false,
|
15
|
+
$filter-8 : false,
|
16
|
+
$filter-9 : false,
|
17
|
+
$filter-10: false
|
18
|
+
) {
|
19
|
+
$filter : compact($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10);
|
20
|
+
@include experimental(filter, $filter,
|
21
|
+
-moz, -webkit, not(-o), not(-ms), not(-khtml), official
|
22
|
+
);
|
23
|
+
}
|
@@ -0,0 +1,86 @@
|
|
1
|
+
@import "../support";
|
2
|
+
@import "shared";
|
3
|
+
|
4
|
+
// This is the underlying implementation for all the other mixins in this module.
|
5
|
+
// It is the only way to access prefix support for older versions of the spec.
|
6
|
+
// Deviates from canonical Compass implementation by dropping support for
|
7
|
+
// older versions of the Flexbox spec.
|
8
|
+
//
|
9
|
+
// `$properties`: map of property-value pairs that should be prefixed
|
10
|
+
@mixin flexbox($properties) {
|
11
|
+
@each $prop, $value in $properties {
|
12
|
+
@if $prop == display {
|
13
|
+
@include experimental-value(display, $value, not(-moz), -webkit,
|
14
|
+
not(-o), not(-ms), not(-khtml), official);
|
15
|
+
} @else {
|
16
|
+
@include experimental($prop, $value, not(-moz), -webkit, not(-o),
|
17
|
+
not(-ms), not(-khtml), official);
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
// Values for $display are: flex (default), inline-flex
|
23
|
+
@mixin display-flex($display: flex) {
|
24
|
+
@include flexbox((display: $display));
|
25
|
+
}
|
26
|
+
|
27
|
+
// Values: row | row-reverse | column | column-reverse
|
28
|
+
@mixin flex-direction($direction) {
|
29
|
+
@include flexbox((flex-direction: $direction));
|
30
|
+
}
|
31
|
+
|
32
|
+
// Values: nowrap | wrap | wrap-reverse
|
33
|
+
@mixin flex-wrap($wrap) {
|
34
|
+
@include flexbox((flex-wrap: $wrap));
|
35
|
+
}
|
36
|
+
|
37
|
+
// Shorthand for flex-direction and flex-wrap.
|
38
|
+
@mixin flex-flow($flow) {
|
39
|
+
@include flexbox((flex-flow: $flow));
|
40
|
+
}
|
41
|
+
|
42
|
+
// Accepts an integer
|
43
|
+
@mixin order($order) {
|
44
|
+
@include flexbox((order: $order));
|
45
|
+
}
|
46
|
+
|
47
|
+
// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
|
48
|
+
// Space separated, in that order.
|
49
|
+
@mixin flex($flex) {
|
50
|
+
@include flexbox((flex: $flex));
|
51
|
+
}
|
52
|
+
|
53
|
+
// Accepts a number.
|
54
|
+
@mixin flex-grow($flex-grow) {
|
55
|
+
@include flexbox((flex-grow: $flex-grow));
|
56
|
+
}
|
57
|
+
|
58
|
+
// Accepts a number.
|
59
|
+
@mixin flex-shrink($flex-shrink) {
|
60
|
+
@include flexbox((flex-shrink: $flex-shrink));
|
61
|
+
}
|
62
|
+
|
63
|
+
// Accepts any legal value for the width property.
|
64
|
+
@mixin flex-basis($flex-basis) {
|
65
|
+
@include flexbox((flex-basis: $flex-basis));
|
66
|
+
}
|
67
|
+
|
68
|
+
// Legal values: flex-start | flex-end | center | space-between | space-around
|
69
|
+
@mixin justify-content($justify-content) {
|
70
|
+
@include flexbox((justify-content: $justify-content));
|
71
|
+
}
|
72
|
+
|
73
|
+
// Legal values: flex-start | flex-end | center | baseline | stretch
|
74
|
+
@mixin align-items($align-items) {
|
75
|
+
@include flexbox((align-items: $align-items));
|
76
|
+
}
|
77
|
+
|
78
|
+
// Legal values: auto | flex-start | flex-end | center | baseline | stretch
|
79
|
+
@mixin align-self($align-self) {
|
80
|
+
@include flexbox((align-self: $align-self));
|
81
|
+
}
|
82
|
+
|
83
|
+
// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
|
84
|
+
@mixin align-content($align-content) {
|
85
|
+
@include flexbox((align-content: $align-content));
|
86
|
+
}
|