bedrock_sass 0.1.9 → 0.2.0

data/assets/_vendor/motion-ui/_settings.scss

@@ -57,5 +57,6 @@ $motion-ui-settings: (
   hinge-and-fade: true,
   scale-and-fade: true,
   spin-and-fade: true,
+  pause-queue-class: 'is-paused',
   activate-queue-class: 'is-animating',
 ) !default;

data/assets/_vendor/motion-ui/effects/_fade.scss

@@ -19,11 +19,8 @@
     }
   }
 
-  $fromName: $from * 100;
-  $toName:   $to   * 100;
-
   $keyframes: (
-    name: 'fade-#{$fromName}-to-#{$toName}',
+    name: -mui-string-safe('fade-#{$from}-to-#{$to}'),
     0: (opacity: $from),
     100: (opacity: $to),
   );

data/assets/_vendor/motion-ui/effects/_hinge.scss

@@ -3,13 +3,13 @@
 /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
 /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
 /// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @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.
 @function hinge (
   $state: in,
   $from: left,
   $axis: edge,
   $perspective: 2000px,
-  $turn-origin: from-back
+  $turn-origin: null
 ) {
   // Rotation directions when hinging from back vs. front
   $rotation-amount: 90deg;
@@ -27,6 +27,7 @@
   );
 
   // Rotation origin
+  $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
   $rotation: '';
   @if $turn-origin == from-front {
     $rotation: map-get($rotations-from, $from);
@@ -56,7 +57,7 @@
   }
 
   $keyframes: (
-    name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
+    name: -mui-string-safe('hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}'),
     0: (transform: $start, transform-origin: $origin),
     100: (transform: $end),
   );

data/assets/_vendor/motion-ui/effects/_shake.scss

@@ -6,7 +6,7 @@
   $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95);
 
   $keyframes: (
-    name: 'shake-#{($intensity / 1%)}',
+    name: -mui-string-safe('shake-#{$intensity}'),
     $right: (transform: translateX($intensity)),
     $left: (transform: translateX(-$intensity)),
   );

data/assets/_vendor/motion-ui/effects/_slide.scss

@@ -1,16 +1,17 @@
 /// Creates a sliding animation.
 /// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
