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

package/scss/grid/_theme.scss

@@ -2,52 +2,57 @@
 
     // Theme
     .k-grid {
-        @include fill( $grid-text, $grid-bg, $grid-border );
+        @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border );
 
-        td,
+        .k-table {
+            background-color: inherit;
+        }
+
+        .k-table-td,
         .k-grid-content,
         .k-grid-header-locked,
         .k-grid-content-locked {
-            border-color: $grid-border;
+            border-color: $kendo-grid-border;
         }
 
         // Alt row
-        .k-alt {
-            color: $grid-alt-text;
-            background-color: $grid-alt-bg;
+        .k-table-alt-row {
+            color: $kendo-grid-alt-text;
+            background-color: $kendo-grid-alt-bg;
         }
 
         // Hover state
         tbody>tr:not(.k-detail-row):hover,
-        tbody>tr:not(.k-detail-row).k-hover {
-            color: $grid-hovered-text;
-            background-color: $grid-hovered-bg;
+        .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
-        th.k-selected,
-        td.k-selected,
-        tr.k-selected > td {
-            color: $grid-selected-text;
-            background-color: $grid-selected-bg;
+        .k-table-th.k-selected,
+        .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
-        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-pager.k-focus,
-        .k-grid-pager:focus {
-            box-shadow: $grid-focused-shadow;
+        .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,
+        .k-grid-pager {
+            &:focus,
+            &.k-focus {
+                box-shadow: $kendo-grid-focus-shadow;
+            }
         }
 
         col.k-sorted,
-        th.k-sorted {
-            background-color: $grid-sorted-bg;
+        .k-table-th.k-sorted {
+            background-color: $kendo-grid-sorted-bg;
         }
 
         // Locked
@@ -55,45 +60,37 @@
         .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-table-td {
+            border-color: $kendo-grid-sticky-header-border;
         }
 
         .k-grid-header-locked .k-header {
-            border-bottom-color: $grid-header-border;
+            border-bottom-color: $kendo-grid-header-border;
         }
 
         .k-grid-content-locked {
-            .k-group-footer td,
+            .k-group-footer .k-table-td,
             .k-group-cell {
-                @include fill( $border: $grid-header-border );
+                @include fill( $border: $kendo-grid-header-border );
             }
 
-            .k-grouping-row + tr td {
-                border-top-color: $grid-header-border;
+            .k-grouping-row + .k-table-row .k-table-td {
+                border-top-color: $kendo-grid-header-border;
             }
 
             // Selected state
-            .k-selected td {
-                @include fill( $bg: $grid-sticky-selected-bg );
+            .k-selected .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
             }
 
-            .k-selected.k-alt td {
-                @include fill( $bg: $grid-sticky-selected-alt-bg );
+            .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 {
-                @include fill( $bg: $grid-sticky-selected-hovered-bg );
-            }
-        }
-
-        &[dir="rtl"],
-        &.k-rtl {
-            th.k-hierarchy-cell,
-            td.k-hierarchy-cell {
-                border-left-color: transparent;
+            .k-selected:hover .k-table-td,
+            .k-selected.k-hover .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-selected-hover-bg );
             }
         }
     }
@@ -112,28 +109,16 @@
 
     // Grouping header
     .k-grouping-header {
-        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
-    }
-    .k-grouping-header .k-group-indicator {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
+        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
     }
 
-
     // Header
     .k-grid-header {
-        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
+        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
 
-        .k-i-sort-asc-sm,
-        .k-i-sort-desc-sm,
-        .k-i-sort-asc-small,
-        .k-i-sort-desc-small,
+        .k-sort-icon,
         .k-sort-order {
-            color: $grid-sorting-indicator-text;
+            color: $kendo-grid-sorting-indicator-text;
         }
 
         .k-grid-filter,
@@ -145,20 +130,20 @@
                 box-shadow: inset 0 0 0 2px rgba( black, .1 );
             }
             &.k-active {
-                color: $selected-text;
-                background-color: $selected-bg;
+                color: $kendo-selected-text;
+                background-color: $kendo-selected-bg;
             }
         }
 
         .k-grid-header-sticky,
         .k-grid-header-sticky.k-sorted {
             @include fill(
-                $color: $grid-sticky-header-text,
-                $bg: $grid-sticky-header-bg
+                $color: $kendo-grid-sticky-header-text,
+                $bg: $kendo-grid-sticky-header-bg
             );
 
-            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;
         }
     }
 
@@ -166,7 +151,7 @@
     .k-grid-footer {
         .k-grid-footer-sticky {
             @include fill(
-                $bg: $grid-sticky-footer-bg
+                $bg: $kendo-grid-sticky-footer-bg
             );
         }
     }
@@ -176,37 +161,37 @@
     .k-master-row {
         .k-grid-content-sticky {
             @include fill(
-                $grid-sticky-text,
-                $grid-sticky-bg,
-                $grid-sticky-border
+                $kendo-grid-sticky-text,
+                $kendo-grid-sticky-bg,
+                $kendo-grid-sticky-border
             );
-            border-top-color: $grid-border;
+            border-top-color: $kendo-grid-border;
         }
 
         .k-grid-row-sticky {
-            border-top-color: $grid-sticky-border;
-            border-bottom-color: $grid-sticky-border;
-            background-color: $grid-sticky-bg;
+            border-top-color: $kendo-grid-sticky-border;
+            border-bottom-color: $kendo-grid-sticky-border;
+            background-color: $kendo-grid-sticky-bg;
         }
 
-        &.k-alt {
+        &.k-table-alt-row {
             .k-grid-content-sticky,
             .k-grid-row-sticky {
-                @include fill( $bg: $grid-sticky-alt-bg );
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
             }
         }
 
         // Selected state
         &.k-selected .k-grid-content-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $grid-sticky-selected-bg );
+        .k-table-td.k-grid-content-sticky.k-selected {
+            @include fill( $bg: $kendo-grid-sticky-selected-bg );
         }
 
-        &.k-selected.k-alt .k-grid-content-sticky,
-        &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $grid-sticky-selected-alt-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 .k-table-td.k-grid-content-sticky.k-selected {
+            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
         }
 
 
@@ -215,7 +200,7 @@
         &.k-hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
-            background-color: $grid-sticky-hovered-bg;
+            background-color: $kendo-grid-sticky-hover-bg;
         }
 
 
@@ -224,134 +209,134 @@
         &.k-selected.k-hover .k-grid-content-sticky,
         &.k-selected:hover .k-grid-row-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 {
-            background-color: $grid-sticky-selected-hovered-bg;
+        &: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 {
+    kendo-grid.k-grid {
         .k-grid-content-sticky {
-            border-top-color: $grid-border;
-            border-left-color: $grid-sticky-border;
-            border-right-color: $grid-sticky-border;
-            background-color: $grid-sticky-bg;
+            border-top-color: $kendo-grid-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: $grid-sticky-hovered-bg;
+                background-color: $kendo-grid-sticky-hover-bg;
             }
         }
 
-        .k-grid-row-sticky td {
-            border-top-color: $grid-sticky-border;
-            border-bottom-color: $grid-sticky-border;
-            background-color: $grid-sticky-bg;
+        .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;
 
-            &:hover td,
-            &.k-hover td {
-                background-color: $grid-sticky-hovered-bg;
+            &:hover .k-table-td,
+            &.k-hover .k-table-td {
+                background-color: $kendo-grid-sticky-hover-bg;
             }
         }
 
-        .k-alt .k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt td {
-            @include fill( $bg: $grid-sticky-alt-bg );
+        .k-table-alt-row .k-grid-content-sticky,
+        .k-grid-row-sticky.k-table-alt-row .k-table-td {
+            @include fill( $bg: $kendo-grid-sticky-alt-bg );
         }
 
         // Selected state
-        tr.k-selected .k-grid-content-sticky,
-        .k-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-selected,
+        .k-table-row.k-selected .k-grid-content-sticky,
+        .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: $grid-sticky-selected-bg );
+            @include fill( $bg: $kendo-grid-sticky-selected-bg );
         }
 
-        tr.k-selected.k-alt .k-grid-content-sticky,
-        .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-selected-alt-bg );
+        .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
+        .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
-        tr:hover .k-grid-content-sticky,
-        tr.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-hover td,
-        .k-grid-row-sticky.k-alt:hover td,
-        .k-grid-row-sticky.k-alt.k-hover td,
-        .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-hover .k-grid-content-sticky {
-            background-color: $grid-sticky-hovered-bg;
+        .k-table-row:hover .k-grid-content-sticky,
+        .k-table-row.k-hover .k-grid-content-sticky,
+        .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
-        tr.k-selected:hover .k-grid-content-sticky,
-        tr.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-alt.k-grid-row-sticky:hover td,
-        .k-selected.k-alt.k-grid-row-sticky.k-hover td,
-        tr.k-selected.k-alt:hover .k-grid-content-sticky,
-        tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-selected,
-        .k-grid-row-sticky.k-hover td.k-selected,
-        tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-hover .k-grid-content-sticky.k-selected {
-            background-color: $grid-sticky-selected-hovered-bg;
+        .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 .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 .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: $grid-sticky-header-bg );
+            @include fill( $bg: $kendo-grid-sticky-header-bg );
         }
 
         &:hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
-            @include fill( $bg: $grid-sticky-hovered-bg );
+            @include fill( $bg: $kendo-grid-sticky-hover-bg );
         }
     }
 
     .k-group-footer {
-        td,
+        .k-table-td,
         .k-grid-footer-sticky {
-            @include fill( $bg: $grid-sticky-footer-bg );
+            @include fill( $bg: $kendo-grid-sticky-footer-bg );
         }
 
         &:hover .k-grid-footer-sticky,
         &.k-hover .k-grid-footer-sticky {
-            @include fill( $bg: $grid-sticky-footer-hovered-bg );
+            @include fill( $bg: $kendo-grid-sticky-footer-hover-bg );
         }
     }
 
     // Footer
     .k-grid-footer {
         @include fill(
-            $grid-footer-text,
-            $grid-footer-bg,
-            $grid-footer-border
+            $kendo-grid-footer-text,
+            $kendo-grid-footer-bg,
+            $kendo-grid-footer-border
         );
         .k-grid-footer-locked {
             border-color: inherit;
         }
         .k-grid-footer-sticky {
-            border-color: $grid-sticky-border;
-            background-color: $grid-sticky-footer-bg;
+            border-color: $kendo-grid-sticky-border;
+            background-color: $kendo-grid-sticky-footer-bg;
         }
     }
 
 
     // Pager
     .k-grid-pager {
-        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
+        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
     }
 
 
     // Grouping
     .k-grouping-row,
     .k-group-cell {
-        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
+        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
     }
 
     .k-column-list-item:hover,
@@ -420,9 +405,9 @@
 
     .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
+            $kendo-grid-column-menu-group-header-text,
+            $kendo-grid-column-menu-group-header-bg,
+            $kendo-grid-column-menu-group-header-border
         );
     }
 
@@ -431,7 +416,7 @@
     }
 
     .k-grid-norecords-template {
-        background-color: $grid-bg;
-        border-color: $grid-border;
+        background-color: $kendo-grid-bg;
+        border-color: $kendo-grid-border;
     }
 }