bedrock_sass 0.1.1 → 0.1.2

data/assets/_vendor/foundation/scss/xy-grid/_layout.scss

@@ -0,0 +1,33 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Sizes child elements so that `$n` number of items appear on each row.
+///
+/// @param {Number} $n - Number of elements to display per row.
+/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
+/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-grid-layout(
+  $n,
+  $selector: '.cell',
+  $gutter-output: true,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $breakpoint: $-zf-zero-breakpoint,
+  $vertical: false
+) {
+  $size: percentage(1/$n);
+
+  & > #{$selector} {
+    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
+  }
+}

data/assets/_vendor/foundation/scss/xy-grid/_position.scss

@@ -0,0 +1,28 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Offsets a column to the right/bottom by `$n` columns.
+///
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
+@mixin xy-cell-offset(
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: $-zf-zero-breakpoint,
+ $vertical: false
+) {
+  $direction: if($vertical, 'top', $global-left);
+
+  @include -zf-breakpoint-value($breakpoint, $gutters) {
+    $gutter: rem-calc($-zf-bp-value) / 2;
+    $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
+
+    margin-#{$direction}: #{$size};
+  }
+}

data/assets/_vendor/foundation/scss/xy-grid/_xy-grid.scss

@@ -0,0 +1,51 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Enables the XY grid.
+/// @type Boolean
+$xy-grid: true !default;
+
+/// The maximum width of a grid container.
+/// @type Number
+$grid-container: $global-width !default;
+
+/// The number of columns used in the grid.
+/// @type Number
+$grid-columns: 12 !default;
+
+/// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map.
+/// @type Map | Length
+$grid-margin-gutters: (
+  small: 20px,
+  medium: 30px
+) !default;
+
+/// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map.
+/// @type Map | Length
+$grid-padding-gutters: $grid-margin-gutters !default;
+
+/// The amount of padding to use when padding the grid-container.
+/// @type Map | Length
+$grid-container-padding: $grid-padding-gutters !default;
+
+/// The maximum width to apply to a grid container
+/// @type Number
+$grid-container-max: $global-width !default;
+
+/// The maximum number of cells in an XY block grid.
+/// @type Number
+$xy-block-grid-max: 8 !default;
+
+@import 'gutters';
+@import 'grid';
+@import 'cell';
+@import 'frame';
+@import 'position';
+@import 'layout';
+@import 'collapse';
+@import 'classes';

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

@@ -0,0 +1,109 @@
+// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty
+
+@mixin -motion-ui-defaults {
+  transition-duration: map-get($motion-ui-speeds, default);
+  transition-timing-function: map-get($motion-ui-easings, default);
+}
+
+// Transitions
+// - - - - - - - - - - - - - - -
+@mixin motion-ui-transitions {
+  // Slide
+  .slide-in-down    { @include mui-slide(in,  down); }
+  .slide-in-left    { @include mui-slide(in,  right); }
+  .slide-in-up      { @include mui-slide(in,  up); }
+  .slide-in-right   { @include mui-slide(in,  left); }
+  .slide-out-down   { @include mui-slide(out, down); }
+  .slide-out-right  { @include mui-slide(out, right); }
+  .slide-out-up     { @include mui-slide(out, up); }
+  .slide-out-left   { @include mui-slide(out, left); }
+
+  // Fade
+  .fade-in  { @include mui-fade(in,  0, 1); }
+  .fade-out { @include mui-fade(out, 1, 0); }
+
+  // Hinge
+  .hinge-in-from-top      { @include mui-hinge(in,  top); }
+  .hinge-in-from-right    { @include mui-hinge(in,  right); }
+  .hinge-in-from-bottom   { @include mui-hinge(in,  bottom); }
+  .hinge-in-from-left     { @include mui-hinge(in,  left); }
+  .hinge-in-from-middle-x  { @include mui-hinge(in,  top,   center); }
+  .hinge-in-from-middle-y  { @include mui-hinge(in,  right, center); }
+  .hinge-out-from-top     { @include mui-hinge(out, top); }
+  .hinge-out-from-right   { @include mui-hinge(out, right); }
+  .hinge-out-from-bottom  { @include mui-hinge(out, bottom); }
+  .hinge-out-from-left    { @include mui-hinge(out, left); }
+  .hinge-out-from-middle-x { @include mui-hinge(out, top,   center); }
+  .hinge-out-from-middle-y { @include mui-hinge(out, right, center); }
+
+  // Scale
+  .scale-in-up    { @include mui-zoom(in,  0.5, 1); }
+  .scale-in-down  { @include mui-zoom(in,  1.5, 1); }
+  .scale-out-up   { @include mui-zoom(out, 1, 1.5); }
+  .scale-out-down { @include mui-zoom(out, 1, 0.5); }
+
+  // Spin
+  .spin-in     { @include mui-spin(in,  cw); }
+  .spin-out    { @include mui-spin(out, cw); }
+  .spin-in-ccw  { @include mui-spin(in,  ccw); }
+  .spin-out-ccw { @include mui-spin(out, ccw); }
+
+  // Transition Modifiers
+  // - - - - - - - - - - - - - - -
+
+  @each $name, $value in $motion-ui-speeds {
+    @if $name != default {
+      .#{$name} { transition-duration: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-easings {
+    @if $name != default {
+      .#{$name} { transition-timing-function: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-delays {
+    @if $name != default {
+      .#{$name}-delay { transition-delay: $value !important; }
+    }
+  }
+}
+
+// Animations
+// - - - - - - - - - - - - - - -
+@mixin motion-ui-animations {
+  .shake    { @include mui-animation(shake); }
+  .spin-cw  { @include mui-animation(spin); }
+  .spin-ccw { @include mui-animation(spin(ccw)); }
+  .wiggle   { @include mui-animation(wiggle); }
+
+  .shake,
+  .spin-cw,
+  .spin-ccw,
+  .wiggle {
+    animation-duration: map-get($motion-ui-speeds, default);
+  }
+
+  // Animation Modifiers
+  // - - - - - - - - - - - - - - -
+  .infinite { animation-iteration-count: infinite; }
+
+  @each $name, $value in $motion-ui-speeds {
+    @if $name != default {
+      .#{$name} { animation-duration: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-easings {
+    @if $name != default {
+      .#{$name} { animation-timing-function: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-delays {
+    @if $name != default {
+      .#{$name}-delay { animation-delay: $value !important; }
+    }
+  }
+}

data/assets/_vendor/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/assets/_vendor/motion-ui/effects/_fade.scss

@@ -0,0 +1,32 @@
+/// 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;
+    }
+  }
+
+  $fromName: $from * 100;
+  $toName:   $to   * 100;
+
+  $keyframes: (
+    name: 'fade-#{$fromName}-to-#{$toName}',
+    0: (opacity: $from),
+    100: (opacity: $to),
+  );
+
+  @return $keyframes;
+}

data/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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} $to [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/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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/assets/_vendor/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] - Direction to slide to. Can be `up`, `right`, `down`, 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);
+    }
+  }
+}