@covalent/core 4.0.0 → 4.1.0-develop.5

package/common/styles/core/_button.scss

@@ -23,7 +23,13 @@ $mat-icon-button-margin: rem(0.6) !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) {
+@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},
@@ -34,6 +40,7 @@ $mat-icon-border-radius: $mat-fab-border-radius;
 
     bottom: $bottom;
     position: absolute;
+
     &.fixed {
       position: fixed;
     }
@@ -41,11 +48,35 @@ $mat-icon-border-radius: $mat-fab-border-radius;
 }
 
 @mixin td-button-utilities() {
-  $mat-fab-pos-offset: ($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);
+  $mat-fab-pos-offset: calc(($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] {

package/common/styles/core/_card.scss

@@ -12,16 +12,18 @@
   text-shadow: makelongshadow($color);
 }
 
-$color: rgba(0, 0, 0, 0.01);
+$color: rgba(0, 0, 0, 1%);
 
 @mixin td-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;
@@ -30,9 +32,11 @@ $color: rgba(0, 0, 0, 0.01);
         margin: 16px 0 0 15px;
         border-radius: 50%;
       }
+
       .mat-card-image {
         width: 100%;
       }
+
       .mat-card-image,
       .mat-card-lg-image,
       .mat-card-md-image,
@@ -40,33 +44,40 @@ $color: rgba(0, 0, 0, 0.01);
       .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: $padding / 2;
+          padding: calc($padding / 2);
           margin: 0;
         }
       }
+
       .mat-card-actions:last-child {
         margin-bottom: 0;
         padding-bottom: 8px;
       }
+
       .mat-divider.relative {
         position: relative;
       }
     }
+
     &[dir='rtl'] {
       .mat-card-title-group {
         .mat-card-image,
@@ -79,6 +90,7 @@ $color: rgba(0, 0, 0, 0.01);
           }
         }
       }
+
       .mat-card {
         .mat-card-image {
           &:first-child {
@@ -86,6 +98,7 @@ $color: rgba(0, 0, 0, 0.01);
             border-top-right-radius: $mat-card-radius;
           }
         }
+
         .mat-card-lg-image,
         .mat-card-md-image,
         .mat-card-sm-image {
@@ -95,6 +108,7 @@ $color: rgba(0, 0, 0, 0.01);
         }
       }
     }
+
     &:not([dir='rtl']) {
       .mat-card-title-group {
         .mat-card-image,
@@ -107,6 +121,7 @@ $color: rgba(0, 0, 0, 0.01);
           }
         }
       }
+
       .mat-card {
         .mat-card-image {
           &:first-child {
@@ -114,6 +129,7 @@ $color: rgba(0, 0, 0, 0.01);
             border-top-right-radius: $mat-card-radius;
           }
         }
+
         .mat-card-lg-image,
         .mat-card-md-image,
         .mat-card-sm-image {
@@ -130,23 +146,32 @@ $color: rgba(0, 0, 0, 0.01);
     &[ng-reflect-href] {
       &:hover {
         cursor: pointer;
-        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 20%),
+          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, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-          0 4px 18px 3px rgba(0, 0, 0, 0.12);
+        box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 20%),
+          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-color: rgba(255, 255, 255, 20%);
           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 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, color 0.5s ease 0s,
-          background-color 0.5s ease;
+        background-image: linear-gradient(
+          to right,
+          transparent 50%,
+          rgba(255, 255, 255, 20%) 50%
+        );
+        transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
+          color 0.5s ease 0s, background-color 0.5s ease;
       }
     }
+
     & mat-toolbar {
       height: 148px;
       border-radius: 2px 2px 0 0;

package/common/styles/core/_content.scss

@@ -15,6 +15,7 @@
       overflow-y: auto;
       overflow-x: hidden;
     }
+
     &[md-scroll-x],
     &.mat-scroll-x {
       overflow-x: auto;
@@ -22,7 +23,7 @@
     }
     // For iOS allow disabling of momentum scrolling
     // @see issue #2640.
-    &.autoScroll {
+    &.auto-scroll {
       -webkit-overflow-scrolling: auto;
     }
   }

package/common/styles/core/_divider.scss

@@ -7,6 +7,7 @@
       @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/common/styles/core/_icons.scss

@@ -10,10 +10,12 @@
       }
     }
   }
+
   .mat-icon.mat-icon-logo {
     height: 24px;
     width: 100px;
   }
+
   .mat-icon {
     flex-shrink: 0;
   }

package/common/styles/core/_sidenav.scss

@@ -3,12 +3,14 @@
 @mixin td-sidenav-utilities() {
   mat-sidenav {
     width: $navigation-drawer-width;
+
     .mat-list-item-content {
       mat-icon {
         @include rtl(margin-left, 0, $margin);
         @include rtl(margin-right, $margin, 0);
       }
     }
+
     [mat-list-item] {
       &,
       &:active,

package/common/styles/core/_structure.scss

@@ -4,7 +4,7 @@
   html,
   body {
     height: 100%;
-    color: rgba(0, 0, 0, 0.87);
+    color: rgba(0, 0, 0, 87%);
     background: white;
     position: relative;
   }
@@ -45,7 +45,7 @@
   html input[type='button'],
   button {
     cursor: pointer;
-    -webkit-appearance: button;
+    appearance: button;
 
     &[disabled] {
       cursor: default;
@@ -59,13 +59,12 @@
 
   input {
     &[type='search'] {
-      -webkit-appearance: textfield;
+      appearance: textfield;
       box-sizing: content-box;
-      -webkit-box-sizing: content-box;
 
       &::-webkit-search-decoration,
       &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
+        appearance: none;
       }
     }
   }
@@ -96,12 +95,12 @@
 
   .md-shadow-bottom-z-1,
   .mat-shadow-bottom-z-1 {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+    box-shadow: 0 2px 5px 0 rgba(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);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 40%);
   }
 
   .md-shadow-animated.md-shadow,

package/common/styles/core/_toolbar.scss

@@ -15,30 +15,37 @@
       height: 48px;
     }
   }
+
   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/common/styles/core/_whiteframe.scss

@@ -1,8 +1,8 @@
 // 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);
+$mat-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 26%);
+$mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 40%);
 
 // Whiteframes
 
