@progress/kendo-theme-material 5.6.1-dev.5 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/all.css +790 -1036
  2. package/dist/all.scss +410 -693
  3. package/lib/swatches/material-aqua-dark.json +1 -1
  4. package/lib/swatches/material-arctic.json +1 -1
  5. package/lib/swatches/material-burnt-teal.json +1 -1
  6. package/lib/swatches/material-dataviz-v4.json +1 -1
  7. package/lib/swatches/material-eggplant.json +1 -1
  8. package/lib/swatches/material-lime-dark.json +1 -1
  9. package/lib/swatches/material-lime.json +1 -1
  10. package/lib/swatches/material-main-dark.json +1 -1
  11. package/lib/swatches/material-main.json +1 -1
  12. package/lib/swatches/material-nova.json +1 -1
  13. package/lib/swatches/material-pacific-dark.json +1 -1
  14. package/lib/swatches/material-pacific.json +1 -1
  15. package/lib/swatches/material-sky-dark.json +1 -1
  16. package/lib/swatches/material-sky.json +1 -1
  17. package/lib/swatches/material-smoke.json +1 -1
  18. package/package.json +4 -4
  19. package/scss/badge/_variables.scss +70 -35
  20. package/scss/button/_layout.scss +1 -2
  21. package/scss/calendar/_theme.scss +0 -2
  22. package/scss/card/_variables.scss +0 -10
  23. package/scss/drawer/_theme.scss +2 -2
  24. package/scss/editor/_theme.scss +2 -3
  25. package/scss/floating-label/_theme.scss +0 -3
  26. package/scss/forms/_variables.scss +1 -1
  27. package/scss/grid/_theme.scss +6 -22
  28. package/scss/input/_layout.scss +2 -4
  29. package/scss/listview/_theme.scss +1 -2
  30. package/scss/pdf-viewer/_index.scss +3 -1
  31. package/scss/pdf-viewer/_variables.scss +14 -1
  32. package/scss/pivotgrid/_theme.scss +1 -2
  33. package/scss/popover/_variables.scss +0 -5
  34. package/scss/scheduler/_layout.scss +0 -1
  35. package/scss/signature/_variables.scss +23 -21
  36. package/scss/slider/_theme.scss +0 -1
  37. package/scss/spreadsheet/_theme.scss +0 -8
  38. package/scss/timeline/_layout.scss +0 -2
  39. package/scss/typography/_variables.scss +1 -1
package/dist/all.scss CHANGED
@@ -2337,7 +2337,7 @@ $line-height-xs: 1 !default;
2337
2337
  $line-height-sm: 1.2 !default;
2338
2338
  $line-height-md: $line-height !default;
2339
2339
  $line-height-lg: 1.5 !default;
2340
- $line-height-em: $line-height * 1em !default;
2340
+ $line-height-em: calc( #{$line-height} * 1em ) !default;
2341
2341
 
2342
2342
 
2343
2343
  // Font weight
@@ -2571,7 +2571,6 @@ $display4-letter-spacing: null !default;
2571
2571
  @include exports( "common/disabled" ) {
2572
2572
 
2573
2573
  // Disabled state
2574
- .k-state-disabled,
2575
2574
  .k-disabled,
2576
2575
  .k-widget[disabled],
2577
2576
  .k-disabled {
@@ -2586,8 +2585,7 @@ $display4-letter-spacing: null !default;
2586
2585
 
2587
2586
  // Nested disabled
2588
2587
  [disabled],
2589
- .k-disabled,
2590
- .k-state-disabled {
2588
+ .k-disabled {
2591
2589
  opacity: 1;
2592
2590
  filter: grayscale(0);
2593
2591
  }
@@ -4835,6 +4833,9 @@ $utils-border-radius: (
4835
4833
  @each $pos in (static, relative, absolute, fixed, sticky) {
4836
4834
  .k-#{$pos},
4837
4835
  .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
4836
+
4837
+ .\!k-#{$pos},
4838
+ .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
4838
4839
  }
4839
4840
 
4840
4841
  /// @name k-pos-top
@@ -5362,18 +5363,28 @@ $utils-border-radius: (
5362
5363
  @include exports( "common/decoration/color" ) {
5363
5364
 
5364
5365
  // sass-lint:disable-block no-important
5366
+ // sass-lint:disable-block class-name-format
5365
5367
  // stylelint-disable block-opening-brace-space-before
5366
5368
 
5367
5369
  .k-text-base,
5368
5370
  .k-color-base {
5369
5371
  color: $base-text;
5370
5372
  }
5373
+ .\!k-text-base,
5374
+ .\!k-color-base {
5375
+ color: $base-text !important;
5376
+ }
5371
5377
 
5372
5378
  .k-color-inherit { color: inherit; }
5379
+ .\!k-color-inherit { color: inherit !important; }
5373
5380
 
5374
5381
  @each $name, $color in $kendo-theme-colors {
5375
5382
  .k-text-#{$name},
5376
5383
  .k-color-#{$name} {
5384
+ color: $color;
5385
+ }
5386
+ .\!k-text-#{$name},
5387
+ .\!k-color-#{$name} {
5377
5388
  color: $color !important;
5378
5389
  }
5379
5390
  }
@@ -5384,63 +5395,19 @@ $utils-border-radius: (
5384
5395
  @include exports( "common/decoration/background" ) {
5385
5396
 
5386
5397
  // sass-lint:disable-block no-important
5398
+ // sass-lint:disable-block class-name-format
5387
5399
 
5388
5400
  @each $name, $bg-color in $kendo-theme-colors {
5389
5401
  .k-bg-#{$name} {
5402
+ background-color: $bg-color;
5403
+ }
5404
+ .\!k-bg-#{$name} {
5390
5405
  background-color: $bg-color !important;
5391
5406
  }
5392
5407
  }
5393
5408
 
5394
5409
  }
5395
5410
 
5396
-
5397
- @mixin variant( $base ) {
5398
- background-color: tint($base, 10);
5399
- color: shade($base, 6);
5400
- border-color: tint($base, 9);
5401
- }
5402
-
5403
- @include exports( "common/decoration/variant" ) {
5404
-
5405
- @each $name, $variant in $kendo-theme-colors {
5406
- .k-state-#{$name} {
5407
- @include variant( $variant );
5408
- }
5409
- }
5410
- }
5411
-
5412
-
5413
- @include exports( "common/decoration/legacy" ) {
5414
-
5415
- .k-info-colored {
5416
- color: #50607f;
5417
- border-color: #d0d9df;
5418
- background-color: #f0f9ff;
5419
- }
5420
-
5421
- .k-success-colored {
5422
- color: #507f50;
5423
- border-color: #d0dfd0;
5424
- background-color: #f0fff0;
5425
- }
5426
-
5427
- .k-error-colored {
5428
- color: #7f5050;
5429
- border-color: #dfd0d0;
5430
- background-color: #fff0f0;
5431
- }
5432
-
5433
- .k-shadow {
5434
- // Shadow moved to popup/_layout.scss due to variable flow
5435
- // box-shadow: $popup-shadow;
5436
- }
5437
-
5438
- .k-inset {
5439
- box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
5440
- }
5441
-
5442
- }
5443
-
5444
5411
  // #endregion
5445
5412
 
5446
5413
  // #endregion
@@ -8656,41 +8623,76 @@ $popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevati
8656
8623
  // Component
8657
8624
  // #region @import "_variables.scss"; -> packages/material/scss/badge/_variables.scss
8658
8625
  // Badge
8659
- $badge-padding-x: $padding-y !default;
8660
- $badge-padding-y: $badge-padding-x !default;
8661
- $badge-border-width: 1px !default;
8662
- $badge-border-radius: $kendo-border-radius-md !default;
8663
- $badge-font-size: $font-size-sm !default;
8664
- $badge-line-height: 1 !default;
8665
-
8666
- $badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
8667
- $badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
8668
- $badge-border-width-sm: $badge-border-width !default;
8669
- $badge-border-radius-sm: $kendo-border-radius-sm !default;
8670
- $badge-font-size-sm: $font-size-xs !default;
8671
- $badge-line-height-sm: 1 !default;
8672
-
8673
- $badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
8674
- $badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
8675
- $badge-border-width-lg: $badge-border-width !default;
8676
- $badge-border-radius-lg: $kendo-border-radius-lg !default;
8677
- $badge-font-size-lg: $font-size !default;
8678
- $badge-line-height-lg: 1 !default;
8679
-
8680
- $badge-fixed-size: 22px !default;
8681
- $badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
8682
- $badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
8683
- $badge-dot-size: 10px !default;
8684
-
8685
- $badge-fixed-size-sm: 16px !default;
8686
- $badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
8687
- $badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
8688
- $badge-dot-size-sm: 6px !default;
8689
-
8690
- $badge-fixed-size-lg: 28px !default;
8691
- $badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
8692
- $badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
8693
- $badge-dot-size-lg: 12px !default;
8626
+
8627
+ /// Width of the border around the badge.
8628
+ /// @group badge
8629
+ $kendo-badge-border-width: 1px !default;
8630
+
8631
+ /// Border radius of the badge.
8632
+ /// @group badge
8633
+ $kendo-badge-border-radius: $kendo-border-radius-md !default;
8634
+
8635
+
8636
+ /// Horizontal padding of the badge.
8637
+ /// @group badge
8638
+ $kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
8639
+ $kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
8640
+ $kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
8641
+ $kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
8642
+
8643
+ /// Vertical padding of the badge.
8644
+ /// @group badge
8645
+ $kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
8646
+ $kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
8647
+ $kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
8648
+ $kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
8649
+
8650
+ /// Font sizes of the badge.
8651
+ /// @group badge
8652
+ $kendo-badge-font-size: $font-size-xs !default;
8653
+ $kendo-badge-font-size-sm: $font-size-xs !default;
8654
+ $kendo-badge-font-size-md: $font-size-xs !default;
8655
+ $kendo-badge-font-size-lg: $font-size-xs !default;
8656
+
8657
+ /// Line heights used along with $font-size.
8658
+ /// @group badge
8659
+ $kendo-badge-line-height: 1 !default;
8660
+ $kendo-badge-line-height-sm: $kendo-badge-line-height !default;
8661
+ $kendo-badge-line-height-md: $kendo-badge-line-height !default;
8662
+ $kendo-badge-line-height-lg: $kendo-badge-line-height !default;
8663
+
8664
+ /// Badge min width used for circle badge.
8665
+ /// @group badge
8666
+ $kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
8667
+ $kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm * 1em} + #{$kendo-badge-padding-y-sm * 2} + #{$kendo-badge-border-width * 2} ) !default;
8668
+ $kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md * 1em} + #{$kendo-badge-padding-y-md * 2} + #{$kendo-badge-border-width * 2} ) !default;
8669
+ $kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg * 1em} + #{$kendo-badge-padding-y-lg * 2} + #{$kendo-badge-border-width * 2} ) !default;
8670
+
8671
+ /// Sizes map for the badge.
8672
+ /// @group badge
8673
+ $kendo-badge-sizes: (
8674
+ sm: (
8675
+ padding-x: $kendo-badge-padding-x-sm,
8676
+ padding-y: $kendo-badge-padding-y-sm,
8677
+ font-size: $kendo-badge-font-size-sm,
8678
+ line-height: $kendo-badge-line-height-sm,
8679
+ min-width: $kendo-badge-min-width-sm
8680
+ ),
8681
+ md: (
8682
+ padding-x: $kendo-badge-padding-x-md,
8683
+ padding-y: $kendo-badge-padding-y-md,
8684
+ font-size: $kendo-badge-font-size-md,
8685
+ line-height: $kendo-badge-line-height-md,
8686
+ min-width: $kendo-badge-min-width-md
8687
+ ),
8688
+ lg: (
8689
+ padding-x: $kendo-badge-padding-x-lg,
8690
+ padding-y: $kendo-badge-padding-y-lg,
8691
+ font-size: $kendo-badge-font-size-lg,
8692
+ line-height: $kendo-badge-line-height-lg,
8693
+ min-width: $kendo-badge-min-width-lg
8694
+ )
8695
+ ) !default;
8694
8696
 
8695
8697
  // #endregion
8696
8698
  // #region @import "_layout.scss"; -> packages/material/scss/badge/_layout.scss
@@ -8699,7 +8701,7 @@ $badge-dot-size-lg: 12px !default;
8699
8701
 
