@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

package/dist/styles/base/grid/xy-grid/_collapse.scss

@@ -0,0 +1,74 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Collapses the grid a cells within it.
+///
+/// @param {String} $selector [.cell] - The child element to remove the gutter from.
+/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
+/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
+@mixin xy-grid-collapse(
+  $selector: '.cell',
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $min-breakpoint: $-zf-zero-breakpoint
+) {
+  // First, lets negate any margins on the top level
+  @if ($gutter-type == 'margin') {
+
+    @include breakpoint($min-breakpoint) {
+      @each $value in $gutter-position {
+        margin-#{$value}: 0;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          margin-#{$value}: 0;
+        }
+      }
+    }
+
+    $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
+
+    // Output new widths to not include gutters
+    @each $bp in $breakpoint-classes {
+      @if(sl-contain($excluded-bps, $bp)) {
+        @include breakpoint($min-breakpoint) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      } @else {
+        @include breakpoint($bp) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      } 
+    }
+  }
+  @else {
+
+    @include breakpoint($min-breakpoint) {
+      @each $value in $gutter-position {
+        margin-#{$value}: 0;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          padding-#{$value}: 0;
+        }
+      }
+    }
+  }
+}

package/dist/styles/base/grid/xy-grid/_frame.scss

@@ -0,0 +1,86 @@
+/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
+///
+/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+/// @param {Number|Map} $gutters [null] - 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.
+/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
+@mixin xy-grid-frame(
+  $vertical: false,
+  $nested: false,
+  $gutters: null,
+  $breakpoint: null,
+  $include-base: true
+) {
+
+  @if $include-base {
+    overflow: hidden;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  @if $breakpoint == null and type-of($gutters) == 'map' {
+    @include -zf-each-breakpoint() {
+      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
+    }
+  } @else {
+    // Get our gutters if applicable
+    $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+    // If we have a gutter, add it to the width/height
+    @if $gutter {
+      @if $vertical == true {
+        $unit: if($nested == true, 100%, 100vh);
+        $gutter: rem-calc($gutter);
+        height: calc(#{$unit} + #{$gutter});
+      } @else {
+        $unit: if($nested == true, 100%, 100vw);
+        $gutter: rem-calc($gutter);
+        width: calc(#{$unit} + #{$gutter});
+      }
+    }
+    @else {
+      @if $vertical == true {
+        height: if($nested == true, 100%, 100vh);
+      } @else {
+        width: if($nested == true, 100%, 100vw);
+      }
+    }
+  }
+}
+
+/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
+///
+/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+@mixin xy-cell-block(
+  $vertical: false
+) {
+  $property: if($vertical == true, 'overflow-y', 'overflow-x');
+
+  @if $vertical == true {
+    overflow-y: auto;
+    max-height: 100%;
+    height: 100%;
+  } @else {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-stype: -ms-autohiding-scrollbar;
+}
+
+/// Container for inside a grid frame containing multiple blocks. Typically used
+/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
+/// constraints / from parents to children.
+@mixin xy-cell-block-container() {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+
+  > .grid-x {
+    max-height: 100%;
+    flex-wrap: nowrap;
+  }
+}

package/dist/styles/base/grid/xy-grid/_grid.scss

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Creates a max width container, designed to house your grid content.
+///
+/// @param {Number} $width [$grid-container] - a width to limit the container to.
+@mixin xy-grid-container(
+  $width: $grid-container,
+  $padding: $grid-container-padding
+) {
+  @include xy-gutters($gutters: $padding, $gutter-type: padding);
+
+  max-width: $width;
+  margin: 0 auto;
+}
+
+/// Creates a container for your flex cells.
+///
+/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
+/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
+@mixin xy-grid(
+  $direction: horizontal,
+  $wrap: true
+) {
+  $direction: if($direction == 'horizontal', row, column);
+  $wrap: if($wrap, wrap, nowrap);
+
+  display: flex;
+  flex-flow: $direction $wrap;
+}

package/dist/styles/base/grid/xy-grid/_gutters.scss

@@ -0,0 +1,45 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Create gutters for a cell/container.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either 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} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
+@mixin xy-gutters(
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $negative: false
+) {
+  $operator: if($negative, '-', '');
+
+  // If we have declared negative gutters, force type to `margin.
+  $gutter-type: if($negative, 'margin', $gutter-type);
+
+  // Output our margin gutters.
+  @if (type-of($gutters) == 'map') {
+    @include -zf-breakpoint-value(auto, $gutters) {
+      $gutter: rem-calc($-zf-bp-value) / 2;
+
+      // Loop through each gutter position
+      @each $value in $gutter-position {
+        #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
+      }
+    }
+  }
+  @else if (type-of($gutters) == 'number') {
+    $gutter: rem-calc($gutters) / 2;
+
+    // Loop through each gutter position
+    @each $value in $gutter-position {
+      #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
+    }
+  }
+}

package/dist/styles/base/grid/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);
+  }
+}

package/dist/styles/base/grid/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};
+  }
+}

package/dist/styles/base/grid/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';

package/dist/styles/base/grid.scss