@@ -13,21 +13,29 @@ $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: 0 1px 3px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-2dp: 0 1px 5px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-3dp: 0 1px 8px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-4dp: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 10 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-5dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-6dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 6px 10 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 6px 10 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-7dp: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
   0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;

package/common/styles/font/README.md

@@ -1,8 +1,10 @@
 The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
 
 ```html
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+/>
 ```
 
 Read more in our full usage guide:

package/common/styles/font/_font.scss

@@ -7,6 +7,7 @@ $mat-font-url: 'styles/font/' !default;
     font-weight: 400;
     src: url($mat-font-url + 'MaterialIcons-Regular-v48.woff2') format('woff2');
   }
+
   .material-icons {
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font-family: 'Material Icons';
@@ -52,18 +53,21 @@ $mat-font-url: 'styles/font/' !default;
     height: 18px;
     width: 18px;
   }
+
   .material-icons.md-24,
   .material-icons.mat-24 {
     font-size: 24px;
     height: 24px;
     width: 24px;
   }
+
   .material-icons.md-36,
   .material-icons.mat-36 {
     font-size: 36px;
     height: 36px;
     width: 36px;
   }
+
   .material-icons.md-48,
   .material-icons.mat-48 {
     font-size: 48px;
@@ -74,20 +78,22 @@ $mat-font-url: 'styles/font/' !default;
   // Rules for using icons as black on a light background.
   .material-icons.md-dark,
   .material-icons.mat-dark {
-    color: rgba(0, 0, 0, 0.54);
+    color: rgba(0, 0, 0, 54%);
   }
+
   .material-icons.md-dark.md-inactive,
   .material-icons.mat-dark.mat-inactive {
-    color: rgba(0, 0, 0, 0.26);
+    color: rgba(0, 0, 0, 26%);
   }
 
   // Rules for using icons as white on a dark background.
   .material-icons.md-light,
   .material-icons.mat-light {
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 100%);
   }
+
   .material-icons.md-light.md-inactive,
   .material-icons.mat-light.mat-inactive {
-    color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 30%);
   }
 }

package/common/styles/utilities/_general.scss

@@ -4,46 +4,60 @@
     [tabindex]:focus {
       outline: none;
     }
+
     .radius-none {
       border-radius: 0;
     }
+
     .overflow-hidden {
       overflow: hidden;
     }
+
     .overflow-auto {
       overflow: auto;
     }
+
     .overflow-visible {
       overflow: visible;
     }
+
     .block {
       display: block;
     }
+
     .inline-block {
       display: inline-block;
     }
+
     .relative {
       position: relative;
     }
+
     .fixed {
       position: fixed;
     }
+
     .height-auto {
       min-height: 0;
     }
+
     .z-3 {
       z-index: 3;
     }
+
     .z-2 {
       z-index: 2;
     }
+
     .z-1 {
       z-index: 1;
     }
+
     .focus-weight:focus {
       outline: 0;
       font-weight: 700;
     }
+
     .cursor-pointer:hover {
       cursor: pointer;
     }

package/common/styles/utilities/_text.scss

@@ -10,73 +10,94 @@
         font-size: 60%;
       }
     }
+
     .text-normal {
       font-style: normal;
     }
+
     .text-center {
       text-align: center;
     }
+
     .text-left {
       text-align: left;
     }
+
     .text-right {
       text-align: right;
     }
+
     .text-xs,
     .text-sm,
     .text-md,
     .text-lg {
       text-rendering: optimizeLegibility;
     }
+
     .text-micro {
       font-size: 10px;
       font-weight: normal;
       letter-spacing: 1px;
     }
+
     .text-xs {
       font-size: 50%;
     }
+
     .text-sm {
       font-size: 70%;
     }
+
     .text-md {
       font-size: 80%;
     }
+
     .text-lg {
       font-size: 110%;
     }
+
     .text-xl {
       font-size: 120%;
     }
+
     .text-xxl {
       font-size: 130%;
     }
+
     .text-30 {
       font-size: 30px;
     }
+
     .text-super {
       font-size: 60px;
     }
+
     .text-wrap {
       white-space: normal;
     }
+
     .text-break {
       word-break: break-word;
     }
+
     .text-upper {
       text-transform: uppercase;
     }
+
     .text-lower {
       text-transform: lowercase;
     }
+
     .text-caps {
       text-transform: capitalize;
     }
+
     .text-truncate {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .text-nodecoration {
       text-decoration: none;
     }

package/covalent-core.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
+/// <amd-module name="@covalent/core" />
+export * from './public_api';