@messaia/cdk 0.0.0-CDK

package/lib/common/styles/colors/_colors.scss

@@ -0,0 +1,7 @@
+@import "colors-dark";
+@import "colors-light";
+
+@mixin vd-colors() {
+  @include vd-colors-light();
+  @include vd-colors-dark();
+}

package/lib/common/styles/core/_button.scss

@@ -0,0 +1,59 @@
+// @use "sass:math";
+@import '../theme-functions';
+@import '../rtl';
+
+// Standard button sizing.
+$mat-button-padding: 0 rem(0.600) !default;
+$mat-button-min-width: rem(8.800) !default;
+$mat-button-margin: rem(0.600) rem(0.800) !default;
+$mat-button-line-height: rem(3.60) !default;
+$mat-button-border-radius: 3px !default;
+
+// FAB sizing.
+$mat-fab-border-radius: 50%;
+$mat-fab-size: rem(5.600) !default;
+$mat-fab-line-height: rem(5.600) !default;
+$mat-fab-padding: rem(1.60) !default;
+$mat-fab-mini-size: rem(4.00) !default;
+$mat-fab-mini-line-height: rem(4.00) !default;
+
+// Icon button sizing.
+$mat-icon-button-height: rem(4.000) !default;
+$mat-icon-button-width: rem(4.000) !default;
+$mat-icon-button-margin: rem(0.600) !default;
+$mat-icon-border-radius: $mat-fab-border-radius;
+
+/** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */
+@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+  [mat-fab].mat-fab-position-#{$spot},
+  .mat-fab.mat-fab-position-#{$spot},
+  [mat-fab].mat-fab-#{$spot},
+  .mat-fab.mat-fab-#{$spot} {
+    top: $top;
+    @include rtl(right, $right,$left);
+    @include rtl(left, $left,$right);
+    bottom: $bottom;
+    position: absolute;
+    &.fixed {
+      position: fixed;
+    }
+  }
+}
+
+@mixin vd-button-utilities() {
+  $mat-fab-pos-offset: math.div(($mat-fab-size - $mat-fab-padding), 2);
+  @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);
+  @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);
+  @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);
+  @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);
+
+  button {
+    &[mat-icon-button] {
+      &.mat-icon-button-mini {
+        height: 24px;
+        line-height: 24px;
+        width: 24px;
+      }
+    }
+  }
+}

package/lib/common/styles/core/_card.scss

