@colijnit/extendedcomponents 12.0.1

package/lib/style/material2/_core.scss

@@ -0,0 +1,17 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+// Core styles that can be used to apply material design treatments to any element.
+//@import 'style/elevation';
+@import 'ripple/co-ripple';
+//@import "theming/palette";
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin mat-core() {
+  @include mat-ripple();
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin mat-core-theme($theme) {
+  @include mat-ripple-theme($theme);
+}

package/lib/style/material2/_material2-scss-barrel.scss

@@ -0,0 +1,16 @@
+// Top-level material2 scss barrel theme initialization for our CoreComponents lib.
+@import "core";
+//@import "theming/theming";
+
+/* Override Material2 variables */
+//$mat-ripple-color-opacity: 0.25;
+
+/* Include material core */
+//@include mat-core();
+//
+//$primary: mat-palette($mat-purple, 700, 500, 800);
+//$accent:  mat-palette($mat-green, A200, A100, A400);
+//$theme: mat-dark-theme($primary, $accent);
+//@include mat-core-theme(
+//  mat-dark-theme($primary, $accent)
+//);

package/lib/style/material2/ripple/_co-ripple.scss

@@ -0,0 +1,68 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+$mat-ripple-color-opacity: 0.1;
+
+@mixin mat-ripple() {
+  // The host element of an md-ripple directive should always have a position of "absolute" or
+  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  .mat-ripple {
+    overflow: hidden;
+  }
+
+  .mat-ripple.mat-ripple-unbounded {
+    overflow: visible;
+  }
+
+  .mat-ripple-element {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transform: scale(0);
+  }
+}
+
+/* Theme for the ripple elements.*/
+@mixin mat-ripple-theme($theme) {
+  $foreground: map_get($theme, foreground);
+  $foreground-base: map_get($foreground, base);
+
+  .mat-ripple-element {
+    background-color: rgba($foreground-base, $mat-ripple-color-opacity);
+  }
+}
+
+
+// A mixin, which generates temporary ink ripple on a given component.
+// To be removed once the real ripple is applied to all elements.
+// When $bindToParent is set to true, it will check for the focused class on the same selector as you included
+// that mixin.
+// It is also possible to specify the color palette of the temporary ripple. By default it uses the
+// accent palette for its background.
+@mixin mat-temporary-ink-ripple($component, $bindToParent: false) {
+  // A placeholder ink ripple, shown when keyboard focused.
+  .mat-ink-ripple {
+    border-radius: 50%;
+    opacity: 0;
+    height: 48px;
+    left: 50%;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity ease 280ms, background-color ease 280ms;
+    width: 48px;
+  }
+
+  // Fade in when radio focused.
+  #{if($bindToParent, '&', '')}.mat-#{$component}-focused .mat-ink-ripple {
+    opacity: 1;
+  }
+
+  // this state.
+  #{if($bindToParent, '&', '')}.mat-#{$component}-disabled .mat-ink-ripple {
+    background-color: #000;
+  }
+}

package/lib/style/material2/style/_elevation.scss

