@covalent/core 4.0.0-beta.2 → 4.1.0-develop.2

package/common/styles/colors/_colors.scss

@@ -1,7 +0,0 @@
-@import 'colors-dark';
-@import 'colors-light';
-
-@mixin covalent-colors() {
-  @include td-colors-light();
-  @include td-colors-dark();
-}

package/common/styles/core/_button.scss

@@ -1,60 +0,0 @@
-@import '../theme-functions';
-@import '../rtl';
-
-// Standard button sizing.
-$mat-button-padding: 0 rem(0.6) !default;
-$mat-button-min-width: rem(8.8) !default;
-$mat-button-margin: rem(0.6) rem(0.8) !default;
-$mat-button-line-height: rem(3.6) !default;
-$mat-button-border-radius: 3px !default;
-
-// FAB sizing.
-$mat-fab-border-radius: 50%;
-$mat-fab-size: rem(5.6) !default;
-$mat-fab-line-height: rem(5.6) !default;
-$mat-fab-padding: rem(1.6) !default;
-$mat-fab-mini-size: rem(4) !default;
-$mat-fab-mini-line-height: rem(4) !default;
-
-// Icon button sizing.
-$mat-icon-button-height: rem(4) !default;
-$mat-icon-button-width: rem(4) !default;
-$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) {
-  [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 td-button-utilities() {
-  $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] {
-      &.mat-icon-button-mini {
-        height: 24px;
-        line-height: 24px;
-        width: 24px;
-      }
-    }
-  }
-}

package/common/styles/core/_card.scss

@@ -1,184 +0,0 @@
-@import '../variables';
-
-@function makelongshadow($color) {
-  $val: 0 0 $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, 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;
-        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: 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,
-        .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;
-          }
-        }
-      }
-    }
-
-    &: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;
-          }
-        }
-      }
-    }
-  }
-
-  .mat-card-colored {
-    &[href],
-    &[ng-reflect-href] {
-      &:hover {
-        cursor: pointer;
-        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, 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, 20%);
-          background-position: -100% 100%;
-        }
-      }
-
-      & mat-toolbar {
-        background-size: 200% 100%;
-        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;
-      overflow: hidden;
-
-      mat-icon,
-      .mat-icon {
-        opacity: 0.65;
-        color: white;
-        font-size: 8rem;
-        @include longshadow(darken($color, 5%));
-      }
-    }
-  }
-}

package/common/styles/core/_content.scss

@@ -1,43 +0,0 @@
-@mixin td-content-utilities() {
-  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.
-    &.auto-scroll {
-      -webkit-overflow-scrolling: auto;
-    }
-  }
-
-  // Overall app layout height
-  mat-sidenav-container {
-    & > md-content,
-    & > [md-content],
-    & > .md-content,
-    & > mat-content,
-    & > [mat-content],
-    & > .mat-content {
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-}

package/common/styles/core/_core.scss

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

package/common/styles/core/_divider.scss

@@ -1,16 +0,0 @@
-@import '../rtl';
-
-@mixin td-divider-utilities() {
-  // deprecated
-  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/common/styles/core/_icons.scss

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

package/common/styles/core/_list.scss

@@ -1,8 +0,0 @@
-@mixin td-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/common/styles/core/_sidenav.scss

@@ -1,22 +0,0 @@
-@import '../variables';
-
-@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,
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-}

package/common/styles/core/_structure.scss

@@ -1,127 +0,0 @@
-@import '../variables';
-
-@mixin td-structure-utilities() {
-  html,
-  body {
-    height: 100%;
-    color: rgba(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;
-    appearance: button;
-
-    &[disabled] {
-      cursor: default;
-    }
-  }
-
-  textarea {
-    vertical-align: top;
-    overflow: auto;
-  }
-
-  input {
-    &[type='search'] {
-      appearance: textfield;
-      box-sizing: content-box;
-
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button {
-        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, 26%);
-  }
-
-  .md-shadow-bottom-z-2,
-  .mat-shadow-bottom-z-2 {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 40%);
-  }
-
-  .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/common/styles/core/_toolbar.scss

@@ -1,53 +0,0 @@
-@mixin td-toolbar-utilities() {
-  body[dense] mat-toolbar,
-  body[dense] mat-toolbar-row,
-  mat-toolbar[dense],
-  mat-toolbar-row[dense] {
-    &.mat-toolbar-multiple-rows {
-      .mat-toolbar-row,
-      .mat-toolbar-single-row {
-        height: 48px;
-      }
-    }
-
-    &.mat-toolbar-single-row,
-    &.mat-toolbar-row {
-      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,130 +0,0 @@
-// 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, 26%);
-$mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 40%);
-
-// 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: 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;
-$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;
-$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;
-$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;
-$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;
-$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;
-$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;
-$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;
-$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;
-$whiteframe-shadow-10dp: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 10 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-shadow-11dp: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 4px 20 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-shadow-12dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-shadow-13dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-shadow-14dp: 0 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-
-@mixin td-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;
-  }
-}