@elliemae/ds-basic 3.50.1-next.9 → 3.51.0-next.0

package/dist/styles/base/grid/util/_mixins.scss

@@ -1,313 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group functions
-////
-
-/// Creates an inner box-shadow for only one side
-/// 
-/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
-/// @param {Number} $size - Width for the target side.
-/// @param {Color} $color - Color of the shadow.
-@mixin inner-side-shadow(
-  $side: bottom,
-  $size: 20px,
-  $color: rgba($black, 0.25)
-) {
-
-  $helper: round($size * 0.65);
-
-  @if ($side == top) {
-    box-shadow: inset 0 $helper $size (-1)*$helper $color;
-  } @else if ($side == left) {
-    box-shadow: inset $helper 0 $size (-1)*$helper $color;
-  } @else if ($side == right) {
-    box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
-  } @else if ($side == bottom) {
-    box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
-  }
-}
-
-/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
-///
-/// @param {Number} $triangle-size - Width of the triangle.
-/// @param {Color} $triangle-color - Color of the triangle.
-/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
-@mixin css-triangle(
-  $triangle-size,
-  $triangle-color,
-  $triangle-direction
-) {
-  display: block;
-  width: 0;
-  height: 0;
-
-  border: inset $triangle-size;
-
-  content: '';
-
-  @if ($triangle-direction == down) {
-    border-bottom-width: 0;
-    border-top-style: solid;
-    border-color: $triangle-color transparent transparent;
-  }
-  @if ($triangle-direction == up) {
-    border-top-width: 0;
-    border-bottom-style: solid;
-    border-color: transparent transparent $triangle-color;
-  }
-  @if ($triangle-direction == right) {
-    border-right-width: 0;
-    border-left-style: solid;
-    border-color: transparent transparent transparent $triangle-color;
-  }
-  @if ($triangle-direction == left) {
-    border-left-width: 0;
-    border-right-style: solid;
-    border-color: transparent $triangle-color transparent transparent;
-  }
-}
-
-/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
-///
-/// @param {Color} $color [$black] - Color to use for the icon.
-/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
-/// @param {Number} $width [20px] - Width of the icon.
-/// @param {Number} $height [16px] - Height of the icon.
-/// @param {Number} $weight [2px] - Height of individual bars in the icon.
-/// @param {Number} $bars [3] - Number of bars in the icon.
-@mixin hamburger(
-  $color: $black,
-  $color-hover: $dark-gray,
-  $width: 20px,
-  $height: 16px,
-  $weight: 2px,
-  $bars: 3
-) {
-  // box-shadow CSS output
-  $shadow: ();
-  $hover-shadow: ();
-
-  // Spacing between bars is calculated based on the total height of the icon and the weight of each bar
-  $spacing: ($height - ($weight * $bars)) / ($bars - 1);
-
-  @if unit($spacing) == 'px' {
-    $spacing: floor($spacing);
-  }
-
-  @for $i from 2 through $bars {
-    $offset: ($weight + $spacing) * ($i - 1);
-    $shadow: append($shadow, 0 $offset 0 $color, comma);
-  }
-
-  // Icon container
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  width: $width;
-  height: $height;
-  cursor: pointer;
-
-  // Icon bars
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    display: block;
-    width: 100%;
-    height: $weight;
-
-    background: $color;
-    box-shadow: $shadow;
-
-    content: '';
-  }
-
-  // Hover state
-  @if $color-hover {
-    // Generate CSS
-    @for $i from 2 through $bars {
-      $offset: ($weight + $spacing) * ($i - 1);
-      $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
-    }
-
-    &:hover::after {
-      background: $color-hover;
-      box-shadow: $hover-shadow;
-    }
-  }
-}
-
-/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
-/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
-///
-/// @param {Color} $color [$black] - Color to use for the triangle.
-@mixin background-triangle($color: $black) {
-  $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
-
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
-
-  @media screen and (min-width:0\0) {
-    @if lightness($color) < 60% {
-      // White triangle
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
-    }
-    @else {
-      // Black triangle
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
-    }
-  }
-}
-
-/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
-/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
-/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
-/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
-@mixin clearfix {
-  &::before,
-  &::after {
-    display: table;
-    content: ' ';
-
-    @if $global-flexbox {
-      flex-basis: 0;
-      order: 1;
-    }
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-
-/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
-/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
-///
-/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
-/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
-@mixin auto-width($max, $elem: li) {
-  @for $i from 2 through $max {
-    &:nth-last-child(#{$i}):first-child,
-    &:nth-last-child(#{$i}):first-child ~ #{$elem} {
-      width: percentage(1 / $i);
-    }
-  }
-}
-
-/// Removes the focus ring around an element when a mouse input is detected.
-@mixin disable-mouse-outline {
-  [data-whatinput='mouse'] & {
-    outline: 0;
-  }
-}
-
-/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
-/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
-/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin element-invisible {
-  position: absolute !important;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
-}
-
-/// Reverses the CSS output created by the `element-invisible()` mixin.
-@mixin element-invisible-off {
-  position: static !important;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  clip-path: none;
-}
-
-/// Vertically centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
-@mixin vertical-center {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/// Horizontally centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
-@mixin horizontal-center {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/// Absolutely centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
-@mixin absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
-///
-/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
-/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
-@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
-  $list: $breakpoint-classes;
-
-  @if not $small {
-    $list: sl-remove($list, $-zf-zero-breakpoint);
-  }
-
-  @each $name in $list {
-    $-zf-size: $name !global;
-
-    @if $auto-insert-breakpoints {
-      @include breakpoint($name) {
-        @content;
-      }
-    }
-    @else {
-      @content;
-    }
-  }
-}
-
-/// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
-/// - For a single value, `$-zf-bp-value` is this value.
-/// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
-/// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
-/// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
-/// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
-@mixin -zf-breakpoint-value(
-  $name: auto,
-  $map: null
-) {
-  @if $name == auto and type-of($map) == 'map' {
-    // "auto"
-    @each $k, $v in $map {
-      @include breakpoint($k) {
-        @include -zf-breakpoint-value($v, $map) {
-          @content;
-        }
-      }
-    }
-  }
-  @else {
-    // breakpoint name
-    @if type-of($name) == 'string' {
-      $name: -zf-get-bp-val($map, $name);
-    }
-
-    // breakpoint value
-    $-zf-bp-value: $name !global;
-    @content;
-  }
-}

package/dist/styles/base/grid/util/_selector.scss

@@ -1,41 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group functions
-////
-
-/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
-///
-/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.
-/// @param {Keyword} $modifier [''] - A modifier to be applied to each text input type (e.g. a class or a pseudo-class). Leave blank to ignore.
-@function text-inputs($types: (), $modifier: '') {
-  $return: ();
-
-  $all-types:
-    text
-    password
-    date
-    datetime
-    datetime-local
-    month
-    week
-    email
-    number
-    search
-    tel
-    time
-    url
-    color;
-
-  @if not has-value($types) {
-    $types: $all-types;
-  }
-
-  @each $type in $types {
-    $return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma);
-  }
-
-  @return $return;
-}

package/dist/styles/base/grid/util/_unit.scss

@@ -1,152 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group functions
-////
-
-$global-font-size: 100% !default;
-
-/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
-///
-/// @param {Number} $num - Number to strip unit from.
-///
-/// @returns {Number} The same number, sans unit.
-@function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
-}
-
-/// Converts one or more pixel values into matching rem values.
-///
-/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
-///
-/// @returns {List} A list of converted values.
-@function rem-calc($values, $base: null) {
-  $rem-values: ();
-  $count: length($values);
-
-  // If no base is defined, defer to the global font size
-  @if $base == null {
-    $base: $global-font-size;
-  }
-
-  // If the base font size is a %, then multiply it by 16px
-  // This is because 100% font size = 16px in most all browsers
-  @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
-  }
-
-  // Using rem as base allows correct scaling
-  @if unit($base) == 'rem' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  @if $count == 1 {
-    @return -zf-to-rem($values, $base);
-  }
-
-  @for $i from 1 through $count {
-    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
-  }
-
-  @return $rem-values;
-}
-
-// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
-@function -zf-bp-to-em($value) {
-  // Pixel and unitless values are converted to rems
-  @if unit($value) == 'px' or unitless($value) {
-    $value: rem-calc($value, $base: 16px);
-  }
-
-  // Then the value is converted to ems
-  @return strip-unit($value) * 1em;
-}
-
-/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
-/// @access private
-///
-/// @param {Number} $value - Pixel value to convert.
-/// @param {Number} $base [null] - Base for pixel conversion.
-///
-/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
-@function -zf-to-rem($value, $base: null) {
-  // Check if the value is a number
-  @if type-of($value) != 'number' {
-    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
-    @return $value;
-  }
-
-  // Transform em into rem if someone hands over 'em's
-  @if unit($value) == 'em' {
-    $value: strip-unit($value) * 1rem;
-  }
-
-  // Calculate rem if units for $value is not rem or em
-  @if unit($value) != 'rem' {
-    $value: strip-unit($value) / strip-unit($base) * 1rem;
-  }
-
-  // Turn 0rem into 0
-  @if $value == 0rem {
-    $value: 0;
-  }
-
-  @return $value;
-}
-
-/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
-///
-/// @param {Number} $value - Value to convert to a unitless line height
-/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size
-///
-/// @return {Number} - Unitless number
-@function unitless-calc($value, $base: null) {
-
-  // If no base is defined, defer to the global font size
-  @if $base == null {
-    $base: $global-font-size;
-  }
-
-  // First, lets convert our $base to pixels
-
-  // If the base font size is a %, then multiply it by 16px
-  @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
-  }
-
-  @if unit($base) == 'rem' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  @if unit($base) == 'em' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  // Now lets convert our value to pixels too
-  @if unit($value) == '%' {
-    $value: ($value / 100%) * $base;
-  }
-
-  @if unit($value) == 'rem' {
-    $value: strip-unit($value) * $base;
-  }
-
-  @if unit($value) == 'em' {
-    $value: strip-unit($value) * $base;
-  }
-
-  // 'px'
-  @if unit($value) == 'px' {
-    @return strip-unit($value) / strip-unit($base);
-  }
-
-  // assume that line-heights greatern then 10 are meant to be absolute in 'px'
-  @if unitless($value) and ($value > 10) {
-    @return $value / strip-unit($base);
-  }
-
-  @return $value;
-}

