foundation-rails 5.5.3.2 → 6.6.2.0

data/vendor/assets/scss/grid/_layout.scss

@@ -0,0 +1,76 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group 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 ['.column'] - Selector(s) to use for child elements.
+/// @param {Number|List} $gutter
+///   The gutter to apply to child elements. Accepts multiple values:
+///   - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
+///   - A fixed numeric value will apply this gutter to all breakpoints.
+@mixin grid-layout(
+  $n,
+  $selector: '.column',
+  $gutter: null
+) {
+  & > #{$selector} {
+    float: $global-left;
+    width: percentage(1/$n);
+
+    // If a $gutter value is passed
+    @if($gutter) {
+      // Gutters
+      @if type-of($gutter) == 'map' {
+        @each $breakpoint, $value in $gutter {
+          $padding: rem-calc($value) / 2;
+
+          @include breakpoint($breakpoint) {
+            padding-right: $padding;
+            padding-left: $padding;
+          }
+        }
+      }
+      @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+        $padding: rem-calc($gutter) / 2;
+        padding-right: $padding;
+        padding-left: $padding;
+      }
+    }
+
+    &:nth-of-type(1n) {
+      clear: none;
+    }
+
+    &:nth-of-type(#{$n}n+1) {
+      clear: both;
+    }
+
+    &:last-child {
+      float: $global-left;
+    }
+  }
+}
+
+/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+///
+/// @param {Number} $n - Number of items that appear in each row.
+@mixin grid-layout-center-last($n) {
+  @for $i from 1 to $n {
+    @if $i == 1 {
+      &:nth-child(#{$n}n+1):last-child {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+    @else {
+      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+  }
+}

data/vendor/assets/scss/grid/_position.scss

@@ -0,0 +1,100 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Reposition a column.
+///
+/// @param {Number|Keyword} $position - It can be:
+///   * A number: The column will move equal to the width of the column count
+///     specified. A positive number will push the column to the right, while
+///     a negative number will pull it to the left.
+///   * `center`: Column will be centered
+///   * `auto`: Column will be pushed to the left (or to the right for the last column).
+@mixin grid-column-position($position) {
+  // Auto positioning
+  @if $position == auto {
+    &, &:last-child:not(:first-child) {
+      float: $global-left;
+      clear: none;
+    }
+
+    // Last column alignment
+    @if $grid-column-align-edge {
+      &:last-child:not(:first-child) {
+        float: $global-right;
+      }
+    }
+  }
+
+  // Push/pull
+  @else if type-of($position) == 'number' {
+    $offset: percentage($position / $grid-column-count);
+
+    position: relative;
+    #{$global-left}: $offset;
+  }
+
+  // Center positioning
+  @else if $position == center {
+    &, &:last-child:not(:first-child) {
+      float: none;
+      clear: both;
+    }
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @else {
+    @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, "center" or "auto".';
+  }
+}
+
+/// Reset a position definition.
+@mixin grid-column-unposition {
+  @include grid-column-position(auto);
+  position: static;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+/// Offsets a column to the right by `$n` columns.
+/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.
+@mixin grid-column-offset($n) {
+  margin-#{$global-left}: grid-column($n);
+}
+
+/// Disable the default behavior of the last column in a row aligning to the opposite edge.
+@mixin grid-column-end {
+  // This extra specificity is required for the property to be applied
+  &:last-child:last-child {
+    float: $global-left;
+  }
+}
+
+/// Shorthand for `grid-column-position()`.
+/// @alias grid-column-position
+@mixin grid-col-pos($position) {
+  @include grid-column-position($position);
+}
+
+/// Shorthand for `grid-column-unposition()`.
+/// @alias grid-column-unposition
+@mixin grid-col-unpos {
+  @include grid-column-unposition;
+}
+
+/// Shorthand for `grid-column-offset()`.
+/// @alias grid-column-offset
+@mixin grid-col-off($n) {
+  @include grid-column-offset($n);
+}
+
+/// Shorthand for `grid-column-end()`.
+/// @alias grid-column-end
+@mixin grid-col-end {
+  @include grid-column-end;
+}

data/vendor/assets/scss/grid/_row.scss

@@ -0,0 +1,99 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Change the behavior of columns defined inside this mixin to use a different column count.
+/// @content
+///
+/// @param {Number} $columns - Number of columns to use.
+/// @param {Boolean} $root [false]
+///   If `false`, selectors inside this mixin will nest inside the parent selector.
+///   If `true`, selectors will not nest.
+@mixin grid-context(
+  $columns,
+  $root: false
+) {
+  // Store the current column count so it can be re-set later
+  $old-grid-column-count: $grid-column-count;
+  $grid-column-count: $columns !global;
+
+  @if $root {
+    @at-root { @content; }
+  }
+  @else {
+    @content;
+  }
+
+  // Restore the old column count
+  $grid-column-count: $old-grid-column-count !global;
+}
+
+/// Creates a grid row.
+/// @content
+///
+/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
+/// @param {Keywords} $behavior [null]
+///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+/// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+@mixin grid-row(
+  $columns: null,
+  $behavior: null,
+  $size: $grid-row-width,
+  $cf: true,
+  $gutters: $grid-column-gutter
+) {
+  $margin: auto;
+
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutters);
+
+    @if index($behavior, collapse) != null {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  @else {
+    @include grid-row-size($size);
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @if $cf {
+    @include clearfix;
+  }
+
+  @if $columns != null {
+    @include grid-context($columns) {
+      @content;
+    }
+  }
+}
+
+/// Inverts the margins of a row to nest it inside of a column.
+///
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+@mixin grid-row-nest($gutters: $grid-column-gutter) {
+  @include -zf-each-breakpoint {
+    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+
+    margin-right: $margin;
+    margin-left: $margin;
+  }
+}
+
+/// Set a grid row size
+///
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+@mixin grid-row-size($size: $grid-row-width) {
+  @if $size == expand {
+    $size: none;
+  }
+
+  max-width: $size;
+}

data/vendor/assets/scss/grid/_size.scss

@@ -0,0 +1,24 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Set the width of a grid column.
+///
+/// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.
+@mixin grid-column-size(
+  $columns: $grid-column-count
+) {
+  width: grid-column($columns);
+}
+
+/// Shorthand for `grid-column-size()`.
+/// @alias grid-column-size
+@mixin grid-col-size(
+  $columns: $grid-column-count
+) {
+  @include grid-column-size($columns);
+}

data/vendor/assets/scss/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/vendor/assets/scss/motion-ui/_settings.scss

@@ -0,0 +1,62 @@
+/// 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,
+  pause-queue-class: 'is-paused',
+  activate-queue-class: 'is-animating',
+) !default;

data/vendor/assets/scss/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: -mui-string-safe('fade-#{$from}-to-#{$to}'),
+    0: (opacity: $from),
+    100: (opacity: $to),
+  );
+
+  @return $keyframes;
+}

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

@@ -0,0 +1,66 @@
+/// 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 [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: null
+) {
+  // 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
+  $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);
+  } @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: -mui-string-safe('hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}'),
+    0: (transform: $start, transform-origin: $origin),
+    100: (transform: $end),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/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: -mui-string-safe('shake-#{$intensity}'),
+    $right: (transform: translateX($intensity)),
+    $left: (transform: translateX(-$intensity)),
+  );
+
+  @return $keyframes;
+}

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

@@ -0,0 +1,42 @@
+/// Creates a sliding animation.
+/// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
+/// @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: 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';
+  }
+
+  @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: -mui-string-safe('slide-#{$state}-#{$direction}-#{$amount}'),
+    0: (transform: '#{$func}(#{$from})'),
+    100: (transform: '#{$func}(#{$to})'),
+  );
+
+  @return $keyframes;
+}

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

@@ -0,0 +1,29 @@
+/// Creates a spinning animation.
+/// @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: 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);
+    $end: 0;
+  } @else {
+    $start: 0;
+    $end: if($direction == ccw, $amount * -1, $amount);
+  }
+
+  $keyframes: (
+    name: -mui-string-safe('spin-#{$direction}-#{$amount}'),
+    0: (transform: rotate($start)),
+    100: (transform: rotate($end)),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/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: -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)),
+  );
+
+  @return $keyframes;
+}

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