-/// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
+/// @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.
 /// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
 /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
 @function slide(
   $state: in,
-  $direction: up,
+  $direction: null,
   $amount: 100%
 ) {
   $from: $amount;
   $to: 0;
   $func: 'translateY';
+  $direction: if($direction != null, $direction, if($state == in, left, right));
 
   @if $direction == left or $direction == right {
     $func: 'translateX';
@@ -32,7 +33,7 @@
   }
 
   $keyframes: (
-    name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
+    name: -mui-string-safe('slide-#{$state}-#{$direction}-#{$amount}'),
     0: (transform: '#{$func}(#{$from})'),
     100: (transform: '#{$func}(#{$to})'),
   );

data/assets/_vendor/motion-ui/effects/_spin.scss

@@ -1,14 +1,15 @@
 /// Creates a spinning animation.
-/// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @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.
 /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
 /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
 @function spin(
   $state: in,
-  $direction: cw,
+  $direction: null,
   $amount: 1turn
 ) {
   $start: 0;
   $end: 0;
+  $direction: if($direction != null, $direction, if($state == in, cw, ccw));
 
   @if $state == in {
     $start: if($direction == ccw, $amount, $amount * -1);
@@ -19,7 +20,7 @@
   }
 
   $keyframes: (
-    name: 'spin-#{$direction}-#{$amount}',
+    name: -mui-string-safe('spin-#{$direction}-#{$amount}'),
     0: (transform: rotate($start)),
     100: (transform: rotate($end)),
   );

data/assets/_vendor/motion-ui/effects/_wiggle.scss

@@ -3,7 +3,7 @@
 /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
 @function wiggle($intensity: 7deg) {
   $keyframes: (
-    name: 'wiggle-#{$intensity}',
+    name: -mui-string-safe('wiggle-#{$intensity}'),
     (40, 50, 60): (transform: rotate($intensity)),
     (35, 45, 55, 65): (transform: rotate(-$intensity)),
     (0, 30, 70, 100): (transform: rotate(0)),

data/assets/_vendor/motion-ui/effects/_zoom.scss

@@ -1,12 +1,12 @@
 /// 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.
-/// @param {Number} $from [1.5] - Size to start at.
+/// @param {Number} $from [0] - Size to start at.
 /// @param {Number} $to [1] - Size to end at.
 @function zoom(
   $from: 0,
   $to: 1
 ) {
   $keyframes: (
-    name: 'scale-#{$to}-to-#{$from}',
+    name: -mui-string-safe('scale-#{$to}-to-#{$from}'),
     0: (transform: scale($from)),
     100: (transform: scale($to)),
   );

data/assets/_vendor/motion-ui/motion-ui.scss

@@ -6,11 +6,13 @@
 
 @import 'util/animation';
 @import 'util/args';
+@import 'util/function';
 @import 'util/keyframe';
 @import 'util/selector';
 @import 'util/series';
 @import 'util/transition';
 @import 'util/unit';
+@import 'util/string';
 
 @import 'effects/fade';
 @import 'effects/hinge';

data/assets/_vendor/motion-ui/transitions/_fade.scss

@@ -1,18 +1,20 @@
 /// Creates a fade transition by adjusting the opacity of the element.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1.
-/// @param {Number} $to [1] - Opacity to end on.
+/// @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.
+/// @param {Number} $to [null] - Opacity to end on. By default `1` and `0` for `in` and `out` states respectively.
 /// @param {Keyword} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-fade(
   $state: in,
-  $from: 0,
-  $to: 1,
+  $from: null,
+  $to: null,
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $from: if($from != null, $from, if($state == in, 0, 1));
+  $to: if($to != null, $to, if($state == in, 1, 0));
   $fade: fade($from, $to);
 
   @include transition-start($state) {

data/assets/_vendor/motion-ui/transitions/_hinge.scss

@@ -3,7 +3,7 @@
 /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
 /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
 /// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @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.
 /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
@@ -13,12 +13,13 @@
   $from: left,
   $axis: edge,
   $perspective: 2000px,
-  $turn-origin: from-back,
+  $turn-origin: null,
   $fade: map-get($motion-ui-settings, hinge-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
   $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
 
   @include transition-start($state) {

data/assets/_vendor/motion-ui/transitions/_slide.scss

@@ -1,6 +1,6 @@
 /// Creates a sliding transition by translating the element horizontally or vertically.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Keyword} $direction [left] - Direction to slide to. Can be `up`, `right`, `down`, or `left`.
+/// @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.
 /// @param {Length} $amount [100%] - Length of the slide as a percentage value.
 /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
@@ -8,13 +8,14 @@
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-slide (
   $state: in,
-  $direction: left,
+  $direction: null,
   $amount: 100%,
   $fade: map-get($motion-ui-settings, slide-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $direction: if($direction != null, $direction, if($state == in, left, right));
   $slide: slide($state, $direction, $amount);
 
   // CSS Output

data/assets/_vendor/motion-ui/transitions/_spin.scss

@@ -1,6 +1,6 @@
 /// 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.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @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.
 /// @param {Number} $amount [0.75turn] - Amount to element the element.
 /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
@@ -15,6 +15,7 @@
   $timing: null,
   $delay: null
 ) {
+  $direction: if($direction != null, $direction, if($state == in, cw, ccw));
   $spin: spin($state, $direction, $amount);
 
   @include transition-start($state) {

data/assets/_vendor/motion-ui/transitions/_zoom.scss

@@ -1,20 +1,22 @@
 /// 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.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [1.5] - Size to start at.
-/// @param {Number} $from [1] - Size to end at.
+/// @param {Number} $from [null] - Size to start at. By default `0` and `1` for `in` and `out` states respectively.
+/// @param {Number} $to [null] - Size to end at. By default `1` and `0` for `in` and `out` states respectively.
 /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-zoom(
   $state: in,
-  $from: 1.5,
-  $to: 1,
+  $from: null,
+  $to: null,
   $fade: map-get($motion-ui-settings, scale-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $from: if($from != null, $from, if($state == in, 0, 1));
+  $to: if($to != null, $to, if($state == in, 1, 0));
   $scale: zoom($from, $to);
 
   @include transition-start($state) {

data/assets/_vendor/motion-ui/util/_animation.scss

@@ -1,5 +1,5 @@
 /// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
-/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
 @mixin mui-animation($args...) {
   $name: map-get(-mui-process-args($args...), name);
   @include mui-keyframes($name, $args...);

data/assets/_vendor/motion-ui/util/_args.scss

@@ -4,8 +4,8 @@
   @if length($args) == 1 {
     $arg: nth($args, 1);
 
-    @if type-of($arg) == 'string' {
-      @return call($arg);
+    @if -mui-is-function($arg) {
+      @return -mui-safe-call($arg);
     } @else if type-of($arg) == 'map' {
       @return $arg;
     }

data/assets/_vendor/motion-ui/util/_function.scss

@@ -0,0 +1,94 @@
+////
+/// In order to improve modular namespacing, LibSass 4 only accepts first-class
+/// functions as argument so functions are called in their own context.
+/// In most case, `get-function()` must only be used by the user in its own
+/// context. It is used in this library to keep a maximum compatibility.
+/// End developer must be encouraged to use first-class functions.
+///
+/// @link http://oddbird.net/2017/03/30/safe-get
+/// @link http://sass.logdown.com/posts/809572-sass-35-release-candidate
+////
+
+///
+/// Return if a given value is a function or a function name string.
+///
+/// @access private
+///
+/// @param {*} $value - Value to test
+/// @return {Boolean}
+///
+@function -mui-is-function($value) {
+  @return type-of($value) == 'function' or type-of($value) == 'string';
+}
+
+///
+/// Return if a given value is callable.
+///
+/// @access private
+///
+/// @param {*} $value - Value to test
+/// @return {Boolean}
+///
+@function -mui-is-callable($value) {
+  @return type-of($value) == 'function' or (type-of($value) == 'string' and function-exists($value));
+}
+
+///
+/// Check if a given value is callable and throw the appropriate error otherwise
+///
+/// @access private
+///
+/// @param {*} $value - Value to check
+/// @return {Boolean}
+///
+@function -mui-assert-function($value) {
+  @if -mui-is-callable($value) {
+    @return true;
+  } @else if (type-of($value) == 'string' and function-exists('get-function') == true) {
+    @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';
+  } @else if (type-of($value) == 'string' and function-exists('get-function') == false) {
+    @error 'Assertion Error: function name string "#{$value}" cannot be found.';
+  } @else {
+    @error 'Assertion Error: #{$value} (#{type-of($value)}) is not a function.';
+  }
+}
+
+///
+/// Return a reference to the given function or function name string compatible
+/// with the current Sass version.
+///
+/// * For Sass < 3.5, return the passed argument
+/// * For Sass >= 3.5, return a first-class function if a function name string
+///   was passed
+///
+/// @access private
+///
+/// @param {Function|String} -  $func - Function or name of the function
+/// @return {Function|String}   Function or name of the function following
+///                             the support of first-class functions.
+///
+@function -mui-safe-get-function($func) {
+  @if -mui-assert-function($func) {
+    @if function-exists('get-function') and type-of($func) == 'string' {
+      @return get-function($func);
+    } @else {
+      @return $func;
+    }
+  }
+}
+
+///
+/// Polyfill for the `call` function supporting both functions and strings.
+///
+/// @access private
+///
+/// @param {Function|String} $func - Function or name of the function to call
+/// @param {Arglist} $args... - Arguments to call the function with
+///
+/// @return {*}
+///
+@function -mui-safe-call($func, $args...) {
+  @if -mui-assert-function($func) {
+    @return call(-mui-safe-get-function($func), $args...);
+  }
+}

data/assets/_vendor/motion-ui/util/_keyframe.scss

@@ -3,7 +3,7 @@ $-mui-custom: 0;
 
 /// 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.
 /// @param {String} $name - Name of the keyframe.
-/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
 @mixin mui-keyframes($name, $effects...) {
   $obj: -mui-process-args($effects...);
   $obj: map-remove($obj, name);
@@ -36,7 +36,7 @@ $-mui-custom: 0;
     }
   }
 
-  @return $output;
+  @return "#{$output}";
 }
 
 /// 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;
 }
 
 /// Combines a series of keyframe objects into one.
-/// @param {Map} $maps... - A series of maps to merge, as individual parameters.
+/// @param {Arglist} $maps... - A series of maps to merge, as individual parameters.
 /// @return {Map} A combined keyframe object.
 /// @access private
 @function -mui-keyframe-combine($maps...) {
@@ -87,8 +87,8 @@ $-mui-custom: 0;
 
   // Iterate through each map passed in
   @each $map in $maps {
-    @if type-of($map) == 'string' {
-      $map: call($map);
+    @if -mui-is-function($map) {
+      $map: -mui-safe-call($map);
     }
 
     $map: -mui-keyframe-split($map);

data/assets/_vendor/motion-ui/util/_series.scss

@@ -1,16 +1,5 @@
 $-mui-queue: ();
 
-/// 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.
-/// @access private
-%animated-element {
-  animation-play-state: paused;
-  animation-fill-mode: both;
-
-  .#{map-get($motion-ui-settings, activate-queue-class)} & {
-    animation-play-state: running;
-  }
-}
-
 /// Creates a new animation queue.
 /// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
 @mixin mui-series($delay: 0s) {
@@ -27,7 +16,7 @@ $-mui-queue: ();
 /// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
 /// @param {Duration} $duration [1s] - Length of the animation.
 /// @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.
-/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $keyframes... - One or more effect functions to build the keyframe with.
 @mixin mui-queue(
   $duration: 1s,
   $gap: 0s,
@@ -46,9 +35,23 @@ $-mui-queue: ();
   $item: ($duration, $gap);
   $-mui-queue: append($-mui-queue, $item) !global;
 
-  // CSS output
-  @extend %animated-element;
-  @include mui-animation($kf);
-  animation-duration: $duration;
-  animation-delay: $actual-delay;
+  // --- CSS output ---
+  // Initial properties
+  @include -mui-keyframe-get($kf, 0);
+  animation-fill-mode: both;
+
+  // Start the animation
+  .#{map-get($motion-ui-settings, activate-queue-class)} & {
+    @include mui-animation($kf);
+    animation-delay: $actual-delay;
+    animation-duration: $duration;
+  }
+
+  // Pause the animation.
+  // For macOS Safari to play it correctly, `animation-play-state`
+  // must not be `paused` before the animation start.
+  // See https://git.io/motion-ui-97
+  .#{map-get($motion-ui-settings, pause-queue-class)} & {
+    animation-play-state: paused;
+  }
 }