@@ -0,0 +1,160 @@
+// @use "sass:math";
+@import '../variables';
+
+@function makelongshadow($color) {
+    $val: 0px 0px $color;
+    @for $i from 1 through 200 {
+        $val: #{$val}, #{$i}px #{$i}px #{$color};
+    }
+    @return $val;
+}
+
+@mixin longshadow($color) {
+    text-shadow: makelongshadow($color);
+}
+
+$color: rgba(0, 0, 0, 0.01);
+
+@mixin vd-card-utilities() {
+
+    html {
+        .mat-card {
+            padding: 0;
+            margin: 8px;
+            mat-card-header {
+                height: auto;
+            }
+            [matCardAvatar] {
+                font-size: $mat-card-header-size;
+                line-height: $mat-card-header-size;
+                height: $mat-card-header-size;
+                width: $mat-card-header-size;
+                margin: 16px 0 0 15px;
+                border-radius: 50%;
+            }
+            .mat-card-image {
+                width: 100%;
+            }
+            .mat-card-image,
+            .mat-card-lg-image,
+            .mat-card-md-image,
+            .mat-card-sm-image,
+            .mat-card-title-group {
+                margin: 0;
+            }
+            mat-card-title {
+                padding-top: $padding;
+                padding-left: $padding;
+                padding-right: $padding;
+            }
+            mat-card-subtitle {
+                padding-left: $padding;
+                padding-right: $padding;
+            }
+            mat-card-content {
+                padding: $padding;
+            }
+            &, & .mat-card {
+                & .mat-card-actions {
+                    padding: math.div($padding, 2);
+                    margin: 0;
+                }
+            }
+            .mat-card-actions:last-child {
+                margin-bottom: 0px;
+                padding-bottom: 8px;
+            }
+        }
+        &:not([dir='rtl']) {
+            .mat-card-title-group {
+                .mat-card-image,
+                .mat-card-lg-image,
+                .mat-card-md-image,
+                .mat-card-sm-image {
+                    &:last-child {
+                        border-top-right-radius: $mat-card-radius;
+                        border-bottom-right-radius: $mat-card-radius;
+                    }
+                }
+            }
+            .mat-card {
+                .mat-card-image {
+                    &:first-child {
+                        border-top-left-radius: $mat-card-radius;
+                        border-top-right-radius: $mat-card-radius;
+                    }
+                }
+                .mat-card-lg-image,
+                .mat-card-md-image,
+                .mat-card-sm-image {
+                    &:first-child {
+                        border-top-left-radius: $mat-card-radius;
+                    }
+                }
+            }
+        }
+        &[dir='rtl'] {
+            .mat-card-title-group {
+                .mat-card-image,
+                .mat-card-lg-image,
+                .mat-card-md-image,
+                .mat-card-sm-image {
+                    &:last-child {
+                        border-top-left-radius: $mat-card-radius;
+                        border-bottom-left-radius: $mat-card-radius;
+                    }
+                }
+            }
+            .mat-card {
+                .mat-card-image {
+                    &:first-child {
+                        border-top-left-radius: $mat-card-radius;
+                        border-top-right-radius: $mat-card-radius;
+                    }
+                }
+                .mat-card-lg-image,
+                .mat-card-md-image,
+                .mat-card-sm-image {
+                    &:first-child {
+                        border-top-right-radius: $mat-card-radius;
+                    }
+                }
+            }
+        }
+    }
+
+    .mat-card-colored {
+        &[href],
+        &[ng-reflect-href] {
+            &:hover {
+            cursor: pointer;
+            box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+            }
+            &:active{
+                box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
+                & mat-toolbar {
+                    background-color:rgba(255, 255, 255, 0.2);
+                    background-position: -100% 100%;
+                }
+            }
+            & mat-toolbar {
+                background-size: 200% 100%;	
+                background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.2) 50%);
+                transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
+            }
+        }
+        & mat-toolbar {
+            height: 148px;
+            border-radius: 2px 2px 0 0;
+            overflow: hidden;
+            
+            mat-icon,
+            .mat-icon {
+                opacity: 0.65;
+                color: white;
+                font-size: 8rem;
+                @include longshadow(darken($color, 5% ));
+            }
+        }
+    }
+}

package/lib/common/styles/core/_content.scss

