foundation-scss 6.3.1.0
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.
- checksums.yaml +7 -0
- data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
- data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
- data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
- data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
- data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
- data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
- data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
- data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
- data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
- data/foundation-scss.gemspec +9 -0
- data/lib/foundation/scss/in/sass_path.rb +6 -0
- data/scss/_global.scss +219 -0
- data/scss/components/_accordion-menu.scss +36 -0
- data/scss/components/_accordion.scss +150 -0
- data/scss/components/_badge.scss +63 -0
- data/scss/components/_breadcrumbs.scss +100 -0
- data/scss/components/_button-group.scss +253 -0
- data/scss/components/_button.scss +332 -0
- data/scss/components/_callout.scss +106 -0
- data/scss/components/_card.scss +121 -0
- data/scss/components/_close-button.scss +102 -0
- data/scss/components/_drilldown.scss +93 -0
- data/scss/components/_dropdown-menu.scss +226 -0
- data/scss/components/_dropdown.scss +72 -0
- data/scss/components/_flex-video.scss +1 -0
- data/scss/components/_flex.scss +34 -0
- data/scss/components/_float.scss +27 -0
- data/scss/components/_label.scss +64 -0
- data/scss/components/_media-object.scss +114 -0
- data/scss/components/_menu-icon.scss +9 -0
- data/scss/components/_menu.scss +376 -0
- data/scss/components/_off-canvas.scss +329 -0
- data/scss/components/_orbit.scss +196 -0
- data/scss/components/_pagination.scss +193 -0
- data/scss/components/_progress-bar.scss +64 -0
- data/scss/components/_responsive-embed.scss +70 -0
- data/scss/components/_reveal.scss +178 -0
- data/scss/components/_slider.scss +138 -0
- data/scss/components/_sticky.scss +38 -0
- data/scss/components/_switch.scss +247 -0
- data/scss/components/_table.scss +329 -0
- data/scss/components/_tabs.scss +196 -0
- data/scss/components/_thumbnail.scss +67 -0
- data/scss/components/_title-bar.scss +84 -0
- data/scss/components/_tooltip.scss +107 -0
- data/scss/components/_top-bar.scss +173 -0
- data/scss/components/_visibility.scss +132 -0
- data/scss/forms/_checkbox.scss +41 -0
- data/scss/forms/_error.scss +88 -0
- data/scss/forms/_fieldset.scss +54 -0
- data/scss/forms/_forms.scss +34 -0
- data/scss/forms/_help-text.scss +30 -0
- data/scss/forms/_input-group.scss +135 -0
- data/scss/forms/_label.scss +50 -0
- data/scss/forms/_meter.scss +110 -0
- data/scss/forms/_progress.scss +94 -0
- data/scss/forms/_range.scss +149 -0
- data/scss/forms/_select.scss +85 -0
- data/scss/forms/_text.scss +170 -0
- data/scss/foundation.scss +118 -0
- data/scss/grid/_classes.scss +176 -0
- data/scss/grid/_column.scss +112 -0
- data/scss/grid/_flex-grid.scss +312 -0
- data/scss/grid/_grid.scss +48 -0
- data/scss/grid/_gutter.scss +82 -0
- data/scss/grid/_layout.scss +76 -0
- data/scss/grid/_position.scss +76 -0
- data/scss/grid/_row.scss +99 -0
- data/scss/grid/_size.scss +24 -0
- data/scss/settings/_settings.scss +620 -0
- data/scss/typography/_alignment.scss +22 -0
- data/scss/typography/_base.scss +509 -0
- data/scss/typography/_helpers.scss +78 -0
- data/scss/typography/_print.scss +86 -0
- data/scss/typography/_typography.scss +26 -0
- data/scss/util/_breakpoint.scss +281 -0
- data/scss/util/_color.scss +126 -0
- data/scss/util/_direction.scss +31 -0
- data/scss/util/_flex.scss +85 -0
- data/scss/util/_math.scss +72 -0
- data/scss/util/_mixins.scss +276 -0
- data/scss/util/_selector.scss +41 -0
- data/scss/util/_typography.scss +26 -0
- data/scss/util/_unit.scss +152 -0
- data/scss/util/_util.scss +14 -0
- data/scss/util/_value.scss +160 -0
- metadata +144 -0
@@ -0,0 +1,126 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
@import 'math';
|
6
|
+
|
7
|
+
////
|
8
|
+
/// @group functions
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Checks the luminance of `$color`.
|
12
|
+
///
|
13
|
+
/// @param {Color} $color - Color to check the luminance of.
|
14
|
+
///
|
15
|
+
/// @returns {Number} The luminance of `$color`.
|
16
|
+
@function color-luminance($color) {
|
17
|
+
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
18
|
+
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
19
|
+
$rgba: red($color), green($color), blue($color);
|
20
|
+
$rgba2: ();
|
21
|
+
|
22
|
+
@for $i from 1 through 3 {
|
23
|
+
$rgb: nth($rgba, $i);
|
24
|
+
$rgb: $rgb / 255;
|
25
|
+
|
26
|
+
$rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
|
27
|
+
|
28
|
+
$rgba2: append($rgba2, $rgb);
|
29
|
+
}
|
30
|
+
|
31
|
+
@return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
|
32
|
+
}
|
33
|
+
|
34
|
+
/// Checks the contrast ratio of two colors.
|
35
|
+
///
|
36
|
+
/// @param {Color} $color1 - First color to compare.
|
37
|
+
/// @param {Color} $color2 - Second color to compare.
|
38
|
+
///
|
39
|
+
/// @returns {Number} The contrast ratio of the compared colors.
|
40
|
+
@function color-contrast($color1, $color2) {
|
41
|
+
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
42
|
+
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
43
|
+
$luminance1: color-luminance($color1) + 0.05;
|
44
|
+
$luminance2: color-luminance($color2) + 0.05;
|
45
|
+
$ratio: $luminance1 / $luminance2;
|
46
|
+
|
47
|
+
@if $luminance2 > $luminance1 {
|
48
|
+
$ratio: 1 / $ratio;
|
49
|
+
}
|
50
|
+
|
51
|
+
$ratio: round($ratio * 10) / 10;
|
52
|
+
|
53
|
+
@return $ratio;
|
54
|
+
}
|
55
|
+
|
56
|
+
/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
|
57
|
+
///
|
58
|
+
/// @param {Color} $color1 - First color to compare.
|
59
|
+
/// @param {Color} $color2 - Second color to compare.
|
60
|
+
///
|
61
|
+
/// @returns {Number} The contrast ratio of the compared colors.
|
62
|
+
@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: 0) {
|
63
|
+
$contrast: color-contrast($base, nth($colors, 1));
|
64
|
+
$best: nth($colors, 1);
|
65
|
+
|
66
|
+
@for $i from 2 through length($colors) {
|
67
|
+
$current-contrast: color-contrast($base, nth($colors, $i));
|
68
|
+
@if ($current-contrast - $contrast > $tolerance) {
|
69
|
+
$contrast: color-contrast($base, nth($colors, $i));
|
70
|
+
$best: nth($colors, $i);
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
@if ($contrast < 3) {
|
75
|
+
@warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
|
76
|
+
}
|
77
|
+
|
78
|
+
@return $best;
|
79
|
+
}
|
80
|
+
|
81
|
+
/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
|
82
|
+
///
|
83
|
+
/// @param {Color} $color - Color to scale.
|
84
|
+
/// @param {Percentage} $scale [5%] - Amount to scale up or down.
|
85
|
+
/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
|
86
|
+
///
|
87
|
+
/// @returns {Color} A scaled color.
|
88
|
+
@function smart-scale($color, $scale: 5%, $threshold: 40%) {
|
89
|
+
@if lightness($color) > $threshold {
|
90
|
+
$scale: -$scale;
|
91
|
+
}
|
92
|
+
@return scale-color($color, $lightness: $scale);
|
93
|
+
}
|
94
|
+
|
95
|
+
/// Get color from foundation-palette
|
96
|
+
///
|
97
|
+
/// @param {key} color key from foundation-palette
|
98
|
+
///
|
99
|
+
/// @returns {Color} color from foundation-palette
|
100
|
+
@function get-color($key) {
|
101
|
+
@if map-has-key($foundation-palette, $key) {
|
102
|
+
@return map-get($foundation-palette, $key);
|
103
|
+
}
|
104
|
+
@else {
|
105
|
+
@error 'given $key is not available in $foundation-palette';
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
|
110
|
+
@mixin add-foundation-colors() {
|
111
|
+
@if map-has-key($foundation-palette, primary) {
|
112
|
+
$primary-color: map-get($foundation-palette, primary) !global;
|
113
|
+
}
|
114
|
+
@if map-has-key($foundation-palette, secondary) {
|
115
|
+
$secondary-color: map-get($foundation-palette, secondary) !global;
|
116
|
+
}
|
117
|
+
@if map-has-key($foundation-palette, success) {
|
118
|
+
$success-color: map-get($foundation-palette, success) !global;
|
119
|
+
}
|
120
|
+
@if map-has-key($foundation-palette, warning) {
|
121
|
+
$warning-color: map-get($foundation-palette, warning) !global;
|
122
|
+
}
|
123
|
+
@if map-has-key($foundation-palette, alert) {
|
124
|
+
$alert-color: map-get($foundation-palette, alert) !global;
|
125
|
+
}
|
126
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Returns the opposite direction of $dir
|
10
|
+
///
|
11
|
+
/// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left".
|
12
|
+
/// @return {Keyword} Opposite direction of $dir
|
13
|
+
@function direction-opposite(
|
14
|
+
$dir
|
15
|
+
) {
|
16
|
+
$dirs: (top, right, bottom, left);
|
17
|
+
$place: index($dirs, $dir);
|
18
|
+
|
19
|
+
@if $place == null {
|
20
|
+
@error 'direction-opposite: Invalid $dir parameter, expected a value from "#{$dirs}", found "#{$dir}".';
|
21
|
+
@return null;
|
22
|
+
}
|
23
|
+
|
24
|
+
// Calcul the opposite place in a circle, with a starting index of 1
|
25
|
+
$length: length($dirs);
|
26
|
+
$demi: $length / 2;
|
27
|
+
$opposite-place: (($place + $demi - 1) % $length) + 1;
|
28
|
+
|
29
|
+
@return nth($dirs, $opposite-place);
|
30
|
+
}
|
31
|
+
|
@@ -0,0 +1,85 @@
|
|
1
|
+
$-zf-flex-justify: (
|
2
|
+
'left': flex-start,
|
3
|
+
'right': flex-end,
|
4
|
+
'center': center,
|
5
|
+
'justify': space-between,
|
6
|
+
'spaced': space-around,
|
7
|
+
);
|
8
|
+
|
9
|
+
$-zf-flex-align: (
|
10
|
+
'top': flex-start,
|
11
|
+
'bottom': flex-end,
|
12
|
+
'middle': center,
|
13
|
+
'stretch': stretch,
|
14
|
+
);
|
15
|
+
|
16
|
+
$-zf-flex-direction: (
|
17
|
+
'row': row,
|
18
|
+
'row-reverse': row-reverse,
|
19
|
+
'column': column,
|
20
|
+
'column-reverse': column-reverse,
|
21
|
+
);
|
22
|
+
|
23
|
+
/// Enables flexbox by adding `display: flex` to the element.
|
24
|
+
@mixin flex {
|
25
|
+
display: flex;
|
26
|
+
}
|
27
|
+
|
28
|
+
/// Horizontally or vertically aligns the items within a flex container.
|
29
|
+
///
|
30
|
+
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
|
31
|
+
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
32
|
+
@mixin flex-align($x: null, $y: null) {
|
33
|
+
@if $x {
|
34
|
+
@if map-has-key($-zf-flex-justify, $x) {
|
35
|
+
$x: map-get($-zf-flex-justify, $x);
|
36
|
+
}
|
37
|
+
@else {
|
38
|
+
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
@if $y {
|
43
|
+
@if map-has-key($-zf-flex-align, $y) {
|
44
|
+
$y: map-get($-zf-flex-align, $y);
|
45
|
+
}
|
46
|
+
@else {
|
47
|
+
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
justify-content: $x;
|
52
|
+
align-items: $y;
|
53
|
+
}
|
54
|
+
|
55
|
+
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
|
56
|
+
///
|
57
|
+
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
58
|
+
@mixin flex-align-self($y: null) {
|
59
|
+
@if $y {
|
60
|
+
@if map-has-key($-zf-flex-align, $y) {
|
61
|
+
$y: map-get($-zf-flex-align, $y);
|
62
|
+
}
|
63
|
+
@else {
|
64
|
+
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
align-self: $y;
|
69
|
+
}
|
70
|
+
|
71
|
+
/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
|
72
|
+
/// @param {Number} $order [0] - Order number to apply.
|
73
|
+
@mixin flex-order($order: 0) {
|
74
|
+
order: $order;
|
75
|
+
}
|
76
|
+
|
77
|
+
/// Change flex-direction
|
78
|
+
/// @param {Keyword} $direction [row] - Flex direction to use. Can be
|
79
|
+
/// - row (default): same as text direction
|
80
|
+
/// - row-reverse: opposite to text direction
|
81
|
+
/// - column: same as row but top to bottom
|
82
|
+
/// - column-reverse: same as row-reverse top to bottom
|
83
|
+
@mixin flex-direction($direction: row) {
|
84
|
+
flex-direction: $direction;
|
85
|
+
}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Finds the greatest common divisor of two integers.
|
10
|
+
///
|
11
|
+
/// @param {Number} $a - First number to compare.
|
12
|
+
/// @param {Number} $b - Second number to compare.
|
13
|
+
///
|
14
|
+
/// @returns {Number} The greatest common divisor.
|
15
|
+
@function gcd($a, $b) {
|
16
|
+
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
|
17
|
+
@if ($b != 0) {
|
18
|
+
@return gcd($b, $a % $b);
|
19
|
+
}
|
20
|
+
@else {
|
21
|
+
@return abs($a);
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
/// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation
|
26
|
+
///
|
27
|
+
/// @param {Number} $base - The base number.
|
28
|
+
/// @param {Number} $exponent - The exponent.
|
29
|
+
///
|
30
|
+
/// @returns {Number} The product of the exponentiation.
|
31
|
+
@function pow($base, $exponent, $prec: 16) {
|
32
|
+
@if (floor($exponent) != $exponent) {
|
33
|
+
$prec2 : pow(10, $prec);
|
34
|
+
$exponent: round($exponent * $prec2);
|
35
|
+
$denominator: gcd($exponent, $prec2);
|
36
|
+
@return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
|
37
|
+
}
|
38
|
+
|
39
|
+
$value: $base;
|
40
|
+
@if $exponent > 1 {
|
41
|
+
@for $i from 2 through $exponent {
|
42
|
+
$value: $value * $base;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
@else if $exponent < 1 {
|
46
|
+
@for $i from 0 through -$exponent {
|
47
|
+
$value: $value / $base;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@return $value;
|
52
|
+
}
|
53
|
+
|
54
|
+
@function nth-root($num, $n: 2, $prec: 12) {
|
55
|
+
// From: http://rosettacode.org/wiki/Nth_root#JavaScript
|
56
|
+
$x: 1;
|
57
|
+
|
58
|
+
@for $i from 0 through $prec {
|
59
|
+
$x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
|
60
|
+
}
|
61
|
+
|
62
|
+
@return $x;
|
63
|
+
}
|
64
|
+
|
65
|
+
/// Calculates the height as a percentage of the width for a given ratio.
|
66
|
+
/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
|
67
|
+
/// @return {Number} A percentage value for the height relative to the width of a responsive container.
|
68
|
+
@function ratio-to-percentage($ratio) {
|
69
|
+
$w: nth($ratio, 1);
|
70
|
+
$h: nth($ratio, 3);
|
71
|
+
@return $h / $w * 100%;
|
72
|
+
}
|
@@ -0,0 +1,276 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
|
10
|
+
///
|
11
|
+
/// @param {Number} $triangle-size - Width of the triangle.
|
12
|
+
/// @param {Color} $triangle-color - Color of the triangle.
|
13
|
+
/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
|
14
|
+
@mixin css-triangle(
|
15
|
+
$triangle-size,
|
16
|
+
$triangle-color,
|
17
|
+
$triangle-direction
|
18
|
+
) {
|
19
|
+
display: block;
|
20
|
+
width: 0;
|
21
|
+
height: 0;
|
22
|
+
|
23
|
+
border: inset $triangle-size;
|
24
|
+
|
25
|
+
content: '';
|
26
|
+
|
27
|
+
@if ($triangle-direction == down) {
|
28
|
+
border-bottom-width: 0;
|
29
|
+
border-top-style: solid;
|
30
|
+
border-color: $triangle-color transparent transparent;
|
31
|
+
}
|
32
|
+
@if ($triangle-direction == up) {
|
33
|
+
border-top-width: 0;
|
34
|
+
border-bottom-style: solid;
|
35
|
+
border-color: transparent transparent $triangle-color;
|
36
|
+
}
|
37
|
+
@if ($triangle-direction == right) {
|
38
|
+
border-right-width: 0;
|
39
|
+
border-left-style: solid;
|
40
|
+
border-color: transparent transparent transparent $triangle-color;
|
41
|
+
}
|
42
|
+
@if ($triangle-direction == left) {
|
43
|
+
border-left-width: 0;
|
44
|
+
border-right-style: solid;
|
45
|
+
border-color: transparent $triangle-color transparent transparent;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
|
50
|
+
///
|
51
|
+
/// @param {Color} $color [$black] - Color to use for the icon.
|
52
|
+
/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
|
53
|
+
/// @param {Number} $width [20px] - Width of the icon.
|
54
|
+
/// @param {Number} $height [16px] - Height of the icon.
|
55
|
+
/// @param {Number} $weight [2px] - Height of individual bars in the icon.
|
56
|
+
/// @param {Number} $bars [3] - Number of bars in the icon.
|
57
|
+
@mixin hamburger(
|
58
|
+
$color: $black,
|
59
|
+
$color-hover: $dark-gray,
|
60
|
+
$width: 20px,
|
61
|
+
$height: 16px,
|
62
|
+
$weight: 2px,
|
63
|
+
$bars: 3
|
64
|
+
) {
|
65
|
+
// box-shadow CSS output
|
66
|
+
$shadow: ();
|
67
|
+
$hover-shadow: ();
|
68
|
+
|
69
|
+
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
|
70
|
+
$spacing: ($height - ($weight * $bars)) / ($bars - 1);
|
71
|
+
|
72
|
+
@if unit($spacing) == 'px' {
|
73
|
+
$spacing: floor($spacing);
|
74
|
+
}
|
75
|
+
|
76
|
+
@for $i from 2 through $bars {
|
77
|
+
$offset: ($weight + $spacing) * ($i - 1);
|
78
|
+
$shadow: append($shadow, 0 $offset 0 $color, comma);
|
79
|
+
}
|
80
|
+
|
81
|
+
// Icon container
|
82
|
+
position: relative;
|
83
|
+
display: inline-block;
|
84
|
+
vertical-align: middle;
|
85
|
+
width: $width;
|
86
|
+
height: $height;
|
87
|
+
cursor: pointer;
|
88
|
+
|
89
|
+
// Icon bars
|
90
|
+
&::after {
|
91
|
+
position: absolute;
|
92
|
+
top: 0;
|
93
|
+
left: 0;
|
94
|
+
|
95
|
+
display: block;
|
96
|
+
width: 100%;
|
97
|
+
height: $weight;
|
98
|
+
|
99
|
+
background: $color;
|
100
|
+
box-shadow: $shadow;
|
101
|
+
|
102
|
+
content: '';
|
103
|
+
}
|
104
|
+
|
105
|
+
// Hover state
|
106
|
+
@if $color-hover {
|
107
|
+
// Generate CSS
|
108
|
+
@for $i from 2 through $bars {
|
109
|
+
$offset: ($weight + $spacing) * ($i - 1);
|
110
|
+
$hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
|
111
|
+
}
|
112
|
+
|
113
|
+
&:hover::after {
|
114
|
+
background: $color-hover;
|
115
|
+
box-shadow: $hover-shadow;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
|
121
|
+
/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
|
122
|
+
///
|
123
|
+
/// @param {Color} $color [$black] - Color to use for the triangle.
|
124
|
+
@mixin background-triangle($color: $black) {
|
125
|
+
$rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
|
126
|
+
|
127
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
|
128
|
+
|
129
|
+
@media screen and (min-width:0\0) {
|
130
|
+
@if lightness($color) < 60% {
|
131
|
+
// White triangle
|
132
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
|
133
|
+
}
|
134
|
+
@else {
|
135
|
+
// Black triangle
|
136
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
|
137
|
+
}
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
|
142
|
+
/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
|
143
|
+
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
|
144
|
+
/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
|
145
|
+
@mixin clearfix {
|
146
|
+
&::before,
|
147
|
+
&::after {
|
148
|
+
display: table;
|
149
|
+
content: ' ';
|
150
|
+
|
151
|
+
@if $global-flexbox {
|
152
|
+
flex-basis: 0;
|
153
|
+
order: 1;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
|
157
|
+
&::after {
|
158
|
+
clear: both;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
|
163
|
+
/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
|
164
|
+
///
|
165
|
+
/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
|
166
|
+
/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
|
167
|
+
@mixin auto-width($max, $elem: li) {
|
168
|
+
@for $i from 2 through $max {
|
169
|
+
&:nth-last-child(#{$i}):first-child,
|
170
|
+
&:nth-last-child(#{$i}):first-child ~ #{$elem} {
|
171
|
+
width: percentage(1 / $i);
|
172
|
+
}
|
173
|
+
}
|
174
|
+
}
|
175
|
+
|
176
|
+
/// Removes the focus ring around an element when a mouse input is detected.
|
177
|
+
@mixin disable-mouse-outline {
|
178
|
+
[data-whatinput='mouse'] & {
|
179
|
+
outline: 0;
|
180
|
+
}
|
181
|
+
}
|
182
|
+
|
183
|
+
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
|
184
|
+
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
|
185
|
+
@mixin element-invisible {
|
186
|
+
position: absolute !important;
|
187
|
+
width: 1px;
|
188
|
+
height: 1px;
|
189
|
+
overflow: hidden;
|
190
|
+
clip: rect(0, 0, 0, 0);
|
191
|
+
}
|
192
|
+
|
193
|
+
/// Reverses the CSS output created by the `element-invisible()` mixin.
|
194
|
+
@mixin element-invisible-off {
|
195
|
+
position: static !important;
|
196
|
+
width: auto;
|
197
|
+
height: auto;
|
198
|
+
overflow: visible;
|
199
|
+
clip: auto;
|
200
|
+
}
|
201
|
+
|
202
|
+
/// Vertically centers the element inside of its first non-static parent,
|
203
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
204
|
+
@mixin vertical-center {
|
205
|
+
position: absolute;
|
206
|
+
top: 50%;
|
207
|
+
transform: translateY(-50%);
|
208
|
+
}
|
209
|
+
|
210
|
+
/// Horizontally centers the element inside of its first non-static parent,
|
211
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
212
|
+
@mixin horizontal-center {
|
213
|
+
position: absolute;
|
214
|
+
left: 50%;
|
215
|
+
transform: translateX(-50%);
|
216
|
+
}
|
217
|
+
|
218
|
+
/// Absolutely centers the element inside of its first non-static parent,
|
219
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
220
|
+
@mixin absolute-center {
|
221
|
+
position: absolute;
|
222
|
+
top: 50%;
|
223
|
+
left: 50%;
|
224
|
+
transform: translate(-50%, -50%);
|
225
|
+
}
|
226
|
+
|
227
|
+
/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
|
228
|
+
///
|
229
|
+
/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
|
230
|
+
@mixin -zf-each-breakpoint($small: true) {
|
231
|
+
$list: $breakpoint-classes;
|
232
|
+
|
233
|
+
@if not $small {
|
234
|
+
$list: sl-remove($list, $-zf-zero-breakpoint);
|
235
|
+
}
|
236
|
+
|
237
|
+
@each $name in $list {
|
238
|
+
$-zf-size: $name !global;
|
239
|
+
|
240
|
+
@include breakpoint($name) {
|
241
|
+
@content;
|
242
|
+
}
|
243
|
+
}
|
244
|
+
}
|
245
|
+
|
246
|
+
/// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
|
247
|
+
/// - For a single value, `$-zf-bp-value` is this value.
|
248
|
+
/// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
|
249
|
+
/// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
|
250
|
+
/// @param {Number|Keyword} $name [auto] - Single value or breakpoint name to use. "auto" by default.
|
251
|
+
/// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
|
252
|
+
@mixin -zf-breakpoint-value(
|
253
|
+
$name: auto,
|
254
|
+
$map: null
|
255
|
+
) {
|
256
|
+
@if $name == auto and type-of($map) == 'map' {
|
257
|
+
// "auto"
|
258
|
+
@each $k, $v in $map {
|
259
|
+
@include breakpoint($k) {
|
260
|
+
@include -zf-breakpoint-value($v, $map) {
|
261
|
+
@content;
|
262
|
+
}
|
263
|
+
}
|
264
|
+
}
|
265
|
+
}
|
266
|
+
@else {
|
267
|
+
// breakpoint name
|
268
|
+
@if type-of($name) == 'string' {
|
269
|
+
$name: -zf-get-bp-val($map, $name);
|
270
|
+
}
|
271
|
+
|
272
|
+
// breakpoint value
|
273
|
+
$-zf-bp-value: $name !global;
|
274
|
+
@content;
|
275
|
+
}
|
276
|
+
}
|