@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/components/grid/_theme.scss

@@ -0,0 +1,458 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+
+@mixin kendo-grid--theme-base() {
+
+    .k-grid-header,
+    .k-grid-header-wrap,
+    .k-grouping-header,
+    .k-grid .k-table-th,
+    .k-grid td,
+    .k-grid .k-table-td,
+    .k-grid-footer,
+    .k-grid-footer-wrap,
+    .k-grid-content-locked,
+    .k-grid-footer-locked,
+    .k-grid-header-locked,
+    .k-filter-row > .k-table-th,
+    .k-filter-row > td,
+    .k-filter-row > .k-table-td {
+        @include fill( $border: $kendo-grid-header-border );
+    }
+
+    .k-grid-header,
+    .k-grouping-header,
+    .k-grid-add-row,
+    .k-grid-footer {
+        @include fill(
+            $color: $kendo-grid-header-text,
+            $bg: $kendo-grid-header-bg
+        );
+    }
+
+    .k-grid .k-table {
+        background-color: inherit;
+    }
+
+    .k-grid-toolbar {
+        @include fill(
+            null,
+            null,
+            inherit,
+            null
+        );
+        @include box-shadow( none );
+    }
+
+    .k-grid-content {
+        // setting this background color resolves glitches in iOS
+        @include fill($bg: $kendo-grid-bg );
+    }
+
+    .k-group-footer td,
+    .k-grouping-row td,
+    .k-group-footer .k-table-td,
+    .k-grouping-row .k-table-td,
+    .k-table-tbody .k-group-cell {
+        @include fill(
+            $color: $kendo-grid-grouping-row-text,
+            $bg: $kendo-grid-grouping-row-bg
+        );
+    }
+
+    .k-grouping-dropclue {
+        &::before {
+            border-color: $kendo-grid-header-text transparent transparent;
+        }
+
+        &::after {
+            background-color: $kendo-grid-header-text;
+        }
+    }
+
+    .k-grid {
+        @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border );
+
+        // Alt row
+        .k-table-row.k-table-alt-row {
+            background-color: $kendo-grid-alt-bg;
+        }
+
+        // Hover state
+        .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
+        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
+            color: $kendo-grid-hover-text;
+            background-color: $kendo-grid-hover-bg;
+        }
+
+        // Selected state
+        td.k-selected,
+        .k-table-row.k-selected > td,
+        .k-table-td.k-selected,
+        .k-table-row.k-selected > .k-table-td {
+            color: $kendo-grid-selected-text;
+            background-color: $kendo-grid-selected-bg;
+        }
+
+        // Focused state
+        .k-table-th,
+        td,
+        .k-table-td,
+        .k-master-row > td,
+        .k-grouping-row > td,
+        .k-detail-row > td,
+        .k-group-footer > 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,
+        .k-grid-pager {
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-grid-focus-shadow, true );
+            }
+        }
+
+        .k-grid-filter,
+        .k-header-column-menu,
+        .k-grid-header-menu,
+        .k-hierarchy-cell .k-icon {
+            color: $kendo-grid-header-text;
+        }
+
+        .k-grouping-row {
+            background-color: $kendo-grid-grouping-row-bg;
+
+            .k-icon {
+                color: $kendo-grid-header-text;
+            }
+
+            .k-grid-content-sticky {
+                border-color: $kendo-grid-sticky-border;
+                border-top-color: $kendo-grid-header-border;
+            }
+        }
+
+        // Locked columns
+        .k-grid-header-locked,
+        .k-grid-content-locked,
+        .k-grid-header-locked .k-table-th,
+        .k-grid-content-locked td,
+        .k-grid-content-locked .k-table-td {
+            border-color: $kendo-grid-sticky-header-border;
+        }
+
+        .k-grid-content-locked {
+            .k-group-footer td,
+            .k-group-footer .k-table-td,
+            .k-group-cell {
+                @include fill( $border: $kendo-grid-header-border );
+            }
+
+            .k-grouping-row + .k-table-row td,
+            .k-grouping-row + .k-table-row .k-table-td {
+                border-top-color: $kendo-grid-header-border;
+            }
+
+            // Selected state
+            .k-selected td,
+            .k-selected .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
+
+            .k-selected.k-table-alt-row td,
+            .k-selected.k-table-alt-row .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
+
+            // Selected hover
+            .k-selected:hover td,
+            .k-selected.k-hover td,
+            .k-selected:hover .k-table-td,
+            .k-selected.k-hover .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-selected-hover-bg );
+            }
+        }
+
+        .k-grid-header-locked .k-table-th {
+            border-bottom-color: $kendo-grid-header-border;
+        }
+    }
+
+    col.k-sorted,
+    .k-table-th.k-sorted {
+        background-color: $kendo-grid-sorted-bg;
+    }
+
+    // Grid header
+    .k-grid-header {
+
+        .k-sort-icon,
+        .k-sort-order {
+            color: $kendo-grid-sorting-indicator-text;
+        }
+
+        .k-grid-filter,
+        .k-header-column-menu,
+        .k-grid-header-menu,
+        .k-hierarchy-cell .k-icon {
+            &:hover {
+                color: $kendo-button-hover-text;
+                background-color: $kendo-button-hover-bg;
+            }
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true );
+            }
+            &.k-active {
+                color: $kendo-selected-text;
+                background-color: $kendo-selected-bg;
+            }
+        }
+
+        .k-table-th.k-grid-header-sticky,
+        td.k-grid-header-sticky,
+        .k-table-td.k-grid-header-sticky,
+        .k-grid-header-sticky.k-sorted {
+            @include fill(
+                $color: $kendo-grid-sticky-header-text,
+                $bg: $kendo-grid-sticky-header-bg
+            );
+
+            border-right-color: $kendo-grid-sticky-header-border;
+            border-left-color: $kendo-grid-sticky-header-border;
+        }
+    }
+
+    // Grid footer
+    .k-grid-footer {
+        @include fill(
+            $kendo-grid-footer-text,
+            $kendo-grid-footer-bg,
+            $kendo-grid-footer-border
+        );
+        .k-grid-footer-sticky {
+            border-left-color: $kendo-grid-sticky-border;
+            border-right-color: $kendo-grid-sticky-border;
+            background-color: $kendo-grid-sticky-footer-bg;
+        }
+    }
+
+    // Selection Aggregates
+    .k-selection-aggregates {
+        @include fill(
+            $kendo-grid-selection-aggregates-text,
+            $kendo-grid-selection-aggregates-bg,
+            $kendo-grid-selection-aggregates-border
+        );
+    }
+
+    // Content
+    .k-master-row {
+        .k-grid-content-sticky {
+            border-color: $kendo-grid-sticky-border;
+            border-top-color: $kendo-grid-header-border;
+            background-color: $kendo-grid-sticky-bg;
+        }
+
+        .k-grid-row-sticky,
+        &.k-grid-row-sticky > .k-table-td {
+            border-top-color: $kendo-grid-sticky-border;
+            border-bottom-color: $kendo-grid-sticky-border;
+            background-color: $kendo-grid-sticky-bg;
+        }
+
+        &.k-table-alt-row {
+            .k-grid-content-sticky,
+            &.k-grid-row-sticky > .k-table-td,
+            .k-grid-row-sticky {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+            }
+        }
+
+        // Selected state
+        &.k-table-row.k-selected td.k-grid-content-sticky,
+        &.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
+        &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
+        &.k-table-row td.k-grid-content-sticky.k-selected,
+        &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
+        }
+
+        &.k-selected.k-table-alt-row td.k-grid-content-sticky,
+        &.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td,
+        &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
+        &.k-table-alt-row td.k-grid-content-sticky.k-selected,
+        &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
+        }
+
+
+        // Hovered state
+        &:hover .k-grid-content-sticky,
+        &:hover .k-grid-row-sticky,
+        &:hover.k-grid-row-sticky > .k-table-td,
+        &.k-hover .k-grid-content-sticky,
+        &.k-hover .k-grid-row-sticky,
+        &.k-hover.k-grid-row-sticky > .k-table-td {
+            background-color: $kendo-grid-sticky-hover-bg;
+        }
+
+
+        // Selected hover
+        &.k-selected:hover td.k-grid-content-sticky,
+        &.k-selected:hover .k-table-td.k-grid-row-sticky,
+        &.k-selected:hover.k-grid-row-sticky > .k-table-td,
+        &.k-selected.k-hover td.k-grid-content-sticky,
+        &.k-selected.k-hover .k-table-td.k-grid-row-sticky,
+        &.k-selected.k-hover.k-grid-row-sticky > .k-table-td,
+        &:hover td.k-grid-content-sticky.k-selected,
+        &.k-hover td.k-grid-content-sticky.k-selected,
+        &:hover .k-table-td.k-grid-content-sticky.k-selected,
+        &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
+        }
+    }
+
+    .k-grouping-row {
+        .k-grid-content-sticky {
+            @include fill( $bg: $kendo-grid-sticky-header-bg );
+        }
+
+        &:hover .k-grid-content-sticky,
+        &.k-hover .k-grid-content-sticky {
+            @include fill( $bg: $kendo-grid-sticky-hover-bg );
+        }
+    }
+
+    .k-column-list-item:hover,
+    .k-columnmenu-item:hover {
+        @include fill(
+            $kendo-list-item-hover-text,
+            $kendo-list-item-hover-bg
+        );
+    }
+    .k-column-list-item:focus,
+    .k-column-list-item.k-focus,
+    .k-columnmenu-item:focus,
+    .k-columnmenu-item.k-focus {
+        @include focus-indicator( $kendo-list-item-focus-shadow, true );
+    }
+
+    .k-columnmenu-item {
+        &.k-selected {
+            @include fill(
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
+            );
+        }
+    }
+
+    .k-column-menu {
+
+        .k-menu:not(.k-context-menu) {
+
+            @include fill(
+                $kendo-popup-text,
+                $kendo-popup-bg,
+                $kendo-popup-border
+            );
+
+            .k-item {
+                @include fill(
+                    $kendo-list-item-text,
+                    $kendo-list-item-bg
+                );
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $kendo-list-item-hover-text,
+                        $kendo-list-item-hover-bg
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $kendo-list-item-selected-text,
+                        $kendo-list-item-selected-bg
+                    );
+                }
+
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator( $kendo-list-item-focus-shadow, true );
+                }
+            }
+        }
+    }
+    .k-column-menu-tabbed {
+        background-color: $kendo-grid-column-menu-tabbed-bg;
+    }
+
+    .k-column-menu-group-header-text {
+        @include fill(
+            $kendo-grid-column-menu-group-header-text,
+            $kendo-grid-column-menu-group-header-bg,
+            $kendo-grid-column-menu-group-header-border
+        );
+    }
+
+    .k-check-all-wrap {
+        @include fill( $border: $kendo-popup-border );
+    }
+
+    .k-grid-norecords-template {
+        background-color: $kendo-grid-bg;
+        border-color: $kendo-grid-border;
+    }
+
+    // Row resizing
+    .k-resizer-wrap {
+
+        &.k-hover .k-row-resizer {
+            @include fill( $bg: $kendo-grid-row-resizer-hover-bg );
+        }
+
+        &.k-active .k-row-resizer {
+            @include fill( $bg: $kendo-grid-row-resizer-active-bg );
+        }
+
+    }
+
+}
+
+
+@mixin kendo-grid--theme() {
+    @include kendo-grid--theme-base();
+}