@@ -0,0 +1,8 @@
+// For customization later on see reference below
+// In the meantime are are only including the XY-Grid component which we'll use as our layout grid
+// https://foundation.zurb.com/sites/docs/sass.html
+//https://foundation.zurb.com/sites/docs/xy-grid.html
+
+@import './grid/grid';
+
+@include foundation-xy-grid-classes;

package/dist/styles/base/iconography.scss

@@ -0,0 +1,12 @@
+$icon-unit: 8px !default;
+
+$icon-data: (
+  none: 0,                           
+  xxs:  ($icon-unit / 2), // 4px
+  xs:   ($icon-unit),     // 8px
+  s:    ($icon-unit * 2), // 16px
+  m:    ($icon-unit * 3), // 24px
+  l:    ($icon-unit * 4), // 32px
+  xl:   ($icon-unit * 6), // 48px
+  xxl:  ($icon-unit * 8)  // 64px
+) !default;

package/dist/styles/base/index.scss

@@ -0,0 +1,23 @@
+// normalizing css & general utility functions
+@import './_generic/_generic-dir.scss';
+
+// include colors data
+@import './color.scss';
+// include typography data
+@import './typography.scss';
+// include spacing data
+@import './spacing.scss';
+// include border data
+@import './border.scss';
+// include motion data
+@import './motion.scss';
+// include depth data
+@import './depth.scss';
+// include iconography data
+@import './iconography.scss';
+
+
+// include scss functions
+@import './utility-functions/_functions-base.scss';
+// base mixins
+@import './utility-mixins/_mixins-base.scss';

package/dist/styles/base/motion.scss

@@ -0,0 +1,19 @@
+$unit: 100ms;
+
+$duration-data: (
+  fast: $unit,
+  base: $unit * 2,
+  slow: $unit * 3,
+  slower: $unit * 4,
+  slowest: $unit * 5,
+) !default;
+
+$easing-data: (
+  base: cubic-bezier(0.64, 0, 0.35, 1),
+  in: cubic-bezier(0.36, 0, 1, 1),
+  out: cubic-bezier(0, 0, 0.42, 1),
+  excite: cubic-bezier(0.18, 0.67, 0.6, 1.22),
+  overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22),
+  anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65),
+) !default;
+

package/dist/styles/base/spacing.scss

@@ -0,0 +1,71 @@
+$point-unit: 8px !default;
+// Point-Grid System
+// Use multiples of this value to define dimensions, padding, and margin of both block and inline elements.
+// Learn more here: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
+
+$spacing-data: (
+  none: 0,
+  xxs: rem($point-unit / 2),
+  // 4px
+  xs: rem($point-unit),
+  // 8px
+  s: rem($point-unit * 2),
+  // 16px
+  m: rem($point-unit * 3),
+  // 24px
+  l: rem($point-unit * 4),
+  // 32px
+  xl: rem($point-unit * 6),
+  // 48px
+  xxl: rem($point-unit * 8) // 64px,,,,,,,
+) !default;
+
+/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
+/// @type Map
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+) !default;
+
+// Small devices
+@mixin sm {
+  @media (max-width: 32rem) {
+    @content;
+  }
+}
+// Medium devices
+@mixin md {
+  @media (max-width: 48rem) {
+    @content;
+  }
+  @media only screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
+    @content;
+  }
+  @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+    @content;
+  }
+  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
+    @content;
+  }
+  @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
+    @content;
+  }
+  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
+    @content;
+  }
+  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
+    @content;
+  }
+  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
+    @content;
+  }
+}
+// Large devices
+@mixin lg {
+  @media (max-width: 64rem) {
+    @content;
+  }
+}

package/dist/styles/base/typography.scss

@@ -0,0 +1,29 @@
+$font-size-data: (
+  900: 2.7692rem, // 36px
+  800: 1.8461rem, // 24px
+  700: 1.3846rem, // 18px
+  600: 1.2307rem, // 16px
+  500: 1.0769rem, // 14px
+  400: 1rem,      // 13px
+  300: 0.9230rem, // 12px
+  200: 0.8461rem,  // 11px
+  100: 0.75rem
+) !default;
+
+$line-height-data: (
+  normal: normal,
+  // TODO: Need to revise these with visual design team
+  600: 1.2,
+  500: 1.2,
+  400: 1.5,
+  300: 1.5,
+  200: 1.5
+) !default;
+  
+$font-weight-data: (
+  bold: 900,
+  semibold: 600,
+  regular: 400,
+  light: 300,
+  thin: 100
+) !default;

package/dist/styles/base/utility-functions/_functions-base.scss

@@ -0,0 +1,7 @@
+@import './color-functions.scss';
+@import './typography-functions.scss';
+@import './spacing-functions.scss';
+@import './motion-functions.scss';
+@import './depth-functions.scss';
+@import './border-functions.scss';
+@import './iconography-functions';

package/dist/styles/base/utility-functions/border-functions.scss

@@ -0,0 +1,13 @@
+/// Returns the border size for the specified size name
+/// @param {String} $size [xs]
+/// @return {List} The border value.
+
+@function border-size($size: xs) {
+  $fetched-value: map-get($border-size-data, $size);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error 'Border size `#{$size}` not found. Available variants: #{$border-size-data}';
+  }
+}