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

package/dist/styles/components/packages/ds-basic/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/components/packages/ds-basic/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/components/packages/ds-basic/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/components/packages/ds-basic/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';
-  }
-}

package/dist/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_cell.scss

@@ -1,173 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group xy-grid
-////
-
-/// Calculate the percentage size of a cell.
-///
-/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
-@function xy-cell-size(
-  $size: $grid-columns
-) {
-  // Parsing percents, decimals, n of n and number counts
-  @if type-of($size) == 'number' {
-    @if unit($size) == '%' {
-      $size: $size;
-    }
-    @else if $size < 1 {
-      $size: percentage($size);
-    }
-    @else {
-      $size: percentage($size / $grid-columns);
-    }
-  }
-
-  // Parsing "n of n" or "n/n" expressions
-  @else if type-of($size) == 'list' {
-    @if length($size) != 3 {
-      @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
-    }
-    @else {
-      $size: percentage(nth($size, 1) / nth($size, 3));
-    }
-  }
-  // Anything else is incorrect
-  @else {
-    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
-  }
-
-  @return $size;
-}
-
-/// Sets base flex properties for cells.
-///
-/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
-@mixin xy-cell-base($size: full) {
-  @if($size == 'full') {
-    // This is the base style, all others inherit from it
-    flex: 0 0 auto;
-    min-height: 0px;
-    min-width: 0px;
-  }
-  @else if ($size == 'auto') {
-    flex: 1 1 0px; // sass-lint:disable-line zero-unit
-  }
-  @else if ($size == 'shrink') {
-    flex: 0 0 auto;
-  }
-  @else if ($size == 'grow') {
-    flex: 1 0 auto;
-  }
-}
-
-/// Resets a cells width (or height if vertical is true) as well as strips its gutters.
-///
-/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin xy-cell-reset($vertical: true) {
-  $direction: if($vertical == true, width, height);
-  #{$direction}: auto;
-  max-#{$direction}: none;
-}
-
-// Sets our cell widths or heights depending on gutter type.
-@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
-  $direction: if($vertical == true, height, width);
-  @if($size == 'full') {
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
-  }
-  @else if ($size == 'auto') {
-    #{$direction}: auto;
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
-  }
-  @else if ($size == 'shrink') {
-    #{$direction}: auto;
-  }
-  @else {
-    $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
-  }
-}
-
-/// Creates a cell for your grid.
-///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @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] - Map or single value for gutters.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
-/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin xy-cell(
-  $size: full,
-  $gutter-output: true,
-  $gutters: $grid-margin-gutters,
-  $gutter-type: margin,
-  $gutter-position: right left,
-  $breakpoint: null,
-  $vertical: false
-) {
-  @if($breakpoint == null) {
-    // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
-    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
-      $breakpoint: $-zf-size;
-    }
-    @else {
-      $breakpoint: $-zf-zero-breakpoint;
-    }
-  }
-
-  // Get our gutters from map if available, if not map just return the value.
-  $gutter: -zf-get-bp-val($gutters, $breakpoint);
-
-  // Base flex properties
-  @include xy-cell-base($size);
-
-  @if($gutter-type == 'margin') {
-    @include -xy-cell-properties($size, $gutter, $vertical);
-  }
-  @else {
-    @include -xy-cell-properties($size, 0, $vertical);
-  }
-
-  @if $gutter-output {
-    @include xy-gutters($gutter, $gutter-type, $gutter-position);
-  }
-}
-
-/// Creates a single breakpoint sized grid. Used to generate our grid classes.
-///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @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] - Map or single value for gutters.
-/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
-/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin xy-cell-static(
-  $size: full,
-  $gutter-output: true,
-  $gutters: $grid-margin-gutters,
-  $gutter-type: margin,
-  $breakpoint: $-zf-zero-breakpoint,
-  $vertical: false
-) {
-
-  $gutter: -zf-get-bp-val($gutters, $breakpoint);
-  $gutter-position: if($vertical == true, top bottom, left right);
-
-  @if($gutter-type == 'margin') {
-    @include -xy-cell-properties($size, $gutter, $vertical);
-  }
-  @else {
-    @include -xy-cell-properties($size, 0, $vertical);
-  }
-
-  // If we want to output the gutters
-  @if($gutter-output) {
-    // TODO: Figure out if we need to pass breakpoint in here too.
-    @include xy-gutters($gutter, $gutter-type, $gutter-position);
-  }
-}