bedrock_sass 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/assets/_vendor/foundation/_vendor/normalize-scss/sass/_normalize.scss +3 -0
- data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
- data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
- data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
- data/assets/_vendor/foundation/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
- data/assets/_vendor/foundation/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
- data/assets/_vendor/foundation/scss/_global.scss +249 -0
- data/assets/_vendor/foundation/scss/components/_accordion-menu.scss +171 -0
- data/assets/_vendor/foundation/scss/components/_accordion.scss +155 -0
- data/assets/_vendor/foundation/scss/components/_badge.scss +63 -0
- data/assets/_vendor/foundation/scss/components/_breadcrumbs.scss +117 -0
- data/assets/_vendor/foundation/scss/components/_button-group.scss +253 -0
- data/assets/_vendor/foundation/scss/components/_button.scss +385 -0
- data/assets/_vendor/foundation/scss/components/_callout.scss +106 -0
- data/assets/_vendor/foundation/scss/components/_card.scss +129 -0
- data/assets/_vendor/foundation/scss/components/_close-button.scss +102 -0
- data/assets/_vendor/foundation/scss/components/_drilldown.scss +142 -0
- data/assets/_vendor/foundation/scss/components/_dropdown-menu.scss +274 -0
- data/assets/_vendor/foundation/scss/components/_dropdown.scss +79 -0
- data/assets/_vendor/foundation/scss/components/_flex-video.scss +1 -0
- data/assets/_vendor/foundation/scss/components/_flex.scss +117 -0
- data/assets/_vendor/foundation/scss/components/_float.scss +27 -0
- data/assets/_vendor/foundation/scss/components/_label.scss +64 -0
- data/assets/_vendor/foundation/scss/components/_media-object.scss +114 -0
- data/assets/_vendor/foundation/scss/components/_menu-icon.scss +9 -0
- data/assets/_vendor/foundation/scss/components/_menu.scss +495 -0
- data/assets/_vendor/foundation/scss/components/_off-canvas.scss +506 -0
- data/assets/_vendor/foundation/scss/components/_orbit.scss +196 -0
- data/assets/_vendor/foundation/scss/components/_pagination.scss +193 -0
- data/assets/_vendor/foundation/scss/components/_progress-bar.scss +64 -0
- data/assets/_vendor/foundation/scss/components/_responsive-embed.scss +70 -0
- data/assets/_vendor/foundation/scss/components/_reveal.scss +180 -0
- data/assets/_vendor/foundation/scss/components/_slider.scss +137 -0
- data/assets/_vendor/foundation/scss/components/_sticky.scss +39 -0
- data/assets/_vendor/foundation/scss/components/_switch.scss +247 -0
- data/assets/_vendor/foundation/scss/components/_table.scss +330 -0
- data/assets/_vendor/foundation/scss/components/_tabs.scss +196 -0
- data/assets/_vendor/foundation/scss/components/_thumbnail.scss +67 -0
- data/assets/_vendor/foundation/scss/components/_title-bar.scss +84 -0
- data/assets/_vendor/foundation/scss/components/_tooltip.scss +160 -0
- data/assets/_vendor/foundation/scss/components/_top-bar.scss +175 -0
- data/assets/_vendor/foundation/scss/components/_visibility.scss +132 -0
- data/assets/_vendor/foundation/scss/forms/_checkbox.scss +41 -0
- data/assets/_vendor/foundation/scss/forms/_error.scss +88 -0
- data/assets/_vendor/foundation/scss/forms/_fieldset.scss +53 -0
- data/assets/_vendor/foundation/scss/forms/_forms.scss +34 -0
- data/assets/_vendor/foundation/scss/forms/_help-text.scss +30 -0
- data/assets/_vendor/foundation/scss/forms/_input-group.scss +142 -0
- data/assets/_vendor/foundation/scss/forms/_label.scss +50 -0
- data/assets/_vendor/foundation/scss/forms/_meter.scss +116 -0
- data/assets/_vendor/foundation/scss/forms/_progress.scss +94 -0
- data/assets/_vendor/foundation/scss/forms/_range.scss +149 -0
- data/assets/_vendor/foundation/scss/forms/_select.scss +86 -0
- data/assets/_vendor/foundation/scss/forms/_text.scss +179 -0
- data/assets/_vendor/foundation/scss/foundation.scss +133 -0
- data/assets/_vendor/foundation/scss/grid/_classes.scss +176 -0
- data/assets/_vendor/foundation/scss/grid/_column.scss +112 -0
- data/assets/_vendor/foundation/scss/grid/_flex-grid.scss +259 -0
- data/assets/_vendor/foundation/scss/grid/_grid.scss +48 -0
- data/assets/_vendor/foundation/scss/grid/_gutter.scss +82 -0
- data/assets/_vendor/foundation/scss/grid/_layout.scss +76 -0
- data/assets/_vendor/foundation/scss/grid/_position.scss +76 -0
- data/assets/_vendor/foundation/scss/grid/_row.scss +99 -0
- data/assets/_vendor/foundation/scss/grid/_size.scss +24 -0
- data/assets/_vendor/foundation/scss/prototype/_arrow.scss +36 -0
- data/assets/_vendor/foundation/scss/prototype/_border-box.scss +35 -0
- data/assets/_vendor/foundation/scss/prototype/_border-none.scss +35 -0
- data/assets/_vendor/foundation/scss/prototype/_bordered.scss +54 -0
- data/assets/_vendor/foundation/scss/prototype/_box.scss +23 -0
- data/assets/_vendor/foundation/scss/prototype/_display.scss +50 -0
- data/assets/_vendor/foundation/scss/prototype/_font-styling.scss +95 -0
- data/assets/_vendor/foundation/scss/prototype/_list-style-type.scss +95 -0
- data/assets/_vendor/foundation/scss/prototype/_overflow.scss +72 -0
- data/assets/_vendor/foundation/scss/prototype/_position.scss +114 -0
- data/assets/_vendor/foundation/scss/prototype/_prototype.scss +87 -0
- data/assets/_vendor/foundation/scss/prototype/_relation.scss +157 -0
- data/assets/_vendor/foundation/scss/prototype/_rotate.scss +31 -0
- data/assets/_vendor/foundation/scss/prototype/_rounded.scss +54 -0
- data/assets/_vendor/foundation/scss/prototype/_separator.scss +96 -0
- data/assets/_vendor/foundation/scss/prototype/_shadow.scss +43 -0
- data/assets/_vendor/foundation/scss/prototype/_sizing.scss +73 -0
- data/assets/_vendor/foundation/scss/prototype/_spacing.scss +204 -0
- data/assets/_vendor/foundation/scss/prototype/_text-decoration.scss +48 -0
- data/assets/_vendor/foundation/scss/prototype/_text-transformation.scss +48 -0
- data/assets/_vendor/foundation/scss/prototype/_text-utilities.scss +88 -0
- data/assets/_vendor/foundation/scss/settings/_settings.scss +869 -0
- data/assets/_vendor/foundation/scss/typography/_alignment.scss +22 -0
- data/assets/_vendor/foundation/scss/typography/_base.scss +509 -0
- data/assets/_vendor/foundation/scss/typography/_helpers.scss +80 -0
- data/assets/_vendor/foundation/scss/typography/_print.scss +86 -0
- data/assets/_vendor/foundation/scss/typography/_typography.scss +26 -0
- data/assets/_vendor/foundation/scss/util/_breakpoint.scss +348 -0
- data/assets/_vendor/foundation/scss/util/_color.scss +129 -0
- data/assets/_vendor/foundation/scss/util/_direction.scss +31 -0
- data/assets/_vendor/foundation/scss/util/_flex.scss +85 -0
- data/assets/_vendor/foundation/scss/util/_math.scss +72 -0
- data/assets/_vendor/foundation/scss/util/_mixins.scss +313 -0
- data/assets/_vendor/foundation/scss/util/_selector.scss +41 -0
- data/assets/_vendor/foundation/scss/util/_typography.scss +26 -0
- data/assets/_vendor/foundation/scss/util/_unit.scss +152 -0
- data/assets/_vendor/foundation/scss/util/_util.scss +14 -0
- data/assets/_vendor/foundation/scss/util/_value.scss +160 -0
- data/assets/_vendor/foundation/scss/xy-grid/_cell.scss +169 -0
- data/assets/_vendor/foundation/scss/xy-grid/_classes.scss +476 -0
- data/assets/_vendor/foundation/scss/xy-grid/_collapse.scss +74 -0
- data/assets/_vendor/foundation/scss/xy-grid/_frame.scss +85 -0
- data/assets/_vendor/foundation/scss/xy-grid/_grid.scss +35 -0
- data/assets/_vendor/foundation/scss/xy-grid/_gutters.scss +45 -0
- data/assets/_vendor/foundation/scss/xy-grid/_layout.scss +33 -0
- data/assets/_vendor/foundation/scss/xy-grid/_position.scss +28 -0
- data/assets/_vendor/foundation/scss/xy-grid/_xy-grid.scss +51 -0
- data/assets/_vendor/motion-ui/_classes.scss +109 -0
- data/assets/_vendor/motion-ui/_settings.scss +61 -0
- data/assets/_vendor/motion-ui/effects/_fade.scss +32 -0
- data/assets/_vendor/motion-ui/effects/_hinge.scss +65 -0
- data/assets/_vendor/motion-ui/effects/_shake.scss +15 -0
- data/assets/_vendor/motion-ui/effects/_slide.scss +41 -0
- data/assets/_vendor/motion-ui/effects/_spin.scss +28 -0
- data/assets/_vendor/motion-ui/effects/_wiggle.scss +13 -0
- data/assets/_vendor/motion-ui/effects/_zoom.scss +15 -0
- data/assets/_vendor/motion-ui/motion-ui.scss +29 -0
- data/assets/_vendor/motion-ui/transitions/_fade.scss +28 -0
- data/assets/_vendor/motion-ui/transitions/_hinge.scss +43 -0
- data/assets/_vendor/motion-ui/transitions/_slide.scss +42 -0
- data/assets/_vendor/motion-ui/transitions/_spin.scss +39 -0
- data/assets/_vendor/motion-ui/transitions/_zoom.scss +39 -0
- data/assets/_vendor/motion-ui/util/_animation.scss +7 -0
- data/assets/_vendor/motion-ui/util/_args.scss +15 -0
- data/assets/_vendor/motion-ui/util/_keyframe.scss +136 -0
- data/assets/_vendor/motion-ui/util/_selector.scss +23 -0
- data/assets/_vendor/motion-ui/util/_series.scss +54 -0
- data/assets/_vendor/motion-ui/util/_transition.scss +45 -0
- data/assets/_vendor/motion-ui/util/_unit.scss +7 -0
- data/assets/bedrock/js/bedrock.js +22993 -0
- data/assets/bedrock/scss/_bedrock-components.scss +15 -0
- data/assets/bedrock/scss/_bedrock-settings.scss +45 -0
- data/assets/bedrock/scss/_foundation-components.scss +50 -0
- data/assets/bedrock/scss/_foundation-settings.scss +869 -0
- data/assets/bedrock/scss/bedrock.scss +7 -0
- data/assets/bedrock/scss/components/global.scss +55 -0
- data/assets/bedrock/scss/components/header.scss +60 -0
- data/assets/bedrock/scss/components/helper-classes.scss +53 -0
- data/assets/bedrock/scss/components/logo-bar.scss +45 -0
- data/assets/bedrock/scss/components/off-canvas-menu.scss +359 -0
- data/assets/bedrock/scss/components/panel.scss +121 -0
- data/assets/bedrock/scss/components/tiny-mce-editor.scss +74 -0
- data/lib/bedrock_sass/version.rb +1 -1
- metadata +153 -2
@@ -0,0 +1,39 @@
|
|
1
|
+
/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
|
2
|
+
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
+
/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
|
4
|
+
/// @param {Number} $amount [0.75turn] - Amount to element the element.
|
5
|
+
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
|
6
|
+
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
7
|
+
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
8
|
+
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
9
|
+
@mixin mui-spin(
|
10
|
+
$state: in,
|
11
|
+
$direction: cw,
|
12
|
+
$amount: 0.75turn,
|
13
|
+
$fade: map-get($motion-ui-settings, spin-and-fade),
|
14
|
+
$duration: null,
|
15
|
+
$timing: null,
|
16
|
+
$delay: null
|
17
|
+
) {
|
18
|
+
$spin: spin($state, $direction, $amount);
|
19
|
+
|
20
|
+
@include transition-start($state) {
|
21
|
+
@include transition-basics($duration, $timing, $delay);
|
22
|
+
@include -mui-keyframe-get($spin, 0);
|
23
|
+
|
24
|
+
@if $fade {
|
25
|
+
transition-property: transform, opacity;
|
26
|
+
opacity: if($state == in, 0, 1);
|
27
|
+
} @else {
|
28
|
+
transition-property: transform, opacity;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
@include transition-end($state) {
|
33
|
+
@include -mui-keyframe-get($spin, 100);
|
34
|
+
|
35
|
+
@if $fade {
|
36
|
+
opacity: if($state == in, 1, 0);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
|
2
|
+
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
+
/// @param {Number} $from [1.5] - Size to start at.
|
4
|
+
/// @param {Number} $from [1] - Size to end at.
|
5
|
+
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
|
6
|
+
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
7
|
+
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
8
|
+
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
9
|
+
@mixin mui-zoom(
|
10
|
+
$state: in,
|
11
|
+
$from: 1.5,
|
12
|
+
$to: 1,
|
13
|
+
$fade: map-get($motion-ui-settings, scale-and-fade),
|
14
|
+
$duration: null,
|
15
|
+
$timing: null,
|
16
|
+
$delay: null
|
17
|
+
) {
|
18
|
+
$scale: zoom($from, $to);
|
19
|
+
|
20
|
+
@include transition-start($state) {
|
21
|
+
@include transition-basics($duration, $timing, $delay);
|
22
|
+
@include -mui-keyframe-get($scale, 0);
|
23
|
+
|
24
|
+
@if $fade {
|
25
|
+
transition-property: transform, opacity;
|
26
|
+
opacity: if($state == in, 0, 1);
|
27
|
+
} @else {
|
28
|
+
transition-property: transform, opacity;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
@include transition-end($state) {
|
33
|
+
@include -mui-keyframe-get($scale, 100);
|
34
|
+
|
35
|
+
@if $fade {
|
36
|
+
opacity: if($state == in, 1, 0);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
|
2
|
+
/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
|
3
|
+
@mixin mui-animation($args...) {
|
4
|
+
$name: map-get(-mui-process-args($args...), name);
|
5
|
+
@include mui-keyframes($name, $args...);
|
6
|
+
animation-name: unquote($name);
|
7
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/// Processes a series of keyframe function arguments.
|
2
|
+
/// @access private
|
3
|
+
@function -mui-process-args($args...) {
|
4
|
+
@if length($args) == 1 {
|
5
|
+
$arg: nth($args, 1);
|
6
|
+
|
7
|
+
@if type-of($arg) == 'string' {
|
8
|
+
@return call($arg);
|
9
|
+
} @else if type-of($arg) == 'map' {
|
10
|
+
@return $arg;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@return -mui-keyframe-combine($args...);
|
15
|
+
}
|
@@ -0,0 +1,136 @@
|
|
1
|
+
// Internal counter for creating unique keyframe names
|
2
|
+
$-mui-custom: 0;
|
3
|
+
|
4
|
+
/// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element.
|
5
|
+
/// @param {String} $name - Name of the keyframe.
|
6
|
+
/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
|
7
|
+
@mixin mui-keyframes($name, $effects...) {
|
8
|
+
$obj: -mui-process-args($effects...);
|
9
|
+
$obj: map-remove($obj, name);
|
10
|
+
|
11
|
+
@keyframes #{$name} {
|
12
|
+
// Now iterate through each keyframe percentage
|
13
|
+
@each $pct, $props in $obj {
|
14
|
+
#{-mui-keyframe-pct($pct)} {
|
15
|
+
// Lastly, iterate through each CSS property within a percentage and print it out
|
16
|
+
@each $prop, $value in $props {
|
17
|
+
#{$prop}: #{$value};
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
/// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values.
|
25
|
+
/// @param {Number|List} $input - List of numbers to use.
|
26
|
+
/// @return {String} A set of comma-separated percentage values.
|
27
|
+
/// @access private
|
28
|
+
@function -mui-keyframe-pct($input) {
|
29
|
+
$output: ();
|
30
|
+
|
31
|
+
@if type-of($input) == 'number' {
|
32
|
+
$output: ($input * 1%);
|
33
|
+
} @else if type-of($input) == 'list' {
|
34
|
+
@each $i in $input {
|
35
|
+
$output: append($output, ($i * 1%), comma);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
@return $output;
|
40
|
+
}
|
41
|
+
|
42
|
+
/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions.
|
43
|
+
/// @param {Map} $kf - Keyframe map to extract from.
|
44
|
+
/// @param {Number} $key - Key in the map to print the CSS of.
|
45
|
+
/// @access private
|
46
|
+
@mixin -mui-keyframe-get($kf, $key) {
|
47
|
+
$map: map-get($kf, $key);
|
48
|
+
|
49
|
+
@each $prop, $value in $map or () {
|
50
|
+
// Some keyframe maps store transforms as quoted strings
|
51
|
+
@if type-of($value) == 'string' {
|
52
|
+
$value: unquote($value);
|
53
|
+
}
|
54
|
+
#{$prop}: $value;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
/// Reformats a map containing keys with a list of values, so that each key is a single value.
|
59
|
+
/// @param {Map} $map - Map to split up.
|
60
|
+
/// @return {Map} A reformatted map.
|
61
|
+
/// @access private
|
62
|
+
@function -mui-keyframe-split($map) {
|
63
|
+
$new-map: ();
|
64
|
+
|
65
|
+
// Split keys with multiple values into individual keys
|
66
|
+
@each $key, $item in $map {
|
67
|
+
$key-type: type-of($key);
|
68
|
+
|
69
|
+
@if $key-type == 'number' {
|
70
|
+
$new-map: map-merge($new-map, ($key: $item));
|
71
|
+
} @else if $key-type == 'list' {
|
72
|
+
@each $k in $key {
|
73
|
+
$new-map: map-merge($new-map, ($k: $item));
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
@return $new-map;
|
79
|
+
}
|
80
|
+
|
81
|
+
/// Combines a series of keyframe objects into one.
|
82
|
+
/// @param {Map} $maps... - A series of maps to merge, as individual parameters.
|
83
|
+
/// @return {Map} A combined keyframe object.
|
84
|
+
/// @access private
|
85
|
+
@function -mui-keyframe-combine($maps...) {
|
86
|
+
$new-map: ();
|
87
|
+
|
88
|
+
// Iterate through each map passed in
|
89
|
+
@each $map in $maps {
|
90
|
+
@if type-of($map) == 'string' {
|
91
|
+
$map: call($map);
|
92
|
+
}
|
93
|
+
|
94
|
+
$map: -mui-keyframe-split($map);
|
95
|
+
|
96
|
+
// Iterate through each keyframe in the map
|
97
|
+
// $key is the keyframe percentage
|
98
|
+
// $value is a map of CSS properties
|
99
|
+
@each $key, $value in $map {
|
100
|
+
$new-value: ();
|
101
|
+
|
102
|
+
@if map-has-key($new-map, $key) {
|
103
|
+
// If the map already has the keyframe %, append the new property
|
104
|
+
$new-value: -mui-merge-properties(map-get($new-map, $key), $value);
|
105
|
+
} @else {
|
106
|
+
// Otherwise, create a new map with the new property
|
107
|
+
$new-value: $value;
|
108
|
+
}
|
109
|
+
|
110
|
+
// Finally, merge the modified keyframe value into the output map
|
111
|
+
$new-map: map-merge($new-map, ($key: $new-value));
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
// Make a name for the keyframes
|
116
|
+
$-mui-custom: $-mui-custom + 1 !global;
|
117
|
+
$map-name: (name: 'custom-#{$-mui-custom}');
|
118
|
+
$new-map: map-merge($new-map, $map-name);
|
119
|
+
|
120
|
+
@return $new-map;
|
121
|
+
}
|
122
|
+
|
123
|
+
/// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property.
|
124
|
+
/// @param {Map} $one - First map to merge.
|
125
|
+
/// @param {Map} $two - Second map to merge.
|
126
|
+
/// @return {Map} A combined map.
|
127
|
+
/// @access private
|
128
|
+
@function -mui-merge-properties($one, $two) {
|
129
|
+
@if map-has-key($one, transform) and map-has-key($two, transform) {
|
130
|
+
$transform: join(map-get($one, transform), map-get($two, transform));
|
131
|
+
$one: map-merge($one, (transform: $transform));
|
132
|
+
$two: map-remove($two, transform);
|
133
|
+
}
|
134
|
+
|
135
|
+
@return map-merge($one, $two);
|
136
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps.
|
2
|
+
/// @param {String|List} $states - One or more strings that correlate to a state.
|
3
|
+
/// @param {Boolean} $active - Defines if the selector is for the setup or active class.
|
4
|
+
/// @return {String} A selector that can be interpolated into your Sass code.
|
5
|
+
/// @access private
|
6
|
+
@function -mui-build-selector($states, $active: false) {
|
7
|
+
$return: '';
|
8
|
+
$chain: map-get($motion-ui-classes, chain);
|
9
|
+
$prefix: map-get($motion-ui-classes, prefix);
|
10
|
+
$suffix: map-get($motion-ui-classes, active);
|
11
|
+
|
12
|
+
@each $sel in $states {
|
13
|
+
$return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel;
|
14
|
+
|
15
|
+
@if $active {
|
16
|
+
$return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix;
|
17
|
+
}
|
18
|
+
|
19
|
+
$return: $return + ', ';
|
20
|
+
}
|
21
|
+
|
22
|
+
@return str-slice($return, 1, -3);
|
23
|
+
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
$-mui-queue: ();
|
2
|
+
|
3
|
+
/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end.
|
4
|
+
/// @access private
|
5
|
+
%animated-element {
|
6
|
+
animation-play-state: paused;
|
7
|
+
animation-fill-mode: both;
|
8
|
+
|
9
|
+
.#{map-get($motion-ui-settings, activate-queue-class)} & {
|
10
|
+
animation-play-state: running;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
/// Creates a new animation queue.
|
15
|
+
/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
|
16
|
+
@mixin mui-series($delay: 0s) {
|
17
|
+
$-mui-queue: () !global;
|
18
|
+
|
19
|
+
@if $delay > 0 {
|
20
|
+
$item: ($delay, 0s);
|
21
|
+
$-mui-queue: append($-mui-queue, $item) !global;
|
22
|
+
}
|
23
|
+
|
24
|
+
@content;
|
25
|
+
}
|
26
|
+
|
27
|
+
/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
|
28
|
+
/// @param {Duration} $duration [1s] - Length of the animation.
|
29
|
+
/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one.
|
30
|
+
/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
|
31
|
+
@mixin mui-queue(
|
32
|
+
$duration: 1s,
|
33
|
+
$gap: 0s,
|
34
|
+
$keyframes...
|
35
|
+
) {
|
36
|
+
// Build the animation
|
37
|
+
$kf: -mui-process-args($keyframes...);
|
38
|
+
|
39
|
+
// Calculate the delay for this animation based on how long the previous ones take
|
40
|
+
$actual-delay: 0s;
|
41
|
+
@each $anim in $-mui-queue {
|
42
|
+
$actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2);
|
43
|
+
}
|
44
|
+
|
45
|
+
// Append this animation's length and gap to the end of the queue
|
46
|
+
$item: ($duration, $gap);
|
47
|
+
$-mui-queue: append($-mui-queue, $item) !global;
|
48
|
+
|
49
|
+
// CSS output
|
50
|
+
@extend %animated-element;
|
51
|
+
@include mui-animation($kf);
|
52
|
+
animation-duration: $duration;
|
53
|
+
animation-delay: $actual-delay;
|
54
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/// Applies basic transition settings to an element.
|
2
|
+
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
3
|
+
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
4
|
+
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
5
|
+
@mixin transition-basics(
|
6
|
+
$duration: null,
|
7
|
+
$timing: null,
|
8
|
+
$delay: null
|
9
|
+
) {
|
10
|
+
@include -motion-ui-defaults;
|
11
|
+
transition-duration: $duration;
|
12
|
+
transition-timing-function: $timing;
|
13
|
+
transition-delay: $delay;
|
14
|
+
}
|
15
|
+
|
16
|
+
/// Wraps the content in the setup class for a transition.
|
17
|
+
/// @param {Keyword} $dir - State to setup for transition.
|
18
|
+
@mixin transition-start($dir) {
|
19
|
+
$selector: -mui-build-selector(map-get($motion-ui-states, $dir));
|
20
|
+
|
21
|
+
@at-root {
|
22
|
+
#{$selector} {
|
23
|
+
@content;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
/// Wraps the content in the active class for a transition.
|
29
|
+
/// @param {Keyword} $dir - State to activate a transition on.
|
30
|
+
@mixin transition-end($dir) {
|
31
|
+
$selector: -mui-build-selector(map-get($motion-ui-states, $dir), true);
|
32
|
+
|
33
|
+
@at-root {
|
34
|
+
#{$selector} {
|
35
|
+
@content;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
/// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`.
|
41
|
+
/// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation.
|
42
|
+
@mixin stagger($delay-amount) {
|
43
|
+
transition-delay: $delay-amount;
|
44
|
+
transition-duration: 0; // Prevent accidental CSS inheritance
|
45
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
2
|
+
/// @param {Number} $num - Number to strip unit from.
|
3
|
+
/// @return {Number} The same number, sans unit.
|
4
|
+
/// @access private
|
5
|
+
@function strip-unit($num) {
|
6
|
+
@return $num / ($num * 0 + 1);
|
7
|
+
}
|