package/dist/styles/base/grid/util/_util.scss

@@ -1,8 +0,0 @@
-@import 'math';
-@import 'unit';
-@import 'value';
-@import 'direction';
-@import 'color';
-@import 'selector';
-@import 'flex';
-@import 'mixins';

package/dist/styles/base/grid/util/_value.scss

@@ -1,160 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group functions
-////
-
-/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
-///
-/// @param {Mixed} $val - Value to check.
-///
-/// @returns {Boolean} `true` if `$val` is not falsey.
-@function has-value($val) {
-  @if $val == null or $val == none {
-    @return false;
-  }
-  @if type-of($val) == 'number' and strip-unit($val) == 0 {
-    @return false;
-  }
-  @if type-of($val) == 'list' and length($val) == 0 {
-    @return false;
-  }
-  @return true;
-}
-
-/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
-///
-/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
-/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.
-///
-/// @returns {Number} A single value based on `$val` and `$side`.
-@function get-side($val, $side) {
-  $length: length($val);
-
-  @if $length == 1 {
-    @return $val;
-  }
-  @if $length == 2 {
-    @return map-get((
-      top: nth($val, 1),
-      bottom: nth($val, 1),
-      left: nth($val, 2),
-      right: nth($val, 2),
-    ), $side);
-  }
-  @if $length == 3 {
-    @return map-get((
-      top: nth($val, 1),
-      left: nth($val, 2),
-      right: nth($val, 2),
-      bottom: nth($val, 3),
-    ), $side);
-  }
-  @if $length == 4 {
-    @return map-get((
-      top: nth($val, 1),
-      right: nth($val, 2),
-      bottom: nth($val, 3),
-      left: nth($val, 4),
-    ), $side);
-  }
-}
-
-/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
-///
-/// @param {List} $val - Border value to find a value in.
-/// @param {Keyword} $elem - Border component to extract.
-///
-/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
-@function get-border-value($val, $elem) {
-  // Find the width, style, or color and return it
-  @each $v in $val {
-    $type: type-of($v);
-    @if $elem == width and $type == 'number' {
-      @return $v;
-    }
-    @if $elem == style and $type == 'string' {
-      @return $v;
-    }
-    @if $elem == color and $type == 'color' {
-      @return $v;
-    }
-  }
-
-  // Defaults
-  $defaults: (
-    width: 0,
-    style: solid,
-    color: #000,
-  );
-
-  @return map-get($defaults, $elem);
-}
-
-/// Finds a value in a nested map.
-/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
-///
-/// @param {Map} $map - Map to pull a value from.
-/// @param {String} $keys... - Keys to use when looking for a value.
-/// @returns {Mixed} The value found in the map.
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-
-/// Casts a map into a list.
-/// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/
-///
-/// @param {Map} $map - Map to pull a value from.
-///
-/// @returns {List} Depending on the flag, returns either $keys or $values or both.
-@function map-to-list($map, $keep: 'both') {
-  $keep: if(index('keys' 'values', $keep), $keep, 'both');
-
-  @if type-of($map) == 'map' {
-    $keys: ();
-    $values: ();
-
-    @each $key, $val in $map {
-      $keys: append($keys, $key);
-      $values: append($values, $val);
-    }
-
-    @if $keep == 'keys' {
-      @return $keys;
-    }
-    @else if $keep == 'values' {
-      @return $values;
-    }
-    @else {
-      @return zip($keys, $values);
-    }
-  }
-
-  @return if(type-of($map) != 'list', ($value,), $map);
-
-}
-
-/// Safely return a value from a map.
-///
-/// @param {Map} $map - Map to retrieve a value from.
-/// @param {String} $key - Name of the map key.
-///
-/// @returns {List} Found value.
-@function map-safe-get($map, $key) {
-  @if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) {
-    @if (map-has-key($map, $key)) {
-      @return map-get($map, $key);
-    }
-    @else {
-      @error 'Key: `#{$key}` is not available in `#{$map}`';
-    }
-  }
-  @else {
-    @error '`#{$map}` is not a valid map';
-  }
-}