@@ -0,0 +1,176 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+@use 'variables';
+
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
+// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
+// space completely obscured by an object relative to its light source), one for penumbra (the
+// space partially obscured by an object), and one for ambient (the space which contains the object
+// itself). For a further explanation of these terms and their meanings, see
+// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
+
+$_umbra-color: rgba(black, 0.2);
+$_penumbra-color: rgba(black, 0.14);
+$_ambient-color: rgba(black, 0.12);
+
+// Maps for the different shadow sets and their values within each z-space. These values were
+// created by taking a few reference shadow sets created by Google's Designers and interpolating
+// all of the values between them.
+
+$_umbra-elevation-map: (
+        0: '0px 0px 0px 0px #{$_umbra-color}',
+        1: '0px 2px 1px -1px #{$_umbra-color}',
+        2: '0px 3px 1px -2px #{$_umbra-color}',
+        3: '0px 3px 3px -2px #{$_umbra-color}',
+        4: '0px 2px 4px -1px #{$_umbra-color}',
+        5: '0px 3px 5px -1px #{$_umbra-color}',
+        6: '0px 3px 5px -1px #{$_umbra-color}',
+        7: '0px 4px 5px -2px #{$_umbra-color}',
+        8: '0px 5px 5px -3px #{$_umbra-color}',
+        9: '0px 5px 6px -3px #{$_umbra-color}',
+        10: '0px 6px 6px -3px #{$_umbra-color}',
+        11: '0px 6px 7px -4px #{$_umbra-color}',
+        12: '0px 7px 8px -4px #{$_umbra-color}',
+        13: '0px 7px 8px -4px #{$_umbra-color}',
+        14: '0px 7px 9px -4px #{$_umbra-color}',
+        15: '0px 8px 9px -5px #{$_umbra-color}',
+        16: '0px 8px 10px -5px #{$_umbra-color}',
+        17: '0px 8px 11px -5px #{$_umbra-color}',
+        18: '0px 9px 11px -5px #{$_umbra-color}',
+        19: '0px 9px 12px -6px #{$_umbra-color}',
+        20: '0px 10px 13px -6px #{$_umbra-color}',
+        21: '0px 10px 13px -6px #{$_umbra-color}',
+        22: '0px 10px 14px -6px #{$_umbra-color}',
+        23: '0px 11px 14px -7px #{$_umbra-color}',
+        24: '0px 11px 15px -7px #{$_umbra-color}'
+);
+
+$_penumbra-elevation-map: (
+        0: '0px 0px 0px 0px #{$_penumbra-color}',
+        1: '0px 1px 1px 0px #{$_penumbra-color}',
+        2: '0px 2px 2px 0px #{$_penumbra-color}',
+        3: '0px 3px 4px 0px #{$_penumbra-color}',
+        4: '0px 4px 5px 0px #{$_penumbra-color}',
+        5: '0px 5px 8px 0px #{$_penumbra-color}',
+        6: '0px 6px 10px 0px #{$_penumbra-color}',
+        7: '0px 7px 10px 1px #{$_penumbra-color}',
+        8: '0px 8px 10px 1px #{$_penumbra-color}',
+        9: '0px 9px 12px 1px #{$_penumbra-color}',
+        10: '0px 10px 14px 1px #{$_penumbra-color}',
+        11: '0px 11px 15px 1px #{$_penumbra-color}',
+        12: '0px 12px 17px 2px #{$_penumbra-color}',
+        13: '0px 13px 19px 2px #{$_penumbra-color}',
+        14: '0px 14px 21px 2px #{$_penumbra-color}',
+        15: '0px 15px 22px 2px #{$_penumbra-color}',
+        16: '0px 16px 24px 2px #{$_penumbra-color}',
+        17: '0px 17px 26px 2px #{$_penumbra-color}',
+        18: '0px 18px 28px 2px #{$_penumbra-color}',
+        19: '0px 19px 29px 2px #{$_penumbra-color}',
+        20: '0px 20px 31px 3px #{$_penumbra-color}',
+        21: '0px 21px 33px 3px #{$_penumbra-color}',
+        22: '0px 22px 35px 3px #{$_penumbra-color}',
+        23: '0px 23px 36px 3px #{$_penumbra-color}',
+        24: '0px 24px 38px 3px #{$_penumbra-color}'
+);
+
+$_ambient-elevation-map: (
+        0: '0px 0px 0px 0px #{$_ambient-color}',
+        1: '0px 1px 3px 0px #{$_ambient-color}',
+        2: '0px 1px 5px 0px #{$_ambient-color}',
+        3: '0px 1px 8px 0px #{$_ambient-color}',
+        4: '0px 1px 10px 0px #{$_ambient-color}',
+        5: '0px 1px 14px 0px #{$_ambient-color}',
+        6: '0px 1px 18px 0px #{$_ambient-color}',
+        7: '0px 2px 16px 1px #{$_ambient-color}',
+        8: '0px 3px 14px 2px #{$_ambient-color}',
+        9: '0px 3px 16px 2px #{$_ambient-color}',
+        10: '0px 4px 18px 3px #{$_ambient-color}',
+        11: '0px 4px 20px 3px #{$_ambient-color}',
+        12: '0px 5px 22px 4px #{$_ambient-color}',
+        13: '0px 5px 24px 4px #{$_ambient-color}',
+        14: '0px 5px 26px 4px #{$_ambient-color}',
+        15: '0px 6px 28px 5px #{$_ambient-color}',
+        16: '0px 6px 30px 5px #{$_ambient-color}',
+        17: '0px 6px 32px 5px #{$_ambient-color}',
+        18: '0px 7px 34px 6px #{$_ambient-color}',
+        19: '0px 7px 36px 6px #{$_ambient-color}',
+        20: '0px 8px 38px 7px #{$_ambient-color}',
+        21: '0px 8px 40px 7px #{$_ambient-color}',
+        22: '0px 8px 42px 7px #{$_ambient-color}',
+        23: '0px 9px 44px 8px #{$_ambient-color}',
+        24: '0px 9px 46px 8px #{$_ambient-color}'
+);
+
+
+// The css property used for elevation. In most cases this should not be changed. It is exposed
+// as a variable for abstraction / easy use when needing to reference the property directly, for
+// example in a will-change rule.
+$mat-elevation-property: box-shadow !default;
+
+// The default duration value for elevation transitions.
+$mat-elevation-transition-duration: 280ms !default;
+
+// The default easing value for elevation transitions.
+$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin mat-elevation($zValue) {
+  @if type-of($zValue) != number or not unitless($zValue) {
+    @error '$zValue must be a unitless number';
+  }
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24';
+  }
+
+  #{$mat-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},
+  #{map-get($_penumbra-elevation-map, $zValue)},
+  #{map-get($_ambient-elevation-map, $zValue)};
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
+//   will-change: $mat-elevation-property, opacity;
+// }
+@function mat-elevation-transition-property-value(
+  $duration: $mat-elevation-transition-duration,
+  $easing: $mat-elevation-transition-timing-function) {
+  @return #{$mat-elevation-property} #{$duration} #{$easing};
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin mat-elevation-transition(
+  $duration: $mat-elevation-transition-duration,
+  $easing: $mat-elevation-transition-timing-function) {
+  transition: mat-elevation-transition-property-value($duration, $easing);
+  will-change: $mat-elevation-property;
+}

package/lib/style/material2/style/_list-common.scss

@@ -0,0 +1,51 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
+@mixin mat-truncate-line() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Mixin to provide all mat-line styles, changing secondary font size based on whether the list
+// is in dense mode.
+@mixin mat-line-base($secondary-font-size) {
+  .mat-line {
+    @include mat-truncate-line();
+    display: block;
+    box-sizing: border-box;
+
+    // all lines but the top line should have smaller text
+    &:nth-child(n+2) {
+      font-size: $secondary-font-size;
+    }
+  }
+}
+
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin mat-normalize-text() {
+  & > * {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: inherit;
+  }
+}
+
+// This mixin provides base styles for the wrapper around mat-line elements in a list.
+@mixin mat-line-wrapper-base() {
+  @include mat-normalize-text();
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  // Must remove wrapper when lines are empty or it takes up horizontal
+  // space and pushes other elements to the right.
+  &:empty {
+    display: none;
+  }
+}

package/lib/style/material2/style/_variables.scss

@@ -0,0 +1,61 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+@import '../typography/typography';
+
+// Typography
+$mat-body-font-size-base: rem(1.4) !default;
+$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
+
+// Media queries
+$mat-xsmall: 'max-width: 600px';
+$mat-small: 'max-width: 960px';
+
+// z-index master list
+
+$z-index-fab: 20 !default;
+$z-index-drawer: 100 !default;
+
+// Overlay z indices.
+
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$cdk-z-index-overlay-container: 1000;
+$cdk-z-index-overlay: 1000;
+$cdk-z-index-overlay-backdrop: 1000;
+
+// Background color for all of the backdrops
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
+
+// Global constants
+$pi: 3.14159265;
+
+// Padding between input toggles and their labels
+$mat-toggle-padding: 8px !default;
+// Width and height of input toggles
+$mat-toggle-size: 20px !default;
+
+// Easing Curves
+
+// The default animation curves used by material design.
+$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
+$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+
+$swift-ease-out-duration: 400ms !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 300ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 500ms !default;
+$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: 80ms !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;