locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

data/generators/foundation/public/stylesheets/foundation6/motion-ui/_settings.scss

@@ -0,0 +1,61 @@
+/// Format for CSS classes created with Motion UI.
+/// @type Map
+/// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`).
+/// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix.
+/// @prop {String} prefix ['-active'] - Suffix to add to the active state class.
+$motion-ui-classes: (
+  chain: true,
+  prefix: 'mui-',
+  active: '-active',
+) !default;
+
+/// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string.
+/// @type Map
+$motion-ui-states: (
+  in: 'enter',
+  out: 'leave',
+) !default;
+
+/// Default speed that transitions and animations play at, along with values for modifier classes to change the speed.
+/// @type Map
+$motion-ui-speeds: (
+  default: 500ms,
+  slow: 750ms,
+  fast: 250ms,
+) !default;
+
+/// Default delay to add before motion, along with values for modifier classes to change the delay.
+/// @type Map
+$motion-ui-delays: (
+  default: 0,
+  short: 300ms,
+  long: 700ms,
+) !default;
+
+/// Default easing for transitions and animations, along with values for modifier classes to change the easing.
+/// @type Map
+$motion-ui-easings: (
+  default: linear,
+  linear: linear,
+  ease: ease,
+  ease-in: ease-in,
+  ease-out: ease-out,
+  ease-in-out: ease-in-out,
+  bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245),
+  bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+  bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245),
+) !default;
+
+/// Miscellaneous settings related to Motion UI.
+/// @type Map
+/// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out.
+$motion-ui-settings: (
+  slide-and-fade: false,
+  hinge-and-fade: true,
+  scale-and-fade: true,
+  spin-and-fade: true,
+  activate-queue-class: 'is-animating',
+) !default;

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_fade.scss

