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

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "11.0.3-dev.2",
+    "version": "11.1.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "11.0.3-dev.2",
+    "version": "11.1.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "11.0.3-dev.2",
+    "version": "11.1.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "11.0.3-dev.2",
+  "version": "11.1.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "11.0.3-dev.2",
-    "@progress/kendo-theme-utils": "11.0.3-dev.2"
+    "@progress/kendo-theme-core": "11.1.0-dev.0",
+    "@progress/kendo-theme-utils": "11.1.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "ee3da3490fc4eeb58b670ec32c54d5ce888f99b7"
+  "gitHead": "87380b1585659324bdbd1bdc8231e01a85daddf7"
 }

package/scss/grid/_theme.scss

@@ -42,8 +42,25 @@
         .k-table-td.k-selected,
         .k-table-row.k-selected > td,
         .k-table-row.k-selected > .k-table-td {
-            color: $kendo-grid-selected-text;
-            background-color: $kendo-grid-selected-bg;
+            @include fill( $kendo-grid-selected-text, $kendo-grid-selected-bg );
+        }
+
+        // Highlighted state
+        td.k-highlighted,
+        .k-table-row.k-highlighted > td,
+        .k-table-td.k-highlighted,
+        .k-table-row.k-highlighted > .k-table-td {
+            @include fill( $bg: $kendo-grid-highlighted-bg );
+        }
+
+        // Highlighted Selected state
+        td.k-highlighted.k-selected,
+        .k-table-row.k-highlighted.k-selected > td,
+        .k-table-td.k-highlighted.k-selected,
+        .k-table-row.k-highlighted.k-selected > .k-table-td,
+        .k-table-row.k-highlighted > .k-table-td.k-selected,
+        .k-table-row.k-selected > .k-table-td.k-highlighted {
+            @include fill( $bg: $kendo-grid-selected-highlighted-bg );
         }
 
         // Focused state
@@ -98,24 +115,91 @@
             .k-grouping-row + .k-table-row .k-table-td {
                 border-top-color: $kendo-grid-header-border;
             }
+        }
+
+        // Sticky columns
+        .k-master-row {
+            .k-grid-content-sticky {
+                @include fill( $bg: $kendo-grid-sticky-bg, $border: $kendo-grid-sticky-border );
+                border-top-color: $kendo-grid-header-border;
+            }
+
+            .k-grid-row-sticky,
+            &.k-grid-row-sticky > .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+                border-top-color: $kendo-grid-sticky-border;
+                border-bottom-color: $kendo-grid-sticky-border;
+            }
 
-            // Selected state
-            .k-selected td,
-            .k-selected .k-table-td {
-                @include fill( $bg: $kendo-grid-sticky-selected-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 );
+                }
             }
 
-            .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 );
+            // Sticky
+            &.k-table-row td.k-grid-content-sticky,
+            &.k-table-row.k-grid-row-sticky > .k-table-td,
+            &.k-table-row .k-table-td.k-grid-row-sticky,
+            &.k-table-row td.k-grid-content-sticky,
+            &.k-table-row .k-table-td.k-grid-content-sticky {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+            }
+
+            // Sticky Alt
+            &.k-table-alt-row td.k-grid-content-sticky,
+            &.k-table-alt-row.k-grid-row-sticky > .k-table-td,
+            &.k-table-alt-row .k-table-td.k-grid-row-sticky,
+            &.k-table-alt-row td.k-grid-content-sticky,
+            &.k-table-alt-row .k-table-td.k-grid-content-sticky {
+                @include fill( $bg: $kendo-grid-sticky-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 );
+            // Sticky Hover
+            &.k-table-row:hover .k-grid-content-sticky,
+            &.k-table-row:hover .k-grid-row-sticky,
+            &.k-table-row:hover.k-grid-row-sticky > .k-table-td,
+            &.k-table-row.k-hover .k-grid-content-sticky,
+            &.k-table-row.k-hover .k-grid-row-sticky,
+            &.k-table-row.k-hover.k-grid-row-sticky > .k-table-td {
+                @include fill( $bg: $kendo-grid-sticky-hover-bg );
+            }
+
+            // Sticky 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 {
+                &::before {
+                    @include fill( $bg: $kendo-grid-selected-bg );
+                }
+            }
+
+            // Sticky Highlighted state
+            &.k-table-row.k-highlighted td.k-grid-content-sticky,
+            &.k-table-row.k-highlighted.k-grid-row-sticky > .k-table-td,
+            &.k-table-row.k-highlighted .k-table-td.k-grid-row-sticky,
+            &.k-table-row td.k-grid-content-sticky.k-highlighted,
+            &.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted {
+                &::before {
+                    @include fill( $bg: $kendo-grid-highlighted-bg );
+                }
+            }
+
+            // Sticky Selected Highlighted state
+            &.k-table-row.k-selected.k-highlighted td.k-grid-content-sticky,
+            &.k-table-row.k-selected.k-highlighted.k-grid-row-sticky > .k-table-td,
+            &.k-table-row.k-selected.k-highlighted .k-table-td.k-grid-row-sticky,
+            &.k-selected.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted,
+            &.k-highlighted.k-table-row .k-table-td.k-grid-content-sticky.k-selected,
+            &.k-table-row td.k-grid-content-sticky.k-selected.k-highlighted,
+            &.k-table-row .k-table-td.k-grid-content-sticky.k-selected.k-highlighted {
+                &::before {
+                    @include fill( $bg: $kendo-grid-selected-highlighted-bg );
+                }
             }
         }
     }
