_theme.scss

@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,
        .k-hierarchy-cell .k-svg-icon {
            color: $kendo-grid-header-text;
        }

        .k-grouping-row {
            background-color: $kendo-grid-grouping-row-bg;

            .k-icon,
            .k-svg-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,
        .k-hierarchy-cell .k-svg-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;
        }
    }

    // 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 {
            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 {
                @include fill( $bg: $kendo-grid-sticky-alt-bg );
            }
        }

        // Selected state
        &.k-table-row.k-selected .k-grid-content-sticky,
        &.k-table-row.k-selected .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 {
            @include fill( $bg: $kendo-grid-sticky-selected-bg );
        }

        &.k-selected.k-table-alt-row .k-grid-content-sticky,
        &.k-selected.k-table-alt-row .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 {
            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
        }


        // Hovered state
        &:hover .k-grid-content-sticky,
        &:hover .k-grid-row-sticky,
        &.k-hover .k-grid-content-sticky,
        &.k-hover .k-grid-row-sticky {
            background-color: $kendo-grid-sticky-hover-bg;
        }


        // Selected hover
        &.k-selected:hover .k-grid-content-sticky,
        &.k-selected:hover .k-grid-row-sticky,
        &.k-selected.k-hover .k-grid-content-sticky,
        &.k-selected.k-hover .k-grid-row-sticky,
        &: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 {
            background-color: $kendo-grid-sticky-selected-hover-bg;
        }
    }

    kendo-grid.k-grid {
        .k-grid-content-sticky {
            border-top-color: $kendo-grid-header-border;
            border-left-color: $kendo-grid-sticky-border;
            border-right-color: $kendo-grid-sticky-border;
            background-color: $kendo-grid-sticky-bg;

            &:hover,
            &.k-hover {
                background-color: $kendo-grid-sticky-hover-bg;
            }
        }

        .k-grid-row-sticky {
            td,
            .k-table-td {
                border-top-color: $kendo-grid-sticky-border;
                border-bottom-color: $kendo-grid-sticky-border;
                background-color: $kendo-grid-sticky-bg;
            }

            &:hover td,
            &.k-hover td,
            &:hover .k-table-td,
            &.k-hover .k-table-td {
                background-color: $kendo-grid-sticky-hover-bg;
            }
        }

        .k-table-alt-row .k-grid-content-sticky,
        .k-grid-row-sticky.k-table-alt-row td,
        .k-grid-row-sticky.k-table-alt-row .k-table-td {
            @include fill( $bg: $kendo-grid-sticky-alt-bg );
        }

        // Selected state
        .k-table-row.k-selected .k-grid-content-sticky,
        .k-selected.k-grid-row-sticky td,
        .k-grid-row-sticky td.k-selected,
        .k-selected.k-grid-row-sticky .k-table-td,
        .k-grid-row-sticky .k-table-td.k-selected,
        .k-selected.k-grid-content-sticky {
            @include fill( $bg: $kendo-grid-sticky-selected-bg );
        }

        .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
        .k-selected.k-table-alt-row.k-grid-row-sticky td,
        .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
        .k-table-alt-row .k-selected.k-grid-content-sticky {
            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
        }

        // Hover state
        .k-table-row:hover .k-grid-content-sticky,
        .k-table-row.k-hover .k-grid-content-sticky,
        .k-grid-row-sticky:hover td,
        .k-grid-row-sticky.k-hover td,
        .k-grid-row-sticky.k-table-alt-row:hover td,
        .k-grid-row-sticky.k-table-alt-row.k-hover td,
        .k-grid-row-sticky:hover .k-table-td,
        .k-grid-row-sticky.k-hover .k-table-td,
        .k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
        .k-grid-row-sticky.k-table-alt-row.k-hover .k-table-td,
        .k-table-alt-row:hover .k-grid-content-sticky,
        .k-table-alt-row.k-hover .k-grid-content-sticky {
            background-color: $kendo-grid-sticky-hover-bg;
        }

        // Selected + Hover
        .k-table-row.k-selected:hover .k-grid-content-sticky,
        .k-table-row.k-selected.k-hover .k-grid-content-sticky,
        .k-selected.k-grid-row-sticky:hover td,
        .k-selected.k-grid-row-sticky.k-hover td,
        .k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
        .k-selected.k-grid-row-sticky:hover .k-table-td,
        .k-selected.k-grid-row-sticky.k-hover .k-table-td,
        .k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
        .k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
        .k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
        .k-grid-row-sticky:hover td.k-selected,
        .k-grid-row-sticky.k-hover td.k-selected,
        .k-grid-row-sticky:hover .k-table-td.k-selected,
        .k-grid-row-sticky.k-hover .k-table-td.k-selected,
        .k-table-row:hover .k-grid-content-sticky.k-selected,
        .k-table-row.k-hover .k-grid-content-sticky.k-selected {
            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-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-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-row-resizer {
        @include fill( $bg: $kendo-grid-row-resizer-bg );

        &.k-active {
            @include fill( $bg: $kendo-grid-row-resizer-active-bg );
        }
    }

}


@mixin kendo-grid--theme() {
    @include kendo-grid--theme-base();
}