foundation-rails 6.4.3.0 → 6.5.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +0 -1
- data/.ruby-version +1 -1
- data/.travis.yml +14 -3
- data/Appraisals +19 -0
- data/Gemfile +5 -2
- data/Gemfile.lock +193 -0
- data/README.md +53 -24
- data/Rakefile +11 -12
- data/bower.json +3 -3
- data/foundation-rails.gemspec +5 -5
- data/gemfiles/rails_4.1.gemfile +10 -0
- data/gemfiles/rails_4.1.gemfile.lock +178 -0
- data/gemfiles/rails_4.2.gemfile +10 -0
- data/gemfiles/rails_4.2.gemfile.lock +178 -0
- data/gemfiles/rails_5.0.gemfile +10 -0
- data/gemfiles/rails_5.0.gemfile.lock +193 -0
- data/gemfiles/rails_5.1.gemfile +10 -0
- data/gemfiles/rails_5.1.gemfile.lock +193 -0
- data/gemfiles/rails_5.2.gemfile +10 -0
- data/gemfiles/rails_5.2.gemfile.lock +193 -0
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +1 -1
- data/lib/generators/foundation/templates/_settings.scss +5 -5
- data/spec/support/helpers.rb +1 -1
- data/vendor/assets/js/foundation.cjs.js +11795 -0
- data/vendor/assets/js/foundation.cjs.js.map +1 -0
- data/vendor/assets/js/foundation.es6.js +10361 -0
- data/vendor/assets/js/foundation.es6.js.map +1 -0
- data/vendor/assets/js/foundation.esm.js +11756 -0
- data/vendor/assets/js/foundation.esm.js.map +1 -0
- data/vendor/assets/js/foundation.js +13214 -31
- data/vendor/assets/js/foundation.js.map +1 -0
- data/vendor/assets/js/foundation.min.js +2 -0
- data/vendor/assets/js/foundation.min.js.map +1 -0
- data/vendor/assets/js/foundation.sprockets.js +38 -0
- data/vendor/assets/js/{foundation.abide.js → plugins/foundation.abide.js} +317 -138
- data/vendor/assets/js/plugins/foundation.abide.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.abide.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.abide.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.accordion.js +676 -0
- data/vendor/assets/js/plugins/foundation.accordion.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.accordion.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.accordion.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.accordionMenu.js +637 -0
- data/vendor/assets/js/plugins/foundation.accordionMenu.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.accordionMenu.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.accordionMenu.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.core.js +1072 -0
- data/vendor/assets/js/plugins/foundation.core.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.core.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.core.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.drilldown.js +982 -0
- data/vendor/assets/js/plugins/foundation.drilldown.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.drilldown.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.drilldown.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.dropdown.js +1324 -0
- data/vendor/assets/js/plugins/foundation.dropdown.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.dropdown.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.dropdown.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.dropdownMenu.js +792 -0
- data/vendor/assets/js/plugins/foundation.dropdownMenu.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.dropdownMenu.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.dropdownMenu.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.equalizer.js +638 -0
- data/vendor/assets/js/plugins/foundation.equalizer.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.equalizer.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.equalizer.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.interchange.js +471 -0
- data/vendor/assets/js/plugins/foundation.interchange.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.interchange.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.interchange.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.magellan.js +551 -0
- data/vendor/assets/js/plugins/foundation.magellan.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.magellan.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.magellan.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.offcanvas.js +1164 -0
- data/vendor/assets/js/plugins/foundation.offcanvas.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.offcanvas.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.offcanvas.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.orbit.js +883 -0
- data/vendor/assets/js/plugins/foundation.orbit.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.orbit.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.orbit.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveAccordionTabs.js +546 -0
- data/vendor/assets/js/plugins/foundation.responsiveAccordionTabs.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveAccordionTabs.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.responsiveAccordionTabs.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveMenu.js +437 -0
- data/vendor/assets/js/plugins/foundation.responsiveMenu.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveMenu.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.responsiveMenu.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveToggle.js +405 -0
- data/vendor/assets/js/plugins/foundation.responsiveToggle.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.responsiveToggle.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.responsiveToggle.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.reveal.js +1278 -0
- data/vendor/assets/js/plugins/foundation.reveal.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.reveal.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.reveal.min.js.map +1 -0
- data/vendor/assets/js/{foundation.slider.js → plugins/foundation.slider.js} +405 -271
- data/vendor/assets/js/plugins/foundation.slider.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.slider.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.slider.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.smoothScroll.js +382 -0
- data/vendor/assets/js/plugins/foundation.smoothScroll.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.smoothScroll.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.smoothScroll.min.js.map +1 -0
- data/vendor/assets/js/{foundation.sticky.js → plugins/foundation.sticky.js} +325 -203
- data/vendor/assets/js/plugins/foundation.sticky.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.sticky.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.sticky.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.tabs.js +813 -0
- data/vendor/assets/js/plugins/foundation.tabs.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.tabs.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.tabs.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.toggler.js +713 -0
- data/vendor/assets/js/plugins/foundation.toggler.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.toggler.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.toggler.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.tooltip.js +1346 -0
- data/vendor/assets/js/plugins/foundation.tooltip.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.tooltip.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.tooltip.min.js.map +1 -0
- data/vendor/assets/js/{foundation.util.box.js → plugins/foundation.util.box.js} +136 -54
- data/vendor/assets/js/plugins/foundation.util.box.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.box.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.box.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.imageLoader.js +218 -0
- data/vendor/assets/js/plugins/foundation.util.imageLoader.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.imageLoader.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.imageLoader.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.keyboard.js +351 -0
- data/vendor/assets/js/plugins/foundation.util.keyboard.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.keyboard.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.keyboard.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.mediaQuery.js +405 -0
- data/vendor/assets/js/plugins/foundation.util.mediaQuery.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.mediaQuery.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.mediaQuery.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.motion.js +282 -0
- data/vendor/assets/js/plugins/foundation.util.motion.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.motion.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.motion.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.nest.js +240 -0
- data/vendor/assets/js/plugins/foundation.util.nest.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.nest.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.nest.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.timer.js +226 -0
- data/vendor/assets/js/plugins/foundation.util.timer.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.timer.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.timer.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.touch.js +365 -0
- data/vendor/assets/js/plugins/foundation.util.touch.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.touch.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.touch.min.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.triggers.js +480 -0
- data/vendor/assets/js/plugins/foundation.util.triggers.js.map +1 -0
- data/vendor/assets/js/plugins/foundation.util.triggers.min.js +2 -0
- data/vendor/assets/js/plugins/foundation.util.triggers.min.js.map +1 -0
- data/vendor/assets/scss/_global.scss +10 -15
- data/vendor/assets/scss/components/_accordion-menu.scss +6 -3
- data/vendor/assets/scss/components/_accordion.scss +1 -0
- data/vendor/assets/scss/components/_breadcrumbs.scss +8 -6
- data/vendor/assets/scss/components/_button-group.scss +27 -8
- data/vendor/assets/scss/components/_button.scss +36 -8
- data/vendor/assets/scss/components/_card.scss +2 -2
- data/vendor/assets/scss/components/_drilldown.scss +5 -6
- data/vendor/assets/scss/components/_dropdown-menu.scss +15 -10
- data/vendor/assets/scss/components/_dropdown.scss +7 -4
- data/vendor/assets/scss/components/_flex.scss +6 -4
- data/vendor/assets/scss/components/_media-object.scss +33 -33
- data/vendor/assets/scss/components/_menu.scss +0 -4
- data/vendor/assets/scss/components/_off-canvas.scss +4 -4
- data/vendor/assets/scss/components/_orbit.scss +1 -0
- data/vendor/assets/scss/components/_responsive-embed.scss +0 -13
- data/vendor/assets/scss/components/_reveal.scss +19 -14
- data/vendor/assets/scss/components/_table.scss +3 -6
- data/vendor/assets/scss/components/_tabs.scss +1 -4
- data/vendor/assets/scss/components/_thumbnail.scss +1 -1
- data/vendor/assets/scss/components/_visibility.scss +5 -2
- data/vendor/assets/scss/forms/_error.scss +1 -0
- data/vendor/assets/scss/forms/_input-group.scss +10 -10
- data/vendor/assets/scss/forms/_meter.scss +5 -5
- data/vendor/assets/scss/forms/_progress.scss +6 -6
- data/vendor/assets/scss/forms/_range.scss +5 -5
- data/vendor/assets/scss/forms/_text.scss +7 -7
- data/vendor/assets/scss/foundation.scss +74 -57
- data/vendor/assets/scss/grid/_column.scss +2 -6
- data/vendor/assets/scss/grid/_flex-grid.scss +1 -0
- data/vendor/assets/scss/grid/_gutter.scss +0 -15
- data/vendor/assets/scss/grid/_position.scss +28 -4
- data/vendor/assets/scss/motion-ui/_settings.scss +1 -0
- data/vendor/assets/scss/motion-ui/effects/_fade.scss +1 -4
- data/vendor/assets/scss/motion-ui/effects/_hinge.scss +4 -3
- data/vendor/assets/scss/motion-ui/effects/_shake.scss +1 -1
- data/vendor/assets/scss/motion-ui/effects/_slide.scss +4 -3
- data/vendor/assets/scss/motion-ui/effects/_spin.scss +4 -3
- data/vendor/assets/scss/motion-ui/effects/_wiggle.scss +1 -1
- data/vendor/assets/scss/motion-ui/effects/_zoom.scss +2 -2
- data/vendor/assets/scss/motion-ui/motion-ui.scss +2 -0
- data/vendor/assets/scss/motion-ui/transitions/_fade.scss +6 -4
- data/vendor/assets/scss/motion-ui/transitions/_hinge.scss +3 -2
- data/vendor/assets/scss/motion-ui/transitions/_slide.scss +3 -2
- data/vendor/assets/scss/motion-ui/transitions/_spin.scss +2 -1
- data/vendor/assets/scss/motion-ui/transitions/_zoom.scss +6 -4
- data/vendor/assets/scss/motion-ui/util/_animation.scss +1 -1
- data/vendor/assets/scss/motion-ui/util/_args.scss +2 -2
- data/vendor/assets/scss/motion-ui/util/_function.scss +94 -0
- data/vendor/assets/scss/motion-ui/util/_keyframe.scss +5 -5
- data/vendor/assets/scss/motion-ui/util/_series.scss +20 -17
- data/vendor/assets/scss/motion-ui/util/_string.scss +36 -0
- data/vendor/assets/scss/prototype/_relation.scss +1 -1
- data/vendor/assets/scss/prototype/_rounded.scss +3 -0
- data/vendor/assets/scss/prototype/_spacing.scss +94 -121
- data/vendor/assets/scss/settings/_settings.scss +5 -5
- data/vendor/assets/scss/typography/_base.scss +2 -2
- data/vendor/assets/scss/typography/_helpers.scss +1 -1
- data/vendor/assets/scss/typography/_print.scss +4 -0
- data/vendor/assets/scss/util/_breakpoint.scss +22 -10
- data/vendor/assets/scss/util/_color.scss +11 -1
- data/vendor/assets/scss/util/_direction.scss +1 -1
- data/vendor/assets/scss/util/_flex.scss +12 -7
- data/vendor/assets/scss/util/_mixins.scss +7 -3
- data/vendor/assets/scss/util/_unit.scss +3 -3
- data/vendor/assets/scss/vendor/normalize.scss +281 -0
- data/vendor/assets/scss/xy-grid/_cell.scss +33 -17
- data/vendor/assets/scss/xy-grid/_classes.scss +31 -11
- data/vendor/assets/scss/xy-grid/_collapse.scss +2 -1
- data/vendor/assets/scss/xy-grid/_frame.scss +2 -1
- data/vendor/assets/scss/xy-grid/_grid.scss +1 -0
- data/vendor/assets/scss/xy-grid/_gutters.scss +1 -1
- data/vendor/assets/scss/xy-grid/_layout.scss +2 -1
- data/vendor/assets/scss/xy-grid/_position.scss +5 -1
- metadata +172 -80
- data/vendor/assets/_vendor/normalize-scss/sass/_normalize.scss +0 -3
- data/vendor/assets/_vendor/normalize-scss/sass/normalize/_import-now.scss +0 -11
- data/vendor/assets/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +0 -676
- data/vendor/assets/_vendor/normalize-scss/sass/normalize/_variables.scss +0 -36
- data/vendor/assets/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +0 -61
- data/vendor/assets/js/foundation.accordion.js +0 -511
- data/vendor/assets/js/foundation.accordionMenu.js +0 -527
- data/vendor/assets/js/foundation.core.js +0 -860
- data/vendor/assets/js/foundation.drilldown.js +0 -759
- data/vendor/assets/js/foundation.dropdown.js +0 -1151
- data/vendor/assets/js/foundation.dropdownMenu.js +0 -677
- data/vendor/assets/js/foundation.equalizer.js +0 -542
- data/vendor/assets/js/foundation.interchange.js +0 -399
- data/vendor/assets/js/foundation.magellan.js +0 -449
- data/vendor/assets/js/foundation.offcanvas.js +0 -1054
- data/vendor/assets/js/foundation.orbit.js +0 -767
- data/vendor/assets/js/foundation.responsiveAccordionTabs.js +0 -440
- data/vendor/assets/js/foundation.responsiveMenu.js +0 -362
- data/vendor/assets/js/foundation.responsiveToggle.js +0 -336
- data/vendor/assets/js/foundation.reveal.js +0 -1065
- data/vendor/assets/js/foundation.smoothScroll.js +0 -303
- data/vendor/assets/js/foundation.tabs.js +0 -678
- data/vendor/assets/js/foundation.toggler.js +0 -601
- data/vendor/assets/js/foundation.tooltip.js +0 -1194
- data/vendor/assets/js/foundation.util.imageLoader.js +0 -163
- data/vendor/assets/js/foundation.util.keyboard.js +0 -298
- data/vendor/assets/js/foundation.util.mediaQuery.js +0 -354
- data/vendor/assets/js/foundation.util.motion.js +0 -231
- data/vendor/assets/js/foundation.util.nest.js +0 -181
- data/vendor/assets/js/foundation.util.timer.js +0 -170
- data/vendor/assets/js/foundation.util.touch.js +0 -275
- data/vendor/assets/js/foundation.util.triggers.js +0 -398
- data/vendor/assets/scss/prototype/_typescale.scss +0 -20
@@ -3,13 +3,13 @@
|
|
3
3
|
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
|
4
4
|
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
|
5
5
|
/// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
|
6
|
-
/// @param {Keyword} $turn-origin [
|
6
|
+
/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
|
7
7
|
@function hinge (
|
8
8
|
$state: in,
|
9
9
|
$from: left,
|
10
10
|
$axis: edge,
|
11
11
|
$perspective: 2000px,
|
12
|
-
$turn-origin:
|
12
|
+
$turn-origin: null
|
13
13
|
) {
|
14
14
|
// Rotation directions when hinging from back vs. front
|
15
15
|
$rotation-amount: 90deg;
|
@@ -27,6 +27,7 @@
|
|
27
27
|
);
|
28
28
|
|
29
29
|
// Rotation origin
|
30
|
+
$turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
|
30
31
|
$rotation: '';
|
31
32
|
@if $turn-origin == from-front {
|
32
33
|
$rotation: map-get($rotations-from, $from);
|
@@ -56,7 +57,7 @@
|
|
56
57
|
}
|
57
58
|
|
58
59
|
$keyframes: (
|
59
|
-
name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
|
60
|
+
name: -mui-string-safe('hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}'),
|
60
61
|
0: (transform: $start, transform-origin: $origin),
|
61
62
|
100: (transform: $end),
|
62
63
|
);
|
@@ -1,16 +1,17 @@
|
|
1
1
|
/// Creates a sliding animation.
|
2
2
|
/// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
|
3
|
-
/// @param {Keyword} $direction [
|
3
|
+
/// @param {Keyword} $direction [null] - Direction to move. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
|
4
4
|
/// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
|
5
5
|
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
|
6
6
|
@function slide(
|
7
7
|
$state: in,
|
8
|
-
$direction:
|
8
|
+
$direction: null,
|
9
9
|
$amount: 100%
|
10
10
|
) {
|
11
11
|
$from: $amount;
|
12
12
|
$to: 0;
|
13
13
|
$func: 'translateY';
|
14
|
+
$direction: if($direction != null, $direction, if($state == in, left, right));
|
14
15
|
|
15
16
|
@if $direction == left or $direction == right {
|
16
17
|
$func: 'translateX';
|
@@ -32,7 +33,7 @@
|
|
32
33
|
}
|
33
34
|
|
34
35
|
$keyframes: (
|
35
|
-
name: 'slide-#{$state}-#{$direction}-#{
|
36
|
+
name: -mui-string-safe('slide-#{$state}-#{$direction}-#{$amount}'),
|
36
37
|
0: (transform: '#{$func}(#{$from})'),
|
37
38
|
100: (transform: '#{$func}(#{$to})'),
|
38
39
|
);
|
@@ -1,14 +1,15 @@
|
|
1
1
|
/// Creates a spinning animation.
|
2
|
-
/// @param {Keyword} $direction [
|
2
|
+
/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
|
3
3
|
/// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
|
4
4
|
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
|
5
5
|
@function spin(
|
6
6
|
$state: in,
|
7
|
-
$direction:
|
7
|
+
$direction: null,
|
8
8
|
$amount: 1turn
|
9
9
|
) {
|
10
10
|
$start: 0;
|
11
11
|
$end: 0;
|
12
|
+
$direction: if($direction != null, $direction, if($state == in, cw, ccw));
|
12
13
|
|
13
14
|
@if $state == in {
|
14
15
|
$start: if($direction == ccw, $amount, $amount * -1);
|
@@ -19,7 +20,7 @@
|
|
19
20
|
}
|
20
21
|
|
21
22
|
$keyframes: (
|
22
|
-
name: 'spin-#{$direction}-#{$amount}',
|
23
|
+
name: -mui-string-safe('spin-#{$direction}-#{$amount}'),
|
23
24
|
0: (transform: rotate($start)),
|
24
25
|
100: (transform: rotate($end)),
|
25
26
|
);
|
@@ -3,7 +3,7 @@
|
|
3
3
|
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
|
4
4
|
@function wiggle($intensity: 7deg) {
|
5
5
|
$keyframes: (
|
6
|
-
name: 'wiggle-#{$intensity}',
|
6
|
+
name: -mui-string-safe('wiggle-#{$intensity}'),
|
7
7
|
(40, 50, 60): (transform: rotate($intensity)),
|
8
8
|
(35, 45, 55, 65): (transform: rotate(-$intensity)),
|
9
9
|
(0, 30, 70, 100): (transform: rotate(0)),
|
@@ -1,12 +1,12 @@
|
|
1
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 {Number} $from [
|
2
|
+
/// @param {Number} $from [0] - Size to start at.
|
3
3
|
/// @param {Number} $to [1] - Size to end at.
|
4
4
|
@function zoom(
|
5
5
|
$from: 0,
|
6
6
|
$to: 1
|
7
7
|
) {
|
8
8
|
$keyframes: (
|
9
|
-
name: 'scale-#{$to}-to-#{$from}',
|
9
|
+
name: -mui-string-safe('scale-#{$to}-to-#{$from}'),
|
10
10
|
0: (transform: scale($from)),
|
11
11
|
100: (transform: scale($to)),
|
12
12
|
);
|
@@ -6,11 +6,13 @@
|
|
6
6
|
|
7
7
|
@import 'util/animation';
|
8
8
|
@import 'util/args';
|
9
|
+
@import 'util/function';
|
9
10
|
@import 'util/keyframe';
|
10
11
|
@import 'util/selector';
|
11
12
|
@import 'util/series';
|
12
13
|
@import 'util/transition';
|
13
14
|
@import 'util/unit';
|
15
|
+
@import 'util/string';
|
14
16
|
|
15
17
|
@import 'effects/fade';
|
16
18
|
@import 'effects/hinge';
|
@@ -1,18 +1,20 @@
|
|
1
1
|
/// Creates a fade transition by adjusting the opacity of the element.
|
2
2
|
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
-
/// @param {Number} $from [
|
4
|
-
/// @param {Number} $to [
|
3
|
+
/// @param {Number} $from [null] - Opacity to start at. Must be a number between 0 and 1. By default `0` and `1` for `in` and `out` states respectively.
|
4
|
+
/// @param {Number} $to [null] - Opacity to end on. By default `1` and `0` for `in` and `out` states respectively.
|
5
5
|
/// @param {Keyword} $duration [null] - Length (speed) of the transition.
|
6
6
|
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
7
7
|
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
8
8
|
@mixin mui-fade(
|
9
9
|
$state: in,
|
10
|
-
$from:
|
11
|
-
$to:
|
10
|
+
$from: null,
|
11
|
+
$to: null,
|
12
12
|
$duration: null,
|
13
13
|
$timing: null,
|
14
14
|
$delay: null
|
15
15
|
) {
|
16
|
+
$from: if($from != null, $from, if($state == in, 0, 1));
|
17
|
+
$to: if($to != null, $to, if($state == in, 1, 0));
|
16
18
|
$fade: fade($from, $to);
|
17
19
|
|
18
20
|
@include transition-start($state) {
|
@@ -3,7 +3,7 @@
|
|
3
3
|
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
|
4
4
|
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
|
5
5
|
/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
|
6
|
-
/// @param {Keyword} $turn-origin [
|
6
|
+
/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
|
7
7
|
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
|
8
8
|
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
9
9
|
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
@@ -13,12 +13,13 @@
|
|
13
13
|
$from: left,
|
14
14
|
$axis: edge,
|
15
15
|
$perspective: 2000px,
|
16
|
-
$turn-origin:
|
16
|
+
$turn-origin: null,
|
17
17
|
$fade: map-get($motion-ui-settings, hinge-and-fade),
|
18
18
|
$duration: null,
|
19
19
|
$timing: null,
|
20
20
|
$delay: null
|
21
21
|
) {
|
22
|
+
$turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
|
22
23
|
$hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
|
23
24
|
|
24
25
|
@include transition-start($state) {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// Creates a sliding transition by translating the element horizontally or vertically.
|
2
2
|
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
-
/// @param {Keyword} $direction [
|
3
|
+
/// @param {Keyword} $direction [null] - Direction to slide to. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
|
4
4
|
/// @param {Length} $amount [100%] - Length of the slide as a percentage value.
|
5
5
|
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
|
6
6
|
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
@@ -8,13 +8,14 @@
|
|
8
8
|
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
9
9
|
@mixin mui-slide (
|
10
10
|
$state: in,
|
11
|
-
$direction:
|
11
|
+
$direction: null,
|
12
12
|
$amount: 100%,
|
13
13
|
$fade: map-get($motion-ui-settings, slide-and-fade),
|
14
14
|
$duration: null,
|
15
15
|
$timing: null,
|
16
16
|
$delay: null
|
17
17
|
) {
|
18
|
+
$direction: if($direction != null, $direction, if($state == in, left, right));
|
18
19
|
$slide: slide($state, $direction, $amount);
|
19
20
|
|
20
21
|
// CSS Output
|
@@ -1,6 +1,6 @@
|
|
1
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
2
|
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
-
/// @param {
|
3
|
+
/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
|
4
4
|
/// @param {Number} $amount [0.75turn] - Amount to element the element.
|
5
5
|
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
|
6
6
|
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
@@ -15,6 +15,7 @@
|
|
15
15
|
$timing: null,
|
16
16
|
$delay: null
|
17
17
|
) {
|
18
|
+
$direction: if($direction != null, $direction, if($state == in, cw, ccw));
|
18
19
|
$spin: spin($state, $direction, $amount);
|
19
20
|
|
20
21
|
@include transition-start($state) {
|
@@ -1,20 +1,22 @@
|
|
1
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
2
|
/// @param {Keyword} $state [in] - State to transition to.
|
3
|
-
/// @param {Number} $from [
|
4
|
-
/// @param {Number} $
|
3
|
+
/// @param {Number} $from [null] - Size to start at. By default `0` and `1` for `in` and `out` states respectively.
|
4
|
+
/// @param {Number} $to [null] - Size to end at. By default `1` and `0` for `in` and `out` states respectively.
|
5
5
|
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
|
6
6
|
/// @param {Duration} $duration [null] - Length (speed) of the transition.
|
7
7
|
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
|
8
8
|
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
|
9
9
|
@mixin mui-zoom(
|
10
10
|
$state: in,
|
11
|
-
$from:
|
12
|
-
$to:
|
11
|
+
$from: null,
|
12
|
+
$to: null,
|
13
13
|
$fade: map-get($motion-ui-settings, scale-and-fade),
|
14
14
|
$duration: null,
|
15
15
|
$timing: null,
|
16
16
|
$delay: null
|
17
17
|
) {
|
18
|
+
$from: if($from != null, $from, if($state == in, 0, 1));
|
19
|
+
$to: if($to != null, $to, if($state == in, 1, 0));
|
18
20
|
$scale: zoom($from, $to);
|
19
21
|
|
20
22
|
@include transition-start($state) {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
|
2
|
-
/// @param {
|
2
|
+
/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
|
3
3
|
@mixin mui-animation($args...) {
|
4
4
|
$name: map-get(-mui-process-args($args...), name);
|
5
5
|
@include mui-keyframes($name, $args...);
|
@@ -0,0 +1,94 @@
|
|
1
|
+
////
|
2
|
+
/// In order to improve modular namespacing, LibSass 4 only accepts first-class
|
3
|
+
/// functions as argument so functions are called in their own context.
|
4
|
+
/// In most case, `get-function()` must only be used by the user in its own
|
5
|
+
/// context. It is used in this library to keep a maximum compatibility.
|
6
|
+
/// End developer must be encouraged to use first-class functions.
|
7
|
+
///
|
8
|
+
/// @link http://oddbird.net/2017/03/30/safe-get
|
9
|
+
/// @link http://sass.logdown.com/posts/809572-sass-35-release-candidate
|
10
|
+
////
|
11
|
+
|
12
|
+
///
|
13
|
+
/// Return if a given value is a function or a function name string.
|
14
|
+
///
|
15
|
+
/// @access private
|
16
|
+
///
|
17
|
+
/// @param {*} $value - Value to test
|
18
|
+
/// @return {Boolean}
|
19
|
+
///
|
20
|
+
@function -mui-is-function($value) {
|
21
|
+
@return type-of($value) == 'function' or type-of($value) == 'string';
|
22
|
+
}
|
23
|
+
|
24
|
+
///
|
25
|
+
/// Return if a given value is callable.
|
26
|
+
///
|
27
|
+
/// @access private
|
28
|
+
///
|
29
|
+
/// @param {*} $value - Value to test
|
30
|
+
/// @return {Boolean}
|
31
|
+
///
|
32
|
+
@function -mui-is-callable($value) {
|
33
|
+
@return type-of($value) == 'function' or (type-of($value) == 'string' and function-exists($value));
|
34
|
+
}
|
35
|
+
|
36
|
+
///
|
37
|
+
/// Check if a given value is callable and throw the appropriate error otherwise
|
38
|
+
///
|
39
|
+
/// @access private
|
40
|
+
///
|
41
|
+
/// @param {*} $value - Value to check
|
42
|
+
/// @return {Boolean}
|
43
|
+
///
|
44
|
+
@function -mui-assert-function($value) {
|
45
|
+
@if -mui-is-callable($value) {
|
46
|
+
@return true;
|
47
|
+
} @else if (type-of($value) == 'string' and function-exists('get-function') == true) {
|
48
|
+
@error 'Assertion Error: function name string "#{$value}" cannot be found. You may need to use `get-function()` and first-class functions instead. See http://oddbird.net/2017/03/30/safe-get';
|
49
|
+
} @else if (type-of($value) == 'string' and function-exists('get-function') == false) {
|
50
|
+
@error 'Assertion Error: function name string "#{$value}" cannot be found.';
|
51
|
+
} @else {
|
52
|
+
@error 'Assertion Error: #{$value} (#{type-of($value)}) is not a function.';
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
///
|
57
|
+
/// Return a reference to the given function or function name string compatible
|
58
|
+
/// with the current Sass version.
|
59
|
+
///
|
60
|
+
/// * For Sass < 3.5, return the passed argument
|
61
|
+
/// * For Sass >= 3.5, return a first-class function if a function name string
|
62
|
+
/// was passed
|
63
|
+
///
|
64
|
+
/// @access private
|
65
|
+
///
|
66
|
+
/// @param {Function|String} - $func - Function or name of the function
|
67
|
+
/// @return {Function|String} Function or name of the function following
|
68
|
+
/// the support of first-class functions.
|
69
|
+
///
|
70
|
+
@function -mui-safe-get-function($func) {
|
71
|
+
@if -mui-assert-function($func) {
|
72
|
+
@if function-exists('get-function') and type-of($func) == 'string' {
|
73
|
+
@return get-function($func);
|
74
|
+
} @else {
|
75
|
+
@return $func;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
///
|
81
|
+
/// Polyfill for the `call` function supporting both functions and strings.
|
82
|
+
///
|
83
|
+
/// @access private
|
84
|
+
///
|
85
|
+
/// @param {Function|String} $func - Function or name of the function to call
|
86
|
+
/// @param {Arglist} $args... - Arguments to call the function with
|
87
|
+
///
|
88
|
+
/// @return {*}
|
89
|
+
///
|
90
|
+
@function -mui-safe-call($func, $args...) {
|
91
|
+
@if -mui-assert-function($func) {
|
92
|
+
@return call(-mui-safe-get-function($func), $args...);
|
93
|
+
}
|
94
|
+
}
|
@@ -3,7 +3,7 @@ $-mui-custom: 0;
|
|
3
3
|
|
4
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
5
|
/// @param {String} $name - Name of the keyframe.
|
6
|
-
/// @param {
|
6
|
+
/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
|
7
7
|
@mixin mui-keyframes($name, $effects...) {
|
8
8
|
$obj: -mui-process-args($effects...);
|
9
9
|
$obj: map-remove($obj, name);
|
@@ -36,7 +36,7 @@ $-mui-custom: 0;
|
|
36
36
|
}
|
37
37
|
}
|
38
38
|
|
39
|
-
@return $output;
|
39
|
+
@return "#{$output}";
|
40
40
|
}
|
41
41
|
|
42
42
|
/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions.
|
@@ -79,7 +79,7 @@ $-mui-custom: 0;
|
|
79
79
|
}
|
80
80
|
|
81
81
|
/// Combines a series of keyframe objects into one.
|
82
|
-
/// @param {
|
82
|
+
/// @param {Arglist} $maps... - A series of maps to merge, as individual parameters.
|
83
83
|
/// @return {Map} A combined keyframe object.
|
84
84
|
/// @access private
|
85
85
|
@function -mui-keyframe-combine($maps...) {
|
@@ -87,8 +87,8 @@ $-mui-custom: 0;
|
|
87
87
|
|
88
88
|
// Iterate through each map passed in
|
89
89
|
@each $map in $maps {
|
90
|
-
@if
|
91
|
-
$map: call($map);
|
90
|
+
@if -mui-is-function($map) {
|
91
|
+
$map: -mui-safe-call($map);
|
92
92
|
}
|
93
93
|
|
94
94
|
$map: -mui-keyframe-split($map);
|
@@ -1,16 +1,5 @@
|
|
1
1
|
$-mui-queue: ();
|
2
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
3
|
/// Creates a new animation queue.
|
15
4
|
/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
|
16
5
|
@mixin mui-series($delay: 0s) {
|
@@ -27,7 +16,7 @@ $-mui-queue: ();
|
|
27
16
|
/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
|
28
17
|
/// @param {Duration} $duration [1s] - Length of the animation.
|
29
18
|
/// @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 {
|
19
|
+
/// @param {Arglist} $keyframes... - One or more effect functions to build the keyframe with.
|
31
20
|
@mixin mui-queue(
|
32
21
|
$duration: 1s,
|
33
22
|
$gap: 0s,
|
@@ -46,9 +35,23 @@ $-mui-queue: ();
|
|
46
35
|
$item: ($duration, $gap);
|
47
36
|
$-mui-queue: append($-mui-queue, $item) !global;
|
48
37
|
|
49
|
-
// CSS output
|
50
|
-
|
51
|
-
@include mui-
|
52
|
-
animation-
|
53
|
-
|
38
|
+
// --- CSS output ---
|
39
|
+
// Initial properties
|
40
|
+
@include -mui-keyframe-get($kf, 0);
|
41
|
+
animation-fill-mode: both;
|
42
|
+
|
43
|
+
// Start the animation
|
44
|
+
.#{map-get($motion-ui-settings, activate-queue-class)} & {
|
45
|
+
@include mui-animation($kf);
|
46
|
+
animation-delay: $actual-delay;
|
47
|
+
animation-duration: $duration;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Pause the animation.
|
51
|
+
// For macOS Safari to play it correctly, `animation-play-state`
|
52
|
+
// must not be `paused` before the animation start.
|
53
|
+
// See https://git.io/motion-ui-97
|
54
|
+
.#{map-get($motion-ui-settings, pause-queue-class)} & {
|
55
|
+
animation-play-state: paused;
|
56
|
+
}
|
54
57
|
}
|