package/scss/components/grid/_variables.scss

@@ -0,0 +1,199 @@
+// Grid
+$kendo-grid-border-width: null !default;
+$kendo-grid-font-family: null !default;
+$kendo-grid-font-size: null !default;
+$kendo-grid-line-height: null !default;
+
+$kendo-grid-padding-x: null !default;
+$kendo-grid-padding-y: null !default;
+
+$kendo-grid-header-padding-x: null !default;
+$kendo-grid-header-padding-y: null !default;
+
+$kendo-grid-grouping-header-padding-x: null !default;
+$kendo-grid-grouping-header-padding-y: null !default;
+
+$kendo-grid-cell-padding-x: null !default;
+$kendo-grid-cell-padding-y: null !default;
+
+$kendo-grid-filter-cell-padding-x: null !default;
+$kendo-grid-filter-cell-padding-y: null !default;
+
+$kendo-grid-edit-cell-padding-x: null !default;
+$kendo-grid-edit-cell-padding-y: null !default;
+
+$kendo-grid-group-drop-hint-size: null !default;
+$kendo-grid-group-drop-hint-line-size: null !default;
+$kendo-grid-group-drop-hint-height: null !default;
+$kendo-grid-group-drop-hint-top: null !default;
+
+$kendo-grid-sm-padding-x: null !default;
+$kendo-grid-sm-padding-y: null !default;
+$kendo-grid-sm-header-padding-x: null !default;
+$kendo-grid-sm-header-padding-y: null !default;
+$kendo-grid-sm-grouping-header-padding-x: null !default;
+$kendo-grid-sm-grouping-header-padding-y: null !default;
+$kendo-grid-sm-cell-padding-x: null !default;
+$kendo-grid-sm-cell-padding-y: null !default;
+$kendo-grid-sm-filter-cell-padding-x: null !default;
+$kendo-grid-sm-filter-cell-padding-y: null !default;
+$kendo-grid-sm-edit-cell-padding-x: null !default;
+$kendo-grid-sm-edit-cell-padding-y: null !default;
+$kendo-grid-sm-group-dropclue-height: null !default;
+$kendo-grid-sm-selection-aggregates-padding-x: null !default;
+$kendo-grid-sm-selection-aggregates-padding-y: null !default;
+
+$kendo-grid-md-padding-x: null !default;
+$kendo-grid-md-padding-y: null !default;
+$kendo-grid-md-header-padding-x: null !default;
+$kendo-grid-md-header-padding-y: null !default;
+$kendo-grid-md-grouping-header-padding-x: null !default;
+$kendo-grid-md-grouping-header-padding-y: null !default;
+$kendo-grid-md-cell-padding-x: null !default;
+$kendo-grid-md-cell-padding-y: null !default;
+$kendo-grid-md-filter-cell-padding-x: null !default;
+$kendo-grid-md-filter-cell-padding-y: null !default;
+$kendo-grid-md-edit-cell-padding-x: null !default;
+$kendo-grid-md-edit-cell-padding-y: null !default;
+$kendo-grid-md-group-dropclue-height: null !default;
+$kendo-grid-md-selection-aggregates-padding-x: null !default;
+$kendo-grid-md-selection-aggregates-padding-y: null !default;
+
+
+// Kendo Grid sizes
+$kendo-grid-sizes: null !default;
+
+$kendo-grid-header-font-size: null !default;
+$kendo-grid-header-first-border: null !default;
+$kendo-grid-header-menu-icon-spacing: null !default;
+
+$kendo-grid-filterable-icon-spacing: null !default;
+
+$kendo-grid-toolbar-border-width: null !default;
+
+$kendo-grid-cell-horizontal-border-width: null !default;
+$kendo-grid-cell-vertical-border-width: null !default;
+
+$kendo-grid-bg: null !default;
+$kendo-grid-text: null !default;
+$kendo-grid-border: null !default;
+
+$kendo-grid-header-bg: null !default;
+$kendo-grid-header-text: null !default;
+$kendo-grid-header-border: null !default;
+$kendo-grid-header-gradient: null !default;
+
+$kendo-grid-footer-bg: null !default;
+$kendo-grid-footer-text: null !default;
+$kendo-grid-footer-border: null !default;
+
+$kendo-grid-alt-bg: null !default;
+$kendo-grid-alt-text: null !default;
+$kendo-grid-alt-border: null !default;
+
+$kendo-grid-hover-bg: null !default;
+$kendo-grid-hover-text: null !default;
+$kendo-grid-hover-border: null !default;
+
+$kendo-grid-selected-bg: null !default;
+$kendo-grid-selected-text: null !default;
+$kendo-grid-selected-border: null !default;
+
+$kendo-grid-selection-aggregates-bg: null !default;
+$kendo-grid-selection-aggregates-text: null !default;
+$kendo-grid-selection-aggregates-border: null !default;
+$kendo-grid-selection-aggregates-border-width: null !default;
+$kendo-grid-selection-aggregates-spacing: null !default;
+$kendo-grid-selection-aggregates-line-height: null !default;
+$kendo-grid-selection-aggregates-font-weight: null !default;
+
+$kendo-grid-grouping-row-bg: null !default;
+$kendo-grid-grouping-row-text: null !default;
+
+$kendo-grid-sorted-icon-spacing: null !default;
+$kendo-grid-sorted-bg: null !default;
+$kendo-grid-sorting-indicator-text: null !default;
+$kendo-grid-sorting-index-font-size: null !default;
+$kendo-grid-sorting-index-height: null !default;
+$kendo-grid-sorting-index-spacing-y: null !default;
+$kendo-grid-sorting-index-spacing-x: null !default;
+
+
+$kendo-grid-focus-shadow: null !default;
+
+$kendo-grid-command-cell-button-spacing: null !default;
+// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
+$kendo-grid-command-cell-padding-y: null !default;
+
+// Must be a solid color
+$kendo-grid-sticky-bg: null !default;
+$kendo-grid-sticky-text: null !default;
+$kendo-grid-sticky-border: null !default;
+
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: null !default;
+
+$kendo-grid-sticky-header-bg: null !default;
+$kendo-grid-sticky-header-text: null !default;
+$kendo-grid-sticky-header-border: null !default;
+
+$kendo-grid-sticky-footer-bg: null !default;
+$kendo-grid-sticky-footer-hover-bg: null !default;
+
+$kendo-grid-sticky-selected-bg: null !default;
+$kendo-grid-sticky-selected-alt-bg: null !default;
+
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: null !default;
+$kendo-grid-sticky-selected-hover-bg: null !default;
+
+$kendo-grid-column-menu-width: null !default;
+$kendo-grid-column-menu-max-width: null !default;
+
+$kendo-grid-filter-menu-check-all-border-bottom-width: null !default;
+
+$kendo-grid-filter-menu-item-spacing-x: null !default;
+$kendo-grid-filter-menu-item-spacing-y: null !default;
+
+$kendo-grid-column-menu-popup-padding-x: null !default;
+$kendo-grid-column-menu-popup-padding-y: null !default;
+
+$kendo-grid-column-menu-item-padding-x: null !default;
+$kendo-grid-column-menu-item-padding-y: null !default;
+
+$kendo-grid-column-menu-list-item-padding-x: null !default;
+$kendo-grid-column-menu-list-item-padding-y: null !default;
+
+$kendo-grid-column-menu-items-wrap-padding-x: null !default;
+$kendo-grid-column-menu-items-wrap-padding-y: null !default;
+
+$kendo-grid-column-menu-group-header-padding-x: null !default;
+$kendo-grid-column-menu-group-header-padding-y: null !default;
+
+$kendo-grid-column-menu-group-header-font-size: null !default;
+$kendo-grid-column-menu-group-header-line-height: null !default;
+$kendo-grid-column-menu-group-header-text-transform: null !default;
+$kendo-grid-column-menu-group-header-border-bottom-width: null !default;
+
+$kendo-grid-column-menu-group-header-bg: null !default;
+$kendo-grid-column-menu-group-header-text: null !default;
+$kendo-grid-column-menu-group-header-border: null !default;
+
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: null !default;
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: null !default;
+
+$kendo-grid-column-menu-tabbed-bg: null !default;
+
+$kendo-grid-drag-cell-width: null !default;
+
+$kendo-grid-row-inner-height: null !default;
+
+$kendo-grid-hierarchy-col-width: null !default;
+
+$kendo-grid-grouping-row-border-top: null !default;
+$kendo-grid-group-footer-border-y: null !default;
+$kendo-grid-group-footer-second-cell-border: null !default;
+
+$kendo-grid-row-resizer-hover-bg: null !default;
+$kendo-grid-row-resizer-active-bg: null !default;
+$kendo-grid-row-resizer-height: null !default;

package/scss/components/gridlayout/_index.scss

@@ -0,0 +1,19 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-grid-layout--styles() {
+    @include import-once( "grid-layout" ) {
+        @include core-styles();
+        @include kendo-grid-layout--layout();
+        @include kendo-grid-layout--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-items();
+    }
+}

package/scss/components/gridlayout/_layout.scss

@@ -0,0 +1,10 @@
+@mixin kendo-grid-layout--layout-base() {
+
+    // GridLayout
+    .k-grid-layout {}
+
+}
+
+@mixin kendo-grid-layout--layout() {
+    @include kendo-grid-layout--layout-base();
+}

package/scss/components/gridlayout/_theme.scss

@@ -0,0 +1,10 @@
+@mixin kendo-grid-layout--theme-base() {
+
+    // GridLayout
+    .k-grid-layout {}
+
+}
+
+@mixin kendo-grid-layout--theme() {
+    @include kendo-grid-layout--theme-base();
+}

package/scss/components/gridlayout/_variables.scss

@@ -0,0 +1 @@
+// GridLayout