@@ -182,91 +266,6 @@
         );
     }
 
-
-    // Content
-    .k-master-row {
-        .k-grid-content-sticky {
-            @include fill(
-                $kendo-grid-sticky-text,
-                $kendo-grid-sticky-bg,
-                $kendo-grid-sticky-border
-            );
-            border-top-color: $kendo-grid-border;
-        }
-
-        .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 {
-            @include fill( $bg: $kendo-grid-sticky-bg );
-
-            &::before {
-                @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 {
-            @include fill( $bg: $kendo-grid-sticky-alt-bg );
-
-            &::before {
-                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
-            }
-
-        }
-
-
-        // Hovered state
-        &:hover .k-grid-content-sticky,
-        &.k-hover .k-grid-content-sticky,
-        &:hover .k-grid-row-sticky,
-        &.k-hover .k-grid-row-sticky,
-        &:hover.k-grid-row-sticky > .k-table-td,
-        &.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.k-hover .k-table-td.k-grid-content-sticky,
-        &.k-selected:hover td.k-grid-row-sticky,
-        &.k-selected.k-hover .k-table-td.k-grid-row-sticky,
-        &.k-selected:hover.k-grid-row-sticky > .k-table-td,
-        &.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 {
-            background-color: $kendo-grid-sticky-hover-bg;
-
-            &::before {
-                background-color: $kendo-grid-sticky-selected-hover-bg;
-            }
-        }
-    }
-
     .k-grouping-row {
         .k-grid-content-sticky {
             @include fill( $bg: $kendo-grid-sticky-header-bg );

package/scss/grid/_variables.scss

@@ -209,6 +209,23 @@ $kendo-grid-selected-text: $kendo-table-selected-text !default;
 /// @group grid
 $kendo-grid-selected-border: $kendo-table-selected-border !default;
 
+/// The background color of highlighted Grid rows.
+/// @group grid
+$kendo-grid-highlighted-bg: $kendo-table-highlighted-bg !default;
+/// The text color of highlighted Grid rows.
+/// @group grid
+$kendo-grid-highlighted-text: $kendo-table-highlighted-text !default;
+/// The border color of highlighted Grid rows.
+/// @group grid
+$kendo-grid-highlighted-border: $kendo-table-highlighted-border !default;
+/// The font weight of highlighted Grid rows.
+/// @group grid
+$kendo-grid-highlighted-font-weight: $kendo-table-highlighted-font-weight !default;
+
+/// The background color of selected highlighted Grid rows.
+/// @group grid
+$kendo-grid-selected-highlighted-bg: $kendo-table-selected-highlighted-bg !default;
+
 /// The background color of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
@@ -249,14 +266,14 @@ $kendo-grid-command-cell-button-spacing: k-spacing(2) !default;
 // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
-// Must be a solid color
+// Must be solid colors
 $kendo-grid-sticky-bg: $kendo-grid-bg !default;
+$kendo-grid-sticky-alt-bg: k-color(base-subtle) !default;
+$kendo-grid-sticky-hover-bg: k-color(base-subtle-hover) !default;
+
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
-// Must be a solid color
-$kendo-grid-sticky-alt-bg: k-color(base-subtle)!default;
-
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
 $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
@@ -264,13 +281,6 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
-$kendo-grid-sticky-selected-alt-bg: color-mix(in srgb, k-color(primary) 24%, transparent) !default;
-
-// Must be a solid color
-$kendo-grid-sticky-hover-bg: k-color(base-subtle-hover) !default;
-$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color(primary) 24%, transparent) !default;
-
 $kendo-grid-column-menu-width: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
 
@@ -407,6 +417,11 @@ $kendo-grid-row-resizer-height: k-spacing(0.5) !default;
     $kendo-grid-selected-bg: $kendo-grid-selected-bg,
     $kendo-grid-selected-text: $kendo-grid-selected-text,
     $kendo-grid-selected-border: $kendo-grid-selected-border,
+    $kendo-grid-highlighted-bg: $kendo-grid-highlighted-bg,
+    $kendo-grid-highlighted-text: $kendo-grid-highlighted-text,
+    $kendo-grid-highlighted-border: $kendo-grid-highlighted-border,
+    $kendo-grid-highlighted-font-weight: $kendo-grid-highlighted-font-weight,
+    $kendo-grid-selected-highlighted-bg: $kendo-grid-selected-highlighted-bg,
     $kendo-grid-selection-aggregates-bg: $kendo-grid-selection-aggregates-bg,
     $kendo-grid-selection-aggregates-text: $kendo-grid-selection-aggregates-text,
     $kendo-grid-selection-aggregates-border: $kendo-grid-selection-aggregates-border,
@@ -435,10 +450,7 @@ $kendo-grid-row-resizer-height: k-spacing(0.5) !default;
     $kendo-grid-sticky-header-border: $kendo-grid-sticky-header-border,
     $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-footer-bg,
     $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-hover-bg,
-    $kendo-grid-sticky-selected-bg: $kendo-grid-sticky-selected-bg,
-    $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-alt-bg,
     $kendo-grid-sticky-hover-bg: $kendo-grid-sticky-hover-bg,
-    $kendo-grid-sticky-selected-hover-bg: $kendo-grid-sticky-selected-hover-bg,
     $kendo-grid-column-menu-width: $kendo-grid-column-menu-width,
     $kendo-grid-column-menu-max-width: $kendo-grid-column-menu-max-width,
     $kendo-grid-filter-menu-check-all-border-bottom-width: $kendo-grid-filter-menu-check-all-border-bottom-width,

package/scss/table/_variables.scss

@@ -155,6 +155,23 @@ $kendo-table-selected-text: $kendo-table-text !default;
 /// @group table
 $kendo-table-selected-border: null !default;
 
+/// Background color of highlighted rows in table.
+/// @group table
+$kendo-table-highlighted-bg: color-mix(in srgb, k-color(warning) 25%, transparent) !default;
+/// Text color of highlighted rows in table.
+/// @group table
+$kendo-table-highlighted-text: null !default;
+/// The font weight of highlighted rows in table.
+/// @group table
+$kendo-table-highlighted-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+/// Border color of highlighted rows in table.
+/// @group table
+$kendo-table-highlighted-border: null !default;
+
+/// Background color of selected highlighted rows in table.
+/// @group table
+$kendo-table-selected-highlighted-bg: color-mix(in srgb, color-mix(in srgb, k-color(primary), k-color(warning)) 44%, transparent) !default;
+
 /// The box shadow of the row spanned cells.
 /// @group table
 $kendo-table-cell-row-span-shadow: inset 0 0 0 1px $kendo-table-border !default;
@@ -201,5 +218,10 @@ $kendo-table-cell-row-span-shadow: inset 0 0 0 1px $kendo-table-border !default;
     $kendo-table-selected-bg: $kendo-table-selected-bg,
     $kendo-table-selected-text: $kendo-table-selected-text,
     $kendo-table-selected-border: $kendo-table-selected-border,
+    $kendo-table-highlighted-bg: $kendo-table-highlighted-bg,
+    $kendo-table-highlighted-text: $kendo-table-highlighted-text,
+    $kendo-table-highlighted-font-weight: $kendo-table-highlighted-font-weight,
+    $kendo-table-highlighted-border: $kendo-table-highlighted-border,
+    $kendo-table-selected-highlighted-bg: $kendo-table-selected-highlighted-bg,
     $kendo-table-cell-row-span-shadow: $kendo-table-cell-row-span-shadow
 );