@progress/kendo-theme-material 5.12.1-dev.0 → 5.12.1-dev.1

package/scss/filter/_index.scss

@@ -13,6 +13,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/filter/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/filter/_layout.scss";
+@import "@progress/kendo-theme-default/scss/filter/_layout.scss";

package/scss/filter/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/filter/_theme.scss";
+@import "@progress/kendo-theme-default/scss/filter/_theme.scss";

package/scss/filter/_variables.scss

@@ -1,5 +1,5 @@
 // Filter expression builder
-$filter-padding-x: $padding-x-sm !default;
+$filter-padding-x: $kendo-padding-sm-x !default;
 $filter-padding-y: $filter-padding-x !default;
 
 $filter-bottom-margin: 2.1em !default;
@@ -7,7 +7,7 @@ $filter-line-size: 1px !default;
 
 $filter-operator-dropdown-width: 15em !default;
 
-$filter-preview-field-text: $primary !default;
-$filter-preview-operator-text: $subtle-text !default;
+$filter-preview-field-text: $kendo-color-primary !default;
+$filter-preview-operator-text: $kendo-subtle-text !default;
 
 $filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;

package/scss/floating-label/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/floating-label/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/floating-label/_layout.scss";
+@import "@progress/kendo-theme-default/scss/floating-label/_layout.scss";
 
 
 @include exports( "floating-label/layout/material" ) {

package/scss/floating-label/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/floating-label/_theme.scss";
+@import "@progress/kendo-theme-default/scss/floating-label/_theme.scss";
 
 
 @include exports( "floating-label/theme/material" ) {
@@ -10,7 +10,7 @@
         .k-invalid + .k-label,
         .ng-invalid.ng-touched + .k-label,
         .ng-invalid.ng-dirty + .k-label {
-            @include fill( $color: $error );
+            @include fill( $color: $kendo-color-error );
         }
     }
 

package/scss/floating-label/_variables.scss

@@ -13,7 +13,7 @@ $floating-label-focus-offset-y: 0px !default;
 $floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
 
 $floating-label-bg: null !default;
-$floating-label-text: $subtle-text !default;
+$floating-label-text: $kendo-subtle-text !default;
 
 $floating-label-focus-bg: null !default;
-$floating-label-focus-text: $primary !default;
+$floating-label-focus-text: $kendo-color-primary !default;

package/scss/forms/_index.scss

@@ -12,6 +12,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/forms/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/forms/_layout.scss";
+@import "@progress/kendo-theme-default/scss/forms/_layout.scss";
 
 @include exports("edit-form/layout/material") {
 
@@ -33,10 +33,6 @@
         .k-validator-tooltip {
             bottom: 0;
             transform: translateY(100%) translateY($tooltip-callout-size);
-
-            .k-ie & {
-                left: 0; // TODO: Remove once we drop IE support
-            }
         }
     }
 

package/scss/forms/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/forms/_theme.scss";
+@import "@progress/kendo-theme-default/scss/forms/_theme.scss";

package/scss/forms/_variables.scss

@@ -1,63 +1,78 @@
 // Forms
-$form-spacer: $padding-x * 2 !default;
+$kendo-form-spacer: $kendo-padding-md-x * 2 !default;
 
-$form-font-size: $font-size !default;
-$form-line-height: $line-height !default;
-$form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
-$form-line-height-sm: $line-height-sm !default;
-$form-line-height-lg: $line-height-lg !default;
+$kendo-form-font-size: $font-size !default;
+$kendo-form-line-height: $line-height !default;
+$kendo-form-line-height-em: calc( #{$kendo-form-line-height} * 1em ) !default;
+$kendo-form-line-height-sm: $line-height-sm !default;
+$kendo-form-line-height-lg: $line-height-lg !default;
 
-$form-fieldset-margin: 2em 0 0 !default;
-$form-fieldset-padding: 0px !default;
+$kendo-form-fieldset-margin: 2em 0 0 !default;
+$kendo-form-fieldset-padding: 0px !default;
 
-$form-legend-margin: 0 0 1em !default;
-$form-legend-padding: 0px !default;
-$form-legend-border-width: 0 0 2px !default;
-$form-legend-border-style: solid !default;
-$form-legend-border-color: $component-border !default;
-$form-legend-width: 100% !default;
-$form-legend-font-size: 14px !default;
-$form-legend-text-transform: uppercase !default;
+$kendo-form-legend-margin: 0 0 1em !default;
+$kendo-form-legend-padding: 0px !default;
+$kendo-form-legend-border-width: 0 0 2px !default;
+$kendo-form-legend-border-style: solid !default;
+$kendo-form-legend-border-color: $kendo-component-border !default;
+$kendo-form-legend-width: 100% !default;
+$kendo-form-legend-font-size: $font-size !default;
+$kendo-form-legend-text-transform: uppercase !default;
 
-$form-label-margin-bottom: 0px !default;
+$kendo-form-label-margin-bottom: 0px !default;
 
-$form-button-margin-x: 8px !default;
+$kendo-form-button-margin-x: 8px !default;
 
-$form-hint-font-size: 12px !default;
-$form-hint-font-style: normal !default;
-$form-hint-margin-top: 4px !default;
+$kendo-form-hint-font-size: $font-size-sm !default;
+$kendo-form-hint-font-style: normal !default;
+$kendo-form-hint-margin-top: 4px !default;
 
-$form-field-margin-top: 1em !default;
+$kendo-form-rows-spacing-sm: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-form-rows-spacing-md: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-form-rows-spacing-lg: k-map-get( $kendo-spacing, 7 ) !default;
 
-$form-separator-margin: $form-field-margin-top 0 0 !default;
-$form-separator-border-color: $form-legend-border-color !default;
+$kendo-form-separator-margin: $kendo-form-rows-spacing-md 0 0 !default;
+$kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
-$horizontal-form-label-padding-top: 5px !default;
-$horizontal-form-label-margin-x: 10px !default;
-$horizontal-form-label-width: 25% !default;
-$horizontal-form-label-align: flex-end !default;
+$kendo-horizontal-form-label-padding-top: 5px !default;
+$kendo-horizontal-form-label-margin-x: 10px !default;
+$kendo-horizontal-form-label-width: 25% !default;
+$kendo-horizontal-form-label-align: flex-end !default;
 
-$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;
+$kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;
 
-$inline-form-element-width: 25% !default;
+$kendo-inline-form-element-width: 25% !default;
 
-$forms-invalid-color: inherit !default;
+$kendo-forms-invalid-color: inherit !default;
 
 
 // Label
-$label-optional-margin-x: 6px !default;
-$label-optional-font-size: 12px !default;
-$label-optional-font-style: italic !default;
+$kendo-label-optional-margin-x: 6px !default;
+$kendo-label-optional-font-size: 12px !default;
+$kendo-label-optional-font-style: italic !default;
 
 
 // Fieldset
-$fieldset-margin: 30px !default;
-$fieldset-font-size: $h4-font-size !default;
-
-$fieldset-bg: null !default;
-$fieldset-text: null !default;
-$fieldset-border: null !default;
-
-$fieldset-legend-bg: null !default;
-$fieldset-legend-text: null !default;
-$fieldset-legend-border: null !default;
+$kendo-fieldset-margin: 30px !default;
+$kendo-fieldset-font-size: $h4-font-size !default;
+
+$kendo-fieldset-bg: null !default;
+$kendo-fieldset-text: null !default;
+$kendo-fieldset-border: null !default;
+
+$kendo-fieldset-legend-bg: null !default;
+$kendo-fieldset-legend-text: null !default;
+$kendo-fieldset-legend-border: null !default;
+
+// Sizes
+$kendo-form-sizes: (
+    sm: (
+        form-rows-spacing: $kendo-form-rows-spacing-sm
+    ),
+    md: (
+        form-rows-spacing: $kendo-form-rows-spacing-md
+    ),
+    lg: (
+        form-rows-spacing: $kendo-form-rows-spacing-lg
+    )
+) !default;

package/scss/gantt/_index.scss

@@ -14,6 +14,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/gantt/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/gantt/_layout.scss";
+@import "@progress/kendo-theme-default/scss/gantt/_layout.scss";
 
 @include exports("gantt/layout/material") {
 
@@ -7,7 +7,7 @@
         .k-rtl & {
 
             .k-header {
-                border-width: 0 $grid-cell-vertical-border-width 1px 0;
+                border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
         }
     }

package/scss/gantt/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/gantt/_theme.scss";
+@import "@progress/kendo-theme-default/scss/gantt/_theme.scss";
 
 @include exports("gantt/theme/material") {
 
@@ -7,14 +7,14 @@
     .k-gantt-timeline {
 
         tbody > tr:not(:only-child) > .k-header {
-            border-left-color: $grid-border;
+            border-left-color: $kendo-grid-border;
         }
         .k-rtl & {
 
             .k-grid-header {
 
                 tbody > tr:not(:only-child) > .k-header {
-                    border-right-color: $grid-border;
+                    border-right-color: $kendo-grid-border;
                 }
             }
         }

package/scss/gantt/_variables.scss

@@ -4,9 +4,9 @@ $gantt-font-family: $font-family !default;
 $gantt-font-size: $font-size !default;
 $gantt-line-height: $line-height !default;
 
-$gantt-bg: $component-bg !default;
-$gantt-text: $component-text !default;
-$gantt-border: $component-border !default;
+$gantt-bg: $kendo-component-bg !default;
+$gantt-text: $kendo-component-text !default;
+$gantt-border: $kendo-component-border !default;
 
 $gantt-treelist-bg: null !default;
 $gantt-treelist-text: null !default;
@@ -17,8 +17,8 @@ $gantt-nonwork-text: null !default;
 $gantt-nonwork-border: null !default;
 
 $gantt-line-size: 2px !default;
-$gantt-line-fill: k-color-mix( $panel-text, $panel-bg ) !default;
-$gantt-line-selected-fill: $selected-bg !default;
+$gantt-line-fill: k-color-mix( $gantt-text, $gantt-bg ) !default;
+$gantt-line-selected-fill: $kendo-selected-bg !default;
 
 $gantt-dot-size: 8px !default;
 $gantt-dot-spacing: 4px !default;
@@ -27,27 +27,27 @@ $gantt-dot-border: null !default;
 $gantt-dot-hover-bg: $gantt-bg !default;
 $gantt-dot-hover-border: $gantt-text !default;
 
-$gantt-milestone-bg: $primary !default;
-$gantt-milestone-border: $primary !default;
-$gantt-milestone-selected-bg: $secondary !default;
-$gantt-milestone-selected-border: $secondary !default;
+$gantt-milestone-bg: $kendo-color-primary !default;
+$gantt-milestone-border: $kendo-color-primary !default;
+$gantt-milestone-selected-bg: $kendo-color-secondary !default;
+$gantt-milestone-selected-border: $kendo-color-secondary !default;
 
-$gantt-summary-bg: k-color-mix( $primary, $gantt-bg ) !default;
-$gantt-summary-progress-bg: $primary !default;
-$gantt-summary-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
-$gantt-summary-progress-selected-bg: $secondary !default;
+$gantt-summary-bg: k-color-mix( $kendo-color-primary, $gantt-bg ) !default;
+$gantt-summary-progress-bg: $kendo-color-primary !default;
+$gantt-summary-selected-bg: k-color-mix( $kendo-color-secondary, $gantt-bg ) !default;
+$gantt-summary-progress-selected-bg: $kendo-color-secondary !default;
 
-$gantt-task-padding-x: k-map-get( $spacing, 2 ) !default;
-$gantt-task-padding-y: k-map-get( $spacing, 1 ) !default;
+$gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $gantt-task-border-width: 0px !default;
-$gantt-task-bg: k-color-mix( $primary, $gantt-bg ) !default;
-$gantt-task-text: $primary-contrast !default;
+$gantt-task-bg: k-color-mix( $kendo-color-primary, $gantt-bg ) !default;
+$gantt-task-text: $kendo-color-primary-contrast !default;
 $gantt-task-border: null !default;
-$gantt-task-progress-bg: $primary !default;
-$gantt-task-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
-$gantt-task-selected-text: $secondary-contrast !default;
+$gantt-task-progress-bg: $kendo-color-primary !default;
+$gantt-task-selected-bg: k-color-mix( $kendo-color-secondary, $gantt-bg ) !default;
+$gantt-task-selected-text: $kendo-color-secondary-contrast !default;
 $gantt-task-selected-border: null !default;
-$gantt-task-progress-selected-bg: $secondary !default;
+$gantt-task-progress-selected-bg: $kendo-color-secondary !default;
 
 $gantt-planned-margin-y: .35em !default;
 $gantt-planned-border-width: 2px !default;
@@ -58,8 +58,8 @@ $gantt-planned-dependency-margin-y: .7em !default;
 $gantt-planned-moment-width: 6px !default;
 $gantt-planned-moment-height: $gantt-planned-moment-width !default;
 $gantt-planned-moment-border-radius: calc( ( #{$gantt-planned-border-width * 2} + #{$gantt-planned-moment-width} ) / 2 ) !default;
-$gantt-planned-moment-left-margin-x: calc( #{$gantt-planned-border-width} / 2 - #{$gantt-planned-moment-border-radius} ) !default;
-$gantt-planned-milestone-moment-margin-x: calc( #{ $gantt-planned-moment-width / 2 }) !default;
+$gantt-planned-moment-left-margin-x: calc( #{k-math-div( $gantt-planned-border-width, 2 )} - #{$gantt-planned-moment-border-radius} ) !default;
+$gantt-planned-milestone-moment-margin-x: k-math-div( $gantt-planned-moment-width, 2 ) !default;
 
 $gantt-planned-duration-height: $gantt-planned-border-width !default;
 $gantt-planned-duration-hover-height: calc( #{$gantt-planned-border-width} + 1px ) !default;
@@ -74,13 +74,13 @@ $gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
 
 $gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
-$gantt-planned-bg: $primary !default;
+$gantt-planned-bg: $kendo-color-primary !default;
 $gantt-planned-border: $gantt-planned-bg !default;
 
-$gantt-delayed-bg: $error !default;
+$gantt-delayed-bg: $kendo-color-error !default;
 $gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
 
-$gantt-advanced-bg: $success !default;
+$gantt-advanced-bg: $kendo-color-success !default;
 $gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
 
 $gantt-action-on-offset-text: #000000 !default;
@@ -89,5 +89,5 @@ $gantt-offset-resize-handler-top: 50% !default;
 $gantt-validation-tooltip-width: 200px !default;
 $gantt-validation-tooltip-label-width: 50px !default;
 $gantt-validation-tooltip-border: #656565 !default;
-$gantt-validation-tooltip-valid-border: $success !default;
-$gantt-validation-tooltip-invalid-border: $error !default;
+$gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$gantt-validation-tooltip-invalid-border: $kendo-color-error !default;

package/scss/grid/_index.scss

@@ -20,13 +20,14 @@
 @import "../menu/_index.scss";
 @import "../dialog/_index.scss";
 @import "../pager/_index.scss";
+@import "../chip/_index.scss";
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
-@import "../list/_index.scss";
+@import "../table/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/grid/_layout.scss

@@ -1,39 +1,13 @@
-$grid-hierarchy-col-width: 32px !default;
-// TODO: perhaps these should be the values for cell-padding-x/-y
-$grid-grouping-row-border-top: 0px !default;
-$grid-group-footer-border-y: 1px !default;
-$grid-group-footer-second-cell-border: 0px !default;
-$grid-header-first-border: 1px !default;
-$grid-sorted-icon-spacing: 4px !default;
-$grid-header-menu-icon-spacing: 14px !default;
-$grid-group-indicator-border-radius: calc( #{$font-size} + #{$kendo-button-padding-y} ) !default;
-$grid-group-indicator-gap: 8px !default;
-
-$grid-group-dropclue-height: calc( #{$font-size * 2} + #{$padding-y * 2} ) !default;
-$grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-header-padding-y * 2} - #{$grid-group-dropclue-height} ) / 2) !default;
-
-@import "~@progress/kendo-theme-default/scss/grid/_layout.scss";
+@import "@progress/kendo-theme-default/scss/grid/_layout.scss";
 
 @include exports ("grid/layout/material") {
 
     .k-grid {
 
-        .k-group-footer td {
+        .k-group-footer .k-table-td {
             border-top-width: 0;
         }
 
-        &[dir="rtl"],
-        .k-rtl & {
-
-            th {
-                border-width: 0 $grid-cell-vertical-border-width 1px 0;
-            }
-
-            td {
-                border-width: 0 $grid-cell-vertical-border-width $grid-cell-horizontal-border-width 0;
-            }
-        }
-
         .k-command-cell .k-button {
             @include box-shadow( none );
         }
@@ -41,7 +15,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
     .k-grid-header {
 
-        th {
+        .k-table-th {
             font-weight: 700;
 
             .k-grid-filter {
@@ -58,7 +32,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             border-radius: 50%;
         }
 
-        .k-resizable-columns th:not(.k-group-cell) {
+        .k-resizable-columns .k-table-th:not(.k-group-cell) {
             border-right-width: 1px;
             border-right-style: solid;
         }
@@ -79,18 +53,10 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
     }
 
-    .k-grouping-header {
-
-        .k-group-indicator {
-            border-width: 0;
-            line-height: $kendo-button-line-height;
-        }
-    }
-
     .k-grouping-dropclue {
         width: 0;
-        height: $grid-group-dropclue-height;
-        top: $grid-group-dropclue-top;
+        height: $kendo-grid-group-dropclue-height;
+        top: $kendo-grid-group-dropclue-top;
         border-style: solid;
         border-width: 0 2px 0 0;