@@ -0,0 +1,42 @@
+@mixin vd-content-utilities() {
+  // Overall app layout height
+  mat-sidenav-container {
+    & > md-content,
+    & > [md-content],
+    & > .md-content,
+    & > mat-content,
+    & > [mat-content],
+    & > .mat-content {
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  md-content,
+  [md-content],
+  .md-content,
+  mat-content,
+  [mat-content],
+  .mat-content {
+    display: block;
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &[md-scroll-y],
+    &.mat-scroll-y {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    &[md-scroll-x],
+    &.mat-scroll-x {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    // For iOS allow disabling of momentum scrolling
+    // @see issue #2640.
+    &.autoScroll {
+      -webkit-overflow-scrolling: auto;
+    }
+  }
+}

package/lib/common/styles/core/_core.scss

@@ -0,0 +1,23 @@
+@import "button";
+@import "card";
+@import "content";
+@import "divider";
+@import "icons";
+@import "list";
+@import "sidenav";
+@import "structure";
+@import "toolbar";
+@import "whiteframe";
+
+@mixin vd-core() {
+	@include vd-button-utilities();
+	@include vd-card-utilities();
+	@include vd-content-utilities();
+	@include vd-divider-utilities();
+	@include vd-icon-utilities();
+	@include vd-list-utilities();
+	@include vd-sidenav-utilities();
+	@include vd-structure-utilities();
+	@include vd-toolbar-utilities();
+	@include vd-whiteframe-utilities();
+}

package/lib/common/styles/core/_divider.scss

@@ -0,0 +1,14 @@
+@import '../rtl';
+
+@mixin vd-divider-utilities() {
+  mat-divider {
+    &[matInset] {
+      @include rtl(margin-left, 72px,0);
+      @include rtl(margin-right, 0,72px);
+    }
+    &[mat-inset] {
+      @include rtl(margin-left, 72px,0);
+      @include rtl(margin-right, 0,72px);
+    }
+  }
+}

package/lib/common/styles/core/_icons.scss

@@ -0,0 +1,26 @@
+@mixin vd-icon-utilities() {
+    mat-list-item,
+    .mat-list-item-content {
+        mat-icon {
+            &[matListAvatar] {
+                -webkit-align-items: center;
+                -ms-flex-align: center;
+                align-items: center;
+                -webkit-align-content: center;
+                -ms-flex-line-pack: center;
+                align-content: center;
+                -webkit-justify-content: center;
+                -ms-flex-pack: center;
+                justify-content: center;
+                display: flex;
+            }
+        }
+    }
+    .mat-icon.mat-icon-logo {
+        height: 24px;
+        width: 100px;
+    }
+    .mat-icon {
+        flex-shrink: 0;
+    }
+}

package/lib/common/styles/core/_list.scss

@@ -0,0 +1,8 @@
+@mixin vd-list-utilities() {
+    mat-list mat-list-item [matListAvatar],
+    mat-list a[mat-list-item] [matListAvatar],
+    mat-nav-list mat-list-item [matListAvatar],
+    mat-nav-list a[mat-list-item] [matListAvatar] {
+        min-width: 40px;
+    }
+}

package/lib/common/styles/core/_sidenav.scss

@@ -0,0 +1,20 @@
+@import '../variables';
+
+@mixin vd-sidenav-utilities() {
+    mat-sidenav {
+        width: $navigation-drawer-width;
+        .mat-list-item-content {
+            mat-icon {            
+                @include rtl(margin-left, 0px,$margin);
+                @include rtl(margin-right, $margin, 0px);
+                color: #737373;
+                fill: #737373;
+            }
+        }
+        [mat-list-item] {
+            &,&:active,&:focus {
+                outline: none;
+            }
+        }
+    }
+}

package/lib/common/styles/core/_structure.scss

@@ -0,0 +1,126 @@
+@import '../variables';
+
+@mixin vd-structure-utilities() {
+  html, body {
+    height: 100%;
+    color: rgba(0, 0, 0, 0.87);
+    background: white;
+    position: relative;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  [tabindex='-1']:focus {
+    outline: none;
+  }
+
+  .inset {
+    padding: 10px;
+  }
+
+  button.md-no-style {
+    font-weight: normal;
+    background-color: inherit;
+    @include rtl(text-align, left,right);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  select,
+  button,
+  textarea,
+  input {
+    vertical-align: baseline;
+  }
+
+  // Fix Android 4.0 button bugs
+  input[type="reset"],
+  input[type="submit"],
+  html input[type="button"],
+  button {
+    cursor: pointer;
+    -webkit-appearance: button;
+
+    &[disabled] {
+      cursor: default;
+    }
+  }
+
+  textarea {
+    vertical-align: top;
+    overflow: auto;
+  }
+
+  input {
+    &[type="search"] {
+      -webkit-appearance: textfield;
+      box-sizing: content-box;
+      -webkit-box-sizing: content-box;
+
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+      }
+    }
+  }
+
+  .md-visually-hidden,
+  .mat-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    text-transform: none;
+    width: 1px;
+  }
+
+  .md-shadow,
+  .mat-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .md-shadow-bottom-z-1,
+  .mat-shadow-bottom-z-1 {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  }
+
+  .md-shadow-bottom-z-2,
+  .mat-shadow-bottom-z-2{
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  .md-shadow-animated.md-shadow,
+  .mat-shadow-animated.mat-shadow {
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .md-padding,
+  .mat-padding {
+    padding: 8px;
+  }
+
+  .md-margin,
+  .mat-margin {
+    margin: 8px;
+  }
+
+  @media (min-width: $layout-breakpoint-sm) {
+    .md-padding,
+    .mat-padding {
+      padding: 16px;
+    }
+  }
+}

package/lib/common/styles/core/_toolbar.scss

@@ -0,0 +1,31 @@
+@mixin vd-toolbar-utilities() {
+    mat-toolbar {
+        [mat-button] {
+            &:first-of-type:not(:last-child) {
+                
+                margin-left: -6px;
+                [dir='rtl'] & {
+                    margin-right: -6px;
+                    margin-left: 0;
+                }
+            }
+            &:last-of-type:not(:first-child) {
+                margin-right: -6px;
+                [dir='rtl'] & {
+                    margin-left: -6px;
+                    margin-right: 0;
+                }
+            }
+        }
+        .mat-icon-logo {
+            margin-right: 10px;
+            [dir='rtl'] & {
+                margin-left: 10px;
+                margin-right: 0;
+            }
+        }
+        [mat-icon-button] {
+            margin: 0 6px;
+        }
+    }
+}

package/lib/common/styles/core/_whiteframe.scss

@@ -0,0 +1,111 @@
+// Elements can have an "elevation" from 1 to 5, signified by shadows.
+// See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
+
+$mat-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+$mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+
+// Whiteframes
+
+$shadow-key-umbra-opacity: 0.2;
+$shadow-key-penumbra-opacity: 0.14;
+$shadow-ambient-shadow-opacity: 0.12;
+
+// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
+//    multiple lines. Ugly. Sorry.
+$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+
+@mixin vd-whiteframe-utilities() {
+ 
+  .md-whiteframe-1dp, .md-whiteframe-z1,
+  .mat-whiteframe-1dp, .mat-whiteframe-z1 {
+    box-shadow: $whiteframe-shadow-1dp;
+  }
+
+  .md-whiteframe-2dp,
+  .mat-whiteframe-2dp {
+    box-shadow: $whiteframe-shadow-2dp;
+  }
+
+  .md-whiteframe-3dp,
+  .mat-whiteframe-3dp {
+    box-shadow: $whiteframe-shadow-3dp;
+  }
+
+  .md-whiteframe-4dp, .md-whiteframe-z2,
+  .mat-whiteframe-4dp, .mat-whiteframe-z2 {
+    box-shadow: $whiteframe-shadow-4dp;
+  }
+
+  .md-whiteframe-5dp,
+  .mat-whiteframe-5dp {
+    box-shadow: $whiteframe-shadow-5dp;
+  }
+
+  .md-whiteframe-6dp,
+  .mat-whiteframe-6dp {
+    box-shadow: $whiteframe-shadow-6dp;
+  }
+
+  .md-whiteframe-7dp, .md-whiteframe-z3,
+  .mat-whiteframe-7dp, .mat-whiteframe-z3 {
+    box-shadow: $whiteframe-shadow-7dp;
+  }
+
+  .md-whiteframe-8dp,
+  .mat-whiteframe-8dp {
+    box-shadow: $whiteframe-shadow-8dp;
+  }
+
+  .md-whiteframe-9dp,
+  .mat-whiteframe-9dp {
+    box-shadow: $whiteframe-shadow-9dp;
+  }
+
+  .md-whiteframe-10dp, .md-whiteframe-z4,
+  .mat-whiteframe-10dp, .mat-whiteframe-z4 {
+    box-shadow: $whiteframe-shadow-10dp;
+  }
+
+  .md-whiteframe-11dp,
+  .mat-whiteframe-11dp {
+    box-shadow: $whiteframe-shadow-11dp;
+  }
+
+  .md-whiteframe-12dp,
+  .mat-whiteframe-12dp {
+    box-shadow: $whiteframe-shadow-12dp;
+  }
+
+  .md-whiteframe-13dp, .md-whiteframe-z5,
+  .mat-whiteframe-13dp, .mat-whiteframe-z5 {
+    box-shadow: $whiteframe-shadow-13dp;
+  }
+
+  .md-whiteframe-14dp,
+  .mat-whiteframe-14dp {
+    box-shadow: $whiteframe-shadow-14dp;
+  }
+}