@progress/kendo-theme-classic 4.41.2-dev.2 → 5.0.0-next.2

package/modules/@progress/kendo-theme-default/scss/grid/_theme.scss

@@ -1,449 +0,0 @@
-@include exports("grid/theme") {
-
-    $tooltip-bg: $primary !default;
-    $tooltip-text: contrast-wcag($primary) !default;
-
-    .k-grid-header,
-    .k-header,
-    th.k-header,
-    .k-grid-header-wrap,
-    .k-grouping-header,
-    .k-grouping-header .k-group-indicator,
-    .k-grid td,
-    .k-grid-footer,
-    .k-grid-footer-wrap,
-    .k-grid-content-locked,
-    .k-grid-footer-locked,
-    .k-grid-header-locked,
-    .k-filter-row > td,
-    .k-filter-row > th {
-        @include fill( $border: $grid-header-border );
-    }
-
-    .k-grid-header,
-    .k-grouping-header,
-    .k-grid-add-row,
-    .k-grid-footer {
-        @include fill(
-            $color: $grid-header-text,
-            $bg: $grid-header-bg
-        );
-    }
-
-    .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: $grid-bg );
-    }
-
-    .k-group-footer td,
-    .k-grouping-row td,
-    tbody .k-group-cell {
-        @include fill(
-            $color: $grid-grouping-row-text,
-            $bg: $grid-grouping-row-bg
-        );
-    }
-
-    .k-grouping-dropclue {
-        &::before {
-            border-color: $grid-header-text transparent transparent;
-        }
-
-        &::after {
-            background-color: $grid-header-text;
-        }
-    }
-
-    .k-grid {
-        @include fill( $grid-text, $grid-bg, $grid-border );
-
-        // Alt row
-        tr.k-alt {
-            background-color: $grid-alt-bg;
-        }
-
-        // Hover state
-        tbody tr:hover,
-        tbody tr.k-state-hover {
-            color: $grid-hovered-text;
-            background-color: $grid-hovered-bg;
-        }
-
-        // Selected state
-        td.k-state-selected,
-        tr.k-state-selected > td {
-            color: $grid-selected-text;
-            background-color: $grid-selected-bg;
-        }
-
-        // Focused state
-        td.k-state-focused,
-        th.k-state-focused,
-        th:focus,
-        .k-master-row > td:focus,
-        .k-grouping-row > td:focus,
-        .k-detail-row > td:focus,
-        .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused {
-            box-shadow: $grid-focused-shadow;
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-hierarchy-cell .k-icon {
-            color: $grid-header-text;
-        }
-
-        .k-grouping-row {
-            background-color: $grid-grouping-row-bg;
-
-            .k-icon {
-                color: $grid-header-text;
-            }
-
-            .k-grid-content-sticky {
-                border-color: $grid-sticky-border;
-                border-top-color: $grid-header-border;
-            }
-        }
-
-        // Locked columns
-        .k-grid-header-locked,
-        .k-grid-content-locked,
-        .k-grid-header-locked .k-header,
-        .k-grid-content-locked td {
-            border-color: $grid-sticky-header-border;
-        }
-
-        .k-grid-content-locked {
-            .k-group-footer td,
-            .k-group-cell {
-                @include fill( $border: $grid-header-border );
-            }
-
-            .k-grouping-row + tr td {
-                border-top-color: $grid-header-border;
-            }
-
-            // Selected state
-            .k-state-selected td {
-                @include fill( $bg: $grid-sticky-selected-bg );
-            }
-
-            .k-state-selected.k-alt td {
-                @include fill( $bg: $grid-sticky-selected-alt-bg );
-            }
-
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
-            // Selected hover
-            .k-state-selected:hover td,
-            .k-state-selected.k-state-hover td {
-                @include fill( $bg: $grid-sticky-selected-hovered-bg );
-            }
-        }
-
-        .k-grid-header-locked .k-header {
-            border-bottom-color: $grid-header-border;
-        }
-
-        &[dir="rtl"],
-        &.k-rtl {
-            th.k-hierarchy-cell,
-            td.k-hierarchy-cell {
-                border-left-color: transparent;
-            }
-        }
-    }
-
-    col.k-sorted,
-    th.k-sorted {
-        background-color: $grid-sorted-bg;
-    }
-
-    // Grid header
-    .k-grid-header {
-
-        .k-i-sort-asc-sm,
-        .k-i-sort-desc-sm,
-        .k-sort-order {
-            color: $grid-sorting-indicator-text;
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-hierarchy-cell .k-icon {
-            &:hover {
-                color: $button-hovered-text;
-                background-color: $button-hovered-bg;
-            }
-            &:focus,
-            &.k-state-focus,
-            &.k-state-border-down {
-                box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
-            }
-            &.k-state-active {
-                color: $selected-text;
-                background-color: $selected-bg;
-            }
-        }
-
-        th.k-grid-header-sticky,
-        td.k-grid-header-sticky,
-        .k-grid-header-sticky.k-sorted {
-            @include fill(
-                $color: $grid-sticky-header-text,
-                $bg: $grid-sticky-header-bg
-            );
-
-            border-right-color: $grid-sticky-header-border;
-            border-left-color: $grid-sticky-header-border;
-        }
-    }
-
-    // Grid footer
-    .k-grid-footer {
-        @include fill(
-            $grid-footer-text,
-            $grid-footer-bg,
-            $grid-footer-border
-        );
-        .k-grid-footer-sticky {
-            border-left-color: $grid-sticky-border;
-            border-right-color: $grid-sticky-border;
-            background-color: $grid-sticky-footer-bg;
-        }
-    }
-
-    // Content
-    .k-master-row {
-        .k-grid-content-sticky {
-            border-color: $grid-sticky-border;
-            border-top-color: $grid-header-border;
-            background-color: $grid-sticky-bg;
-        }
-
-        .k-grid-row-sticky {
-            border-top-color: $grid-sticky-border;
-            border-bottom-color: $grid-sticky-border;
-            background-color: $grid-sticky-bg;
-        }
-
-        &.k-alt {
-            .k-grid-content-sticky,
-            .k-grid-row-sticky {
-                @include fill( $bg: $grid-sticky-alt-bg );
-            }
-        }
-
-        // Selected state
-        &.k-state-selected .k-grid-content-sticky,
-        &.k-state-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected {
-            @include fill( $bg: $grid-sticky-selected-bg );
-        }
-
-        &.k-state-selected.k-alt .k-grid-content-sticky,
-        &.k-state-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected {
-            @include fill( $bg: $grid-sticky-selected-alt-bg );
-        }
-
-
-        // Hovered state
-        &:hover .k-grid-content-sticky,
-        &:hover .k-grid-row-sticky,
-        &.k-state-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky {
-            background-color: $grid-sticky-hovered-bg;
-        }
-
-
-        // Selected hover
-        &.k-state-selected:hover .k-grid-content-sticky,
-        &.k-state-selected:hover .k-grid-row-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-row-sticky,
-        &:hover td.k-grid-content-sticky.k-state-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected {
-            background-color: $grid-sticky-selected-hovered-bg;
-        }
-    }
-
-    kendo-grid {
-        .k-grid-content-sticky {
-            border-top-color: $grid-header-border;
-            border-left-color: $grid-sticky-border;
-            border-right-color: $grid-sticky-border;
-            background-color: $grid-sticky-bg;
-
-            &:hover,
-            &.k-state-hover {
-                background-color: $grid-sticky-hovered-bg;
-            }
-        }
-
-        .k-grid-row-sticky {
-            td {
-                border-top-color: $grid-sticky-border;
-                border-bottom-color: $grid-sticky-border;
-                background-color: $grid-sticky-bg;
-            }
-
-            &:hover td,
-            &.k-state-hover td {
-                background-color: $grid-sticky-hovered-bg;
-            }
-        }
-
-        .k-alt .k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt td {
-            @include fill( $bg: $grid-sticky-alt-bg );
-        }
-
-        // Selected state
-        tr.k-state-selected .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-state-selected,
-        .k-state-selected.k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-selected-bg );
-        }
-
-        tr.k-state-selected.k-alt .k-grid-content-sticky,
-        .k-state-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-selected-alt-bg );
-        }
-
-        // Hover state
-        tr:hover .k-grid-content-sticky,
-        tr.k-state-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-state-hover td,
-        .k-grid-row-sticky.k-alt:hover td,
-        .k-grid-row-sticky.k-alt.k-state-hover td,
-        .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky {
-            background-color: $grid-sticky-hovered-bg;
-        }
-
-        // Selected + Hover
-        tr.k-state-selected:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-state-hover .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky:hover td,
-        .k-state-selected.k-grid-row-sticky.k-state-hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky:hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
-        tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-state-selected,
-        .k-grid-row-sticky.k-state-hover td.k-state-selected,
-        tr:hover .k-grid-content-sticky.k-state-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected {
-            background-color: $grid-sticky-selected-hovered-bg;
-        }
-    }
-
-    .k-grouping-row {
-        .k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-header-bg );
-        }
-
-        &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-hovered-bg );
-        }
-    }
-
-    .k-column-list-item:hover,
-    .k-columnmenu-item:hover {
-        @include fill(
-            $list-item-hovered-text,
-            $list-item-hovered-bg
-        );
-    }
-    .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus {
-        @include box-shadow( $list-item-focused-shadow );
-    }
-
-    .k-columnmenu-item {
-        &.k-state-selected {
-            @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
-            );
-        }
-    }
-
-    .k-column-menu {
-
-        .k-menu:not(.k-context-menu) {
-
-            @include fill(
-                $popup-text,
-                $popup-bg,
-                $popup-border
-            );
-
-            .k-item {
-                @include fill(
-                    $list-item-text,
-                    $list-item-bg
-                );
-
-                &:hover,
-                &.k-state-hover {
-                    @include fill(
-                        $list-item-hovered-text,
-                        $list-item-hovered-bg
-                    );
-                }
-
-                &.k-state-selected {
-                    @include fill(
-                        $list-item-selected-text,
-                        $list-item-selected-bg
-                    );
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow( $list-item-focused-shadow );
-                }
-            }
-        }
-    }
-
-    .k-column-menu-group-header-text {
-        @include fill(
-            $grid-column-menu-group-header-text,
-            $grid-column-menu-group-header-bg,
-            $grid-column-menu-group-header-border
-        );
-    }
-
-    .k-check-all-wrap {
-        @include fill( $border: $popup-border );
-    }
-
-    .k-grid-norecords-template {
-        background-color: $grid-bg;
-        border-color: $grid-border;
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/grid/_variables.scss

@@ -1,174 +0,0 @@
-// Grid
-$grid-border-width: 1px !default;
-$grid-font-family: $font-family !default;
-$grid-font-size: $font-size !default;
-$grid-line-height: $line-height !default;
-
-$grid-padding-x: $table-cell-padding-x !default;
-$grid-padding-y: $table-cell-padding-y !default;
-
-$grid-header-padding-x: $grid-padding-x !default;
-$grid-header-padding-y: $grid-padding-y !default;
-$grid-header-font-size: null !default;
-
-$grid-footer-padding-x: $grid-header-padding-x !default;
-$grid-footer-padding-y: $grid-header-padding-y !default;
-
-$grid-grouping-header-padding-x: $grid-padding-y !default;
-$grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
-
-$grid-filter-cell-padding-x: $grid-padding-y !default;
-$grid-filter-cell-padding-y: $grid-filter-cell-padding-x !default;
-
-$grid-toolbar-padding-x: $toolbar-padding-x !default;
-$grid-toolbar-padding-y: $toolbar-padding-y !default;
-$grid-toolbar-spacing: $toolbar-spacing !default;
-$grid-toolbar-border-width: $grid-border-width !default;
-
-$grid-cell-padding-x: $grid-padding-x !default;
-$grid-cell-padding-y: $grid-padding-y !default;
-$grid-cell-horizontal-border-width: 0px !default;
-$grid-cell-vertical-border-width: 1px !default;
-
-$grid-cell-placeholder-line-width: 80% !default;
-
-/// Background color of the grid component
-/// @group grid
-$grid-bg: $component-bg !default;
-/// Text color of the grid component
-/// @group grid
-$grid-text: $component-text !default;
-/// Border color of the grid component
-/// @group grid
-$grid-border: $component-border !default;
-
-/// Background color of grid header
-/// @group grid
-$grid-header-bg: $header-bg !default;
-/// Text color of grid header
-/// @group grid
-$grid-header-text: $header-text !default;
-/// Border color of grid header
-/// @group grid
-$grid-header-border: $grid-border !default;
-/// Background gradient of grid header
-/// @group grid
-$grid-header-gradient: $header-gradient !default;
-
-/// Background color of grid footer
-/// @group grid
-$grid-footer-bg: $grid-header-bg !default;
-/// Text color of grid footer
-/// @group grid
-$grid-footer-text: $grid-header-text !default;
-/// Border color of grid footer
-/// @group grid
-$grid-footer-border: $grid-header-border !default;
-
-/// Background color of alternating rows in grid
-/// @group grid
-$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
-/// Text color of alternating rows in grid
-/// @group grid
-$grid-alt-text: null !default;
-/// Border color of alternating rows in grid
-/// @group grid
-$grid-alt-border: null !default;
-
-/// Background color of hovered rows in grid
-/// @group grid
-$grid-hovered-bg: darken($grid-bg, 7%) !default;
-/// Text color of hovered rows in grid
-/// @group grid
-$grid-hovered-text: null !default;
-/// Border color of hovered rows in grid
-/// @group grid
-$grid-hovered-border: null !default;
-
-/// Background color of selected rows in grid
-/// @group grid
-$grid-selected-bg: rgba($selected-bg, .25) !default;
-/// Text color of selected rows in grid
-/// @group grid
-$grid-selected-text: null !default;
-/// Border color of selected rows in grid
-/// @group grid
-$grid-selected-border: null !default;
-
-$grid-selected-alt-bg: shade($grid-selected-bg, .4) !default;
-$grid-selected-hovered-bg: shade($grid-selected-bg, .7) !default;
-
-$grid-grouping-row-bg: $base-bg !default;
-$grid-grouping-row-text: $grid-text !default;
-
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .02 ) !default;
-$grid-sorting-indicator-text: $primary !default;
-$grid-sorting-index-font-size: $font-size-sm !default;
-$grid-sorting-index-height: $icon-size !default;
-$grid-sorting-index-spacing-y: ($icon-spacing / 2) !default;
-$grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
-
-
-$grid-focused-shadow: $list-item-focused-shadow !default;
-
-$grid-edit-cell-padding-x: $grid-cell-padding-x !default;
-$grid-edit-cell-padding-y: 3px !default;
-
-$grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
-
-$grid-search-width: $input-default-width !default;
-
-$grid-sticky-bg: $component-bg !default;
-$grid-sticky-text: $grid-text !default;
-$grid-sticky-border: rgba( black, .3 ) !default;
-
-$grid-sticky-alt-bg: shade($grid-bg, 3.5%) !default;
-
-$grid-sticky-header-bg: $grid-header-bg !default;
-$grid-sticky-header-text: $grid-header-text !default;
-$grid-sticky-header-border: $grid-sticky-border !default;
-
-$grid-sticky-footer-bg: $grid-header-bg !default;
-$grid-sticky-footer-hovered-bg: $grid-hovered-bg !default;
-
-$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
-$grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
-
-$grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
-$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
-
-$grid-filter-menu-width: 230px !default;
-
-$grid-filter-menu-check-all-border-bottom-width: 1px !default;
-
-$grid-filter-menu-item-spacing-x: map-get( $spacing, 2 ) !default;
-$grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
-
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y-sm !default;
-
-$grid-column-menu-item-padding-x: $padding-x !default;
-$grid-column-menu-item-padding-y: $padding-y !default;
-
-$grid-column-menu-list-item-padding-x: $padding-x !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
-
-$grid-column-menu-items-wrap-padding-x: 0 !default;
-$grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;
-
-$grid-column-menu-filter-container-padding-x: $padding-x !default;
-$grid-column-menu-filter-container-padding-y: $padding-y !default;
-
-$grid-column-menu-group-header-padding-x: $menu-popup-item-padding-x !default;
-$grid-column-menu-group-header-padding-y: $menu-popup-item-padding-y !default;
-
-$grid-column-menu-group-header-font-size: $font-size-sm !default;
-$grid-column-menu-group-header-line-height: $line-height !default;
-$grid-column-menu-group-header-text-transform: uppercase !default;
-$grid-column-menu-group-header-border-bottom-width: 1px !default;
-
-$grid-column-menu-group-header-bg: null !default;
-$grid-column-menu-group-header-text: $popup-text !default;
-$grid-column-menu-group-header-border: $popup-border !default;
-
-$grid-drag-cell-width: ($icon-size * 2.25) !default;

package/modules/@progress/kendo-theme-default/scss/icons/_index.scss

@@ -1,10 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-
-
-// Component
-@import "_layout.scss";
-@import "_theme.scss";