@@ -0,0 +1,29 @@
+/// Creates a fading animation.
+/// @param {Number} $from [0] - Opacity to start at.
+/// @param {Number} $to [1] - Opacity to end at.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function fade(
+  $from: 0,
+  $to: 1
+) {
+  $type: type-of($from);
+  $keyframes: ();
+
+  @if $type == 'string' {
+    @if $from == in {
+      $from: 0;
+      $to: 1;
+    } @else if $from == out {
+      $from: 1;
+      $to: 0;
+    }
+  }
+
+  $keyframes: (
+    name: 'fade-#{$from}-to-#{$to}',
+    0: (opacity: $from),
+    100: (opacity: $to),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_hinge.scss

@@ -0,0 +1,65 @@
+/// Creates a hinge effect by rotating the element.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @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`.
+@function hinge (
+  $state: in,
+  $from: left,
+  $axis: edge,
+  $perspective: 2000px,
+  $turn-origin: from-back
+) {
+  // Rotation directions when hinging from back vs. front
+  $rotation-amount: 90deg;
+  $rotations-back: (
+    top: rotateX($rotation-amount * -1),
+    right: rotateY($rotation-amount * -1),
+    bottom: rotateX($rotation-amount),
+    left: rotateY($rotation-amount),
+  );
+  $rotations-from: (
+    top: rotateX($rotation-amount),
+    right: rotateY($rotation-amount),
+    bottom: rotateX($rotation-amount * -1),
+    left: rotateY($rotation-amount * -1),
+  );
+
+  // Rotation origin
+  $rotation: '';
+  @if $turn-origin == from-front {
+    $rotation: map-get($rotations-from, $from);
+  } @else if $turn-origin == from-back {
+    $rotation: map-get($rotations-back, $from);
+  } @else {
+    @warn '$turn-origin must be either "from-back" or "from-front"';
+  }
+
+  // Start and end state
+  $start: '';
+  $end: '';
+  @if $state == in {
+    $start: perspective($perspective) $rotation;
+    $end: perspective($perspective) rotate(0deg);
+  } @else {
+    $start: perspective($perspective) rotate(0deg);
+    $end: perspective($perspective) $rotation;
+  }
+
+  // Turn axis
+  $origin: '';
+  @if $axis == edge {
+    $origin: $from;
+  } @else {
+    $origin: center;
+  }
+
+  $keyframes: (
+    name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
+    0: (transform: $start, transform-origin: $origin),
+    100: (transform: $end),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_shake.scss

@@ -0,0 +1,15 @@
+/// Creates a shaking animation.
+/// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function shake($intensity: 7%) {
+  $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90);
+  $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95);
+
+  $keyframes: (
+    name: 'shake-#{($intensity / 1%)}',
+    $right: (transform: translateX($intensity)),
+    $left: (transform: translateX(-$intensity)),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_slide.scss

@@ -0,0 +1,41 @@
+/// 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 {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,
+  $amount: 100%
+) {
+  $from: $amount;
+  $to: 0;
+  $func: 'translateY';
+
+  @if $direction == left or $direction == right {
+    $func: 'translateX';
+  }
+
+  @if $state == out {
+    $from: 0;
+    $to: $amount;
+  }
+
+  @if $direction == down or $direction == right {
+    @if $state == in {
+      $from: -$from;
+    }
+  } @else {
+    @if $state == out {
+      $to: -$to;
+    }
+  }
+
+  $keyframes: (
+    name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
+    0: (transform: '#{$func}(#{$from})'),
+    100: (transform: '#{$func}(#{$to})'),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_spin.scss

@@ -0,0 +1,28 @@
+/// Creates a spinning animation.
+/// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @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,
+  $amount: 1turn
+) {
+  $start: 0;
+  $end: 0;
+
+  @if $state == in {
+    $start: if($direction == ccw, $amount, $amount * -1);
+    $end: 0;
+  } @else {
+    $start: 0;
+    $end: if($direction == ccw, $amount * -1, $amount);
+  }
+
+  $keyframes: (
+    name: 'spin-#{$direction}-#{$amount}',
+    0: (transform: rotate($start)),
+    100: (transform: rotate($end)),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_wiggle.scss

@@ -0,0 +1,13 @@
+/// Creates a wiggling animation.
+/// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function wiggle($intensity: 7deg) {
+  $keyframes: (
+    name: 'wiggle-#{$intensity}',
+    (40, 50, 60): (transform: rotate($intensity)),
+    (35, 45, 55, 65): (transform: rotate(-$intensity)),
+    (0, 30, 70, 100): (transform: rotate(0)),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_zoom.scss

@@ -0,0 +1,15 @@
+/// 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 [1] - Size to end at.
+@function zoom(
+  $from: 0,
+  $to: 1
+) {
+  $keyframes: (
+    name: 'scale-#{$to}-to-#{$from}',
+    0: (transform: scale($from)),
+    100: (transform: scale($to)),
+  );
+
+  @return $keyframes;
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/motion-ui.scss

@@ -0,0 +1,29 @@
+// Motion UI by ZURB
+// foundation.zurb.com/motion-ui
+// Licensed under MIT Open Source
+
+@import 'settings';
+
+@import 'util/animation';
+@import 'util/args';
+@import 'util/keyframe';
+@import 'util/selector';
+@import 'util/series';
+@import 'util/transition';
+@import 'util/unit';
+
+@import 'effects/fade';
+@import 'effects/hinge';
+@import 'effects/spin';
+@import 'effects/zoom';
+@import 'effects/shake';
+@import 'effects/slide';
+@import 'effects/wiggle';
+
+@import 'transitions/fade';
+@import 'transitions/hinge';
+@import 'transitions/zoom';
+@import 'transitions/slide';
+@import 'transitions/spin';
+
+@import 'classes';

data/generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_fade.scss

@@ -0,0 +1,28 @@
+/// 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 {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,
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $fade: fade($from, $to);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($fade, 0);
+
+    transition-property: opacity;
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($fade, 100);
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_hinge.scss

@@ -0,0 +1,43 @@
+/// Creates a hinge transition by rotating the element.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @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 {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-hinge (
+  $state: in,
+  $from: left,
+  $axis: edge,
+  $perspective: 2000px,
+  $turn-origin: from-back,
+  $fade: map-get($motion-ui-settings, hinge-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($hinge, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($hinge, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_slide.scss

@@ -0,0 +1,42 @@
+/// Creates a sliding transition by translating the element horizontally or vertically.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`.
+/// @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.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-slide (
+  $state: in,
+  $direction: left,
+  $amount: 100%,
+  $fade: map-get($motion-ui-settings, slide-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $slide: slide($state, $direction, $amount);
+
+  // CSS Output
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($slide, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+
+    backface-visibility: hidden;
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($slide, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_spin.scss

@@ -0,0 +1,39 @@
+/// 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 {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.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-spin(
+  $state: in,
+  $direction: cw,
+  $amount: 0.75turn,
+  $fade: map-get($motion-ui-settings, spin-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $spin: spin($state, $direction, $amount);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($spin, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($spin, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_zoom.scss

@@ -0,0 +1,39 @@
+/// 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 {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,
+  $fade: map-get($motion-ui-settings, scale-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $scale: zoom($from, $to);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($scale, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($scale, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/util/_animation.scss

@@ -0,0 +1,7 @@
+/// 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.
+@mixin mui-animation($args...) {
+  $name: map-get(-mui-process-args($args...), name);
+  @include mui-keyframes($name, $args...);
+  animation-name: unquote($name);
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/util/_args.scss

@@ -0,0 +1,15 @@
+/// Processes a series of keyframe function arguments.
+/// @access private
+@function -mui-process-args($args...) {
+  @if length($args) == 1 {
+    $arg: nth($args, 1);
+
+    @if type-of($arg) == 'string' {
+      @return call($arg);
+    } @else if type-of($arg) == 'map' {
+      @return $arg;
+    }
+  }
+
+  @return -mui-keyframe-combine($args...);
+}

data/generators/foundation/public/stylesheets/foundation6/motion-ui/util/_keyframe.scss

@@ -0,0 +1,136 @@
+// Internal counter for creating unique keyframe names
+$-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.
+@mixin mui-keyframes($name, $effects...) {
+  $obj: -mui-process-args($effects...);
+  $obj: map-remove($obj, name);
+
+  @keyframes #{$name} {
+    // Now iterate through each keyframe percentage
+    @each $pct, $props in $obj {
+      #{-mui-keyframe-pct($pct)} {
+        // Lastly, iterate through each CSS property within a percentage and print it out
+        @each $prop, $value in $props {
+          #{$prop}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+/// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values.
+/// @param {Number|List} $input - List of numbers to use.
+/// @return {String} A set of comma-separated percentage values.
+/// @access private
+@function -mui-keyframe-pct($input) {
+  $output: ();
+
+  @if type-of($input) == 'number' {
+    $output: ($input * 1%);
+  } @else if type-of($input) == 'list' {
+    @each $i in $input {
+      $output: append($output, ($i * 1%), comma);
+    }
+  }
+
+  @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.
+/// @param {Map} $kf - Keyframe map to extract from.
+/// @param {Number} $key - Key in the map to print the CSS of.
+/// @access private
+@mixin -mui-keyframe-get($kf, $key) {
+  $map: map-get($kf, $key);
+
+  @each $prop, $value in $map or () {
+    // Some keyframe maps store transforms as quoted strings
+    @if type-of($value) == 'string' {
+      $value: unquote($value);
+    }
+    #{$prop}: $value;
+  }
+}
+
+/// Reformats a map containing keys with a list of values, so that each key is a single value.
+/// @param {Map} $map - Map to split up.
+/// @return {Map} A reformatted map.
+/// @access private
+@function -mui-keyframe-split($map) {
+  $new-map: ();
+
+  // Split keys with multiple values into individual keys
+  @each $key, $item in $map {
+    $key-type: type-of($key);
+
+    @if $key-type == 'number' {
+      $new-map: map-merge($new-map, ($key: $item));
+    } @else if $key-type == 'list' {
+      @each $k in $key {
+        $new-map: map-merge($new-map, ($k: $item));
+      }
+    }
+  }
+
+  @return $new-map;
+}
+
+/// Combines a series of keyframe objects into one.
+/// @param {Map} $maps... - A series of maps to merge, as individual parameters.
+/// @return {Map} A combined keyframe object.
+/// @access private
+@function -mui-keyframe-combine($maps...) {
+  $new-map: ();
+
+  // Iterate through each map passed in
+  @each $map in $maps {
+    @if type-of($map) == 'string' {
+      $map: call($map);
+    }
+
+    $map: -mui-keyframe-split($map);
+
+    // Iterate through each keyframe in the map
+    // $key is the keyframe percentage
+    // $value is a map of CSS properties
+    @each $key, $value in $map {
+      $new-value: ();
+
+      @if map-has-key($new-map, $key) {
+        // If the map already has the keyframe %, append the new property
+        $new-value: -mui-merge-properties(map-get($new-map, $key), $value);
+      } @else {
+        // Otherwise, create a new map with the new property
+        $new-value: $value;
+      }
+
+      // Finally, merge the modified keyframe value into the output map
+      $new-map: map-merge($new-map, ($key: $new-value));
+    }
+  }
+
+  // Make a name for the keyframes
+  $-mui-custom: $-mui-custom + 1 !global;
+  $map-name: (name: 'custom-#{$-mui-custom}');
+  $new-map: map-merge($new-map, $map-name);
+
+  @return $new-map;
+}
+
+/// 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.
+/// @param {Map} $one - First map to merge.
+/// @param {Map} $two - Second map to merge.
+/// @return {Map} A combined map.
+/// @access private
+@function -mui-merge-properties($one, $two) {
+  @if map-has-key($one, transform) and map-has-key($two, transform) {
+    $transform: join(map-get($one, transform), map-get($two, transform));
+    $one: map-merge($one, (transform: $transform));
+    $two: map-remove($two, transform);
+  }
+
+  @return map-merge($one, $two);
+}