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

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 "../utils/_float.scss";
+// @import "../utils/_spacer.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;
 

package/scss/grid/_theme.scss

@@ -1,151 +1,118 @@
-@import "~@progress/kendo-theme-default/scss/grid/_theme.scss";
+@import "@progress/kendo-theme-default/scss/grid/_theme.scss";
 
 @include exports ("grid/theme/material") {
-    $grid-filter-button-focus: rgba( black, .12 ) !default;
+    $kendo-grid-filter-button-focus: rgba( black, .12 ) !default;
 
     .k-grid {
 
         // Selected state
-        td.k-selected,
-        tr.k-selected {
-            color: $grid-selected-text;
-            background-color: $grid-selected-bg;
+        .k-table-td.k-selected,
+        .k-table-row.k-selected {
+            color: $kendo-grid-selected-text;
+            background-color: $kendo-grid-selected-bg;
         }
-        tr.k-selected > td {
+
+        .k-table-row.k-selected > .k-table-td {
             color: inherit;
             background-color: transparent;
         }
 
         // Hover, Focused state
-        table {
-            > tr:not(.k-detail-row):hover,
-            > tr:not(.k-detail-row).k-hover,
-            td:focus,
-            td.k-focus,
-            th:focus,
-            th.k-focus,
-            .k-master-row > td:focus,
-            .k-grouping-row > td:focus,
-            .k-detail-row > td:focus,
-            .k-group-footer > td:focus {
+        .k-table {
+            > .k-table-row:not(.k-detail-row):hover,
+            > .k-table-row:not(.k-detail-row).k-hover,
+            .k-table-td:focus,
+            .k-table-td.k-focus,
+            .k-table-th:focus,
+            .k-table-th.k-focus,
+            .k-master-row > .k-table-td:focus,
+            .k-grouping-row > .k-table-td:focus,
+            .k-detail-row > .k-table-td:focus,
+            .k-group-footer > .k-table-td:focus {
                 color: inherit;
-                background-color: $grid-hovered-bg;
+                background-color: $kendo-grid-hover-bg;
             }
 
-            tr:hover,
-            tr.k-hover {
+            .k-table-row:hover,
+            .k-table-row.k-hover {
                 .k-grid-header-sticky,
                 .k-grid-footer-sticky {
                     color: inherit;
-                    background-color: $grid-sticky-hovered-bg;
+                    background-color: $kendo-grid-sticky-hover-bg;
                 }
             }
 
-            td:focus,
-            td.k-focus,
-            th.k-focus,
-            th:focus,
-            .k-master-row > td:focus,
-            .k-grouping-row > td:focus,
-            .k-detail-row > td:focus,
-            .k-group-footer > td:focus {
-                &.k-grid-header-sticky,
-                &.k-grid-content-sticky,
-                &.k-grid-footer-sticky {
-                    color: inherit;
-                    background-color: $grid-sticky-hovered-bg;
+            .k-table-th,
+            .k-table-td,
+            .k-master-row > .k-table-td,
+            .k-grouping-row > .k-table-td,
+            .k-detail-row > .k-table-td,
+            .k-group-footer > .k-table-td {
+                &:focus,
+                &.k-focus {
+                    &.k-grid-header-sticky,
+                    &.k-grid-content-sticky,
+                    &.k-grid-footer-sticky {
+                        color: inherit;
+                        background-color: $kendo-grid-sticky-hover-bg;
+                    }
                 }
             }
-
         }
+
         .k-grid-pager:focus,
         .k-grid-pager.k-focus {
             color: inherit;
         }
 
-        th,
-        td {
-            border-left-color: transparent;
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-
-            th,
-            td {
-                border-right-color: transparent;
-            }
-
-            .k-grid-header {
-
-                thead > tr:not(:only-child) > th {
-                    border-right-color: $grid-border;
-                }
-            }
-
-            // Locked columns
-            .k-grid-header-locked,
-            .k-grid-content-locked,
-            .k-grid-header-locked thead > tr > th.k-header,
-            .k-grid-content-locked td {
-                border-left-color: $grid-sticky-header-border;
-                border-right-color: $grid-sticky-header-border;
-            }
-
-            .k-group-footer td {
-                border-top-width: 0;
-            }
-
-            .k-grid-header thead > tr:not(:only-child) > .k-grid-header-sticky,
-            .k-grid-footer-sticky {
-                border-right-color: $grid-sticky-header-border;
-                border-left-color: $grid-sticky-header-border;
-            }
+        .k-table-th,
+        .k-table-td {
+            border-inline-start-color: transparent;
         }
 
         .k-grid-header-locked,
         .k-grid-content-locked,
-        .k-grid-header-locked .k-header,
-        .k-grid-content-locked td {
-            border-top-color: $grid-header-border;
-            border-bottom-color: $grid-header-border;
+        .k-grid-header-locked .k-table-th,
+        .k-grid-content-locked .k-table-td {
+            border-top-color: $kendo-grid-header-border;
+            border-bottom-color: $kendo-grid-header-border;
 
             .k-group-footer {
-                &:hover td,
-                &.k-hover td {
+                &:hover .k-table-td,
+                &.k-hover .k-table-td {
                     color: inherit;
-                    @include fill( $bg: $grid-sticky-footer-hovered-bg );
+                    @include fill( $bg: $kendo-grid-sticky-footer-hover-bg );
                 }
             }
         }
 
         .k-master-row {
             .k-grid-content-sticky {
-                border-color: $grid-sticky-border;
-                border-bottom-color: $grid-header-border;
+                border-color: $kendo-grid-sticky-border;
+                border-bottom-color: $kendo-grid-header-border;
             }
             .k-grid-row-sticky {
-                border-top-color: $grid-sticky-border;
-                border-bottom-color: $grid-sticky-border;
+                border-top-color: $kendo-grid-sticky-border;
+                border-bottom-color: $kendo-grid-sticky-border;
             }
         }
     }
 
     kendo-grid {
         .k-grid-content-sticky {
-            border-color: $grid-sticky-border;
-            border-bottom-color: $grid-header-border;
+            border-color: $kendo-grid-sticky-border;
+            border-bottom-color: $kendo-grid-header-border;
         }
-        .k-grid-row-sticky td {
-            border-top-color: $grid-sticky-border;
-            border-bottom-color: $grid-sticky-border;
+        .k-grid-row-sticky .k-table-td {
+            border-top-color: $kendo-grid-sticky-border;
+            border-bottom-color: $kendo-grid-sticky-border;
         }
     }
 
     .k-grid-header {
         .k-sorted,
         .k-link:hover {
-            color: $grid-text;
+            color: $kendo-grid-text;
 
             > .k-icon {
                 color: inherit;
@@ -153,69 +120,55 @@
         }
 
         .k-grid-filter,
-        .k-header-column-menu,
+        .k-table-th-column-menu,
         .k-grid-header-menu,
         .k-hierarchy-cell .k-icon {
             &:hover {
-                color: $grid-text;
+                color: $kendo-grid-text;
                 background-color: transparent;
             }
 
             &:focus,
             &.k-focus {
-                color: $grid-text;
-                background-color: $grid-filter-button-focus;
+                color: $kendo-grid-text;
+                background-color: $kendo-grid-filter-button-focus;
                 box-shadow: none;
             }
 
             &.k-active {
-                color: $primary-contrast;
-                background-color: $primary;
+                color: $kendo-color-primary-contrast;
+                background-color: $kendo-color-primary;
             }
         }
 
-        thead > tr:not(:only-child) > th {
-            border-left-color: $grid-border;
-
+        .k-table-thead > .k-table-row:not(:only-child) > .k-table-th {
             &.k-grid-header-sticky {
-                border-right-color: $grid-sticky-header-border;
-                border-left-color: $grid-sticky-header-border;
+                border-right-color: $kendo-grid-sticky-header-border;
+                border-left-color: $kendo-grid-sticky-header-border;
             }
         }
 
     }
 
-    thead.k-grid-header > tr:not(:only-child) > th {
-        border-left-color: $grid-border;
-    }
-
-    .k-grouping-header .k-group-indicator {
-        background-color: $grid-selected-bg;
-
-        .k-link {
-            color: $grid-text;
-
-            .k-icon {
-                color: $grid-header-text;
-            }
-        }
+    .k-table-thead.k-grid-header > .k-table-row:not(:only-child) > .k-table-th {
+        border-inline-start-color: $kendo-grid-border;
     }
 
     .k-group-footer {
-        td,
+        .k-table-td,
         .k-grid-footer-sticky {
-            background: $grid-sticky-footer-bg;
+            background: $kendo-grid-sticky-footer-bg;
         }
 
-        &:hover td,
-        &.k-hover td {
-            @include fill( $bg: $grid-sticky-footer-hovered-bg );
+        &:hover .k-table-td,
+        &.k-hover .k-table-td {
+            @include fill( $bg: $kendo-grid-sticky-footer-hover-bg );
         }
     }
 
     .k-grouping-dropclue,
     .k-reorder-cue {
-        border-color: $primary;
+        border-color: $kendo-color-primary;
 
         &::before {
             border-color: transparent;
@@ -228,15 +181,15 @@
     }
 
     .k-resize-handle:hover .k-resize-handle-inner {
-        background-color: $primary;
+        background-color: $kendo-color-primary;
     }
 
     .k-column-resizer:hover {
-        color: $primary;
+        color: $kendo-color-primary;
     }
 
     .k-reorder-cue {
-        background-color: $primary;
+        background-color: $kendo-color-primary;
     }
 
     .k-columnmenu-item {