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

package/common/styles/core/_whiteframe.scss

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

package/common/styles/font/_font.scss

@@ -0,0 +1,99 @@
+$mat-font-url: 'styles/font/' !default;
+
+@mixin covalent-material-icons() {
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    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';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px; /* Preferred icon size */
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+  }
+
+  // Ensure our size prevails over material
+  mat-icon.material-icons {
+    &,
+    &.mat-icon {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // Rules for sizing the icon.
+  .material-icons.md-18,
+  .material-icons.mat-18 {
+    font-size: 18px;
+    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;
+    height: 48px;
+    width: 48px;
+  }
+
+  // Rules for using icons as black on a light background.
+  .material-icons.md-dark,
+  .material-icons.mat-dark {
+    color: rgba(0, 0, 0, 54%);
+  }
+
+  .material-icons.md-dark.md-inactive,
+  .material-icons.mat-dark.mat-inactive {
+    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, 100%);
+  }
+
+  .material-icons.md-light.md-inactive,
+  .material-icons.mat-light.mat-inactive {
+    color: rgba(255, 255, 255, 30%);
+  }
+}

package/common/styles/utilities/_general.scss

@@ -0,0 +1,65 @@
+@mixin td-general-utilities() {
+  body {
+    // Angular 4 added tabindex to everything, this style removes the outline:
+    [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/_pad.scss

@@ -0,0 +1,36 @@
+@mixin pad($direction: '') {
+  .pad#{$direction} {
+    padding#{$direction}: 16px;
+  }
+  .pad#{$direction}-xxl {
+    padding#{$direction}: 56px;
+  }
+  .pad#{$direction}-xl {
+    padding#{$direction}: 48px;
+  }
+  .pad#{$direction}-lg {
+    padding#{$direction}: 32px;
+  }
+  .pad#{$direction}-md {
+    padding#{$direction}: 24px;
+  }
+  .pad#{$direction}-sm {
+    padding#{$direction}: 8px;
+  }
+  .pad#{$direction}-xs {
+    padding#{$direction}: 4px;
+  }
+  .pad#{$direction}-none {
+    padding#{$direction}: 0;
+  }
+}
+
+@mixin td-padding-utilities() {
+  body {
+    @include pad();
+    @include pad(-bottom);
+    @include pad(-top);
+    @include pad(-left);
+    @include pad(-right);
+  }
+}

package/common/styles/utilities/_pull.scss

@@ -0,0 +1,36 @@
+@mixin pull($direction: '') {
+  .pull#{$direction}-xxl {
+    margin#{$direction}: -56px;
+  }
+  .pull#{$direction}-xl {
+    margin#{$direction}: -48px;
+  }
+  .pull#{$direction}-lg {
+    margin#{$direction}: -32px;
+  }
+  .pull#{$direction}-md {
+    margin#{$direction}: -24px;
+  }
+  .pull#{$direction} {
+    margin#{$direction}: -16px;
+  }
+  .pull#{$direction}-sm {
+    margin#{$direction}: -8px;
+  }
+  .pull#{$direction}-xs {
+    margin#{$direction}: -4px;
+  }
+  .pull#{$direction}-none {
+    margin#{$direction}: 0;
+  }
+}
+
+@mixin td-pulling-utilities() {
+  body {
+    @include pull();
+    @include pull(-bottom);
+    @include pull(-top);
+    @include pull(-left);
+    @include pull(-right);
+  }
+}

package/common/styles/utilities/_push.scss

@@ -0,0 +1,36 @@
+@mixin push($direction: '') {
+  .push#{$direction} {
+    margin#{$direction}: 16px;
+  }
+  .push#{$direction}-xxl {
+    margin#{$direction}: 56px;
+  }
+  .push#{$direction}-xl {
+    margin#{$direction}: 48px;
+  }
+  .push#{$direction}-lg {
+    margin#{$direction}: 32px;
+  }
+  .push#{$direction}-md {
+    margin#{$direction}: 24px;
+  }
+  .push#{$direction}-sm {
+    margin#{$direction}: 8px;
+  }
+  .push#{$direction}-xs {
+    margin#{$direction}: 4px;
+  }
+  .push#{$direction}-none {
+    margin#{$direction}: 0;
+  }
+}
+
+@mixin td-pushing-utilities() {
+  body {
+    @include push();
+    @include push(-bottom);
+    @include push(-top);
+    @include push(-left);
+    @include push(-right);
+  }
+}

package/common/styles/utilities/_size.scss

@@ -0,0 +1,24 @@
+@mixin td-size-utilities() {
+  $size-list: 12 16 24 32 50 64 72 100 128 256;
+  @each $current-size in $size-list {
+    $i: index($size-list, $current-size);
+    .size-#{$current-size} {
+      height: #{$current-size}px;
+      width: #{$current-size}px;
+    }
+  }
+  @each $current-size in $size-list {
+    $i: index($size-list, $current-size);
+    .size-height-#{$current-size} {
+      height: #{$current-size}px;
+      width: auto;
+    }
+  }
+  @each $current-size in $size-list {
+    $i: index($size-list, $current-size);
+    .size-width-#{$current-size} {
+      width: #{$current-size}px;
+      height: auto;
+    }
+  }
+}

package/common/styles/utilities/_text.scss

@@ -0,0 +1,105 @@
+@mixin td-text-utilities() {
+  body {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      & > small {
+        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/common/styles/utilities/_utilities.scss

@@ -0,0 +1,15 @@
+@import 'general';
+@import 'pad';
+@import 'pull';
+@import 'push';
+@import 'size';
+@import 'text';
+
+@mixin covalent-utilities() {
+  @include td-general-utilities();
+  @include td-padding-utilities();
+  @include td-pulling-utilities();
+  @include td-pushing-utilities();
+  @include td-size-utilities();
+  @include td-text-utilities();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/core",
-  "version": "4.1.0-develop.2",
+  "version": "4.1.0-develop.6",
   "exports": {
     ".": {
       "sass": "./theming/_all-theme.scss",
@@ -123,7 +123,7 @@
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0",
-    "@covalent/core": "4.1.0-develop.2",
+    "@covalent/core": "4.1.0-develop.6",
     "@angular/router": "^13.2.0",
     "@angular/platform-browser": "^13.2.0",
     "@angular/material": "^13.2.1",