8700
8702
  .k-badge {
8701
8703
  padding: 0;
8702
- border-width: 0;
8704
+ border-width: $kendo-badge-border-width;
8703
8705
  border-style: solid;
8704
8706
  border-color: transparent;
8705
8707
  box-sizing: border-box;
@@ -8749,74 +8751,23 @@ $badge-dot-size-lg: 12px !default;
8749
8751
 
8750
8752
 
8751
8753
  // Badge sizes
8752
- .k-badge-sm {
8753
- padding: $badge-padding-y-sm $badge-padding-x-sm;
8754
- border-width: $badge-border-width-sm;
8755
- font-size: $badge-font-size-sm;
8756
- line-height: $badge-line-height-sm;
8757
-
8758
- &:empty { padding: $badge-padding-y-sm; }
8759
- }
8760
- .k-badge-md {
8761
- padding: $badge-padding-y $badge-padding-x;
8762
- border-width: $badge-border-width;
8763
- font-size: $badge-font-size;
8764
- line-height: $badge-line-height;
8765
-
8766
- &:empty { padding: $badge-padding-y; }
8767
- }
8768
- .k-badge-lg {
8769
- padding: $badge-padding-y-lg $badge-padding-x-lg;
8770
- border-width: $badge-border-width-lg;
8771
- font-size: $badge-font-size-lg;
8772
- line-height: $badge-line-height-lg;
8773
-
8774
- &:empty { padding: $badge-padding-y-lg; }
8775
- }
8776
-
8777
-
8778
- // Badge shapes
8779
- .k-badge-rounded {
8780
- &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
8781
- &.k-badge-md { @include border-radius( $badge-border-radius ); }
8782
- &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
8783
- }
8784
- .k-badge-pill {
8785
- border-radius: 5rem;
8786
- }
8787
- .k-badge-circle {
8788
- padding: 0 !important; // sass-lint:disable-line no-important
8789
- border-radius: 100%;
8754
+ @each $size, $size-props in $kendo-badge-sizes {
8755
+ $_padding-x: map-get( $size-props, padding-x );
8756
+ $_padding-y: map-get( $size-props, padding-y );
8757
+ $_font-size: map-get( $size-props, font-size );
8758
+ $_line-height: map-get( $size-props, line-height );
8759
+ $_min-width: map-get( $size-props, min-width );
8790
8760
 
8791
- &.k-badge-sm {
8792
- width: $badge-size-sm;
8793
- height: $badge-size-sm;
8794
- }
8795
- &.k-badge-md {
8796
- width: $badge-size;
8797
- height: $badge-size;
8798
- }
8799
- &.k-badge-lg {
8800
- width: $badge-size-lg;
8801
- height: $badge-size-lg;
8802
- }
8803
- }
8804
- .k-badge-dot {
8805
- padding: 0 !important; // sass-lint:disable-line no-important
8806
- border-radius: 100%;
8807
- font-size: 0;
8761
+ .k-badge-#{$size} {
8762
+ padding: $_padding-y $_padding-x;
8763
+ font-size: $_font-size;
8764
+ line-height: $_line-height;
8765
+ min-width: $_min-width;
8808
8766
 
8809
- &.k-badge-sm {
8810
- width: $badge-dot-size-sm;
8811
- height: $badge-dot-size-sm;
8812
- }
8813
- &.k-badge-md {
8814
- width: $badge-dot-size;
8815
- height: $badge-dot-size;
8816
- }
8817
- &.k-badge-lg {
8818
- width: $badge-dot-size-lg;
8819
- height: $badge-dot-size-lg;
8767
+ &:empty {
8768
+ padding: $_padding-y;
8769
+ min-width: auto;
8770
+ }
8820
8771
  }
8821
8772
  }
8822
8773
 
@@ -8900,7 +8851,7 @@ $badge-dot-size-lg: 12px !default;
8900
8851
 
8901
8852
  // Solid badges
8902
8853
  @each $name, $color in $kendo-theme-colors {
8903
- .k-badge-solid.k-badge-#{$name} {
8854
+ .k-badge-solid-#{$name} {
8904
8855
  border-color: $color;
8905
8856
  color: contrast-wcag( $color );
8906
8857
  background-color: $color;
@@ -8914,7 +8865,7 @@ $badge-dot-size-lg: 12px !default;
8914
8865
  }
8915
8866
 
8916
8867
  @each $name, $color in $kendo-theme-colors {
8917
- .k-badge-outline.k-badge-#{$name} {
8868
+ .k-badge-outline-#{$name} {
8918
8869
  color: $color;
8919
8870
  }
8920
8871
  }
@@ -9502,8 +9453,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
9502
9453
 
9503
9454
  &:disabled,
9504
9455
  &[disabled],
9505
- &.k-disabled,
9506
- &.k-state-disabled {
9456
+ &.k-disabled {
9507
9457
  opacity: 1;
9508
9458
  filter: none;
9509
9459
  }
@@ -10255,8 +10205,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
10255
10205
  @include disabled( $disabled-styling );
10256
10206
 
10257
10207
  [disabled] &,
10258
- .k-disabled &,
10259
- .k-state-disabled & {
10208
+ .k-disabled & {
10260
10209
  opacity: 1;
10261
10210
  filter: grayscale(0);
10262
10211
  }
@@ -10277,8 +10226,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
10277
10226
  @include disabled( $disabled-styling );
10278
10227
 
10279
10228
  [disabled] &,
10280
- .k-disabled &,
10281
- .k-state-disabled & {
10229
+ .k-disabled & {
10282
10230
  opacity: 1;
10283
10231
  filter: grayscale(0);
10284
10232
  }
@@ -10723,8 +10671,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
10723
10671
  pointer-events: none;
10724
10672
  }
10725
10673
 
10726
- &.k-focus::after,
10727
- &.k-state-focused::after {
10674
+ &.k-focus::after {
10728
10675
  opacity: 1;
10729
10676
  transform: scaleX(1);
10730
10677
  }
@@ -10742,8 +10689,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
10742
10689
  transform: none;
10743
10690
  }
10744
10691
 
10745
- &.k-focus::after,
10746
- &.k-state-focused::after {
10692
+ &.k-focus::after {
10747
10693
  transform: none;
10748
10694
  }
10749
10695
  &:focus-within::after {
@@ -11312,7 +11258,6 @@ $floating-label-focus-text: $primary !default;
11312
11258
  width: auto;
11313
11259
  }
11314
11260
 
11315
- &.k-state-empty,
11316
11261
  &.k-empty {
11317
11262
  > .k-label {
11318
11263
  top: $floating-label-offset-y;
@@ -11323,8 +11268,6 @@ $floating-label-focus-text: $primary !default;
11323
11268
  }
11324
11269
 
11325
11270
  > .k-label,
11326
- // &:focus-within > .k-label,
11327
- &.k-state-focused > .k-label,
11328
11271
  &.k-focus > .k-label {
11329
11272
  top: $floating-label-focus-offset-y;
11330
11273
  left: $floating-label-focus-offset-x;
@@ -11336,7 +11279,6 @@ $floating-label-focus-text: $primary !default;
11336
11279
  transform: scale( $floating-label-focus-scale );
11337
11280
  }
11338
11281
 
11339
- &.k-state-empty:not(.k-state-focused) ::placeholder,
11340
11282
  &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
11341
11283
  color: transparent;
11342
11284
  }
@@ -11350,7 +11292,6 @@ $floating-label-focus-text: $primary !default;
11350
11292
  transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
11351
11293
  }
11352
11294
 
11353
- &.k-state-empty,
11354
11295
  &.k-empty {
11355
11296
  > .k-label {
11356
11297
  left: auto;
@@ -11359,8 +11300,6 @@ $floating-label-focus-text: $primary !default;
11359
11300
  }
11360
11301
 
11361
11302
  > .k-label,
11362
- // &:focus-within > .k-label,
11363
- &.k-state-focused > .k-label,
11364
11303
  &.k-focus > .k-label {
11365
11304
  left: auto;
11366
11305
  right: $floating-label-focus-offset-x;
@@ -11415,8 +11354,7 @@ $floating-label-focus-text: $primary !default;
11415
11354
  );
11416
11355
  }
11417
11356
 
11418
- &.k-focus > .k-label,
11419
- &.k-state-focused > .k-label {
11357
+ &.k-focus > .k-label {
11420
11358
  @include fill(
11421
11359
  $color: $floating-label-focus-text,
11422
11360
  $bg: $floating-label-focus-bg
@@ -11437,9 +11375,6 @@ $floating-label-focus-text: $primary !default;
11437
11375
 
11438
11376
  &.k-invalid + .k-label,
11439
11377
  .k-invalid + .k-label,
11440
- &.k-state-invalid + .k-label,
11441
- .k-state-invalid + .k-label,
11442
- .k-invalid + .k-label,
11443
11378
  .ng-invalid.ng-touched + .k-label,
11444
11379
  .ng-invalid.ng-dirty + .k-label {
11445
11380
  @include fill( $color: $error );
@@ -13850,8 +13785,11 @@ $loader-container-font-size-lg: $font-size-lg !default;
13850
13785
  }
13851
13786
 
13852
13787
  .k-loader-container-inner {
13853
- .k-text-secondary {
13854
- color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
13788
+ // sass-lint:disable-block no-important
13789
+ // sass-lint:disable-block class-name-format
13790
+ .k-text-secondary,
13791
+ .\!k-text-secondary {
13792
+ color: $loader-secondary-bg !important;
13855
13793
  }
13856
13794
  }
13857
13795
 
@@ -14824,6 +14762,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
14824
14762
  align-items: center;
14825
14763
  }
14826
14764
 
14765
+ // Template item
14766
+ .k-toolbar-item:focus {
14767
+ text-decoration: none;
14768
+ outline: 0;
14769
+ }
14770
+
14827
14771
  }
14828
14772
 
14829
14773
 
@@ -15034,6 +14978,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
15034
14978
  }
15035
14979
 
15036
14980
 
14981
+ // Template item
14982
+ .k-toolbar-item:focus,
14983
+ .k-toolbar-item.k-focus {
14984
+ @include box-shadow( $kendo-button-focus-shadow );
14985
+ }
14986
+
14987
+
15037
14988
  // Button group
15038
14989
  .k-button-group {}
15039
14990
 
@@ -15351,7 +15302,7 @@ $form-spacer: $padding-x * 2 !default;
15351
15302
 
15352
15303
  $form-font-size: $font-size !default;
15353
15304
  $form-line-height: $line-height !default;
15354
- $form-line-height-em: $form-line-height * 1em !default;
15305
+ $form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
15355
15306
  $form-line-height-sm: $line-height-sm !default;
15356
15307
  $form-line-height-lg: $line-height-lg !default;
15357
15308
 
@@ -16741,7 +16692,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16741
16692
 
16742
16693
 
16743
16694
  // Selection
16744
- > .k-state-selected,
16745
16695
  > .k-selected {
16746
16696
  border-width: 0;
16747
16697
  border-style: solid;
@@ -16812,7 +16762,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16812
16762
  flex-direction: row;
16813
16763
  }
16814
16764
 
16815
- > .k-state-selected,
16816
16765
  > .k-selected {
16817
16766
  width: 0;
16818
16767
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16839,7 +16788,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16839
16788
  // Horizontal reverse
16840
16789
  &.k-progressbar-reverse {
16841
16790
 
16842
- > .k-state-selected,
16843
16791
  > .k-selected {
16844
16792
  flex-direction: row-reverse;
16845
16793
  justify-self: flex-end;
@@ -16864,7 +16812,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16864
16812
  writing-mode: vertical-lr;
16865
16813
  }
16866
16814
 
16867
- > .k-state-selected,
16868
16815
  > .k-selected {
16869
16816
  height: 0;
16870
16817
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16894,7 +16841,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16894
16841
  &.k-progressbar-reverse {
16895
16842
  flex-direction: column;
16896
16843
 
16897
- > .k-state-selected,
16898
16844
  > .k-selected {
16899
16845
  flex-direction: column;
16900
16846
  align-self: flex-start;
@@ -16906,7 +16852,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16906
16852
  // Indeterminate
16907
16853
  .k-progressbar-indeterminate {
16908
16854
  .k-progress-status-wrap,
16909
- .k-state-selected,
16910
16855
  .k-selected,
16911
16856
  .k-item {
16912
16857
  display: none;
@@ -16917,9 +16862,7 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16917
16862
  // Blazor specific
16918
16863
  .telerik-blazor.k-progressbar-horizontal {
16919
16864
 
16920
- > .k-state-selected,
16921
16865
  > .k-selected,
16922
- > .k-state-selected > .k-progress-status-wrap,
16923
16866
  > .k-selected > .k-progress-status-wrap {
16924
16867
  transition: width .1s ease-in-out;
16925
16868
  }
@@ -16948,7 +16891,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16948
16891
  display: -ms-inline-grid;
16949
16892
 
16950
16893
  > .k-progress-status-wrap,
16951
- > .k-state-selected,
16952
16894
  > .k-selected {
16953
16895
  -ms-grid-column: 1;
16954
16896
  -ms-grid-row: 1;
@@ -16958,7 +16900,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16958
16900
  -ms-grid-columns: 1fr;
16959
16901
  -ms-grid-rows: $progressbar-height;
16960
16902
 
16961
- &.k-progressbar-reverse > .k-state-selected,
16962
16903
  &.k-progressbar-reverse > .k-selected {
16963
16904
  -ms-grid-column-align: end;
16964
16905
  }
@@ -16967,12 +16908,10 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16967
16908
  -ms-grid-columns: $progressbar-height;
16968
16909
  -ms-grid-rows: 1fr;
16969
16910
 
16970
- > .k-state-selected,
16971
16911
  > .k-selected {
16972
16912
  -ms-grid-row-align: end;
16973
16913
  }
16974
16914
 
16975
- &.k-progressbar-reverse > .k-state-selected,
16976
16915
  &.k-progressbar-reverse > .k-selected {
16977
16916
  -ms-grid-row-align: start;
16978
16917
  }
@@ -17111,7 +17050,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17111
17050
  .k-progressbar {
17112
17051
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
17113
17052
 
17114
- .k-state-selected,
17115
17053
  .k-selected {
17116
17054
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
17117
17055
  }
@@ -17550,7 +17488,6 @@ $kendo-radio-ripple-opacity: .2 !default;
17550
17488
  }
17551
17489
 
17552
17490
  .k-radio:focus,
17553
- .k-radio.k-state-focus,
17554
17491
  .k-radio.k-focus {
17555
17492
  box-shadow: none !important; // sass-lint:disable-line no-important
17556
17493
 
@@ -17623,7 +17560,6 @@ $kendo-radio-ripple-opacity: .2 !default;
17623
17560
 
17624
17561
  // Hover state
17625
17562
  .k-radio:hover,
17626
- .k-radio.k-state-hover,
17627
17563
  .k-radio.k-hover {
17628
17564
  @include fill(
17629
17565
  $kendo-radio-hover-text,
@@ -17635,7 +17571,6 @@ $kendo-radio-ripple-opacity: .2 !default;
17635
17571
 
17636
17572
  // Focus state
17637
17573
  .k-radio:focus,
17638
- .k-radio.k-state-focus,
17639
17574
  .k-radio.k-focus {
17640
17575
  @include fill( $border: $kendo-radio-focus-border );
17641
17576
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -17644,13 +17579,11 @@ $kendo-radio-ripple-opacity: .2 !default;
17644
17579
 
17645
17580
  // Invalid state
17646
17581
  .k-radio.k-invalid,
17647
- .k-radio.k-state-invalid,
17648
17582
  .k-radio.ng-invalid.ng-touched,
17649
17583
  .k-radio.ng-invalid.ng-dirty {
17650
17584
  @include fill( $border: $kendo-radio-invalid-border );
17651
17585
  }
17652
17586
  .k-radio.k-invalid + .k-radio-label,
17653
- .k-radio.k-state-invalid + .k-radio-label,
17654
17587
  .k-radio.ng-invalid.ng-touched + .k-radio-label,
17655
17588
  .k-radio.ng-invalid.ng-dirty + .k-radio-label {
17656
17589
  @include fill( $color: $kendo-radio-invalid-text );
@@ -17667,7 +17600,6 @@ $kendo-radio-ripple-opacity: .2 !default;
17667
17600
  );
17668
17601
  }
17669
17602
  .k-radio:checked:focus,
17670
- .k-radio.k-checked.k-state-focus,
17671
17603
  .k-radio.k-checked.k-focus {
17672
17604
  @include fill( $border: $kendo-radio-focus-checked-border );
17673
17605
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -17841,7 +17773,6 @@ $slider-disabled-opacity: .65 !default;
17841
17773
  }
17842
17774
 
17843
17775
 
17844
- &.k-state-disabled,
17845
17776
  &.k-disabled {
17846
17777
  .k-tick,
17847
17778
  .k-slider-track,
@@ -18135,8 +18066,8 @@ $slider-disabled-opacity: .65 !default;
18135
18066
  left: auto;
18136
18067
  }
18137
18068
 
18138
- .k-button .k-i-arrow-e,
18139
- .k-button .k-i-arrow-w {
18069
+ .k-button-increase .k-icon,
18070
+ .k-button-decrease .k-icon {
18140
18071
  transform: scaleX(-1);
18141
18072
  }
18142
18073
  }
@@ -18347,20 +18278,17 @@ $slider-disabled-opacity: .65 !default;
18347
18278
  }
18348
18279
 
18349
18280
  &:focus,
18350
- &.k-state-focused,
18351
18281
  &.k-focus {
18352
18282
  @include box-shadow( $slider-draghandle-focused-shadow );
18353
18283
  }
18354
18284
  }
18355
18285
 
18356
- &.k-state-focused,
18357
18286
  &.k-focus {
18358
18287
  .k-draghandle {
18359
18288
  @include box-shadow( $slider-draghandle-focused-shadow );
18360
18289
  }
18361
18290
  }
18362
18291
 
18363
- &.k-state-disabled,
18364
18292
  &.k-disabled {
18365
18293
  opacity: $slider-disabled-opacity;
18366
18294
  }
@@ -18399,7 +18327,6 @@ $slider-disabled-opacity: .65 !default;
18399
18327
  }
18400
18328
  }
18401
18329
 
18402
- &.k-state-disabled,
18403
18330
  &.k-disabled {
18404
18331
  opacity: 1;
18405
18332
 
@@ -19051,7 +18978,6 @@ $kendo-calendar-sizes: (
19051
18978
  }
19052
18979
 
19053
18980
  // // styles are applied to the k-link element inside
19054
- // .k-state-selected,
19055
18981
  // .k-selected {
19056
18982
  // color: inherit;
19057
18983
  // background: transparent;
@@ -19206,10 +19132,8 @@ $kendo-calendar-sizes: (
19206
19132
 
19207
19133
  &:hover,
19208
19134
  &.k-hover,
19209
- &.k-state-hover,
19210
19135
  &:focus,
19211
- &.k-focus,
19212
- &.k-state-focus {
19136
+ &.k-focus {
19213
19137
  color: $calendar-today-nav-hover-text;
19214
19138
  }
19215
19139
  }
@@ -19230,8 +19154,7 @@ $kendo-calendar-sizes: (
19230
19154
  .k-calendar-cell-inner {
19231
19155
  box-shadow: inset 0 0 0 1px $calendar-today-color;
19232
19156
  }
19233
- &.k-focus .k-calendar-cell-inner,
19234
- &.k-state-focused .k-calendar-cell-inner {
19157
+ &.k-focus .k-calendar-cell-inner {
19235
19158
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
19236
19159
  }
19237
19160
  } @else if $calendar-today-style == color {
@@ -19265,8 +19188,7 @@ $kendo-calendar-sizes: (
19265
19188
 
19266
19189
  // Interactive states
19267
19190
  .k-calendar-td:hover .k-calendar-cell-inner,
19268
- .k-calendar-td.k-hover .k-calendar-cell-inner,
19269
- .k-calendar-td.k-state-hover .k-calendar-cell-inner {
19191
+ .k-calendar-td.k-hover .k-calendar-cell-inner {
19270
19192
  @include fill(
19271
19193
  $calendar-cell-hover-text,
19272
19194
  $calendar-cell-hover-bg,
@@ -19274,8 +19196,7 @@ $kendo-calendar-sizes: (
19274
19196
  $calendar-cell-hover-gradient
19275
19197
  );
19276
19198
  }
19277
- .k-calendar-td.k-selected .k-calendar-cell-inner,
19278
- .k-calendar-td.k-state-selected .k-calendar-cell-inner {
19199
+ .k-calendar-td.k-selected .k-calendar-cell-inner {
19279
19200
  @include fill(
19280
19201
  $calendar-cell-selected-text,
19281
19202
  $calendar-cell-selected-bg,
@@ -19284,8 +19205,7 @@ $kendo-calendar-sizes: (
19284
19205
  );
19285
19206
  }
19286
19207
  .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
19287
- .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
19288
- .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
19208
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
19289
19209
  @include fill(
19290
19210
  $calendar-cell-selected-hover-text,
19291
19211
  $calendar-cell-selected-hover-bg,
@@ -19294,14 +19214,11 @@ $kendo-calendar-sizes: (
19294
19214
  );
19295
19215
  }
19296
19216
  .k-calendar-td:focus .k-calendar-cell-inner,
19297
- .k-calendar-td.k-focus .k-calendar-cell-inner,
19298
- .k-calendar-td.k-state-focus .k-calendar-cell-inner,
19299
- .k-calendar-td.k-state-focused .k-calendar-cell-inner {
19217
+ .k-calendar-td.k-focus .k-calendar-cell-inner {
19300
19218
  box-shadow: $calendar-cell-focused-shadow;
19301
19219
  }
19302
19220
  .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
19303
- .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
19304
- .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
19221
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
19305
19222
  box-shadow: $calendar-cell-selected-focus-shadow;
19306
19223
  }
19307
19224
 
@@ -19315,8 +19232,7 @@ $kendo-calendar-sizes: (
19315
19232
  box-shadow: inset -1px 0 $calendar-navigation-border;
19316
19233
 
19317
19234
  li:hover,
19318
- li.k-hover,
19319
- li.k-state-hover {
19235
+ li.k-hover {
19320
19236
  color: $calendar-today-nav-hover-text;
19321
19237
  }
19322
19238
  }
@@ -19339,7 +19255,6 @@ $kendo-calendar-sizes: (
19339
19255
  // Invalid
19340
19256
  &.k-invalid,
19341
19257
  &.k-invalid:hover,
19342
- &.k-state-invalid,
19343
19258
  &.ng-invalid.ng-touched,
19344
19259
  &.ng-invalid.ng-dirty {
19345
19260
  border-color: $invalid-border;
@@ -19387,9 +19302,7 @@ $kendo-calendar-sizes: (
19387
19302
  }
19388
19303
 
19389
19304
  .k-range-start.k-active,
19390
- .k-range-start.k-state-active,
19391
- .k-range-end.k-active,
19392
- .k-range-end.k-state-active {
19305
+ .k-range-end.k-active {
19393
19306
  .k-calendar-cell-inner {
19394
19307
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
19395
19308
  }
@@ -19430,7 +19343,6 @@ $kendo-calendar-sizes: (
19430
19343
 
19431
19344
  .k-calendar {
19432
19345
 
19433
- .k-state-focused .k-link,
19434
19346
  .k-focus .k-link {
19435
19347
  @include fill(
19436
19348
  $calendar-cell-hover-text,
@@ -19438,7 +19350,6 @@ $kendo-calendar-sizes: (
19438
19350
  $calendar-cell-hover-border
19439
19351
  );
19440
19352
  }
19441
- .k-state-selected.k-state-focused .k-link,
19442
19353
  .k-selected.k-focus .k-link {
19443
19354
  @include fill(
19444
19355
  $calendar-cell-selected-text,
@@ -19649,7 +19560,6 @@ $kendo-time-selector-sizes: (
19649
19560
  display: block;
19650
19561
  }
19651
19562
 
19652
- &.k-state-focused,
19653
19563
  &.k-focus {
19654
19564
  &::before,
19655
19565
  &::after {
@@ -19824,7 +19734,6 @@ $kendo-time-selector-sizes: (
19824
19734
  color: $time-list-title-text;
19825
19735
  }
19826
19736
 
19827
- &.k-state-focused,
19828
19737
  &.k-focus {
19829
19738
  .k-title {
19830
19739
  color: $time-list-title-focus-text;
@@ -20160,18 +20069,14 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
20160
20069
  -ms-high-contrast-adjust: none;
20161
20070
 
20162
20071
  &:hover,
20163
- &.k-state-hover,
20164
20072
  &.k-hover {
20165
20073
  position: relative;
20166
20074
  z-index: 101;
20167
20075
  }
20168
20076
 
20169
20077
  &:focus,
20170
- &.k-state-focus,
20171
20078
  &.k-focus,
20172
- &.k-state-selected,
20173
20079
  &.k-selected,
20174
- &.k-state-selected:hover,
20175
20080
  &.k-selected:hover {
20176
20081
  position: relative;
20177
20082
  z-index: 100;
@@ -20191,20 +20096,15 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
20191
20096
  .k-colorpalette-tile {
20192
20097
 
20193
20098
  &:focus,
20194
- &.k-state-focus,
20195
20099
  &.k-focus {
20196
20100
  @include box-shadow( $colorpalette-tile-focus-shadow );
20197
20101
  }
20198
20102
 
20199
20103
  &:hover,
20200
- &.k-state-hover,
20201
20104
  &.k-hover {
20202
20105
  @include box-shadow( $colorpalette-tile-hover-shadow );
20203
20106
  }
20204
20107
 
20205
- &.k-state-selected,
20206
- &.k-selected,
20207
- &.k-state-selected:hover,
20208
20108
  &.k-selected,
20209
20109
  &.k-selected:hover {
20210
20110
  @include box-shadow( $colorpalette-tile-selected-shadow );
@@ -20537,7 +20437,7 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
20537
20437
  }
20538
20438
 
20539
20439
  // Needed for the double check icons
20540
- .k-i-check + .k-i-check {
20440
+ .k-icon + .k-icon {
20541
20441
  margin-left: -13px;
20542
20442
  }
20543
20443
  }
@@ -20583,7 +20483,6 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
20583
20483
  }
20584
20484
 
20585
20485
  .k-colorgradient:focus,
20586
- .k-colorgradient.k-state-focus,
20587
20486
  .k-colorgradient.k-focus {
20588
20487
  @include fill( $border: $colorgradient-focus-border );
20589
20488
  @include box-shadow( $colorgradient-focus-shadow );
@@ -20604,16 +20503,15 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
20604
20503
  @include box-shadow( $colorgradient-draghandle-shadow );
20605
20504
 
20606
20505
  &:focus,
20607
- &.k-state-focus,
20608
20506
  &.k-focus {
20609
20507
  @include fill( $bg: transparent, $border: $white );
20610
20508
  @include box-shadow( $colorgradient-draghandle-focus-shadow );
20611
20509
  }
20612
20510
 
20613
- &:active,
20614
20511
  &:hover,
20615
- &.k-state-hover,
20616
- &.k-hover {
20512
+ &.k-hover,
20513
+ &.k-active,
20514
+ &:active {
20617
20515
  @include fill( $bg: transparent, $border: $white );
20618
20516
  @include box-shadow( $colorgradient-draghandle-hover-shadow );
20619
20517
  }
@@ -20808,7 +20706,6 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
20808
20706
  }
20809
20707
 
20810
20708
  .k-coloreditor:focus,
20811
- .k-coloreditor.k-state-focus,
20812
20709
  .k-coloreditor.k-focus {
20813
20710
  @include fill( $border: $coloreditor-focus-border );
20814
20711
  @include box-shadow( $coloreditor-focus-shadow );
@@ -22155,7 +22052,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22155
22052
  box-sizing: border-box;
22156
22053
  }
22157
22054
 
22158
- &.k-state-readonly {
22055
+ &.k-readonly {
22159
22056
  pointer-events: none;
22160
22057
  }
22161
22058
  }
@@ -22235,7 +22132,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22235
22132
  color: $component-text;
22236
22133
 
22237
22134
  &:focus,
22238
- &.k-state-focused,
22239
22135
  &.k-focus {
22240
22136
 
22241
22137
  .k-rating-item {
@@ -22243,7 +22139,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22243
22139
  text-shadow: $rating-icon-focused-shadow;
22244
22140
  }
22245
22141
 
22246
- &.k-state-selected > .k-icon,
22247
22142
  &.k-selected > .k-icon {
22248
22143
  text-shadow: $rating-icon-focused-selected-shadow;
22249
22144
  }
@@ -22254,19 +22149,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22254
22149
  .k-rating-item {
22255
22150
  color: $rating-icon-text;
22256
22151
 
22257
- &.k-state-selected,
22258
22152
  &.k-selected {
22259
22153
  color: $rating-icon-selected-text;
22260
22154
 
22261
22155
  &:focus,
22262
- &.k-state-focused,
22263
22156
  &.k-focus {
22264
22157
  color: $rating-icon-focused-text;
22265
22158
  }
22266
22159
  }
22267
22160
 
22268
22161
  &:hover,
22269
- &.k-state-hover,
22270
22162
  &.k-hover {
22271
22163
  color: $rating-icon-hover-text;
22272
22164
  cursor: pointer;
@@ -22274,7 +22166,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22274
22166
  }
22275
22167
  }
22276
22168
 
22277
-
22278
22169
  // #endregion
22279
22170
 
22280
22171
  // #endregion
@@ -23560,7 +23451,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23560
23451
  z-index: 1;
23561
23452
  }
23562
23453
  input[disabled],
23563
- input.k-state-disabled,
23564
23454
  input.k-disabled {
23565
23455
  visibility: hidden;
23566
23456
  }
@@ -23608,12 +23498,10 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23608
23498
 
23609
23499
  .k-file {
23610
23500
 
23611
- &.k-state-focused,
23612
23501
  &.k-focus {
23613
23502
  box-shadow: inset $upload-focused-shadow;
23614
23503
  }
23615
23504
 
23616
- .k-upload-action.k-state-focused,
23617
23505
  .k-upload-action.k-focus {
23618
23506
  box-shadow: $upload-focused-shadow;
23619
23507
  }
@@ -23705,7 +23593,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23705
23593
  }
23706
23594
 
23707
23595
  // Invalid,
23708
- &.k-state-invalid,
23709
23596
  &.k-invalid,
23710
23597
  &.ng-invalid.ng-touched,
23711
23598
  &.ng-invalid.ng-dirty {
@@ -24755,7 +24642,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
24755
24642
 
24756
24643
  // Hover state
24757
24644
  &:hover,
24758
- &.k-state-hover,
24759
24645
  &.k-hover {
24760
24646
  @include fill(
24761
24647
  $actionsheet-item-hover-text,
@@ -24769,7 +24655,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
24769
24655
 
24770
24656
  // Focus state
24771
24657
  &:focus,
24772
- &.k-state-focus,
24773
24658
  &.k-focus {
24774
24659
  @include fill(
24775
24660
  $actionsheet-item-focus-text,
@@ -24783,7 +24668,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
24783
24668
 
24784
24669
  // Disabed state
24785
24670
  &:disabled,
24786
- &.k-state-disabled,
24787
24671
  &.k-disabled {
24788
24672
  @include fill(
24789
24673
  $actionsheet-item-disabled-text,
@@ -25037,7 +24921,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
25037
24921
 
25038
24922
  .k-window {
25039
24923
  &:focus,
25040
- &.k-state-focused,
25041
24924
  &.k-focus {
25042
24925
  @include box-shadow( $window-focused-shadow );
25043
24926
  }
@@ -25573,33 +25456,28 @@ $drawer-selected-hover-text: $secondary !default;
25573
25456
  .k-drawer-item {
25574
25457
 
25575
25458
  &:hover,
25576
- &.k-state-hover,
25577
25459
  &.k-hover {
25578
25460
  color: $drawer-hovered-text;
25579
25461
  background-color: $drawer-hovered-bg;
25580
25462
  }
25581
25463
 
25582
25464
  &:focus,
25583
- &.k-state-focused,
25584
25465
  &.k-focus {
25585
25466
  background-color: $drawer-focused-bg;
25586
25467
  box-shadow: $drawer-focused-shadow;
25587
25468
 
25588
25469
  &:hover,
25589
- &.k-state-hover,
25590
25470
  &.k-hover {
25591
25471
  color: $drawer-hovered-text;
25592
25472
  background-color: $drawer-hovered-bg;
25593
25473
  }
25594
25474
  }
25595
25475
 
25596
- &.k-state-selected,
25597
25476
  &.k-selected {
25598
25477
  color: $drawer-selected-text;
25599
25478
  background-color: $drawer-selected-bg;
25600
25479
 
25601
25480
  &:hover,
25602
- &.k-state-hover,
25603
25481
  &.k-hover {
25604
25482
  color: $drawer-selected-hover-text;
25605
25483
  background-color: $drawer-selected-hover-bg;
@@ -25615,18 +25493,18 @@ $drawer-selected-hover-text: $secondary !default;
25615
25493
  // #endregion
25616
25494
 
25617
25495
  @include exports( "drawer/theme/material" ) {
25496
+
25618
25497
  .k-drawer-item {
25619
- &.k-state-selected,
25620
25498
  &.k-selected {
25621
25499
 
25622
25500
  &:focus,
25623
- &.k-state-focused,
25624
25501
  &.k-focus {
25625
25502
  background-color: $drawer-focused-bg;
25626
25503
  box-shadow: $drawer-focused-shadow;
25627
25504
  }
25628
25505
  }
25629
25506
  }
25507
+
25630
25508
  }
25631
25509
 
25632
25510
  // #endregion
@@ -25745,7 +25623,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
25745
25623
  flex: none;
25746
25624
  }
25747
25625
 
25748
- > .k-i-close {
25626
+ > .k-i-close,
25627
+ > .k-i-x {
25749
25628
  margin-right: 0;
25750
25629
  margin-left: $notification-icon-spacing;
25751
25630
  flex: none;
@@ -25768,7 +25647,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
25768
25647
  margin-left: $notification-icon-spacing;
25769
25648
  }
25770
25649
 
25771
- > .k-i-close {
25650
+ > .k-i-close,
25651
+ > .k-i-x {
25772
25652
  margin-left: 0;
25773
25653
  margin-right: $notification-icon-spacing;
25774
25654
  }
@@ -25793,7 +25673,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
25793
25673
  );
25794
25674
  }
25795
25675
  .k-notification-wrap {
25796
- > .k-i-close {
25676
+ > .k-i-close,
25677
+ > .k-i-x {
25797
25678
  color: inherit;
25798
25679
  }
25799
25680
  }
@@ -25932,16 +25813,6 @@ $card-deck-scroll-button-offset: ( $card-deck-gap / 2 ) !default;
25932
25813
  $card-callout-width: 20px !default;
25933
25814
  $card-callout-height: 20px !default;
25934
25815
 
25935
- $card-callout-box-shadow-n: 2px -2px 2px 0 rgba(0, 0, 0, .04) !default;
25936
- $card-callout-box-shadow-e: -1px -3px 1px -2px rgba(0, 0, 0, .2), 0 -2px 2px -2px rgba(0, 0, 0, .14), 1px -2px 2px -1px rgba(0, 0, 0, .12) !default;
25937
- $card-callout-box-shadow-s: 2px -2px 2px 0 rgba(0, 0, 0, .2), 0 -2px 2px -3px rgba(0, 0, 0, .14), 1px -2px 2px -1px rgba(0, 0, 0, .12) !default;
25938
- $card-callout-box-shadow-w: -1px -3px 1px -2px rgba(0, 0, 0, .2), 0 -2px 2px -2px rgba(0, 0, 0, .14), 1px -2px 2px -1px rgba(0, 0, 0, .12) !default;
25939
-
25940
- $card-focus-callout-box-shadow-n: null !default;
25941
- $card-focus-callout-box-shadow-e: null !default;
25942
- $card-focus-callout-box-shadow-s: null !default;
25943
- $card-focus-callout-box-shadow-w: null !default;
25944
-
25945
25816
  // #endregion
25946
25817
  // #region @import "_layout.scss"; -> packages/material/scss/card/_layout.scss
25947
25818
  // #region @import "~@progress/kendo-theme-default/scss/card/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/card/_layout.scss
@@ -25986,6 +25857,7 @@ $card-focus-callout-box-shadow-w: null !default;
25986
25857
  display: flex;
25987
25858
  flex-direction: inherit;
25988
25859
  overflow: hidden;
25860
+ position: relative;
25989
25861
  }
25990
25862
 
25991
25863
 
@@ -26276,7 +26148,7 @@ $card-focus-callout-box-shadow-w: null !default;
26276
26148
  margin: 0;
26277
26149
  width: $card-callout-width;
26278
26150
  height: $card-callout-height;
26279
- border-width: $card-border-width $card-border-width 0 0;
26151
+ border-width: $card-border-width;
26280
26152
  border-style: solid;
26281
26153
  box-sizing: border-box;
26282
26154
  position: absolute;
@@ -26285,22 +26157,22 @@ $card-focus-callout-box-shadow-w: null !default;
26285
26157
  .k-card-callout.k-callout-n {
26286
26158
  top: 0;
26287
26159
  left: 50%;
26288
- transform: translate(-50%, -50%) rotate(-45deg);
26160
+ transform: translate(-50%, -50%) rotate(45deg);
26289
26161
  }
26290
26162
  .k-card-callout.k-callout-e {
26291
26163
  top: 50%;
26292
26164
  right: 0;
26293
- transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
26165
+ transform: translate(50%, -50%) rotate(-45deg);
26294
26166
  }
26295
26167
  .k-card-callout.k-callout-s {
26296
26168
  bottom: 0;
26297
26169
  left: 50%;
26298
- transform: translate(-50%, 50%) rotate(135deg);
26170
+ transform: translate(-50%, 50%) rotate(45deg);
26299
26171
  }
26300
26172
  .k-card-callout.k-callout-w {
26301
26173
  top: 50%;
26302
26174
  left: 0;
26303
- transform: translate(-50%, -50%) rotate(-135deg);
26175
+ transform: translate(-50%, -50%) rotate(45deg);
26304
26176
  }
26305
26177
 
26306
26178
  }
@@ -26357,9 +26229,13 @@ $card-focus-callout-box-shadow-w: null !default;
26357
26229
  );
26358
26230
  @include box-shadow( $card-shadow );
26359
26231
 
26232
+ .k-card-inner {
26233
+ background-color: inherit;
26234
+ border-color: inherit;
26235
+ }
26236
+
26360
26237
  &:focus,
26361
- &.k-focus,
26362
- &.k-state-focus {
26238
+ &.k-focus {
26363
26239
  @include fill(
26364
26240
  $card-focus-text,
26365
26241
  $card-focus-bg,
@@ -26368,8 +26244,7 @@ $card-focus-callout-box-shadow-w: null !default;
26368
26244
  @include box-shadow( $card-focus-shadow );
26369
26245
  }
26370
26246
 
26371
- &.k-selected,
26372
- &.k-state-selected {
26247
+ &.k-selected {
26373
26248
  @include box-shadow( $card-focus-shadow );
26374
26249
  }
26375
26250
  }
@@ -26421,10 +26296,8 @@ $card-focus-callout-box-shadow-w: null !default;
26421
26296
 
26422
26297
 
26423
26298
  .k-card-wrap {
26424
- &.k-state-focused,
26425
- &.k-focus,
26426
26299
  &:focus,
26427
- &.k-state-selected,
26300
+ &.k-focus,
26428
26301
  &.k-selected {
26429
26302
  > .k-card {
26430
26303
  @include box-shadow( $card-focus-shadow );
@@ -26436,28 +26309,11 @@ $card-focus-callout-box-shadow-w: null !default;
26436
26309
  // Card callout
26437
26310
  .k-card-callout {
26438
26311
  @include fill(
26439
- $bg: $card-bg,
26440
- $border: $card-border
26441
- );
26442
- }
26443
-
26444
- .k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
26445
- .k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
26446
- .k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
26447
- .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
26448
-
26449
- .k-card:focus .k-card-callout,
26450
- .k-card.k-focus .k-card-callout,
26451
- .k-card.k-state-focus .k-card-callout {
26452
- @include fill(
26453
- $bg: $card-focus-bg,
26454
- $border: $card-focus-border
26312
+ $bg: inherit,
26313
+ $border: inherit
26455
26314
  );
26456
26315
 
26457
- &.k-callout-n { @include box-shadow( $card-focus-callout-box-shadow-n ); }
26458
- &.k-callout-e { @include box-shadow( $card-focus-callout-box-shadow-e ); }
26459
- &.k-callout-s { @include box-shadow( $card-focus-callout-box-shadow-s ); }
26460
- &.k-callout-w { @include box-shadow( $card-focus-callout-box-shadow-w ); }
26316
+ @include box-shadow( inherit );
26461
26317
  }
26462
26318
 
26463
26319
  }
@@ -26503,11 +26359,6 @@ $popover-callout-border-style: $popover-border-style !default;
26503
26359
  $popover-callout-bg: $popover-bg !default;
26504
26360
  $popover-callout-border: $popover-border !default;
26505
26361
 
26506
- $popover-callout-shadow-n: $card-callout-box-shadow-n !default;
26507
- $popover-callout-shadow-e: $card-callout-box-shadow-e !default;
26508
- $popover-callout-shadow-s: $card-callout-box-shadow-s !default;
26509
- $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
26510
-
26511
26362
  // #endregion
26512
26363
  // #region @import "_layout.scss"; -> packages/material/scss/popover/_layout.scss
26513
26364
  // #region @import "~@progress/kendo-theme-default/scss/popover/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/popover/_layout.scss
@@ -26537,6 +26388,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
26537
26388
  }
26538
26389
  }
26539
26390
 
26391
+ .k-popover-inner {
26392
+ position: relative;
26393
+ border-radius: inherit;
26394
+ }
26395
+
26540
26396
  // Header
26541
26397
  .k-popover-header {
26542
26398
  @include border-top-radius( $popover-border-radius );
@@ -26563,32 +26419,32 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
26563
26419
  margin: 0;
26564
26420
  width: $popover-callout-width;
26565
26421
  height: $popover-callout-height;
26566
- border-width: $popover-callout-border-width $popover-callout-border-width 0 0;
26422
+ border-width: $popover-callout-border-width;
26567
26423
  border-style: $popover-callout-border-style;
26568
26424
  position: absolute;
26569
26425
 
26570
26426
  &.k-callout-n {
26571
26427
  top: 0;
26572
26428
  left: 50%;
26573
- transform: translate(-50%, -50%) rotate(-45deg);
26429
+ transform: translate(-50%, -50%) rotate(45deg);
26574
26430
  }
26575
26431
 
26576
26432
  &.k-callout-e {
26577
26433
  top: 50%;
26578
26434
  right: 0;
26579
- transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
26435
+ transform: translate(50%, -50%) rotate(-45deg);
26580
26436
  }
26581
26437
 
26582
26438
  &.k-callout-s {
26583
26439
  bottom: 0;
26584
26440
  left: 50%;
26585
- transform: translate(-50%, 50%) rotate(135deg);
26441
+ transform: translate(-50%, 50%) rotate(45deg);
26586
26442
  }
26587
26443
 
26588
26444
  &.k-callout-w {
26589
26445
  top: 50%;
26590
26446
  left: 0;
26591
- transform: translate(-50%, -50%) rotate(-135deg);
26447
+ transform: translate(-50%, -50%) rotate(45deg);
26592
26448
  }
26593
26449
  }
26594
26450
 
@@ -26612,6 +26468,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
26612
26468
  );
26613
26469
  }
26614
26470
 
26471
+ .k-popover-inner {
26472
+ background-color: inherit;
26473
+ border-color: inherit;
26474
+ }
26475
+
26615
26476
  // Header
26616
26477
  .k-popover-header {
26617
26478
  @include fill(
@@ -26624,14 +26485,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
26624
26485
  // Callout
26625
26486
  .k-popover-callout {
26626
26487
  @include fill(
26627
- $bg: $popover-callout-bg,
26628
- $border: $popover-callout-border
26488
+ $bg: inherit,
26489
+ $border: inherit
26629
26490
  );
26630
26491
 
26631
- &.k-callout-n { @include box-shadow( $popover-callout-shadow-n ); }
26632
- &.k-callout-e { @include box-shadow( $popover-callout-shadow-e ); }
26633
- &.k-callout-s { @include box-shadow( $popover-callout-shadow-s ); }
26634
- &.k-callout-w { @include box-shadow( $popover-callout-shadow-w ); }
26492
+ @include box-shadow( inherit )
26635
26493
  }
26636
26494
 
26637
26495
  }
@@ -26873,7 +26731,6 @@ $bottom-nav-flat-border: $component-border !default;
26873
26731
  outline: 0;
26874
26732
  }
26875
26733
  }
26876
- .k-bottom-nav-item.k-state-disabled,
26877
26734
  .k-bottom-nav-item.k-disabled {
26878
26735
  background-color: initial;
26879
26736
  }
@@ -26920,15 +26777,11 @@ $bottom-nav-flat-border: $component-border !default;
26920
26777
  $bg: $color
26921
26778
  );
26922
26779
 
26923
- .k-bottom-nav-item.k-state-focus,
26924
- .k-bottom-nav-item.k-focus,
26925
- .k-bottom-nav-item.k-state-focused,
26926
26780
  .k-bottom-nav-item.k-focus,
26927
26781
  .k-bottom-nav-item:focus {
26928
26782
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
26929
26783
  }
26930
26784
 
26931
- .k-bottom-nav-item.k-state-selected,
26932
26785
  .k-bottom-nav-item.k-selected {
26933
26786
  @include fill( $color: contrast-wcag( $color ) );
26934
26787
  }
@@ -26943,16 +26796,12 @@ $bottom-nav-flat-border: $component-border !default;
26943
26796
  $bottom-nav-flat-border
26944
26797
  );
26945
26798
 
26946
- .k-bottom-nav-item.k-state-focus,
26947
- .k-bottom-nav-item.k-focus,
26948
- .k-bottom-nav-item.k-state-focused,
26949
26799
  .k-bottom-nav-item.k-focus,
26950
26800
  .k-bottom-nav-item:focus {
26951
26801
  @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
26952
26802
  }
26953
26803
 
26954
26804
  @each $name, $color in $kendo-theme-colors {
26955
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
26956
26805
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
26957
26806
  @if $name == "secondary" or $name == "light" {
26958
26807
  @include fill( $color: try-shade($color, 3) );
@@ -27213,7 +27062,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27213
27062
  );
27214
27063
 
27215
27064
  &:focus,
27216
- &.k-state-focused,
27217
27065
  &.k-focus {
27218
27066
  @include box-shadow( $breadcrumb-focused-shadow );
27219
27067
  }
@@ -27230,7 +27078,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27230
27078
 
27231
27079
  // Hovered state
27232
27080
  &:hover,
27233
- &.k-state-hover,
27234
27081
  &.k-hover {
27235
27082
  @include fill(
27236
27083
  $breadcrumb-link-hovered-text,
@@ -27241,7 +27088,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27241
27088
 
27242
27089
  // Focused state
27243
27090
  &:focus,
27244
- &.k-state-focused,
27245
27091
  &.k-focus {
27246
27092
  @include fill(
27247
27093
  $breadcrumb-link-focused-text,
@@ -27263,7 +27109,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27263
27109
 
27264
27110
  // Hovered state
27265
27111
  &:hover,
27266
- &.k-state-hover,
27267
27112
  &.k-hover {
27268
27113
  @include fill(
27269
27114
  $breadcrumb-root-link-hovered-text,
@@ -27274,7 +27119,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27274
27119
 
27275
27120
  // Focused state
27276
27121
  &:focus,
27277
- &.k-state-focused,
27278
27122
  &.k-focus {
27279
27123
  @include fill(
27280
27124
  $breadcrumb-root-link-focused-text,
@@ -27424,7 +27268,6 @@ $pager-dropdown-width: 5em !default;
27424
27268
 
27425
27269
  // Focused state
27426
27270
  &:focus,
27427
- &.k-state-focus,
27428
27271
  &.k-focus {
27429
27272
  z-index: 3;
27430
27273
  }
@@ -27433,6 +27276,10 @@ $pager-dropdown-width: 5em !default;
27433
27276
  .k-rtl &,
27434
27277
  &[dir="rtl"],
27435
27278
  [dir="rtl"] & {
27279
+ .k-i-caret-alt-to-left,
27280
+ .k-i-caret-alt-to-right,
27281
+ .k-i-caret-alt-left,
27282
+ .k-i-caret-alt-right,
27436
27283
  .k-i-arrow-end-left,
27437
27284
  .k-i-arrow-60-left,
27438
27285
  .k-i-arrow-60-right,
@@ -27474,7 +27321,6 @@ $pager-dropdown-width: 5em !default;
27474
27321
  &:hover {
27475
27322
  z-index: 2;
27476
27323
  }
27477
- &.k-state-disabled,
27478
27324
  &.k-disabled {
27479
27325
  color: inherit;
27480
27326
  }
@@ -27524,7 +27370,6 @@ $pager-dropdown-width: 5em !default;
27524
27370
  }
27525
27371
 
27526
27372
  // Selected state
27527
- .k-state-selected,
27528
27373
  .k-selected {
27529
27374
  cursor: inherit;
27530
27375
  z-index: 2;
@@ -27690,9 +27535,6 @@ $pager-dropdown-width: 5em !default;
27690
27535
  );
27691
27536
 
27692
27537
  &:focus,
27693
- &.k-focus,
27694
- &.k-state-focus,
27695
- &.k-state-focused,
27696
27538
  &.k-focus {
27697
27539
  @include fill( $bg: $pager-focus-bg );
27698
27540
  @include box-shadow( $pager-focus-shadow );
@@ -27708,7 +27550,6 @@ $pager-dropdown-width: 5em !default;
27708
27550
  );
27709
27551
 
27710
27552
  &:hover,
27711
- &.k-state-hover,
27712
27553
  &.k-hover {
27713
27554
  @include fill(
27714
27555
  $pager-item-hover-text,
@@ -27717,7 +27558,6 @@ $pager-dropdown-width: 5em !default;
27717
27558
  );
27718
27559
  }
27719
27560
 
27720
- &.k-state-selected,
27721
27561
  &.k-selected {
27722
27562
  @include fill(
27723
27563
  $pager-item-selected-text,
@@ -27727,7 +27567,6 @@ $pager-dropdown-width: 5em !default;
27727
27567
  }
27728
27568
 
27729
27569
  &:focus,
27730
- &.k-state-focus,
27731
27570
  &.k-focus {
27732
27571
  background-color: $pager-item-focus-bg;
27733
27572
  @include box-shadow( $pager-item-focus-shadow );
@@ -27751,7 +27590,6 @@ $pager-dropdown-width: 5em !default;
27751
27590
  );
27752
27591
 
27753
27592
  &:hover,
27754
- &.k-state-hover,
27755
27593
  &.k-hover {
27756
27594
  @include fill(
27757
27595
  $pager-number-hover-text,
@@ -27761,13 +27599,11 @@ $pager-dropdown-width: 5em !default;
27761
27599
  }
27762
27600
 
27763
27601
  &:focus,
27764
- &.k-state-focus,
27765
27602
  &.k-focus {
27766
27603
  background-color: $pager-number-focus-bg;
27767
27604
  @include box-shadow( $pager-number-focus-shadow );
27768
27605
  }
27769
27606
 
27770
- &.k-state-selected,
27771
27607
  &.k-selected {
27772
27608
  @include fill(
27773
27609
  $pager-number-selected-text,
@@ -27800,7 +27636,6 @@ $pager-dropdown-width: 5em !default;
27800
27636
  );
27801
27637
 
27802
27638
  &:hover,
27803
- &.k-state-hover,
27804
27639
  &.k-hover {
27805
27640
  @include fill(
27806
27641
  $dropdownlist-hovered-text,
@@ -27810,7 +27645,7 @@ $pager-dropdown-width: 5em !default;
27810
27645
  }
27811
27646
  }
27812
27647
 
27813
- &.k-state-expanded {
27648
+ &.k-expanded {
27814
27649
  @include fill(
27815
27650
  $popup-text,
27816
27651
  $popup-bg,
@@ -27821,7 +27656,6 @@ $pager-dropdown-width: 5em !default;
27821
27656
  .k-link {
27822
27657
 
27823
27658
  &:hover,
27824
- &.k-state-hover,
27825
27659
  &.k-hover {
27826
27660
  @include fill(
27827
27661
  $kendo-list-item-hover-text,
@@ -27829,7 +27663,6 @@ $pager-dropdown-width: 5em !default;
27829
27663
  );
27830
27664
  }
27831
27665
 
27832
- &.k-state-selected,
27833
27666
  &.k-selected {
27834
27667
  @include fill(
27835
27668
  $kendo-list-item-selected-text,
@@ -28463,7 +28296,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
28463
28296
  $bg: $stepper-progressbar-bg
28464
28297
  );
28465
28298
 
28466
- .k-state-selected,
28467
28299
  .k-selected {
28468
28300
  @include fill(
28469
28301
  $color: $stepper-progressbar-fill-text,
@@ -28714,13 +28546,11 @@ $tabstrip-content-border-focused: $component-text !default;
28714
28546
  position: relative;
28715
28547
  z-index: 1;
28716
28548
 
28717
- &.k-state-active,
28718
28549
  &.k-active {
28719
28550
  display: block;
28720
28551
  }
28721
28552
 
28722
28553
  &:focus,
28723
- &.k-state-focused,
28724
28554
  &.k-focus {
28725
28555
  outline-width: 1px;
28726
28556
  outline-style: dotted;
@@ -28809,7 +28639,6 @@ $tabstrip-content-border-focused: $component-text !default;
28809
28639
  margin-left: $tabstrip-item-gap;
28810
28640
  }
28811
28641
 
28812
- .k-item.k-state-active,
28813
28642
  .k-item.k-active {
28814
28643
  border-bottom-color: transparent;
28815
28644
  }
@@ -28839,7 +28668,6 @@ $tabstrip-content-border-focused: $component-text !default;
28839
28668
  margin-left: $tabstrip-item-gap;
28840
28669
  }
28841
28670
 
28842
- .k-item.k-state-active,
28843
28671
  .k-item.k-active {
28844
28672
  border-top-color: transparent;
28845
28673
  }
@@ -28873,7 +28701,6 @@ $tabstrip-content-border-focused: $component-text !default;
28873
28701
  margin-top: $tabstrip-item-gap;
28874
28702
  }
28875
28703
 
28876
- .k-item.k-state-active,
28877
28704
  .k-item.k-active {
28878
28705
  border-right-color: transparent;
28879
28706
  }
@@ -28909,7 +28736,6 @@ $tabstrip-content-border-focused: $component-text !default;
28909
28736
  margin-top: $tabstrip-item-gap;
28910
28737
  }
28911
28738
 
28912
- .k-item.k-state-active,
28913
28739
  .k-item.k-active {
28914
28740
  border-left-color: transparent;
28915
28741
  }
@@ -28955,7 +28781,6 @@ $tabstrip-content-border-focused: $component-text !default;
28955
28781
  border-left-width: $tabstrip-indicator-size;
28956
28782
  }
28957
28783
  }
28958
- .k-item.k-state-active::after,
28959
28784
  .k-item.k-active::after {
28960
28785
  display: block;
28961
28786
  }
@@ -29050,7 +28875,6 @@ $tabstrip-content-border-focused: $component-text !default;
29050
28875
  );
29051
28876
 
29052
28877
  &:hover,
29053
- &.k-state-hover,
29054
28878
  &.k-hover {
29055
28879
  @include fill(
29056
28880
  $tabstrip-item-hovered-text,
@@ -29061,9 +28885,7 @@ $tabstrip-content-border-focused: $component-text !default;
29061
28885
  }
29062
28886
 
29063
28887
  &:active,
29064
- &.k-state-active,
29065
28888
  &.k-active,
29066
- &.k-state-selected,
29067
28889
  &.k-selected {
29068
28890
  @include fill(
29069
28891
  $tabstrip-item-selected-text,
@@ -29074,7 +28896,6 @@ $tabstrip-content-border-focused: $component-text !default;
29074
28896
  }
29075
28897
 
29076
28898
  &:focus,
29077
- &.k-state-focused,
29078
28899
  &.k-focus {
29079
28900
  @include box-shadow( $tabstrip-item-focused-shadow );
29080
28901
  }
@@ -29097,7 +28918,6 @@ $tabstrip-content-border-focused: $component-text !default;
29097
28918
  );
29098
28919
 
29099
28920
  &:focus,
29100
- &.k-state-focused,
29101
28921
  &.k-focus {
29102
28922
  outline-color: $tabstrip-content-border-focused;
29103
28923
  }
@@ -29108,7 +28928,6 @@ $tabstrip-content-border-focused: $component-text !default;
29108
28928
  @if ($tabstrip-indicator-size) {
29109
28929
 
29110
28930
  .k-tabstrip-items-wrapper {
29111
- .k-item.k-state-active::after,
29112
28931
  .k-item.k-active::after {
29113
28932
  border-color: $tabstrip-indicator-color;
29114
28933
  }
@@ -29214,7 +29033,6 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
29214
29033
  justify-content: space-between;
29215
29034
 
29216
29035
  &:focus,
29217
- &.k-state-focused,
29218
29036
  &.k-focus {
29219
29037
  outline-width: 1px;
29220
29038
  outline-style: dotted;
@@ -29309,20 +29127,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
29309
29127
  // #region @import "_theme.scss"; -> packages/material/scss/wizard/_theme.scss
29310
29128
  // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/wizard/_theme.scss
29311
29129
  @include exports("wizard/theme") {
29130
+
29312
29131
  .k-wizard-step {
29313
29132
  &:focus,
29314
- &.k-state-focused,
29315
29133
  &.k-focus {
29316
29134
  outline-color: $wizard-step-border-focused;
29317
29135
  }
29318
29136
 
29319
29137
  .k-ie &:focus,
29320
- .k-ie &.k-state-focused,
29321
29138
  .k-ie &.k-focus {
29322
29139
  @include box-shadow($wizard-focused-shadow);
29323
29140
  outline: none;
29324
29141
  }
29325
29142
  }
29143
+
29326
29144
  }
29327
29145
 
29328
29146
  // #endregion
@@ -29488,7 +29306,6 @@ $expander-content-padding-y: $padding-y * 6 !default;
29488
29306
  $expander-border
29489
29307
  );
29490
29308
 
29491
- &.k-state-focus,
29492
29309
  &.k-focus {
29493
29310
  box-shadow: $expander-focus-shadow;
29494
29311
  }
@@ -29503,13 +29320,10 @@ $expander-content-padding-y: $padding-y * 6 !default;
29503
29320
  outline: none;
29504
29321
 
29505
29322
  &:hover,
29506
- &.k-state-hover,
29507
29323
  &.k-hover {
29508
29324
  background-color: $expander-header-hover-bg;
29509
29325
  }
29510
29326
 
29511
- // Should be removed
29512
- &.k-state-focused,
29513
29327
  &.k-focus {
29514
29328
  background-color: $expander-header-focused-bg;
29515
29329
  box-shadow: $expander-header-focused-shadow;
@@ -29756,6 +29570,10 @@ $panelbar-header-expanded-gradient: null !default;
29756
29570
  }
29757
29571
  }
29758
29572
 
29573
+ // Panelbar item
29574
+ .k-panelbar-item {
29575
+ outline-style: none;
29576
+ }
29759
29577
 
29760
29578
  // Panelbar content
29761
29579
  .k-panelbar-content {
@@ -29857,7 +29675,6 @@ $panelbar-header-expanded-gradient: null !default;
29857
29675
  > .k-item,
29858
29676
  > .k-panelbar-header {
29859
29677
 
29860
- &.k-state-expanded.k-level-0 > .k-link,
29861
29678
  &.k-expanded.k-level-0 > .k-link {
29862
29679
  @include fill(
29863
29680
  $panelbar-header-expanded-text,
@@ -29884,7 +29701,6 @@ $panelbar-header-expanded-gradient: null !default;
29884
29701
 
29885
29702
  // Hover
29886
29703
  > .k-link:hover,
29887
- > .k-link.k-state-hover,
29888
29704
  > .k-link.k-hover {
29889
29705
  @include fill(
29890
29706
  $panelbar-header-hovered-text,
@@ -29896,9 +29712,6 @@ $panelbar-header-expanded-gradient: null !default;
29896
29712
 
29897
29713
  // Focus
29898
29714
  > .k-link:focus,
29899
- > .k-link.k-state-focus,
29900
- > .k-link.k-focus,
29901
- > .k-link.k-state-focused,
29902
29715
  > .k-link.k-focus {
29903
29716
  @include fill(
29904
29717
  $panelbar-header-focused-text,
@@ -29911,7 +29724,6 @@ $panelbar-header-expanded-gradient: null !default;
29911
29724
 
29912
29725
  // Focus & Hover
29913
29726
  > .k-link:focus:hover,
29914
- > .k-link.k-state-focus.k-state-hover,
29915
29727
  > .k-link.k-focus.k-hover {
29916
29728
  @include fill(
29917
29729
  $panelbar-header-hovered-focused-text,
@@ -29922,7 +29734,6 @@ $panelbar-header-expanded-gradient: null !default;
29922
29734
  }
29923
29735
 
29924
29736
  // Selected
29925
- > .k-link.k-state-selected,
29926
29737
  > .k-link.k-selected {
29927
29738
  @include fill(
29928
29739
  $panelbar-header-selected-text,
@@ -29938,9 +29749,7 @@ $panelbar-header-expanded-gradient: null !default;
29938
29749
  }
29939
29750
 
29940
29751
  // Selected Hover
29941
- > .k-link.k-state-selected:hover,
29942
29752
  > .k-link.k-selected:hover,
29943
- > .k-link.k-state-selected.k-state-hover,
29944
29753
  > .k-link.k-selected.k-hover {
29945
29754
  @include fill(
29946
29755
  $panelbar-header-selected-hovered-text,
@@ -29951,12 +29760,8 @@ $panelbar-header-expanded-gradient: null !default;
29951
29760
  }
29952
29761
 
29953
29762
  // Selected Focus
29954
- > .k-link.k-state-selected:focus,
29955
29763
  > .k-link.k-selected:focus,
29956
- > .k-link.k-state-selected.k-state-focus,
29957
- > .k-link.k-selected.k-focus,
29958
- > .k-link.k-state-selected.k-state-focused,
29959
- > .k-link.k-selected.k-focused {
29764
+ > .k-link.k-selected.k-focus {
29960
29765
  @include fill(
29961
29766
  $panelbar-header-selected-focused-text,
29962
29767
  $panelbar-header-selected-focused-bg,
@@ -29966,12 +29771,8 @@ $panelbar-header-expanded-gradient: null !default;
29966
29771
  }
29967
29772
 
29968
29773
  // Selected Focus & Hover
29969
- > .k-link.k-state-selected:hover:focus,
29970
29774
  > .k-link.k-selected:hover:focus,
29971
- > .k-link.k-state-selected.k-state-hover.k-state-focus,
29972
- > .k-link.k-selected.k-hover.k-state-focus,
29973
- > .k-link.k-state-selected.k-state-hover.k-state-focused,
29974
- > .k-link.k-selected.k-hover.k-state-focused {
29775
+ > .k-link.k-selected.k-hover.k-focus {
29975
29776
  @include fill(
29976
29777
  $panelbar-header-selected-hovered-focused-text,
29977
29778
  $panelbar-header-selected-hovered-focused-bg,
@@ -29988,10 +29789,8 @@ $panelbar-header-expanded-gradient: null !default;
29988
29789
 
29989
29790
  // Hover
29990
29791
  > .k-item > .k-link:hover,
29991
- > .k-item > .k-link.k-state-hover,
29992
29792
  > .k-item > .k-link.k-hover,
29993
29793
  > .k-panelbar-item > .k-link:hover,
29994
- > .k-panelbar-item > .k-link.k-state-hover,
29995
29794
  > .k-panelbar-item > .k-link.k-hover {
29996
29795
  @include fill(
29997
29796
  $panelbar-item-hovered-text,
@@ -30003,14 +29802,8 @@ $panelbar-header-expanded-gradient: null !default;
30003
29802
 
30004
29803
  // Focus
30005
29804
  > .k-item > .k-link:focus,
30006
- > .k-item > .k-link.k-state-focus,
30007
- > .k-item > .k-link.k-focus,
30008
- > .k-item > .k-link.k-state-focused,
30009
29805
  > .k-item > .k-link.k-focus,
30010
29806
  > .k-panelbar-item > .k-link:focus,
30011
- > .k-panelbar-item > .k-link.k-state-focus,
30012
- > .k-panelbar-item > .k-link.k-focus,
30013
- > .k-panelbar-item > .k-link.k-state-focused,
30014
29807
  > .k-panelbar-item > .k-link.k-focus {
30015
29808
  @include fill(
30016
29809
  $panelbar-item-focused-text,
@@ -30023,10 +29816,8 @@ $panelbar-header-expanded-gradient: null !default;
30023
29816
 
30024
29817
  // Focus & Hover
30025
29818
  > .k-item > .k-link:focus:hover,
30026
- > .k-item > .k-link.k-state-focus.k-state-hover,
30027
29819
  > .k-item > .k-link.k-focus.k-hover,
30028
29820
  > .k-panelbar-item > .k-link:focus:hover,
30029
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
30030
29821
  > .k-panelbar-item > .k-link.k-focus.k-hover {
30031
29822
  @include fill(
30032
29823
  $panelbar-item-hovered-focused-text,
@@ -30037,9 +29828,7 @@ $panelbar-header-expanded-gradient: null !default;
30037
29828
  }
30038
29829
 
30039
29830
  // Selected
30040
- > .k-item > .k-link.k-state-selected,
30041
29831
  > .k-item > .k-link.k-selected,
30042
- > .k-panelbar-item > .k-link.k-state-selected,
30043
29832
  > .k-panelbar-item > .k-link.k-selected {
30044
29833
  @include fill(
30045
29834
  $panelbar-item-selected-text,
@@ -30050,13 +29839,9 @@ $panelbar-header-expanded-gradient: null !default;
30050
29839
  }
30051
29840
 
30052
29841
  // Selected Hover
30053
- > .k-item > .k-link.k-state-selected:hover,
30054
29842
  > .k-item > .k-link.k-selected:hover,
30055
- > .k-item > .k-link.k-state-selected.k-state-hover,
30056
29843
  > .k-item > .k-link.k-selected.k-hover,
30057
- > .k-panelbar-item > .k-link.k-state-selected:hover,
30058
29844
  > .k-panelbar-item > .k-link.k-selected:hover,
30059
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
30060
29845
  > .k-panelbar-item > .k-link.k-selected.k-hover {
30061
29846
  @include fill(
30062
29847
  $panelbar-item-selected-hovered-text,
@@ -30067,18 +29852,10 @@ $panelbar-header-expanded-gradient: null !default;
30067
29852
  }
30068
29853
 
30069
29854
  // Selected Focus
30070
- > .k-item > .k-link.k-state-selected:focus,
30071
29855
  > .k-item > .k-link.k-selected:focus,
30072
- > .k-item > .k-link.k-state-selected.k-state-focus,
30073
29856
  > .k-item > .k-link.k-selected.k-focus,
30074
- > .k-item > .k-link.k-state-selected.k-state-focused,
30075
- > .k-item > .k-link.k-selected.k-focused,
30076
- > .k-panelbar-item > .k-link.k-state-selected:focus,
30077
29857
  > .k-panelbar-item > .k-link.k-selected:focus,
30078
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
30079
- > .k-panelbar-item > .k-link.k-selected.k-focus,
30080
- > .k-item > .k-link.k-state-selected.k-state-focused,
30081
- > .k-item > .k-link.k-selected.k-focused {
29858
+ > .k-panelbar-item > .k-link.k-selected.k-focus {
30082
29859
  @include fill(
30083
29860
  $panelbar-item-selected-focused-text,
30084
29861
  $panelbar-item-selected-focused-bg,
@@ -30088,18 +29865,10 @@ $panelbar-header-expanded-gradient: null !default;
30088
29865
  }
30089
29866
 
30090
29867
  // Selected Focus & Hover
30091
- > .k-item > .k-link.k-state-selected:focus:hover,
30092
29868
  > .k-item > .k-link.k-selected:focus:hover,
30093
- > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
30094
- > .k-item > .k-link.k-selected.k-focus.k-state-hover,
30095
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
30096
- > .k-item > .k-link.k-selected.k-focused.k-state-hover,
30097
- > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
29869
+ > .k-item > .k-link.k-selected.k-focus.k-hover,
30098
29870
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
30099
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
30100
- > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
30101
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
30102
- > .k-item > .k-link.k-selected.k-focused.k-state-hover {
29871
+ > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
30103
29872
  @include fill(
30104
29873
  $panelbar-item-selected-hovered-focused-text,
30105
29874
  $panelbar-item-selected-hovered-focused-bg,
@@ -30337,7 +30106,7 @@ $splitbar-selected-text: $primary-contrast !default;
30337
30106
 
30338
30107
  .k-pane,
30339
30108
  .k-pane-flex {
30340
- &.k-state-hidden,
30109
+ &.k-hidden,
30341
30110
  &[hidden] {
30342
30111
  // sass-lint:disable-block no-important
30343
30112
  // hidden panes need to be zero-width to allow pane animation
@@ -30386,7 +30155,6 @@ $splitbar-selected-text: $primary-contrast !default;
30386
30155
  background-color: $splitbar-bg;
30387
30156
  }
30388
30157
  .k-splitbar:hover,
30389
- .k-splitbar.k-state-hover,
30390
30158
  .k-splitbar.k-hover,
30391
30159
  .k-splitbar-horizontal-hover,
30392
30160
  .k-splitbar-vertical-hover {
@@ -30394,9 +30162,6 @@ $splitbar-selected-text: $primary-contrast !default;
30394
30162
  background-color: $splitbar-hover-bg;
30395
30163
  }
30396
30164
  .k-splitbar:focus,
30397
- .k-splitbar.k-state-focus,
30398
- .k-splitbar.k-focus,
30399
- .k-splitbar.k-state-focused,
30400
30165
  .k-splitbar.k-focus {
30401
30166
  color: $splitbar-selected-text;
30402
30167
  background: $splitbar-selected-bg;
@@ -30507,9 +30272,6 @@ $tilelayout-hint-border: $component-border !default;
30507
30272
  }
30508
30273
 
30509
30274
  .k-tilelayout-item:focus,
30510
- .k-tilelayout-item.k-focus,
30511
- .k-tilelayout-item.k-state-focus,
30512
- .k-tilelayout-item.k-state-focused,
30513
30275
  .k-tilelayout-item.k-focus {
30514
30276
  @include box-shadow($tilelayout-card-focus-shadow);
30515
30277
  }
@@ -30923,7 +30685,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30923
30685
  border-radius: 50%;
30924
30686
  }
30925
30687
 
30926
- .k-i-reload {
30688
+ .k-i-reload,
30689
+ .k-i-arrow-rotate-cw {
30927
30690
  font-size: 1em;
30928
30691
  margin-right: .5em;
30929
30692
  }
@@ -31186,12 +30949,10 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31186
30949
 
31187
30950
  .k-column-menu {
31188
30951
 
31189
- .k-listgroup-item.k-state-selected,
31190
30952
  .k-listgroup-item.k-selected {
31191
30953
  color: $adaptive-grid-sort-text;
31192
30954
  background: none;
31193
30955
  }
31194
- .k-listgroup-item.k-state-selected .k-link,
31195
30956
  .k-listgroup-item.k-selected .k-link {
31196
30957
  color: inherit;
31197
30958
  }
@@ -31951,7 +31712,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
31951
31712
 
31952
31713
  .k-cell-inner > .k-link > .k-icon {
31953
31714
  &.k-i-sort-desc-sm,
31954
- &.k-i-sort-asc-sm {
31715
+ &.k-i-sort-asc-sm,
31716
+ &.k-i-sort-asc-small,
31717
+ &.k-i-sort-desc-small {
31955
31718
  vertical-align: text-top;
31956
31719
  margin-inline-start: $grid-sorted-icon-spacing;
31957
31720
  }
@@ -32948,33 +32711,28 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32948
32711
  }
32949
32712
 
32950
32713
  // Hover state
32951
- tbody>tr:not(.k-detail-row):hover,
32952
- tbody>tr:not(.k-detail-row).k-state-hover,
32953
- tbody>tr:not(.k-detail-row).k-hover {
32714
+ tbody > tr:not(.k-detail-row):hover,
32715
+ tbody > tr:not(.k-detail-row).k-hover {
32954
32716
  color: $grid-hovered-text;
32955
32717
  background-color: $grid-hovered-bg;
32956
32718
  }
32957
32719
 
32958
32720
  // Selected state
32959
- td.k-state-selected,
32960
32721
  td.k-selected,
32961
- tr.k-state-selected > td,
32962
32722
  tr.k-selected > td {
32963
32723
  color: $grid-selected-text;
32964
32724
  background-color: $grid-selected-bg;
32965
32725
  }
32966
32726
 
32967
32727
  // Focused state
32968
- td.k-state-focused,
32728
+ td:focus,
32969
32729
  td.k-focus,
32970
- th.k-state-focused,
32971
- th.k-focus,
32972
32730
  th:focus,
32731
+ th.k-focus,
32973
32732
  .k-master-row > td:focus,
32974
32733
  .k-grouping-row > td:focus,
32975
32734
  .k-detail-row > td:focus,
32976
32735
  .k-group-footer > td:focus,
32977
- .k-grid-pager.k-state-focused,
32978
32736
  .k-grid-pager.k-focus {
32979
32737
  box-shadow: $grid-focused-shadow;
32980
32738
  }
@@ -33018,20 +32776,16 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33018
32776
  }
33019
32777
 
33020
32778
  // Selected state
33021
- .k-state-selected td,
33022
32779
  .k-selected td {
33023
32780
  @include fill( $bg: $grid-sticky-selected-bg );
33024
32781
  }
33025
32782
 
33026
- .k-state-selected.k-alt td,
33027
32783
  .k-selected.k-alt td {
33028
32784
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33029
32785
  }
33030
32786
 
33031
32787
  // Selected hover
33032
- .k-state-selected:hover td,
33033
32788
  .k-selected:hover td,
33034
- .k-state-selected.k-state-hover td,
33035
32789
  .k-selected.k-hover td {
33036
32790
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
33037
32791
  }
@@ -33060,6 +32814,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33060
32814
 
33061
32815
  .k-i-sort-asc-sm,
33062
32816
  .k-i-sort-desc-sm,
32817
+ .k-i-sort-asc-small,
32818
+ .k-i-sort-desc-small,
33063
32819
  .k-sort-order {
33064
32820
  color: $grid-sorting-indicator-text;
33065
32821
  }
@@ -33073,12 +32829,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33073
32829
  background-color: $kendo-button-hover-bg;
33074
32830
  }
33075
32831
  &:focus,
33076
- &.k-state-focus,
33077
- &.k-focus,
33078
- &.k-state-border-down {
32832
+ &.k-focus {
33079
32833
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
33080
32834
  }
33081
- &.k-state-active,
33082
32835
  &.k-active {
33083
32836
  color: $selected-text;
33084
32837
  background-color: $selected-bg;
@@ -33134,20 +32887,14 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33134
32887
  }
33135
32888
 
33136
32889
  // Selected state
33137
- &.k-state-selected .k-grid-content-sticky,
33138
32890
  &.k-selected .k-grid-content-sticky,
33139
- &.k-state-selected .k-grid-row-sticky,
33140
32891
  &.k-selected .k-grid-row-sticky,
33141
- td.k-grid-content-sticky.k-state-selected,
33142
32892
  td.k-grid-content-sticky.k-selected {
33143
32893
  @include fill( $bg: $grid-sticky-selected-bg );
33144
32894
  }
33145
32895
 
33146
- &.k-state-selected.k-alt .k-grid-content-sticky,
33147
32896
  &.k-selected.k-alt .k-grid-content-sticky,
33148
- &.k-state-selected.k-alt .k-grid-row-sticky,
33149
32897
  &.k-selected.k-alt .k-grid-row-sticky,
33150
- &.k-alt td.k-grid-content-sticky.k-state-selected,
33151
32898
  &.k-alt td.k-grid-content-sticky.k-selected {
33152
32899
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33153
32900
  }
@@ -33156,26 +32903,18 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33156
32903
  // Hovered state
33157
32904
  &:hover .k-grid-content-sticky,
33158
32905
  &:hover .k-grid-row-sticky,
33159
- &.k-state-hover .k-grid-content-sticky,
33160
32906
  &.k-hover .k-grid-content-sticky,
33161
- &.k-state-hover .k-grid-row-sticky,
33162
32907
  &.k-hover .k-grid-row-sticky {
33163
32908
  background-color: $grid-sticky-hovered-bg;
33164
32909
  }
33165
32910
 
33166
32911
 
33167
32912
  // Selected hover
33168
- &.k-state-selected:hover .k-grid-content-sticky,
33169
32913
  &.k-selected:hover .k-grid-content-sticky,
33170
- &.k-state-selected:hover .k-grid-row-sticky,
33171
32914
  &.k-selected:hover .k-grid-row-sticky,
33172
- &.k-state-selected.k-state-hover .k-grid-content-sticky,
33173
32915
  &.k-selected.k-hover .k-grid-content-sticky,
33174
- &.k-state-selected.k-state-hover .k-grid-row-sticky,
33175
32916
  &.k-selected.k-hover .k-grid-row-sticky,
33176
- &:hover td.k-grid-content-sticky.k-state-selected,
33177
32917
  &:hover td.k-grid-content-sticky.k-selected,
33178
- &.k-state-hover td.k-grid-content-sticky.k-state-selected,
33179
32918
  &.k-hover td.k-grid-content-sticky.k-selected {
33180
32919
  background-color: $grid-sticky-selected-hovered-bg;
33181
32920
  }
@@ -33189,7 +32928,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33189
32928
  background-color: $grid-sticky-bg;
33190
32929
 
33191
32930
  &:hover,
33192
- &.k-state-hover,
33193
32931
  &.k-hover {
33194
32932
  background-color: $grid-sticky-hovered-bg;
33195
32933
  }
@@ -33203,7 +32941,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33203
32941
  }
33204
32942
 
33205
32943
  &:hover td,
33206
- &.k-state-hover td,
33207
32944
  &.k-hover td {
33208
32945
  background-color: $grid-sticky-hovered-bg;
33209
32946
  }
@@ -33215,66 +32952,43 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33215
32952
  }
33216
32953
 
33217
32954
  // Selected state
33218
- tr.k-state-selected .k-grid-content-sticky,
33219
32955
  tr.k-selected .k-grid-content-sticky,
33220
- .k-state-selected.k-grid-row-sticky td,
33221
32956
  .k-selected.k-grid-row-sticky td,
33222
- .k-grid-row-sticky td.k-state-selected,
33223
32957
  .k-grid-row-sticky td.k-selected,
33224
- .k-state-selected.k-grid-content-sticky,
33225
32958
  .k-selected.k-grid-content-sticky {
33226
32959
  @include fill( $bg: $grid-sticky-selected-bg );
33227
32960
  }
33228
32961
 
33229
- tr.k-state-selected.k-alt .k-grid-content-sticky,
33230
32962
  tr.k-selected.k-alt .k-grid-content-sticky,
33231
- .k-state-selected.k-alt.k-grid-row-sticky td,
33232
32963
  .k-selected.k-alt.k-grid-row-sticky td,
33233
- .k-alt .k-state-selected.k-grid-content-sticky,
33234
32964
  .k-alt .k-selected.k-grid-content-sticky {
33235
32965
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33236
32966
  }
33237
32967
 
33238
32968
  // Hover state
33239
32969
  tr:hover .k-grid-content-sticky,
33240
- tr.k-state-hover .k-grid-content-sticky,
33241
32970
  tr.k-hover .k-grid-content-sticky,
33242
32971
  .k-grid-row-sticky:hover td,
33243
- .k-grid-row-sticky.k-state-hover td,
33244
32972
  .k-grid-row-sticky.k-hover td,
33245
32973
  .k-grid-row-sticky.k-alt:hover td,
33246
- .k-grid-row-sticky.k-alt.k-state-hover td,
33247
32974
  .k-grid-row-sticky.k-alt.k-hover td,
33248
32975
  .k-alt:hover .k-grid-content-sticky,
33249
- .k-alt.k-state-hover .k-grid-content-sticky,
33250
32976
  .k-alt.k-hover .k-grid-content-sticky {
33251
32977
  background-color: $grid-sticky-hovered-bg;
33252
32978
  }
33253
32979
 
33254
32980
  // Selected + Hover
33255
- tr.k-state-selected:hover .k-grid-content-sticky,
33256
32981
  tr.k-selected:hover .k-grid-content-sticky,
33257
- tr.k-state-selected.k-state-hover .k-grid-content-sticky,
33258
32982
  tr.k-selected.k-hover .k-grid-content-sticky,
33259
- .k-state-selected.k-grid-row-sticky:hover td,
33260
32983
  .k-selected.k-grid-row-sticky:hover td,
33261
- .k-state-selected.k-grid-row-sticky.k-state-hover td,
33262
32984
  .k-selected.k-grid-row-sticky.k-hover td,
33263
- .k-state-selected.k-alt.k-grid-row-sticky:hover td,
33264
32985
  .k-selected.k-alt.k-grid-row-sticky:hover td,
33265
- .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
33266
32986
  .k-selected.k-alt.k-grid-row-sticky.k-hover td,
33267
- tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
33268
32987
  tr.k-selected.k-alt:hover .k-grid-content-sticky,
33269
- tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
33270
32988
  tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
33271
- .k-grid-row-sticky:hover td.k-state-selected,
33272
32989
  .k-grid-row-sticky:hover td.k-selected,
33273
- .k-grid-row-sticky.k-state-hover td.k-state-selected,
33274
32990
  .k-grid-row-sticky.k-hover td.k-selected,
33275
- tr:hover .k-grid-content-sticky.k-state-selected,
33276
32991
  tr:hover .k-grid-content-sticky.k-selected,
33277
- tr.k-state-hover .k-grid-content-sticky.k-state-selected,
33278
32992
  tr.k-hover .k-grid-content-sticky.k-selected {
33279
32993
  background-color: $grid-sticky-selected-hovered-bg;
33280
32994
  }
@@ -33286,7 +33000,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33286
33000
  }
33287
33001
 
33288
33002
  &:hover .k-grid-content-sticky,
33289
- &.k-state-hover .k-grid-content-sticky,
33290
33003
  &.k-hover .k-grid-content-sticky {
33291
33004
  @include fill( $bg: $grid-sticky-hovered-bg );
33292
33005
  }
@@ -33300,13 +33013,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33300
33013
  );
33301
33014
  }
33302
33015
  .k-columnmenu-item:focus,
33303
- .k-columnmenu-item.k-state-focus,
33304
33016
  .k-columnmenu-item.k-focus {
33305
33017
  @include box-shadow( $kendo-list-item-focus-shadow );
33306
33018
  }
33307
33019
 
33308
33020
  .k-columnmenu-item {
33309
- &.k-state-selected,
33310
33021
  &.k-selected {
33311
33022
  @include fill(
33312
33023
  $kendo-list-item-selected-text,
@@ -33332,7 +33043,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33332
33043
  );
33333
33044
 
33334
33045
  &:hover,
33335
- &.k-state-hover,
33336
33046
  &.k-hover {
33337
33047
  @include fill(
33338
33048
  $kendo-list-item-hover-text,
@@ -33340,7 +33050,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33340
33050
  );
33341
33051
  }
33342
33052
 
33343
- &.k-state-selected,
33344
33053
  &.k-selected {
33345
33054
  @include fill(
33346
33055
  $kendo-list-item-selected-text,
@@ -33349,7 +33058,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33349
33058
  }
33350
33059
 
33351
33060
  &:focus,
33352
- &.k-state-focused,
33353
33061
  &.k-focus {
33354
33062
  @include box-shadow( $kendo-list-item-focus-shadow );
33355
33063
  }
@@ -33384,14 +33092,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33384
33092
  .k-grid {
33385
33093
 
33386
33094
  // Selected state
33387
- td.k-state-selected,
33388
33095
  td.k-selected,
33389
- tr.k-state-selected,
33390
33096
  tr.k-selected {
33391
33097
  color: $grid-selected-text;
33392
33098
  background-color: $grid-selected-bg;
33393
33099
  }
33394
- tr.k-state-selected > td,
33395
33100
  tr.k-selected > td {
33396
33101
  color: inherit;
33397
33102
  background-color: transparent;
@@ -33399,14 +33104,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33399
33104
 
33400
33105
  // Hover, Focused state
33401
33106
  table {
33402
- >tr:not(.k-detail-row):hover,
33403
- >tr:not(.k-detail-row).k-state-hover,
33404
- >tr:not(.k-detail-row).k-hover,
33405
- td.k-state-focused,
33107
+ > tr:not(.k-detail-row):hover,
33108
+ > tr:not(.k-detail-row).k-hover,
33109
+ td:focus,
33406
33110
  td.k-focus,
33407
- th.k-state-focused,
33408
- th.k-focus,
33409
33111
  th:focus,
33112
+ th.k-focus,
33410
33113
  .k-master-row > td:focus,
33411
33114
  .k-grouping-row > td:focus,
33412
33115
  .k-detail-row > td:focus,
@@ -33416,7 +33119,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33416
33119
  }
33417
33120
 
33418
33121
  tr:hover,
33419
- tr.k-state-hover,
33420
33122
  tr.k-hover {
33421
33123
  .k-grid-header-sticky,
33422
33124
  .k-grid-footer-sticky {
@@ -33425,9 +33127,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33425
33127
  }
33426
33128
  }
33427
33129
 
33428
- td.k-state-focused,
33130
+ td:focus,
33429
33131
  td.k-focus,
33430
- th.k-state-focused,
33431
33132
  th.k-focus,
33432
33133
  th:focus,
33433
33134
  .k-master-row > td:focus,
@@ -33444,7 +33145,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33444
33145
 
33445
33146
  }
33446
33147
  .k-grid-pager:focus,
33447
- .k-grid-pager.k-state-focused,
33448
33148
  .k-grid-pager.k-focus {
33449
33149
  color: inherit;
33450
33150
  }
@@ -33498,7 +33198,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33498
33198
 
33499
33199
  .k-group-footer {
33500
33200
  &:hover td,
33501
- &.k-state-hover td,
33502
33201
  &.k-hover td {
33503
33202
  color: inherit;
33504
33203
  @include fill( $bg: $grid-sticky-footer-hovered-bg );
@@ -33549,15 +33248,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33549
33248
  }
33550
33249
 
33551
33250
  &:focus,
33552
- &.k-state-focus,
33553
- &.k-focus,
33554
- &.k-state-border-down {
33251
+ &.k-focus {
33555
33252
  color: $grid-text;
33556
33253
  background-color: $grid-filter-button-focus;
33557
33254
  box-shadow: none;
33558
33255
  }
33559
33256
 
33560
- &.k-state-active,
33561
33257
  &.k-active {
33562
33258
  color: $primary-contrast;
33563
33259
  background-color: $primary;
@@ -33598,7 +33294,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33598
33294
  }
33599
33295
 
33600
33296
  &:hover td,
33601
- &.k-state-hover td,
33602
33297
  &.k-hover td {
33603
33298
  @include fill( $bg: $grid-sticky-footer-hovered-bg );
33604
33299
  }
@@ -33631,7 +33326,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33631
33326
  }
33632
33327
 
33633
33328
  .k-columnmenu-item {
33634
- &.k-state-selected,
33635
33329
  &.k-selected {
33636
33330
  @include fill(
33637
33331
  $kendo-list-item-selected-text,
@@ -33640,7 +33334,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33640
33334
  }
33641
33335
  }
33642
33336
  .k-columnmenu-item:focus,
33643
- .k-columnmenu-item.k-state-focus,
33644
33337
  .k-columnmenu-item.k-focus {
33645
33338
  background: $kendo-list-item-hover-bg;
33646
33339
  }
@@ -33649,7 +33342,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33649
33342
 
33650
33343
  .k-item {
33651
33344
  // Selected state
33652
- &.k-state-selected,
33653
33345
  &.k-selected {
33654
33346
  background: $kendo-list-item-hover-bg;
33655
33347
  }
@@ -33870,7 +33562,6 @@ $listview-item-focus-shadow: null !default;
33870
33562
  // Listview content
33871
33563
  .k-listview-content {
33872
33564
 
33873
- > .k-state-focused,
33874
33565
  > .k-focus {
33875
33566
  @include fill(
33876
33567
  $listview-item-focus-text,
@@ -33880,7 +33571,6 @@ $listview-item-focus-shadow: null !default;
33880
33571
  @include box-shadow( $listview-item-focus-shadow );
33881
33572
  }
33882
33573
 
33883
- > .k-state-selected,
33884
33574
  > .k-selected {
33885
33575
  @include fill(
33886
33576
  $listview-item-selected-text,
@@ -33903,8 +33593,7 @@ $listview-item-focus-shadow: null !default;
33903
33593
 
33904
33594
  // Listview content
33905
33595
  .k-listview-content {}
33906
- .k-listview-content > .k-state-selected.k-state-focused,
33907
- .k-listview-content > .k-selected.k-focused {
33596
+ .k-listview-content > .k-selected.k-focus {
33908
33597
  background-color: rgba( contrast-wcag( $listview-bg ), .12 );
33909
33598
  }
33910
33599
 
@@ -34107,7 +33796,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34107
33796
  [data-tool="merge"],
34108
33797
  [data-tool="freeze"] {
34109
33798
  width: auto;
34110
- min-width: $form-line-height * 1em;
33799
+ min-width: calc( #{$form-line-height} * 1em );
34111
33800
  }
34112
33801
 
34113
33802
  .k-color-picker {
@@ -34276,7 +33965,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34276
33965
  overflow: hidden;
34277
33966
 
34278
33967
  // disabled cells in the Spreadsheet should allow navigation if link is used
34279
- .k-state-disabled,
34280
33968
  .k-disabled {
34281
33969
  pointer-events: auto;
34282
33970
  }
@@ -34838,7 +34526,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34838
34526
  background-position: 50% 50%;
34839
34527
 
34840
34528
  &:hover div,
34841
- &.k-state-hovered div,
34842
34529
  &.k-hover div {
34843
34530
  margin: 0;
34844
34531
  align-self: center;
@@ -34904,7 +34591,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34904
34591
  .k-spreadsheet-insert-image-dialog {
34905
34592
  .k-spreadsheet-has-image {
34906
34593
  &:hover,
34907
- &.k-state-hovered,
34908
34594
  &.k-hover {
34909
34595
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
34910
34596
  }
@@ -35025,7 +34711,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35025
34711
  .k-tabstrip-items .k-item {
35026
34712
  color: inherit;
35027
34713
  }
35028
- .k-tabstrip-items .k-item.k-state-active::after,
35029
34714
  .k-tabstrip-items .k-item.k-active::after {
35030
34715
  border-color: $primary-contrast;
35031
34716
  }
@@ -35048,7 +34733,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35048
34733
  $toolbar-gradient
35049
34734
  );
35050
34735
 
35051
- .k-tabstrip-items .k-item.k-state-active,
35052
34736
  .k-tabstrip-items .k-item.k-active {
35053
34737
  border-color: $secondary;
35054
34738
  }
@@ -35170,7 +34854,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35170
34854
  );
35171
34855
  box-shadow: inset 0 0 0 1px $kendo-button-border;
35172
34856
 
35173
- &.k-state-active,
35174
34857
  &.k-active {
35175
34858
  @include fill(
35176
34859
  $kendo-button-active-text,
@@ -35216,13 +34899,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35216
34899
 
35217
34900
  .k-spreadsheet-has-image {
35218
34901
  &:hover,
35219
- &.k-state-hovered,
35220
34902
  &.k-hover {
35221
34903
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
35222
34904
  }
35223
34905
 
35224
34906
  &:hover div,
35225
- &.k-state-hovered div,
35226
34907
  &.k-hover div {
35227
34908
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
35228
34909
  }
@@ -35257,7 +34938,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35257
34938
  .k-button {}
35258
34939
 
35259
34940
  .k-button:hover,
35260
- .k-button.k-state-hover,
35261
34941
  .k-button.k-hover {
35262
34942
  @include fill(
35263
34943
  $kendo-list-item-hover-text,
@@ -35265,9 +34945,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
35265
34945
  );
35266
34946
  }
35267
34947
  .k-button:active,
35268
- .k-button.k-state-active,
35269
34948
  .k-button.k-active,
35270
- .k-button.k-state-selected,
35271
34949
  .k-button.k-selected {
35272
34950
  @include fill(
35273
34951
  $kendo-list-item-selected-text,
@@ -36226,15 +35904,12 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
36226
35904
 
36227
35905
 
36228
35906
  // Hover state
36229
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
36230
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
36231
35907
  .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
36232
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
36233
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
35908
+ .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
36234
35909
  .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
36235
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
36236
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
36237
- .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
35910
+ .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
35911
+ .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
35912
+ .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
36238
35913
  @include fill (
36239
35914
  $pivotgrid-hover-text,
36240
35915
  $pivotgrid-hover-bg,
@@ -36243,9 +35918,10 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
36243
35918
  }
36244
35919
 
36245
35920
  // Focus state
36246
- .k-pivotgrid-cell.k-state-focus,
36247
- .k-pivotgrid-cell.k-focus,
36248
35921
  .k-pivotgrid-cell:focus,
35922
+ .k-pivotgrid-cell.k-focus,
35923
+ .k-pivotgrid-empty-cell:focus,
35924
+ .k-pivotgrid-empty-cell.k-focus,
36249
35925
  .k-master-row > .k-pivotgrid-cell:focus,
36250
35926
  .k-grouping-row > .k-pivotgrid-cell:focus,
36251
35927
  .k-detail-row > .k-pivotgrid-cell:focus,
@@ -36254,9 +35930,7 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
36254
35930
  }
36255
35931
 
36256
35932
  // Selected state
36257
- .k-pivotgrid-cell.k-state-selected,
36258
35933
  .k-pivotgrid-cell.k-selected,
36259
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
36260
35934
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
36261
35935
  @include fill (
36262
35936
  $pivotgrid-selected-text,
@@ -36434,9 +36108,8 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
36434
36108
  @include exports("pivotgrid/theme/material") {
36435
36109
 
36436
36110
  // Hover and Focus state have the same bg color
36437
- .k-pivotgrid-cell.k-state-focus,
36438
- .k-pivotgrid-cell.k-focus,
36439
36111
  .k-pivotgrid-cell:focus,
36112
+ .k-pivotgrid-cell.k-focus,
36440
36113
  .k-master-row > .k-pivotgrid-cell:focus,
36441
36114
  .k-grouping-row > .k-pivotgrid-cell:focus,
36442
36115
  .k-detail-row > .k-pivotgrid-cell:focus,
@@ -36503,7 +36176,6 @@ $treelist-footer-row-border-width: 1px !default;
36503
36176
  }
36504
36177
 
36505
36178
  .k-treelist-dragging,
36506
- .k-treelist-dragging .k-state-hover,
36507
36179
  .k-treelist-dragging .k-hover {
36508
36180
  cursor: default;
36509
36181
  }
@@ -37279,7 +36951,6 @@ $filemanager-preview-icon-border: null !default;
37279
36951
  );
37280
36952
  }
37281
36953
 
37282
- &.k-state-selected .k-file-icon,
37283
36954
  &.k-selected .k-file-icon {
37284
36955
  @include fill(
37285
36956
  inherit,
@@ -37649,10 +37320,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
37649
37320
 
37650
37321
  &:focus,
37651
37322
  &.k-focus,
37652
- &.k-state-focus,
37653
37323
  &:hover,
37654
- &.k-hover,
37655
- &.k-state-hover {
37324
+ &.k-hover {
37656
37325
  text-decoration: underline;
37657
37326
  }
37658
37327
  }
@@ -37744,7 +37413,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
37744
37413
  );
37745
37414
  }
37746
37415
  .k-taskboard-column:focus,
37747
- .k-taskboard-column.k-state-focus,
37748
37416
  .k-taskboard-column.k-focus {
37749
37417
  @include fill(
37750
37418
  $taskboard-column-focus-text,
@@ -37783,39 +37451,33 @@ $taskboard-drag-placeholder-border: $component-border !default;
37783
37451
  @include fill( $color: $taskboard-card-header-text );
37784
37452
 
37785
37453
  &:focus,
37786
- &.k-focus,
37787
- &.k-state-focus {
37454
+ &.k-focus {
37788
37455
  @include fill( $color: $taskboard-card-header-focus-text );
37789
37456
  }
37790
37457
 
37791
37458
  &:hover,
37792
- &.k-hover,
37793
- &.k-state-hover {
37459
+ &.k-hover {
37794
37460
  @include fill( $color: $taskboard-card-header-hover-text );
37795
37461
  }
37796
37462
  }
37797
37463
 
37798
37464
  &:focus,
37799
- &.k-focus,
37800
- &.k-state-focus {
37465
+ &.k-focus {
37801
37466
  @include fill( $border: $taskboard-card-focus-border );
37802
37467
  @include box-shadow( $taskboard-card-focus-shadow );
37803
37468
  }
37804
37469
 
37805
37470
  &:hover,
37806
- &.k-hover,
37807
- &.k-state-hover {
37471
+ &.k-hover {
37808
37472
  @include fill( $border: $taskboard-card-hover-border );
37809
37473
  }
37810
37474
 
37811
- &.k-selected,
37812
- &.k-state-selected {
37475
+ &.k-selected {
37813
37476
  @include fill( $border: $taskboard-card-selected-border );
37814
37477
  @include box-shadow( $taskboard-card-selected-shadow );
37815
37478
  }
37816
37479
 
37817
- &.k-disabled,
37818
- &.k-state-disabled {
37480
+ &.k-disabled {
37819
37481
  @include disabled( $disabled-styling );
37820
37482
  }
37821
37483
  }
@@ -37947,7 +37609,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
37947
37609
  pointer-events: auto;
37948
37610
  }
37949
37611
 
37950
- .k-editor-content.k-state-focused,
37951
37612
  .k-editor-content.k-focus {
37952
37613
  outline-width: 1px;
37953
37614
  outline-style: dashed;
@@ -38203,7 +37864,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38203
37864
  border-bottom-color: inherit;
38204
37865
  cursor: se-resize;
38205
37866
 
38206
- .k-i-arrow-45-down-right {
37867
+ .k-i-arrow-45-down-right,
37868
+ .k-i-caret-br {
38207
37869
  display: none;
38208
37870
  }
38209
37871
  }
@@ -38401,7 +38063,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38401
38063
  display: block;
38402
38064
  margin: auto;
38403
38065
 
38404
- &.k-state-selected,
38405
38066
  &.k-selected {
38406
38067
  color: inherit;
38407
38068
  border-width: 0;
@@ -38710,9 +38371,9 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38710
38371
  }
38711
38372
  }
38712
38373
 
38713
- // Hover & Actve state
38374
+ // Hover & Active state
38714
38375
  &:hover,
38715
- &.k-state-active,
38376
+ &.k-hover
38716
38377
  &.k-active {
38717
38378
  border-color: $panel-border;
38718
38379
  }
@@ -38730,7 +38391,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38730
38391
 
38731
38392
  // Insert table
38732
38393
  .k-ct-popup {
38733
- .k-state-selected,
38734
38394
  .k-selected {
38735
38395
  @include fill( $selected-text, $selected-bg, $selected-border, none );
38736
38396
  }
@@ -39241,7 +38901,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39241
38901
  }
39242
38902
 
39243
38903
  &.k-gantt-planned .k-grid-content tr {
39244
- height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
38904
+ height: calc( #{$line-height-em} * 1.7 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
39245
38905
  }
39246
38906
 
39247
38907
  // Layout
@@ -39286,7 +38946,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39286
38946
  }
39287
38947
  }
39288
38948
 
39289
- tr.k-state-selected > td:last-child,
39290
38949
  tr.k-selected > td:last-child {
39291
38950
  background: transparent;
39292
38951
  }
@@ -39465,7 +39124,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39465
39124
  padding: 0 !important; // sass-lint:disable-line no-important
39466
39125
  }
39467
39126
  .k-grid-header tr {
39468
- height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
39127
+ height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
39469
39128
  vertical-align: bottom;
39470
39129
  }
39471
39130
  .k-grid-content {
@@ -39556,7 +39215,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39556
39215
  border-color: currentColor;
39557
39216
  position: absolute;
39558
39217
  }
39559
- .k-gantt-line.k-state-selected,
39560
39218
  .k-gantt-line.k-selected {
39561
39219
  z-index: 3;
39562
39220
  }
@@ -39630,7 +39288,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39630
39288
  transform: translate(-50%, -50%);
39631
39289
  }
39632
39290
  .k-task-dot:hover::before,
39633
- .k-task-dot.k-state-hover::before,
39634
39291
  .k-task-dot.k-hover::before {
39635
39292
  border-width: 1px;
39636
39293
  }
@@ -40118,7 +39775,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40118
39775
  $border: $gantt-milestone-border
40119
39776
  );
40120
39777
  }
40121
- .k-task-milestone.k-state-selected .k-task-milestone-content,
40122
39778
  .k-task-milestone.k-selected .k-task-milestone-content {
40123
39779
  @include fill(
40124
39780
  $bg: $gantt-milestone-selected-bg,
@@ -40133,7 +39789,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40133
39789
  stroke: $gantt-line-fill;
40134
39790
  }
40135
39791
 
40136
- polyline.k-state-selected,
40137
39792
  polyline.k-selected {
40138
39793
  stroke: $gantt-line-selected-fill;
40139
39794
  }
@@ -40187,7 +39842,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40187
39842
  );
40188
39843
  }
40189
39844
  .k-task-dot:hover::before,
40190
- .k-task-dot.k-state-hover::before,
40191
39845
  .k-task-dot.k-hover::before {
40192
39846
  @include fill(
40193
39847
  $bg: $gantt-dot-hover-bg,
@@ -40213,7 +39867,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40213
39867
  );
40214
39868
  }
40215
39869
  }
40216
- .k-task-milestone.k-state-selected,
40217
39870
  .k-task-milestone.k-selected {
40218
39871
  background-image: none;
40219
39872
  @include fill(
@@ -40244,7 +39897,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40244
39897
  .k-task-advanced .k-task-summary-complete {
40245
39898
  color: $gantt-advanced-bg;
40246
39899
  }
40247
- .k-task-summary.k-state-selected,
40248
39900
  .k-task-summary.k-selected {
40249
39901
  color: $gantt-summary-selected-bg;
40250
39902
 
@@ -40288,7 +39940,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40288
39940
  $bg: $gantt-advanced-bg
40289
39941
  );
40290
39942
  }
40291
- .k-task-single.k-state-selected,
40292
39943
  .k-task-single.k-selected {
40293
39944
  @include fill(
40294
39945
  $gantt-task-selected-text,
@@ -40305,7 +39956,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
40305
39956
  .k-gantt-line {
40306
39957
  color: $gantt-line-fill;
40307
39958
  }
40308
- .k-gantt-line.k-state-selected,
40309
39959
  .k-gantt-line.k-selected {
40310
39960
  color: $gantt-line-selected-fill;
40311
39961
  }
@@ -40986,7 +40636,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40986
40636
  }
40987
40637
 
40988
40638
  &:hover,
40989
- &.k-state-hover,
40990
40639
  &.k-hover {
40991
40640
  .k-event-delete {
40992
40641
  opacity: 1;
@@ -41052,7 +40701,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41052
40701
 
41053
40702
  // Hover
41054
40703
  &:hover,
41055
- &.k-state-hover,
41056
40704
  &.k-hover {
41057
40705
  .k-event-actions .k-event-delete,
41058
40706
  .k-resize-handle {
@@ -41310,11 +40958,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41310
40958
  opacity: .5;
41311
40959
  visibility: hidden;
41312
40960
  }
41313
- .k-state-hover .k-task > .k-event-delete,
41314
40961
  .k-hover .k-task > .k-event-delete,
41315
40962
  .k-scheduler-content tr:hover .k-event-delete,
41316
40963
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
41317
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
41318
40964
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
41319
40965
  visibility: visible;
41320
40966
  }
@@ -41388,7 +41034,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41388
41034
  position: relative;
41389
41035
  }
41390
41036
 
41391
- td.k-state-selected,
41392
41037
  td.k-selected {
41393
41038
  background-color: inherit;
41394
41039
  }
@@ -41597,6 +41242,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41597
41242
 
41598
41243
  .k-scheduler,
41599
41244
  &.k-scheduler {
41245
+ .k-i-caret-alt-left,
41246
+ .k-i-caret-alt-right,
41600
41247
  .k-i-arrow-60-left,
41601
41248
  .k-i-arrow-60-right,
41602
41249
  .k-current-time-arrow-right {
@@ -41686,7 +41333,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41686
41333
  kendo-scheduler .k-event,
41687
41334
  .k-event {
41688
41335
 
41689
- &.k-state-selected,
41690
41336
  &.k-selected {
41691
41337
  &::before {
41692
41338
  display: block;
@@ -41902,9 +41548,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41902
41548
  );
41903
41549
  }
41904
41550
 
41905
- .k-scheduler-layout td.k-state-selected,
41906
41551
  .k-scheduler-layout td.k-selected,
41907
- .k-scheduler-layout .k-scheduler-cell.k-state-selected,
41908
41552
  .k-scheduler-layout .k-scheduler-cell.k-selected {
41909
41553
  background-color: rgba($selected-bg, .25);
41910
41554
  }
@@ -41927,7 +41571,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41927
41571
  );
41928
41572
  @include box-shadow( $scheduler-event-shadow );
41929
41573
 
41930
- &.k-state-hover,
41574
+ &:hover,
41931
41575
  &.k-hover {
41932
41576
  @include fill(
41933
41577
  $scheduler-event-hover-text,
@@ -41938,7 +41582,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41938
41582
  @include box-shadow( $scheduler-event-hover-shadow );
41939
41583
  }
41940
41584
 
41941
- &.k-state-selected,
41942
41585
  &.k-selected {
41943
41586
  @include fill(
41944
41587
  $scheduler-event-selected-text,
@@ -42005,10 +41648,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
42005
41648
 
42006
41649
  // Hover
42007
41650
  .k-scheduler-content tr:hover,
42008
- .k-scheduler-content tr.k-state-hover,
42009
41651
  .k-scheduler-content tr.k-hover,
42010
41652
  .k-scheduler-content .k-scheduler-row:hover,
42011
- .k-scheduler-content .k-scheduler-row.k-state-hover,
42012
41653
  .k-scheduler-content .k-scheduler-row.k-hover {
42013
41654
  @include fill(
42014
41655
  $hovered-text,
@@ -42020,9 +41661,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
42020
41661
 
42021
41662
  .k-scheduler-content tr:hover .k-scheduler-datecolumn,
42022
41663
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
42023
- .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
42024
41664
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
42025
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
42026
41665
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
42027
41666
  @include fill(
42028
41667
  $scheduler-text,
@@ -42032,13 +41671,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
42032
41671
  }
42033
41672
 
42034
41673
  // Selected
42035
- .k-scheduler-content tr.k-state-selected,
42036
41674
  .k-scheduler-content tr.k-selected {
42037
41675
  background-color: rgba($selected-bg, .25);
42038
41676
  }
42039
- .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
42040
41677
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
42041
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
42042
41678
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
42043
41679
  background-color: $scheduler-bg;
42044
41680
  }
@@ -42056,7 +41692,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
42056
41692
  @include fill( $bg: $scheduler-yearview-indicator-bg );
42057
41693
  }
42058
41694
 
42059
- .k-state-selected .k-day-indicator,
42060
41695
  .k-selected .k-day-indicator {
42061
41696
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
42062
41697
  }
@@ -42394,7 +42029,6 @@ $chat-quick-reply-hover-border: $primary !default;
42394
42029
 
42395
42030
 
42396
42031
  // Message states
42397
- .k-message.k-state-selected,
42398
42032
  .k-message.k-selected {
42399
42033
  margin-bottom: $chat-item-spacing-y;
42400
42034
  border: 0;
@@ -42523,7 +42157,6 @@ $chat-quick-reply-hover-border: $primary !default;
42523
42157
  align-items: center;
42524
42158
 
42525
42159
  &:focus,
42526
- &.k-state-focus,
42527
42160
  &.k-focus,
42528
42161
  &:focus-within {
42529
42162
  outline: 0;
@@ -42604,7 +42237,6 @@ $chat-quick-reply-hover-border: $primary !default;
42604
42237
  flex: 0 0 auto;
42605
42238
  }
42606
42239
 
42607
- &.k-state-selected,
42608
42240
  &.k-selected {
42609
42241
  background: none;
42610
42242
  }
@@ -42841,7 +42473,6 @@ $chat-quick-reply-hover-border: $primary !default;
42841
42473
  .k-bubble:hover {
42842
42474
  @include box-shadow( $chat-bubble-hover-shadow );
42843
42475
  }
42844
- .k-state-selected .k-bubble,
42845
42476
  .k-selected .k-bubble {
42846
42477
  @include box-shadow( $chat-bubble-selected-shadow );
42847
42478
  }
@@ -42857,7 +42488,6 @@ $chat-quick-reply-hover-border: $primary !default;
42857
42488
  .k-alt .k-bubble:hover {
42858
42489
  @include box-shadow( $chat-alt-bubble-hover-shadow );
42859
42490
  }
42860
- .k-alt .k-state-selected .k-bubble,
42861
42491
  .k-alt .k-selected .k-bubble {
42862
42492
  @include box-shadow( $chat-alt-bubble-selected-shadow );
42863
42493
  }
@@ -43620,12 +43250,10 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43620
43250
  }
43621
43251
 
43622
43252
  .k-timeline-track-item:hover .k-timeline-circle::before,
43623
- .k-timeline-track-item.k-state-hover .k-timeline-circle::before,
43624
43253
  .k-timeline-track-item.k-hover .k-timeline-circle::before {
43625
43254
  opacity: $kendo-flat-button-hover-opacity;
43626
43255
  }
43627
43256
 
43628
- .k-timeline-track-item.k-state-focus .k-timeline-circle::before,
43629
43257
  .k-timeline-track-item.k-focus .k-timeline-circle::before {
43630
43258
  opacity: $kendo-flat-button-focus-opacity;
43631
43259
  }
@@ -43677,7 +43305,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43677
43305
  color: $body-text;
43678
43306
  }
43679
43307
 
43680
- .k-timeline-arrow.k-state-disabled,
43681
43308
  .k-timeline-arrow.k-disabled {
43682
43309
  opacity: 1; // The arrow button in disabled mode should have a solid background
43683
43310
  color: $timeline-track-arrow-disabled-text;
@@ -43698,7 +43325,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43698
43325
  background-color: $timeline-flag-bg;
43699
43326
  }
43700
43327
 
43701
- .k-timeline-track-item.k-state-focus .k-timeline-circle,
43702
43328
  .k-timeline-track-item.k-focus .k-timeline-circle {
43703
43329
  @include box-shadow( $timeline-track-item-focus-shadow );
43704
43330
  }
@@ -43720,6 +43346,9 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43720
43346
  // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
43721
43347
  // File already imported_once. Skipping output.
43722
43348
  // #endregion
43349
+ // #region @import "../button/_variables.scss"; -> packages/material/scss/button/_variables.scss
43350
+ // File already imported_once. Skipping output.
43351
+ // #endregion
43723
43352
  // #region @import "../combobox/_index.scss"; -> packages/material/scss/combobox/_index.scss
43724
43353
  // File already imported_once. Skipping output.
43725
43354
  // #endregion
@@ -43735,7 +43364,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43735
43364
  // #region @import "../icons/_index.scss"; -> packages/material/scss/icons/_index.scss
43736
43365
  // File already imported_once. Skipping output.
43737
43366
  // #endregion
43738
-
43367
+ // #region @import "../dropzone/_index.scss"; -> packages/material/scss/dropzone/_index.scss
43368
+ // File already imported_once. Skipping output.
43369
+ // #endregion
43370
+ // #region @import "../window/_index.scss"; -> packages/material/scss/window/_index.scss
43371
+ // File already imported_once. Skipping output.
43372
+ // #endregion
43739
43373
 
43740
43374
  // Component
43741
43375
  // #region @import "_variables.scss"; -> packages/material/scss/pdf-viewer/_variables.scss
@@ -43765,12 +43399,25 @@ $pdf-viewer-page-text: $component-text !default;
43765
43399
  $pdf-viewer-page-border: $component-border !default;
43766
43400
  $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
43767
43401
 
43768
- $pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
43402
+ $pdf-viewer-search-panel-border-width: 1px !default;
43403
+ $pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
43404
+ $pdf-viewer-search-panel-bg: $component-bg !default;
43405
+ $pdf-viewer-search-panel-text: $component-text !default;
43406
+ $pdf-viewer-search-panel-border: $component-border !default;
43407
+ $pdf-viewer-search-panel-shadow: $window-shadow !default;
43408
+ $pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
43409
+
43410
+ $pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
43411
+ $pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
43769
43412
  $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
43770
43413
 
43771
43414
  $pdf-viewer-selection-line-height: $line-height-sm !default;
43772
43415
 
43773
43416
  $pdf-viewer-search-highlight-bg: $body-text !default;
43417
+ $pdf-viewer-search-highlight-mark-bg: yellow !default;
43418
+
43419
+ $pdf-viewer-icon-text: $dropzone-icon-text !default;
43420
+ $pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
43774
43421
 
43775
43422
  // #endregion
43776
43423
  // #region @import "_layout.scss"; -> packages/material/scss/pdf-viewer/_layout.scss
@@ -43781,6 +43428,7 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
43781
43428
  border-width: $pdf-viewer-border-width;
43782
43429
  border-style: solid;
43783
43430
  box-sizing: border-box;
43431
+ position: relative;
43784
43432
  outline: 0;
43785
43433
  font-family: $pdf-viewer-font-family;
43786
43434
  font-size: $pdf-viewer-font-size;
@@ -43811,11 +43459,14 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
43811
43459
 
43812
43460
 
43813
43461
  // Canvas
43814
- .k-list-scroller {
43462
+ .k-canvas {
43463
+ display: flex;
43464
+ flex-direction: column;
43815
43465
  flex: 1 1 auto;
43816
43466
  outline: none;
43817
43467
 
43818
- .k-enable-text-select {
43468
+ .k-enable-text-select,
43469
+ &.k-enable-text-select {
43819
43470
  -webkit-user-select: text;
43820
43471
  -moz-user-select: text;
43821
43472
  -ms-user-select: text;
@@ -43823,16 +43474,22 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
43823
43474
  cursor: text;
43824
43475
  }
43825
43476
 
43826
- .k-enable-panning {
43477
+ .k-enable-panning,
43478
+ &.k-enable-panning {
43827
43479
  cursor: grab;
43828
43480
  }
43829
- .k-enable-panning span::selection {
43481
+ .k-enable-panning span::selection,
43482
+ &.k-enable-panning span::selection {
43830
43483
  background-color: transparent;
43831
43484
  }
43832
43485
  }
43833
43486
 
43834
43487
 
43835
- // Page
43488
+ // Pages
43489
+ .k-pdf-viewer-pages {
43490
+ flex: 1 1 auto;
43491
+ }
43492
+
43836
43493
  .k-page {
43837
43494
  position: relative;
43838
43495
  margin: $pdf-viewer-page-spacing auto;
@@ -43858,46 +43515,88 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
43858
43515
  mark {
43859
43516
  color: transparent;
43860
43517
  }
43518
+
43519
+ .k-search-highlight-mark {
43520
+ color: transparent;
43521
+ }
43522
+ }
43523
+ }
43524
+
43525
+ .k-blank-page {
43526
+ margin: 0;
43527
+ display: flex;
43528
+ flex-flow: column nowrap;
43529
+ width: 100%;
43530
+ height: 100%;
43531
+ align-items: center;
43532
+ justify-content: center;
43533
+ background-color: inherit !important; // sass-lint:disable-line no-important
43534
+
43535
+ .k-upload,
43536
+ .k-dropzone,
43537
+ .k-dropzone-inner {
43538
+ border: 0;
43539
+ background: none;
43540
+ }
43541
+
43542
+ > .k-icon {
43543
+ font-size: $pdf-viewer-icon-size;
43861
43544
  }
43862
43545
  }
43546
+
43863
43547
  }
43864
43548
 
43865
43549
  // Search
43866
43550
  .k-pdf-viewer-search-dialog {
43867
- padding: $pdf-viewer-search-dialog-padding;
43551
+ padding: 0 !important; // sass-lint:disable-line no-important
43552
+ }
43868
43553
 
43869
- .k-search-container {
43870
- display: flex;
43871
- gap: $pdf-viewer-search-dialog-spacing;
43872
- flex-flow: row nowrap;
43873
- flex: 0 0 auto;
43874
- justify-content: flex-start;
43875
- align-items: center;
43554
+ .k-search-panel {
43555
+ padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
43556
+ display: flex;
43557
+ gap: $pdf-viewer-search-dialog-spacing;
43558
+ flex-flow: row nowrap;
43559
+ flex: 0 0 auto;
43560
+ justify-content: flex-start;
43561
+ align-items: center;
43876
43562
 
43877
- .k-search-dialog-draghandle {
43878
- cursor: move;
43879
- margin-left: 0;
43880
- }
43563
+ .k-search-dialog-draghandle {
43564
+ cursor: move;
43565
+ margin-left: 0;
43566
+ }
43881
43567
 
43882
- .k-textbox {
43883
- width: 10em;
43884
- flex: none;
43568
+ .k-textbox {
43569
+ width: 10em;
43570
+ flex: none;
43885
43571
 
43886
- .k-button {
43887
- border-width: 0;
43888
- }
43572
+ .k-button {
43573
+ border-width: 0;
43889
43574
  }
43575
+ }
43890
43576
 
43891
- .k-search-matches {
43892
- flex: 1 1 auto;
43893
- }
43577
+ .k-search-matches {
43578
+ display: inline-flex;
43579
+ gap: $pdf-viewer-search-panel-matches-spacing;
43894
43580
  }
43895
43581
  }
43896
43582
 
43583
+ .k-pdf-viewer-canvas > .k-search-panel {
43584
+ width: max-content;
43585
+ margin-top: calc( (#{$kendo-button-calc-size} + #{$pdf-viewer-search-panel-border-width} + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
43586
+ border-width: $pdf-viewer-search-panel-border-width;
43587
+ border-style: solid;
43588
+ border-radius: $pdf-viewer-search-panel-border-radius;
43589
+ z-index: 10;
43590
+ }
43591
+
43592
+ // Alias
43593
+ .k-search-container {
43594
+ @extend .k-search-panel !optional;
43595
+ }
43596
+
43897
43597
 
43898
43598
  // IE
43899
43599
  .k-ie .k-pdf-viewer-search-dialog {
43900
-
43901
43600
  .k-search-container > * + * {
43902
43601
  margin-left: $pdf-viewer-search-dialog-spacing;
43903
43602
  }
@@ -43952,12 +43651,33 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
43952
43651
  @include box-shadow( $pdf-viewer-page-shadow );
43953
43652
  }
43954
43653
 
43654
+ .k-blank-page > .k-icon {
43655
+ @include fill( $color: $pdf-viewer-icon-text );
43656
+ }
43657
+
43955
43658
 
43956
43659
  // Search
43957
43660
  .k-search-highlight {
43958
43661
  background-color: $pdf-viewer-search-highlight-bg;
43959
43662
  }
43960
43663
 
43664
+ .k-search-highlight-mark {
43665
+ @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
43666
+ }
43667
+
43668
+ }
43669
+
43670
+ .k-pdf-viewer-canvas > .k-search-panel {
43671
+ @include fill(
43672
+ $pdf-viewer-search-panel-text,
43673
+ $pdf-viewer-search-panel-bg,
43674
+ $pdf-viewer-search-panel-border,
43675
+ );
43676
+ @include box-shadow( $pdf-viewer-search-panel-shadow );
43677
+ }
43678
+
43679
+ .k-search-container {
43680
+ @extend .k-search-panel !optional;
43961
43681
  }
43962
43682
 
43963
43683
  }
@@ -44411,7 +44131,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
44411
44131
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
44412
44132
 
44413
44133
  &:focus,
44414
- &.k-state-focus,
44415
44134
  &.k-focus {
44416
44135
  color: $scrollview-navigation-color;
44417
44136
  opacity: $scrollview-navigation-hover-opacity;
@@ -44422,7 +44141,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
44422
44141
  }
44423
44142
 
44424
44143
  &:hover,
44425
- &.k-state-hover,
44426
44144
  &.k-hover {
44427
44145
  color: $scrollview-navigation-color;
44428
44146
  opacity: $scrollview-navigation-hover-opacity;
@@ -44442,14 +44160,12 @@ $scrollview-transition-timing-function: ease-in-out !default;
44442
44160
  }
44443
44161
 
44444
44162
  &:focus,
44445
- &.k-state-focused,
44446
44163
  &.k-focus {
44447
44164
  box-shadow: $scrollview-pagebutton-shadow;
44448
44165
  }
44449
44166
  }
44450
44167
 
44451
44168
  .k-scrollview-nav > .k-link:hover,
44452
- .k-scrollview-nav > .k-link.k-state-hover,
44453
44169
  .k-scrollview-nav > .k-link.k-hover {
44454
44170
  box-shadow: $scrollview-pagebutton-shadow;
44455
44171
  }
@@ -44700,7 +44416,7 @@ $treemap-line-height: $line-height !default;
44700
44416
  .k-chart-tooltip-wrapper {
44701
44417
  z-index: 12000;
44702
44418
 
44703
- > .k-popup {
44419
+ .k-popup {
44704
44420
  padding: 0;
44705
44421
  border-width: 0;
44706
44422
  background: transparent;
@@ -45268,7 +44984,7 @@ $treemap-line-height: $line-height !default;
45268
44984
  .k-leaf.k-inverse {
45269
44985
  color: $component-text;
45270
44986
  }
45271
- .k-leaf.k-state-hover,
44987
+ .k-leaf:hover,
45272
44988
  .k-leaf.k-hover {
45273
44989
  box-shadow: inset 0 0 0 3px $component-border;
45274
44990
  }
@@ -45750,8 +45466,7 @@ $orgchart-line-v-height: 25px !default;
45750
45466
  }
45751
45467
 
45752
45468
  &:focus,
45753
- &.k-focus,
45754
- &.k-state-focus {
45469
+ &.k-focus {
45755
45470
  @include box-shadow( $orgchart-card-focus-shadow );
45756
45471
  }
45757
45472
  }
@@ -45765,9 +45480,6 @@ $orgchart-line-v-height: 25px !default;
45765
45480
  );
45766
45481
  }
45767
45482
  .k-orgchart-node-group-container:focus,
45768
- .k-orgchart-node-group-container.k-focus,
45769
- .k-orgchart-node-group-container.k-state-focus,
45770
- .k-orgchart-node-group-container.k-state-focused,
45771
45483
  .k-orgchart-node-group-container.k-focus {
45772
45484
  @include box-shadow( $orgchart-node-group-focus-shadow );
45773
45485
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -45811,40 +45523,42 @@ $kendo-signature-height: 108px !default;
45811
45523
  $kendo-signature-maximized-width: 750px !default;
45812
45524
  $kendo-signature-maximized-height: 252px !default;
45813
45525
 
45814
- $kendo-signature-padding: map-get( $spacing, 2 ) !default;
45815
- $kendo-signature-padding-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
45816
- $kendo-signature-padding-md: $kendo-signature-padding !default;
45817
- $kendo-signature-padding-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
45526
+ $kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
45527
+ $kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
45528
+ $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
45529
+ $kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
45530
+
45531
+ $kendo-signature-padding-y: $kendo-signature-padding-x !default;
45532
+ $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
45533
+ $kendo-signature-padding-y-md: $kendo-signature-padding-y !default;
45534
+ $kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
45818
45535
 
45819
45536
  $kendo-signature-line-width: 1px !default;
45820
45537
  $kendo-signature-line-style: dashed !default;
45821
45538
  $kendo-signature-line-color: rgba( $info, .24 ) !default;
45822
45539
 
45823
- $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
45824
- $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
45825
- $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
45826
- $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
45540
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
45541
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
45542
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
45543
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
45827
45544
 
45828
- $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
45829
- $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
45830
- $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
45831
- $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
45545
+ $kendo-signature-line-bottom-offset: 33% !default;
45832
45546
 
45833
45547
  $kendo-signature-sizes: (
45834
45548
  sm: (
45835
- padding: $kendo-signature-padding-sm,
45836
- line-size: $kendo-signature-line-size-sm,
45837
- line-offset: $kendo-signature-line-bottom-offset-sm
45549
+ padding-x: $kendo-signature-padding-x-sm,
45550
+ padding-y: $kendo-signature-padding-y-sm,
45551
+ line-size: $kendo-signature-line-size-sm
45838
45552
  ),
45839
45553
  md: (
45840
- padding: $kendo-signature-padding-md,
45841
- line-size: $kendo-signature-line-size-md,
45842
- line-offset: $kendo-signature-line-bottom-offset-md
45554
+ padding-x: $kendo-signature-padding-x-md,
45555
+ padding-y: $kendo-signature-padding-y-md,
45556
+ line-size: $kendo-signature-line-size-md
45843
45557
  ),
45844
45558
  lg: (
45845
- padding: $kendo-signature-padding-lg,
45846
- line-size: $kendo-signature-line-size-lg,
45847
- line-offset: $kendo-signature-line-bottom-offset-lg
45559
+ padding-x: $kendo-signature-padding-x-lg,
45560
+ padding-y: $kendo-signature-padding-y-lg,
45561
+ line-size: $kendo-signature-line-size-lg
45848
45562
  )
45849
45563
  ) !default;
45850
45564
 
@@ -45858,7 +45572,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
45858
45572
 
45859
45573
  .k-signature {
45860
45574
  width: $kendo-signature-width;
45861
- height: $kendo-signature-height;
45575
+ min-height: $kendo-signature-height;
45862
45576
  position: relative;
45863
45577
  box-sizing: border-box;
45864
45578
  display: flex;
@@ -45895,27 +45609,30 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
45895
45609
 
45896
45610
  .k-signature-line {
45897
45611
  position: absolute;
45898
- z-index: 0;
45612
+ bottom: $kendo-signature-line-bottom-offset;
45613
+ z-index: 2;
45614
+ pointer-events: none;
45899
45615
  border-bottom-width: $kendo-signature-line-width;
45900
45616
  border-bottom-style: $kendo-signature-line-style;
45901
45617
  }
45902
45618
 
45903
45619
  // Sizes
45904
45620
  @each $size, $size-props in $kendo-signature-sizes {
45905
- $_padding: map-get($size-props, padding);
45621
+ $_padding-x: map-get($size-props, padding-x);
45622
+ $_padding-y: map-get($size-props, padding-y);
45906
45623
  $_line-size: map-get($size-props, line-size);
45907
45624
  $_line-offset: map-get($size-props, line-offset);
45908
45625
 
45909
45626
  .k-signature-#{$size} {
45910
- padding: $_padding;
45627
+ padding-inline: $_padding-x;
45628
+ padding-block: $_padding-y;
45911
45629
 
45912
45630
  .k-signature-line {
45913
45631
  width: $_line-size;
45914
- bottom: $_line-offset;
45915
45632
  }
45916
45633
  }
45917
-
45918
45634
  }
45635
+
45919
45636
  }
45920
45637
 
45921
45638
  // #endregion