@covalent/core 4.1.0-develop.2 → 4.1.0-develop.6

package/common/styles/colors/_colors.scss

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

package/common/styles/core/_button.scss

@@ -0,0 +1,90 @@
+@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

@@ -0,0 +1,189 @@
+@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

@@ -0,0 +1,43 @@
+@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

@@ -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 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

@@ -0,0 +1,16 @@
+@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

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,127 @@
+@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

@@ -0,0 +1,53 @@
+@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;
+    }
+  }
+}