@progress/kendo-theme-bootstrap 5.6.1-dev.7 → 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.
package/dist/all.scss CHANGED
@@ -3488,7 +3488,7 @@ $line-height-xs: 1 !default;
3488
3488
  $line-height-sm: $line-height-sm !default;
3489
3489
  $line-height-md: $line-height !default;
3490
3490
  $line-height-lg: $line-height-lg !default;
3491
- $line-height-em: ($line-height * 1em) !default;
3491
+ $line-height-em: calc( #{$line-height} * 1em ) !default;
3492
3492
 
3493
3493
 
3494
3494
  // Font weight
@@ -3722,7 +3722,6 @@ $display4-letter-spacing: null !default;
3722
3722
  @include exports( "common/disabled" ) {
3723
3723
 
3724
3724
  // Disabled state
3725
- .k-state-disabled,
3726
3725
  .k-disabled,
3727
3726
  .k-widget[disabled],
3728
3727
  .k-disabled {
@@ -3737,8 +3736,7 @@ $display4-letter-spacing: null !default;
3737
3736
 
3738
3737
  // Nested disabled
3739
3738
  [disabled],
3740
- .k-disabled,
3741
- .k-state-disabled {
3739
+ .k-disabled {
3742
3740
  opacity: 1;
3743
3741
  filter: grayscale(0);
3744
3742
  }
@@ -6537,18 +6535,28 @@ $utils-border-radius: (
6537
6535
  @include exports( "common/decoration/color" ) {
6538
6536
 
6539
6537
  // sass-lint:disable-block no-important
6538
+ // sass-lint:disable-block class-name-format
6540
6539
  // stylelint-disable block-opening-brace-space-before
6541
6540
 
6542
6541
  .k-text-base,
6543
6542
  .k-color-base {
6544
6543
  color: $base-text;
6545
6544
  }
6545
+ .\!k-text-base,
6546
+ .\!k-color-base {
6547
+ color: $base-text !important;
6548
+ }
6546
6549
 
6547
6550
  .k-color-inherit { color: inherit; }
6551
+ .\!k-color-inherit { color: inherit !important; }
6548
6552
 
6549
6553
  @each $name, $color in $kendo-theme-colors {
6550
6554
  .k-text-#{$name},
6551
6555
  .k-color-#{$name} {
6556
+ color: $color;
6557
+ }
6558
+ .\!k-text-#{$name},
6559
+ .\!k-color-#{$name} {
6552
6560
  color: $color !important;
6553
6561
  }
6554
6562
  }
@@ -6559,63 +6567,19 @@ $utils-border-radius: (
6559
6567
  @include exports( "common/decoration/background" ) {
6560
6568
 
6561
6569
  // sass-lint:disable-block no-important
6570
+ // sass-lint:disable-block class-name-format
6562
6571
 
6563
6572
  @each $name, $bg-color in $kendo-theme-colors {
6564
6573
  .k-bg-#{$name} {
6574
+ background-color: $bg-color;
6575
+ }
6576
+ .\!k-bg-#{$name} {
6565
6577
  background-color: $bg-color !important;
6566
6578
  }
6567
6579
  }
6568
6580
 
6569
6581
  }
6570
6582
 
6571
-
6572
- @mixin variant( $base ) {
6573
- background-color: tint($base, 10);
6574
- color: shade($base, 6);
6575
- border-color: tint($base, 9);
6576
- }
6577
-
6578
- @include exports( "common/decoration/variant" ) {
6579
-
6580
- @each $name, $variant in $kendo-theme-colors {
6581
- .k-state-#{$name} {
6582
- @include variant( $variant );
6583
- }
6584
- }
6585
- }
6586
-
6587
-
6588
- @include exports( "common/decoration/legacy" ) {
6589
-
6590
- .k-info-colored {
6591
- color: #50607f;
6592
- border-color: #d0d9df;
6593
- background-color: #f0f9ff;
6594
- }
6595
-
6596
- .k-success-colored {
6597
- color: #507f50;
6598
- border-color: #d0dfd0;
6599
- background-color: #f0fff0;
6600
- }
6601
-
6602
- .k-error-colored {
6603
- color: #7f5050;
6604
- border-color: #dfd0d0;
6605
- background-color: #fff0f0;
6606
- }
6607
-
6608
- .k-shadow {
6609
- // Shadow moved to popup/_layout.scss due to variable flow
6610
- // box-shadow: $popup-shadow;
6611
- }
6612
-
6613
- .k-inset {
6614
- box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
6615
- }
6616
-
6617
- }
6618
-
6619
6583
  // #endregion
6620
6584
 
6621
6585
  // #endregion
@@ -11217,8 +11181,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11217
11181
  @include disabled( $disabled-styling );
11218
11182
 
11219
11183
  [disabled] &,
11220
- .k-disabled &,
11221
- .k-state-disabled & {
11184
+ .k-disabled & {
11222
11185
  opacity: 1;
11223
11186
  filter: grayscale(0);
11224
11187
  }
@@ -11239,8 +11202,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11239
11202
  @include disabled( $disabled-styling );
11240
11203
 
11241
11204
  [disabled] &,
11242
- .k-disabled &,
11243
- .k-state-disabled & {
11205
+ .k-disabled & {
11244
11206
  opacity: 1;
11245
11207
  filter: grayscale(0);
11246
11208
  }
@@ -12170,7 +12132,6 @@ $floating-label-focus-text: null !default;
12170
12132
  width: auto;
12171
12133
  }
12172
12134
 
12173
- &.k-state-empty,
12174
12135
  &.k-empty {
12175
12136
  > .k-label {
12176
12137
  top: $floating-label-offset-y;
@@ -12181,8 +12142,6 @@ $floating-label-focus-text: null !default;
12181
12142
  }
12182
12143
 
12183
12144
  > .k-label,
12184
- // &:focus-within > .k-label,
12185
- &.k-state-focused > .k-label,
12186
12145
  &.k-focus > .k-label {
12187
12146
  top: $floating-label-focus-offset-y;
12188
12147
  left: $floating-label-focus-offset-x;
@@ -12194,7 +12153,6 @@ $floating-label-focus-text: null !default;
12194
12153
  transform: scale( $floating-label-focus-scale );
12195
12154
  }
12196
12155
 
12197
- &.k-state-empty:not(.k-state-focused) ::placeholder,
12198
12156
  &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
12199
12157
  color: transparent;
12200
12158
  }
@@ -12208,7 +12166,6 @@ $floating-label-focus-text: null !default;
12208
12166
  transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
12209
12167
  }
12210
12168
 
12211
- &.k-state-empty,
12212
12169
  &.k-empty {
12213
12170
  > .k-label {
12214
12171
  left: auto;
@@ -12217,8 +12174,6 @@ $floating-label-focus-text: null !default;
12217
12174
  }
12218
12175
 
12219
12176
  > .k-label,
12220
- // &:focus-within > .k-label,
12221
- &.k-state-focused > .k-label,
12222
12177
  &.k-focus > .k-label {
12223
12178
  left: auto;
12224
12179
  right: $floating-label-focus-offset-x;
@@ -12249,8 +12204,7 @@ $floating-label-focus-text: null !default;
12249
12204
  );
12250
12205
  }
12251
12206
 
12252
- &.k-focus > .k-label,
12253
- &.k-state-focused > .k-label {
12207
+ &.k-focus > .k-label {
12254
12208
  @include fill(
12255
12209
  $color: $floating-label-focus-text,
12256
12210
  $bg: $floating-label-focus-bg
@@ -14601,8 +14555,11 @@ $loader-container-font-size-lg: $font-size-lg !default;
14601
14555
  }
14602
14556
 
14603
14557
  .k-loader-container-inner {
14604
- .k-text-secondary {
14605
- color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
14558
+ // sass-lint:disable-block no-important
14559
+ // sass-lint:disable-block class-name-format
14560
+ .k-text-secondary,
14561
+ .\!k-text-secondary {
14562
+ color: $loader-secondary-bg !important;
14606
14563
  }
14607
14564
  }
14608
14565
 
@@ -15959,7 +15916,7 @@ $form-spacer: $padding-x * 2 !default;
15959
15916
 
15960
15917
  $form-font-size: $font-size !default;
15961
15918
  $form-line-height: $input-btn-line-height !default;
15962
- $form-line-height-em: ($form-line-height * 1em) !default;
15919
+ $form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
15963
15920
  $form-line-height-sm: $line-height-sm !default;
15964
15921
  $form-line-height-lg: $line-height-lg !default;
15965
15922
 
@@ -17347,7 +17304,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17347
17304
 
17348
17305
 
17349
17306
  // Selection
17350
- > .k-state-selected,
17351
17307
  > .k-selected {
17352
17308
  border-width: 0;
17353
17309
  border-style: solid;
@@ -17418,7 +17374,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17418
17374
  flex-direction: row;
17419
17375
  }
17420
17376
 
17421
- > .k-state-selected,
17422
17377
  > .k-selected {
17423
17378
  width: 0;
17424
17379
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -17445,7 +17400,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17445
17400
  // Horizontal reverse
17446
17401
  &.k-progressbar-reverse {
17447
17402
 
17448
- > .k-state-selected,
17449
17403
  > .k-selected {
17450
17404
  flex-direction: row-reverse;
17451
17405
  justify-self: flex-end;
@@ -17470,7 +17424,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17470
17424
  writing-mode: vertical-lr;
17471
17425
  }
17472
17426
 
17473
- > .k-state-selected,
17474
17427
  > .k-selected {
17475
17428
  height: 0;
17476
17429
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -17500,7 +17453,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17500
17453
  &.k-progressbar-reverse {
17501
17454
  flex-direction: column;
17502
17455
 
17503
- > .k-state-selected,
17504
17456
  > .k-selected {
17505
17457
  flex-direction: column;
17506
17458
  align-self: flex-start;
@@ -17512,7 +17464,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17512
17464
  // Indeterminate
17513
17465
  .k-progressbar-indeterminate {
17514
17466
  .k-progress-status-wrap,
17515
- .k-state-selected,
17516
17467
  .k-selected,
17517
17468
  .k-item {
17518
17469
  display: none;
@@ -17523,9 +17474,7 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17523
17474
  // Blazor specific
17524
17475
  .telerik-blazor.k-progressbar-horizontal {
17525
17476
 
17526
- > .k-state-selected,
17527
17477
  > .k-selected,
17528
- > .k-state-selected > .k-progress-status-wrap,
17529
17478
  > .k-selected > .k-progress-status-wrap {
17530
17479
  transition: width .1s ease-in-out;
17531
17480
  }
@@ -17554,7 +17503,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17554
17503
  display: -ms-inline-grid;
17555
17504
 
17556
17505
  > .k-progress-status-wrap,
17557
- > .k-state-selected,
17558
17506
  > .k-selected {
17559
17507
  -ms-grid-column: 1;
17560
17508
  -ms-grid-row: 1;
@@ -17564,7 +17512,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17564
17512
  -ms-grid-columns: 1fr;
17565
17513
  -ms-grid-rows: $progressbar-height;
17566
17514
 
17567
- &.k-progressbar-reverse > .k-state-selected,
17568
17515
  &.k-progressbar-reverse > .k-selected {
17569
17516
  -ms-grid-column-align: end;
17570
17517
  }
@@ -17573,12 +17520,10 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17573
17520
  -ms-grid-columns: $progressbar-height;
17574
17521
  -ms-grid-rows: 1fr;
17575
17522
 
17576
- > .k-state-selected,
17577
17523
  > .k-selected {
17578
17524
  -ms-grid-row-align: end;
17579
17525
  }
17580
17526
 
17581
- &.k-progressbar-reverse > .k-state-selected,
17582
17527
  &.k-progressbar-reverse > .k-selected {
17583
17528
  -ms-grid-row-align: start;
17584
17529
  }
@@ -17644,7 +17589,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
17644
17589
  .k-progressbar {
17645
17590
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
17646
17591
 
17647
- .k-state-selected,
17648
17592
  .k-selected {
17649
17593
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
17650
17594
  }
@@ -18027,7 +17971,6 @@ $kendo-radio-ripple-opacity: .25 !default;
18027
17971
  }
18028
17972
 
18029
17973
  .k-radio:focus,
18030
- .k-radio.k-state-focus,
18031
17974
  .k-radio.k-focus {
18032
17975
  box-shadow: none !important; // sass-lint:disable-line no-important
18033
17976
 
@@ -18091,7 +18034,6 @@ $kendo-radio-ripple-opacity: .25 !default;
18091
18034
 
18092
18035
  // Hover state
18093
18036
  .k-radio:hover,
18094
- .k-radio.k-state-hover,
18095
18037
  .k-radio.k-hover {
18096
18038
  @include fill(
18097
18039
  $kendo-radio-hover-text,
@@ -18103,7 +18045,6 @@ $kendo-radio-ripple-opacity: .25 !default;
18103
18045
 
18104
18046
  // Focus state
18105
18047
  .k-radio:focus,
18106
- .k-radio.k-state-focus,
18107
18048
  .k-radio.k-focus {
18108
18049
  @include fill( $border: $kendo-radio-focus-border );
18109
18050
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -18112,13 +18053,11 @@ $kendo-radio-ripple-opacity: .25 !default;
18112
18053
 
18113
18054
  // Invalid state
18114
18055
  .k-radio.k-invalid,
18115
- .k-radio.k-state-invalid,
18116
18056
  .k-radio.ng-invalid.ng-touched,
18117
18057
  .k-radio.ng-invalid.ng-dirty {
18118
18058
  @include fill( $border: $kendo-radio-invalid-border );
18119
18059
  }
18120
18060
  .k-radio.k-invalid + .k-radio-label,
18121
- .k-radio.k-state-invalid + .k-radio-label,
18122
18061
  .k-radio.ng-invalid.ng-touched + .k-radio-label,
18123
18062
  .k-radio.ng-invalid.ng-dirty + .k-radio-label {
18124
18063
  @include fill( $color: $kendo-radio-invalid-text );
@@ -18135,7 +18074,6 @@ $kendo-radio-ripple-opacity: .25 !default;
18135
18074
  );
18136
18075
  }
18137
18076
  .k-radio:checked:focus,
18138
- .k-radio.k-checked.k-state-focus,
18139
18077
  .k-radio.k-checked.k-focus {
18140
18078
  @include fill( $border: $kendo-radio-focus-checked-border );
18141
18079
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -18312,7 +18250,6 @@ $slider-disabled-opacity: null !default;
18312
18250
  }
18313
18251
 
18314
18252
 
18315
- &.k-state-disabled,
18316
18253
  &.k-disabled {
18317
18254
  .k-tick,
18318
18255
  .k-slider-track,
@@ -18769,20 +18706,17 @@ $slider-disabled-opacity: null !default;
18769
18706
  }
18770
18707
 
18771
18708
  &:focus,
18772
- &.k-state-focused,
18773
18709
  &.k-focus {
18774
18710
  @include box-shadow( $slider-draghandle-focused-shadow );
18775
18711
  }
18776
18712
  }
18777
18713
 
18778
- &.k-state-focused,
18779
18714
  &.k-focus {
18780
18715
  .k-draghandle {
18781
18716
  @include box-shadow( $slider-draghandle-focused-shadow );
18782
18717
  }
18783
18718
  }
18784
18719
 
18785
- &.k-state-disabled,
18786
18720
  &.k-disabled {
18787
18721
  opacity: $slider-disabled-opacity;
18788
18722
  }
@@ -19434,7 +19368,6 @@ $kendo-calendar-sizes: (
19434
19368
  }
19435
19369
 
19436
19370
  // // styles are applied to the k-link element inside
19437
- // .k-state-selected,
19438
19371
  // .k-selected {
19439
19372
  // color: inherit;
19440
19373
  // background: transparent;
@@ -19562,10 +19495,8 @@ $kendo-calendar-sizes: (
19562
19495
 
19563
19496
  &:hover,
19564
19497
  &.k-hover,
19565
- &.k-state-hover,
19566
19498
  &:focus,
19567
- &.k-focus,
19568
- &.k-state-focus {
19499
+ &.k-focus {
19569
19500
  color: $calendar-today-nav-hover-text;
19570
19501
  }
19571
19502
  }
@@ -19586,8 +19517,7 @@ $kendo-calendar-sizes: (
19586
19517
  .k-calendar-cell-inner {
19587
19518
  box-shadow: inset 0 0 0 1px $calendar-today-color;
19588
19519
  }
19589
- &.k-focus .k-calendar-cell-inner,
19590
- &.k-state-focused .k-calendar-cell-inner {
19520
+ &.k-focus .k-calendar-cell-inner {
19591
19521
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
19592
19522
  }
19593
19523
  } @else if $calendar-today-style == color {
@@ -19621,8 +19551,7 @@ $kendo-calendar-sizes: (
19621
19551
 
19622
19552
  // Interactive states
19623
19553
  .k-calendar-td:hover .k-calendar-cell-inner,
19624
- .k-calendar-td.k-hover .k-calendar-cell-inner,
19625
- .k-calendar-td.k-state-hover .k-calendar-cell-inner {
19554
+ .k-calendar-td.k-hover .k-calendar-cell-inner {
19626
19555
  @include fill(
19627
19556
  $calendar-cell-hover-text,
19628
19557
  $calendar-cell-hover-bg,
@@ -19630,8 +19559,7 @@ $kendo-calendar-sizes: (
19630
19559
  $calendar-cell-hover-gradient
19631
19560
  );
19632
19561
  }
19633
- .k-calendar-td.k-selected .k-calendar-cell-inner,
19634
- .k-calendar-td.k-state-selected .k-calendar-cell-inner {
19562
+ .k-calendar-td.k-selected .k-calendar-cell-inner {
19635
19563
  @include fill(
19636
19564
  $calendar-cell-selected-text,
19637
19565
  $calendar-cell-selected-bg,
@@ -19640,8 +19568,7 @@ $kendo-calendar-sizes: (
19640
19568
  );
19641
19569
  }
19642
19570
  .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
19643
- .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
19644
- .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
19571
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
19645
19572
  @include fill(
19646
19573
  $calendar-cell-selected-hover-text,
19647
19574
  $calendar-cell-selected-hover-bg,
@@ -19650,14 +19577,11 @@ $kendo-calendar-sizes: (
19650
19577
  );
19651
19578
  }
19652
19579
  .k-calendar-td:focus .k-calendar-cell-inner,
19653
- .k-calendar-td.k-focus .k-calendar-cell-inner,
19654
- .k-calendar-td.k-state-focus .k-calendar-cell-inner,
19655
- .k-calendar-td.k-state-focused .k-calendar-cell-inner {
19580
+ .k-calendar-td.k-focus .k-calendar-cell-inner {
19656
19581
  box-shadow: $calendar-cell-focused-shadow;
19657
19582
  }
19658
19583
  .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
19659
- .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
19660
- .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
19584
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
19661
19585
  box-shadow: $calendar-cell-selected-focus-shadow;
19662
19586
  }
19663
19587
 
@@ -19671,8 +19595,7 @@ $kendo-calendar-sizes: (
19671
19595
  box-shadow: inset -1px 0 $calendar-navigation-border;
19672
19596
 
19673
19597
  li:hover,
19674
- li.k-hover,
19675
- li.k-state-hover {
19598
+ li.k-hover {
19676
19599
  color: $calendar-today-nav-hover-text;
19677
19600
  }
19678
19601
  }
@@ -19695,7 +19618,6 @@ $kendo-calendar-sizes: (
19695
19618
  // Invalid
19696
19619
  &.k-invalid,
19697
19620
  &.k-invalid:hover,
19698
- &.k-state-invalid,
19699
19621
  &.ng-invalid.ng-touched,
19700
19622
  &.ng-invalid.ng-dirty {
19701
19623
  border-color: $invalid-border;
@@ -19743,9 +19665,7 @@ $kendo-calendar-sizes: (
19743
19665
  }
19744
19666
 
19745
19667
  .k-range-start.k-active,
19746
- .k-range-start.k-state-active,
19747
- .k-range-end.k-active,
19748
- .k-range-end.k-state-active {
19668
+ .k-range-end.k-active {
19749
19669
  .k-calendar-cell-inner {
19750
19670
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
19751
19671
  }
@@ -19981,7 +19901,6 @@ $kendo-time-selector-sizes: (
19981
19901
  display: block;
19982
19902
  }
19983
19903
 
19984
- &.k-state-focused,
19985
19904
  &.k-focus {
19986
19905
  &::before,
19987
19906
  &::after {
@@ -20156,7 +20075,6 @@ $kendo-time-selector-sizes: (
20156
20075
  color: $time-list-title-text;
20157
20076
  }
20158
20077
 
20159
- &.k-state-focused,
20160
20078
  &.k-focus {
20161
20079
  .k-title {
20162
20080
  color: $time-list-title-focus-text;
@@ -20473,18 +20391,14 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
20473
20391
  -ms-high-contrast-adjust: none;
20474
20392
 
20475
20393
  &:hover,
20476
- &.k-state-hover,
20477
20394
  &.k-hover {
20478
20395
  position: relative;
20479
20396
  z-index: 101;
20480
20397
  }
20481
20398
 
20482
20399
  &:focus,
20483
- &.k-state-focus,
20484
20400
  &.k-focus,
20485
- &.k-state-selected,
20486
20401
  &.k-selected,
20487
- &.k-state-selected:hover,
20488
20402
  &.k-selected:hover {
20489
20403
  position: relative;
20490
20404
  z-index: 100;
@@ -20504,20 +20418,15 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
20504
20418
  .k-colorpalette-tile {
20505
20419
 
20506
20420
  &:focus,
20507
- &.k-state-focus,
20508
20421
  &.k-focus {
20509
20422
  @include box-shadow( $colorpalette-tile-focus-shadow );
20510
20423
  }
20511
20424
 
20512
20425
  &:hover,
20513
- &.k-state-hover,
20514
20426
  &.k-hover {
20515
20427
  @include box-shadow( $colorpalette-tile-hover-shadow );
20516
20428
  }
20517
20429
 
20518
- &.k-state-selected,
20519
- &.k-selected,
20520
- &.k-state-selected:hover,
20521
20430
  &.k-selected,
20522
20431
  &.k-selected:hover {
20523
20432
  @include box-shadow( $colorpalette-tile-selected-shadow );
@@ -20896,7 +20805,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;
20896
20805
  }
20897
20806
 
20898
20807
  .k-colorgradient:focus,
20899
- .k-colorgradient.k-state-focus,
20900
20808
  .k-colorgradient.k-focus {
20901
20809
  @include fill( $border: $colorgradient-focus-border );
20902
20810
  @include box-shadow( $colorgradient-focus-shadow );
@@ -20917,16 +20825,15 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;
20917
20825
  @include box-shadow( $colorgradient-draghandle-shadow );
20918
20826
 
20919
20827
  &:focus,
20920
- &.k-state-focus,
20921
20828
  &.k-focus {
20922
20829
  @include fill( $bg: transparent, $border: $white );
20923
20830
  @include box-shadow( $colorgradient-draghandle-focus-shadow );
20924
20831
  }
20925
20832
 
20926
- &:active,
20927
20833
  &:hover,
20928
- &.k-state-hover,
20929
- &.k-hover {
20834
+ &.k-hover,
20835
+ &.k-active,
20836
+ &:active {
20930
20837
  @include fill( $bg: transparent, $border: $white );
20931
20838
  @include box-shadow( $colorgradient-draghandle-hover-shadow );
20932
20839
  }
@@ -21122,7 +21029,6 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
21122
21029
  }
21123
21030
 
21124
21031
  .k-coloreditor:focus,
21125
- .k-coloreditor.k-state-focus,
21126
21032
  .k-coloreditor.k-focus {
21127
21033
  @include fill( $border: $coloreditor-focus-border );
21128
21034
  @include box-shadow( $coloreditor-focus-shadow );
@@ -22432,7 +22338,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22432
22338
  box-sizing: border-box;
22433
22339
  }
22434
22340
 
22435
- &.k-state-readonly {
22341
+ &.k-readonly {
22436
22342
  pointer-events: none;
22437
22343
  }
22438
22344
  }
@@ -22512,7 +22418,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22512
22418
  color: $component-text;
22513
22419
 
22514
22420
  &:focus,
22515
- &.k-state-focused,
22516
22421
  &.k-focus {
22517
22422
 
22518
22423
  .k-rating-item {
@@ -22520,7 +22425,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22520
22425
  text-shadow: $rating-icon-focused-shadow;
22521
22426
  }
22522
22427
 
22523
- &.k-state-selected > .k-icon,
22524
22428
  &.k-selected > .k-icon {
22525
22429
  text-shadow: $rating-icon-focused-selected-shadow;
22526
22430
  }
@@ -22531,19 +22435,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22531
22435
  .k-rating-item {
22532
22436
  color: $rating-icon-text;
22533
22437
 
22534
- &.k-state-selected,
22535
22438
  &.k-selected {
22536
22439
  color: $rating-icon-selected-text;
22537
22440
 
22538
22441
  &:focus,
22539
- &.k-state-focused,
22540
22442
  &.k-focus {
22541
22443
  color: $rating-icon-focused-text;
22542
22444
  }
22543
22445
  }
22544
22446
 
22545
22447
  &:hover,
22546
- &.k-state-hover,
22547
22448
  &.k-hover {
22548
22449
  color: $rating-icon-hover-text;
22549
22450
  cursor: pointer;
@@ -22551,7 +22452,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22551
22452
  }
22552
22453
  }
22553
22454
 
22554
-
22555
22455
  // #endregion
22556
22456
 
22557
22457
  // #endregion
@@ -22976,8 +22876,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
22976
22876
  @include exports( "switch/layout/bootstrap" ) {
22977
22877
 
22978
22878
  // Switch
22979
- .k-switch.k-disabled,
22980
- .k-switch.k-state-disabled {
22879
+ .k-switch.k-disabled {
22981
22880
  opacity: 1;
22982
22881
  filter: none;
22983
22882
  }
@@ -23786,7 +23685,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23786
23685
  z-index: 1;
23787
23686
  }
23788
23687
  input[disabled],
23789
- input.k-state-disabled,
23790
23688
  input.k-disabled {
23791
23689
  visibility: hidden;
23792
23690
  }
@@ -23834,12 +23732,10 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23834
23732
 
23835
23733
  .k-file {
23836
23734
 
23837
- &.k-state-focused,
23838
23735
  &.k-focus {
23839
23736
  box-shadow: inset $upload-focused-shadow;
23840
23737
  }
23841
23738
 
23842
- .k-upload-action.k-state-focused,
23843
23739
  .k-upload-action.k-focus {
23844
23740
  box-shadow: $upload-focused-shadow;
23845
23741
  }
@@ -23931,7 +23827,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23931
23827
  }
23932
23828
 
23933
23829
  // Invalid,
23934
- &.k-state-invalid,
23935
23830
  &.k-invalid,
23936
23831
  &.ng-invalid.ng-touched,
23937
23832
  &.ng-invalid.ng-dirty {
@@ -24487,8 +24382,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24487
24382
 
24488
24383
  // Hover state
24489
24384
  @each $name, $color in $kendo-fab-theme-colors {
24490
- .k-hover.k-fab-solid-#{$name},
24491
- .k-fab-solid-#{$name}:hover {
24385
+ .k-fab-solid-#{$name}:hover,
24386
+ .k-fab-solid-#{$name}.k-hover {
24492
24387
  border-color: try-darken( $color, 10% );
24493
24388
  color: contrast-wcag( try-darken( $color, 7.5% ) );
24494
24389
  background-color: try-darken( $color, 7.5% );
@@ -24497,8 +24392,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24497
24392
 
24498
24393
  // Focus state
24499
24394
  @each $name, $color in $kendo-fab-theme-colors {
24500
- .k-fab-solid-#{$name}.k-focus,
24501
- .k-fab-solid-#{$name}:focus {
24395
+ .k-fab-solid-#{$name}:focus,
24396
+ .k-fab-solid-#{$name}.k-focus {
24502
24397
  outline-style: solid;
24503
24398
  outline-width: 3px;
24504
24399
  outline-color: rgba( $color, .5 );
@@ -24507,9 +24402,9 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24507
24402
 
24508
24403
  // Active state
24509
24404
  @each $name, $color in $kendo-fab-theme-colors {
24510
- .k-active.k-fab-solid-#{$name},
24511
- .k-selected.k-fab-solid-#{$name},
24512
- .k-fab-solid-#{$name}:active {
24405
+ .k-fab-solid-#{$name}:active,
24406
+ .k-fab-solid-#{$name}.k-active,
24407
+ .k-fab-solid-#{$name}.k-selected {
24513
24408
  @include box-shadow($kendo-fab-active-shadow);
24514
24409
  border-color: try-darken( $color, 12.5% );
24515
24410
  color: contrast-wcag( try-darken( $color, 10% ) );
@@ -24519,8 +24414,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24519
24414
 
24520
24415
  // Disabled state
24521
24416
  @each $name, $color in $kendo-fab-theme-colors {
24522
- .k-disabled.k-fab-solid-#{$name},
24523
- .k-fab-solid-#{$name}:disabled {
24417
+ .k-fab-solid-#{$name}:disabled,
24418
+ .k-fab-solid-#{$name}.k-disabled {
24524
24419
  @include box-shadow($kendo-fab-disabled-shadow);
24525
24420
  background-color: try-tint( $color, 4.5 );
24526
24421
  color: try-tint( contrast-wcag( $color ), 5 );
@@ -24549,8 +24444,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24549
24444
  }
24550
24445
 
24551
24446
  // Hover state
24552
- .k-fab-item.k-hover .k-fab-item-icon,
24553
- .k-fab-item:hover .k-fab-item-icon {
24447
+ .k-fab-item:hover .k-fab-item-icon,
24448
+ .k-fab-item.k-hover .k-fab-item-icon {
24554
24449
  @include box-shadow($kendo-fab-item-shadow);
24555
24450
  outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
24556
24451
  outline-offset: -$kendo-fab-border-width;
@@ -24561,8 +24456,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24561
24456
 
24562
24457
  // Focus state
24563
24458
  .k-fab-item:focus .k-fab-item-text,
24564
- .k-fab-item:focus .k-fab-item-icon,
24565
24459
  .k-fab-item.k-focus .k-fab-item-text,
24460
+ .k-fab-item:focus .k-fab-item-icon,
24566
24461
  .k-fab-item.k-focus .k-fab-item-icon {
24567
24462
  outline-style: solid;
24568
24463
  outline-width: 3px;
@@ -24570,8 +24465,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24570
24465
  }
24571
24466
 
24572
24467
  // Active state
24573
- .k-fab-item.k-active .k-fab-item-icon,
24574
- .k-fab-item:active .k-fab-item-icon {
24468
+ .k-fab-item:active .k-fab-item-icon,
24469
+ .k-fab-item.k-active .k-fab-item-icon {
24575
24470
  @include box-shadow($kendo-fab-item-active-shadow);
24576
24471
  outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
24577
24472
  outline-offset: -$kendo-fab-border-width;
@@ -24581,8 +24476,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
24581
24476
  }
24582
24477
 
24583
24478
  // Disabled state
24584
- .k-fab-item.k-disabled,
24585
- .k-fab-item:disabled {
24479
+ .k-fab-item:disabled,
24480
+ .k-fab-item.k-disabled {
24586
24481
  opacity: 1;
24587
24482
 
24588
24483
  .k-fab-item-text,
@@ -24965,7 +24860,6 @@ $actionsheet-item-disabled-shadow: null !default;
24965
24860
 
24966
24861
  // Hover state
24967
24862
  &:hover,
24968
- &.k-state-hover,
24969
24863
  &.k-hover {
24970
24864
  @include fill(
24971
24865
  $actionsheet-item-hover-text,
@@ -24979,7 +24873,6 @@ $actionsheet-item-disabled-shadow: null !default;
24979
24873
 
24980
24874
  // Focus state
24981
24875
  &:focus,
24982
- &.k-state-focus,
24983
24876
  &.k-focus {
24984
24877
  @include fill(
24985
24878
  $actionsheet-item-focus-text,
@@ -24993,7 +24886,6 @@ $actionsheet-item-disabled-shadow: null !default;
24993
24886
 
24994
24887
  // Disabed state
24995
24888
  &:disabled,
24996
- &.k-state-disabled,
24997
24889
  &.k-disabled {
24998
24890
  @include fill(
24999
24891
  $actionsheet-item-disabled-text,
@@ -25238,7 +25130,6 @@ $actionsheet-item-disabled-shadow: null !default;
25238
25130
 
25239
25131
  .k-window {
25240
25132
  &:focus,
25241
- &.k-state-focused,
25242
25133
  &.k-focus {
25243
25134
  @include box-shadow( $window-focused-shadow );
25244
25135
  }
@@ -25756,33 +25647,28 @@ $drawer-selected-hover-text: $selected-text !default;
25756
25647
  .k-drawer-item {
25757
25648
 
25758
25649
  &:hover,
25759
- &.k-state-hover,
25760
25650
  &.k-hover {
25761
25651
  color: $drawer-hovered-text;
25762
25652
  background-color: $drawer-hovered-bg;
25763
25653
  }
25764
25654
 
25765
25655
  &:focus,
25766
- &.k-state-focused,
25767
25656
  &.k-focus {
25768
25657
  background-color: $drawer-focused-bg;
25769
25658
  box-shadow: $drawer-focused-shadow;
25770
25659
 
25771
25660
  &:hover,
25772
- &.k-state-hover,
25773
25661
  &.k-hover {
25774
25662
  color: $drawer-hovered-text;
25775
25663
  background-color: $drawer-hovered-bg;
25776
25664
  }
25777
25665
  }
25778
25666
 
25779
- &.k-state-selected,
25780
25667
  &.k-selected {
25781
25668
  color: $drawer-selected-text;
25782
25669
  background-color: $drawer-selected-bg;
25783
25670
 
25784
25671
  &:hover,
25785
- &.k-state-hover,
25786
25672
  &.k-hover {
25787
25673
  color: $drawer-selected-hover-text;
25788
25674
  background-color: $drawer-selected-hover-bg;
@@ -26525,8 +26411,7 @@ $card-callout-height: 1.3em !default;
26525
26411
  }
26526
26412
 
26527
26413
  &:focus,
26528
- &.k-focus,
26529
- &.k-state-focus {
26414
+ &.k-focus {
26530
26415
  @include fill(
26531
26416
  $card-focus-text,
26532
26417
  $card-focus-bg,
@@ -26535,8 +26420,7 @@ $card-callout-height: 1.3em !default;
26535
26420
  @include box-shadow( $card-focus-shadow );
26536
26421
  }
26537
26422
 
26538
- &.k-selected,
26539
- &.k-state-selected {
26423
+ &.k-selected {
26540
26424
  @include box-shadow( $card-focus-shadow );
26541
26425
  }
26542
26426
  }
@@ -26588,10 +26472,8 @@ $card-callout-height: 1.3em !default;
26588
26472
 
26589
26473
 
26590
26474
  .k-card-wrap {
26591
- &.k-state-focused,
26592
- &.k-focus,
26593
26475
  &:focus,
26594
- &.k-state-selected,
26476
+ &.k-focus,
26595
26477
  &.k-selected {
26596
26478
  > .k-card {
26597
26479
  @include box-shadow( $card-focus-shadow );
@@ -27024,7 +26906,6 @@ $bottom-nav-flat-border: $component-border !default;
27024
26906
  outline: 0;
27025
26907
  }
27026
26908
  }
27027
- .k-bottom-nav-item.k-state-disabled,
27028
26909
  .k-bottom-nav-item.k-disabled {
27029
26910
  background-color: initial;
27030
26911
  }
@@ -27071,15 +26952,11 @@ $bottom-nav-flat-border: $component-border !default;
27071
26952
  $bg: $color
27072
26953
  );
27073
26954
 
27074
- .k-bottom-nav-item.k-state-focus,
27075
- .k-bottom-nav-item.k-focus,
27076
- .k-bottom-nav-item.k-state-focused,
27077
26955
  .k-bottom-nav-item.k-focus,
27078
26956
  .k-bottom-nav-item:focus {
27079
26957
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
27080
26958
  }
27081
26959
 
27082
- .k-bottom-nav-item.k-state-selected,
27083
26960
  .k-bottom-nav-item.k-selected {
27084
26961
  @include fill( $color: contrast-wcag( $color ) );
27085
26962
  }
@@ -27094,16 +26971,12 @@ $bottom-nav-flat-border: $component-border !default;
27094
26971
  $bottom-nav-flat-border
27095
26972
  );
27096
26973
 
27097
- .k-bottom-nav-item.k-state-focus,
27098
- .k-bottom-nav-item.k-focus,
27099
- .k-bottom-nav-item.k-state-focused,
27100
26974
  .k-bottom-nav-item.k-focus,
27101
26975
  .k-bottom-nav-item:focus {
27102
26976
  @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
27103
26977
  }
27104
26978
 
27105
26979
  @each $name, $color in $kendo-theme-colors {
27106
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
27107
26980
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
27108
26981
  @if $name == "secondary" or $name == "light" {
27109
26982
  @include fill( $color: try-shade($color, 3) );
@@ -27359,7 +27232,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27359
27232
  text-decoration: $link-decoration;
27360
27233
 
27361
27234
  &:hover,
27362
- &.k-state-hover,
27363
27235
  &.k-hover {
27364
27236
  text-decoration: $link-hover-decoration;
27365
27237
  }
@@ -27380,7 +27252,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27380
27252
  );
27381
27253
 
27382
27254
  &:focus,
27383
- &.k-state-focused,
27384
27255
  &.k-focus {
27385
27256
  @include box-shadow( $breadcrumb-focused-shadow );
27386
27257
  }
@@ -27397,7 +27268,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27397
27268
 
27398
27269
  // Hovered state
27399
27270
  &:hover,
27400
- &.k-state-hover,
27401
27271
  &.k-hover {
27402
27272
  @include fill(
27403
27273
  $breadcrumb-link-hovered-text,
@@ -27408,7 +27278,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27408
27278
 
27409
27279
  // Focused state
27410
27280
  &:focus,
27411
- &.k-state-focused,
27412
27281
  &.k-focus {
27413
27282
  @include fill(
27414
27283
  $breadcrumb-link-focused-text,
@@ -27430,7 +27299,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27430
27299
 
27431
27300
  // Hovered state
27432
27301
  &:hover,
27433
- &.k-state-hover,
27434
27302
  &.k-hover {
27435
27303
  @include fill(
27436
27304
  $breadcrumb-root-link-hovered-text,
@@ -27441,7 +27309,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27441
27309
 
27442
27310
  // Focused state
27443
27311
  &:focus,
27444
- &.k-state-focused,
27445
27312
  &.k-focus {
27446
27313
  @include fill(
27447
27314
  $breadcrumb-root-link-focused-text,
@@ -27465,7 +27332,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
27465
27332
  color: $breadcrumb-active-color;
27466
27333
  }
27467
27334
 
27468
- .k-state-disabled,
27469
27335
  .k-disabled {
27470
27336
  opacity: 1;
27471
27337
  filter: none;
@@ -27609,7 +27475,6 @@ $pager-dropdown-width: 5em !default;
27609
27475
 
27610
27476
  // Focused state
27611
27477
  &:focus,
27612
- &.k-state-focus,
27613
27478
  &.k-focus {
27614
27479
  z-index: 3;
27615
27480
  }
@@ -27663,7 +27528,6 @@ $pager-dropdown-width: 5em !default;
27663
27528
  &:hover {
27664
27529
  z-index: 2;
27665
27530
  }
27666
- &.k-state-disabled,
27667
27531
  &.k-disabled {
27668
27532
  color: inherit;
27669
27533
  }
@@ -27713,7 +27577,6 @@ $pager-dropdown-width: 5em !default;
27713
27577
  }
27714
27578
 
27715
27579
  // Selected state
27716
- .k-state-selected,
27717
27580
  .k-selected {
27718
27581
  cursor: inherit;
27719
27582
  z-index: 2;
@@ -27885,9 +27748,6 @@ $pager-dropdown-width: 5em !default;
27885
27748
  );
27886
27749
 
27887
27750
  &:focus,
27888
- &.k-focus,
27889
- &.k-state-focus,
27890
- &.k-state-focused,
27891
27751
  &.k-focus {
27892
27752
  @include fill( $bg: $pager-focus-bg );
27893
27753
  @include box-shadow( $pager-focus-shadow );
@@ -27903,7 +27763,6 @@ $pager-dropdown-width: 5em !default;
27903
27763
  );
27904
27764
 
27905
27765
  &:hover,
27906
- &.k-state-hover,
27907
27766
  &.k-hover {
27908
27767
  @include fill(
27909
27768
  $pager-item-hover-text,
@@ -27912,7 +27771,6 @@ $pager-dropdown-width: 5em !default;
27912
27771
  );
27913
27772
  }
27914
27773
 
27915
- &.k-state-selected,
27916
27774
  &.k-selected {
27917
27775
  @include fill(
27918
27776
  $pager-item-selected-text,
@@ -27922,7 +27780,6 @@ $pager-dropdown-width: 5em !default;
27922
27780
  }
27923
27781
 
27924
27782
  &:focus,
27925
- &.k-state-focus,
27926
27783
  &.k-focus {
27927
27784
  background-color: $pager-item-focus-bg;
27928
27785
  @include box-shadow( $pager-item-focus-shadow );
@@ -27946,7 +27803,6 @@ $pager-dropdown-width: 5em !default;
27946
27803
  );
27947
27804
 
27948
27805
  &:hover,
27949
- &.k-state-hover,
27950
27806
  &.k-hover {
27951
27807
  @include fill(
27952
27808
  $pager-number-hover-text,
@@ -27956,13 +27812,11 @@ $pager-dropdown-width: 5em !default;
27956
27812
  }
27957
27813
 
27958
27814
  &:focus,
27959
- &.k-state-focus,
27960
27815
  &.k-focus {
27961
27816
  background-color: $pager-number-focus-bg;
27962
27817
  @include box-shadow( $pager-number-focus-shadow );
27963
27818
  }
27964
27819
 
27965
- &.k-state-selected,
27966
27820
  &.k-selected {
27967
27821
  @include fill(
27968
27822
  $pager-number-selected-text,
@@ -27995,7 +27849,6 @@ $pager-dropdown-width: 5em !default;
27995
27849
  );
27996
27850
 
27997
27851
  &:hover,
27998
- &.k-state-hover,
27999
27852
  &.k-hover {
28000
27853
  @include fill(
28001
27854
  $dropdownlist-hovered-text,
@@ -28005,7 +27858,7 @@ $pager-dropdown-width: 5em !default;
28005
27858
  }
28006
27859
  }
28007
27860
 
28008
- &.k-state-expanded {
27861
+ &.k-expanded {
28009
27862
  @include fill(
28010
27863
  $popup-text,
28011
27864
  $popup-bg,
@@ -28016,7 +27869,6 @@ $pager-dropdown-width: 5em !default;
28016
27869
  .k-link {
28017
27870
 
28018
27871
  &:hover,
28019
- &.k-state-hover,
28020
27872
  &.k-hover {
28021
27873
  @include fill(
28022
27874
  $kendo-list-item-hover-text,
@@ -28024,7 +27876,6 @@ $pager-dropdown-width: 5em !default;
28024
27876
  );
28025
27877
  }
28026
27878
 
28027
- &.k-state-selected,
28028
27879
  &.k-selected {
28029
27880
  @include fill(
28030
27881
  $kendo-list-item-selected-text,
@@ -28064,7 +27915,6 @@ $pager-dropdown-width: 5em !default;
28064
27915
  );
28065
27916
 
28066
27917
  &:hover,
28067
- &.k-state-hover,
28068
27918
  &.k-hover {
28069
27919
  @include fill(
28070
27920
  $pager-text,
@@ -28663,7 +28513,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
28663
28513
  $bg: $stepper-progressbar-bg
28664
28514
  );
28665
28515
 
28666
- .k-state-selected,
28667
28516
  .k-selected {
28668
28517
  @include fill(
28669
28518
  $color: $stepper-progressbar-fill-text,
@@ -28914,13 +28763,11 @@ $tabstrip-content-border-focused: $component-text !default;
28914
28763
  position: relative;
28915
28764
  z-index: 1;
28916
28765
 
28917
- &.k-state-active,
28918
28766
  &.k-active {
28919
28767
  display: block;
28920
28768
  }
28921
28769
 
28922
28770
  &:focus,
28923
- &.k-state-focused,
28924
28771
  &.k-focus {
28925
28772
  outline-width: 1px;
28926
28773
  outline-style: dotted;
@@ -29009,7 +28856,6 @@ $tabstrip-content-border-focused: $component-text !default;
29009
28856
  margin-left: $tabstrip-item-gap;
29010
28857
  }
29011
28858
 
29012
- .k-item.k-state-active,
29013
28859
  .k-item.k-active {
29014
28860
  border-bottom-color: transparent;
29015
28861
  }
@@ -29039,7 +28885,6 @@ $tabstrip-content-border-focused: $component-text !default;
29039
28885
  margin-left: $tabstrip-item-gap;
29040
28886
  }
29041
28887
 
29042
- .k-item.k-state-active,
29043
28888
  .k-item.k-active {
29044
28889
  border-top-color: transparent;
29045
28890
  }
@@ -29073,7 +28918,6 @@ $tabstrip-content-border-focused: $component-text !default;
29073
28918
  margin-top: $tabstrip-item-gap;
29074
28919
  }
29075
28920
 
29076
- .k-item.k-state-active,
29077
28921
  .k-item.k-active {
29078
28922
  border-right-color: transparent;
29079
28923
  }
@@ -29109,7 +28953,6 @@ $tabstrip-content-border-focused: $component-text !default;
29109
28953
  margin-top: $tabstrip-item-gap;
29110
28954
  }
29111
28955
 
29112
- .k-item.k-state-active,
29113
28956
  .k-item.k-active {
29114
28957
  border-left-color: transparent;
29115
28958
  }
@@ -29155,7 +28998,6 @@ $tabstrip-content-border-focused: $component-text !default;
29155
28998
  border-left-width: $tabstrip-indicator-size;
29156
28999
  }
29157
29000
  }
29158
- .k-item.k-state-active::after,
29159
29001
  .k-item.k-active::after {
29160
29002
  display: block;
29161
29003
  }
@@ -29229,7 +29071,6 @@ $tabstrip-content-border-focused: $component-text !default;
29229
29071
  );
29230
29072
 
29231
29073
  &:hover,
29232
- &.k-state-hover,
29233
29074
  &.k-hover {
29234
29075
  @include fill(
29235
29076
  $tabstrip-item-hovered-text,
@@ -29240,9 +29081,7 @@ $tabstrip-content-border-focused: $component-text !default;
29240
29081
  }
29241
29082
 
29242
29083
  &:active,
29243
- &.k-state-active,
29244
29084
  &.k-active,
29245
- &.k-state-selected,
29246
29085
  &.k-selected {
29247
29086
  @include fill(
29248
29087
  $tabstrip-item-selected-text,
@@ -29253,7 +29092,6 @@ $tabstrip-content-border-focused: $component-text !default;
29253
29092
  }
29254
29093
 
29255
29094
  &:focus,
29256
- &.k-state-focused,
29257
29095
  &.k-focus {
29258
29096
  @include box-shadow( $tabstrip-item-focused-shadow );
29259
29097
  }
@@ -29276,7 +29114,6 @@ $tabstrip-content-border-focused: $component-text !default;
29276
29114
  );
29277
29115
 
29278
29116
  &:focus,
29279
- &.k-state-focused,
29280
29117
  &.k-focus {
29281
29118
  outline-color: $tabstrip-content-border-focused;
29282
29119
  }
@@ -29287,7 +29124,6 @@ $tabstrip-content-border-focused: $component-text !default;
29287
29124
  @if ($tabstrip-indicator-size) {
29288
29125
 
29289
29126
  .k-tabstrip-items-wrapper {
29290
- .k-item.k-state-active::after,
29291
29127
  .k-item.k-active::after {
29292
29128
  border-color: $tabstrip-indicator-color;
29293
29129
  }
@@ -29304,36 +29140,32 @@ $tabstrip-content-border-focused: $component-text !default;
29304
29140
  // Tabstrip variants
29305
29141
  .k-tabstrip-top {
29306
29142
 
29307
- > .k-tabstrip-items .k-item.k-state-hover,
29143
+ > .k-tabstrip-items .k-item:hover,
29308
29144
  > .k-tabstrip-items .k-item.k-hover,
29309
- > .k-tabstrip-items .k-item.k-state-active,
29310
29145
  > .k-tabstrip-items .k-item.k-active {
29311
29146
  border-bottom-color: transparent;
29312
29147
  }
29313
29148
  }
29314
29149
  .k-tabstrip-bottom {
29315
29150
 
29316
- > .k-tabstrip-items .k-item.k-state-hover,
29151
+ > .k-tabstrip-items .k-item:hover,
29317
29152
  > .k-tabstrip-items .k-item.k-hover,
29318
- > .k-tabstrip-items .k-item.k-state-active,
29319
29153
  > .k-tabstrip-items .k-item.k-active {
29320
29154
  border-top-color: transparent;
29321
29155
  }
29322
29156
  }
29323
29157
  .k-tabstrip-left {
29324
29158
 
29325
- > .k-tabstrip-items .k-item.k-state-hover,
29159
+ > .k-tabstrip-items .k-item:hover,
29326
29160
  > .k-tabstrip-items .k-item.k-hover,
29327
- > .k-tabstrip-items .k-item.k-state-active,
29328
29161
  > .k-tabstrip-items .k-item.k-active {
29329
29162
  border-right-color: transparent;
29330
29163
  }
29331
29164
  }
29332
29165
  .k-tabstrip-right {
29333
29166
 
29334
- > .k-tabstrip-items .k-item.k-state-hover,
29167
+ > .k-tabstrip-items .k-item:hover,
29335
29168
  > .k-tabstrip-items .k-item.k-hover,
29336
- > .k-tabstrip-items .k-item.k-state-active,
29337
29169
  > .k-tabstrip-items .k-item.k-active {
29338
29170
  border-left-color: transparent;
29339
29171
  }
@@ -29424,7 +29256,6 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
29424
29256
  justify-content: space-between;
29425
29257
 
29426
29258
  &:focus,
29427
- &.k-state-focused,
29428
29259
  &.k-focus {
29429
29260
  outline-width: 1px;
29430
29261
  outline-style: dotted;
@@ -29519,20 +29350,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
29519
29350
  // #region @import "_theme.scss"; -> packages/bootstrap/scss/wizard/_theme.scss
29520
29351
  // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/wizard/_theme.scss
29521
29352
  @include exports("wizard/theme") {
29353
+
29522
29354
  .k-wizard-step {
29523
29355
  &:focus,
29524
- &.k-state-focused,
29525
29356
  &.k-focus {
29526
29357
  outline-color: $wizard-step-border-focused;
29527
29358
  }
29528
29359
 
29529
29360
  .k-ie &:focus,
29530
- .k-ie &.k-state-focused,
29531
29361
  .k-ie &.k-focus {
29532
29362
  @include box-shadow($wizard-focused-shadow);
29533
29363
  outline: none;
29534
29364
  }
29535
29365
  }
29366
+
29536
29367
  }
29537
29368
 
29538
29369
  // #endregion
@@ -29698,7 +29529,6 @@ $expander-content-padding-y: $expander-content-padding-x !default;
29698
29529
  $expander-border
29699
29530
  );
29700
29531
 
29701
- &.k-state-focus,
29702
29532
  &.k-focus {
29703
29533
  box-shadow: $expander-focus-shadow;
29704
29534
  }
@@ -29713,13 +29543,10 @@ $expander-content-padding-y: $expander-content-padding-x !default;
29713
29543
  outline: none;
29714
29544
 
29715
29545
  &:hover,
29716
- &.k-state-hover,
29717
29546
  &.k-hover {
29718
29547
  background-color: $expander-header-hover-bg;
29719
29548
  }
29720
29549
 
29721
- // Should be removed
29722
- &.k-state-focused,
29723
29550
  &.k-focus {
29724
29551
  background-color: $expander-header-focused-bg;
29725
29552
  box-shadow: $expander-header-focused-shadow;
@@ -29965,6 +29792,10 @@ $panelbar-header-expanded-gradient: null !default;
29965
29792
  }
29966
29793
  }
29967
29794
 
29795
+ // Panelbar item
29796
+ .k-panelbar-item {
29797
+ outline-style: none;
29798
+ }
29968
29799
 
29969
29800
  // Panelbar content
29970
29801
  .k-panelbar-content {
@@ -30066,7 +29897,6 @@ $panelbar-header-expanded-gradient: null !default;
30066
29897
  > .k-item,
30067
29898
  > .k-panelbar-header {
30068
29899
 
30069
- &.k-state-expanded.k-level-0 > .k-link,
30070
29900
  &.k-expanded.k-level-0 > .k-link {
30071
29901
  @include fill(
30072
29902
  $panelbar-header-expanded-text,
@@ -30093,7 +29923,6 @@ $panelbar-header-expanded-gradient: null !default;
30093
29923
 
30094
29924
  // Hover
30095
29925
  > .k-link:hover,
30096
- > .k-link.k-state-hover,
30097
29926
  > .k-link.k-hover {
30098
29927
  @include fill(
30099
29928
  $panelbar-header-hovered-text,
@@ -30105,9 +29934,6 @@ $panelbar-header-expanded-gradient: null !default;
30105
29934
 
30106
29935
  // Focus
30107
29936
  > .k-link:focus,
30108
- > .k-link.k-state-focus,
30109
- > .k-link.k-focus,
30110
- > .k-link.k-state-focused,
30111
29937
  > .k-link.k-focus {
30112
29938
  @include fill(
30113
29939
  $panelbar-header-focused-text,
@@ -30120,7 +29946,6 @@ $panelbar-header-expanded-gradient: null !default;
30120
29946
 
30121
29947
  // Focus & Hover
30122
29948
  > .k-link:focus:hover,
30123
- > .k-link.k-state-focus.k-state-hover,
30124
29949
  > .k-link.k-focus.k-hover {
30125
29950
  @include fill(
30126
29951
  $panelbar-header-hovered-focused-text,
@@ -30131,7 +29956,6 @@ $panelbar-header-expanded-gradient: null !default;
30131
29956
  }
30132
29957
 
30133
29958
  // Selected
30134
- > .k-link.k-state-selected,
30135
29959
  > .k-link.k-selected {
30136
29960
  @include fill(
30137
29961
  $panelbar-header-selected-text,
@@ -30147,9 +29971,7 @@ $panelbar-header-expanded-gradient: null !default;
30147
29971
  }
30148
29972
 
30149
29973
  // Selected Hover
30150
- > .k-link.k-state-selected:hover,
30151
29974
  > .k-link.k-selected:hover,
30152
- > .k-link.k-state-selected.k-state-hover,
30153
29975
  > .k-link.k-selected.k-hover {
30154
29976
  @include fill(
30155
29977
  $panelbar-header-selected-hovered-text,
@@ -30160,12 +29982,8 @@ $panelbar-header-expanded-gradient: null !default;
30160
29982
  }
30161
29983
 
30162
29984
  // Selected Focus
30163
- > .k-link.k-state-selected:focus,
30164
29985
  > .k-link.k-selected:focus,
30165
- > .k-link.k-state-selected.k-state-focus,
30166
- > .k-link.k-selected.k-focus,
30167
- > .k-link.k-state-selected.k-state-focused,
30168
- > .k-link.k-selected.k-focused {
29986
+ > .k-link.k-selected.k-focus {
30169
29987
  @include fill(
30170
29988
  $panelbar-header-selected-focused-text,
30171
29989
  $panelbar-header-selected-focused-bg,
@@ -30175,12 +29993,8 @@ $panelbar-header-expanded-gradient: null !default;
30175
29993
  }
30176
29994
 
30177
29995
  // Selected Focus & Hover
30178
- > .k-link.k-state-selected:hover:focus,
30179
29996
  > .k-link.k-selected:hover:focus,
30180
- > .k-link.k-state-selected.k-state-hover.k-state-focus,
30181
- > .k-link.k-selected.k-hover.k-state-focus,
30182
- > .k-link.k-state-selected.k-state-hover.k-state-focused,
30183
- > .k-link.k-selected.k-hover.k-state-focused {
29997
+ > .k-link.k-selected.k-hover.k-focus {
30184
29998
  @include fill(
30185
29999
  $panelbar-header-selected-hovered-focused-text,
30186
30000
  $panelbar-header-selected-hovered-focused-bg,
@@ -30197,10 +30011,8 @@ $panelbar-header-expanded-gradient: null !default;
30197
30011
 
30198
30012
  // Hover
30199
30013
  > .k-item > .k-link:hover,
30200
- > .k-item > .k-link.k-state-hover,
30201
30014
  > .k-item > .k-link.k-hover,
30202
30015
  > .k-panelbar-item > .k-link:hover,
30203
- > .k-panelbar-item > .k-link.k-state-hover,
30204
30016
  > .k-panelbar-item > .k-link.k-hover {
30205
30017
  @include fill(
30206
30018
  $panelbar-item-hovered-text,
@@ -30212,14 +30024,8 @@ $panelbar-header-expanded-gradient: null !default;
30212
30024
 
30213
30025
  // Focus
30214
30026
  > .k-item > .k-link:focus,
30215
- > .k-item > .k-link.k-state-focus,
30216
- > .k-item > .k-link.k-focus,
30217
- > .k-item > .k-link.k-state-focused,
30218
30027
  > .k-item > .k-link.k-focus,
30219
30028
  > .k-panelbar-item > .k-link:focus,
30220
- > .k-panelbar-item > .k-link.k-state-focus,
30221
- > .k-panelbar-item > .k-link.k-focus,
30222
- > .k-panelbar-item > .k-link.k-state-focused,
30223
30029
  > .k-panelbar-item > .k-link.k-focus {
30224
30030
  @include fill(
30225
30031
  $panelbar-item-focused-text,
@@ -30232,10 +30038,8 @@ $panelbar-header-expanded-gradient: null !default;
30232
30038
 
30233
30039
  // Focus & Hover
30234
30040
  > .k-item > .k-link:focus:hover,
30235
- > .k-item > .k-link.k-state-focus.k-state-hover,
30236
30041
  > .k-item > .k-link.k-focus.k-hover,
30237
30042
  > .k-panelbar-item > .k-link:focus:hover,
30238
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
30239
30043
  > .k-panelbar-item > .k-link.k-focus.k-hover {
30240
30044
  @include fill(
30241
30045
  $panelbar-item-hovered-focused-text,
@@ -30246,9 +30050,7 @@ $panelbar-header-expanded-gradient: null !default;
30246
30050
  }
30247
30051
 
30248
30052
  // Selected
30249
- > .k-item > .k-link.k-state-selected,
30250
30053
  > .k-item > .k-link.k-selected,
30251
- > .k-panelbar-item > .k-link.k-state-selected,
30252
30054
  > .k-panelbar-item > .k-link.k-selected {
30253
30055
  @include fill(
30254
30056
  $panelbar-item-selected-text,
@@ -30259,13 +30061,9 @@ $panelbar-header-expanded-gradient: null !default;
30259
30061
  }
30260
30062
 
30261
30063
  // Selected Hover
30262
- > .k-item > .k-link.k-state-selected:hover,
30263
30064
  > .k-item > .k-link.k-selected:hover,
30264
- > .k-item > .k-link.k-state-selected.k-state-hover,
30265
30065
  > .k-item > .k-link.k-selected.k-hover,
30266
- > .k-panelbar-item > .k-link.k-state-selected:hover,
30267
30066
  > .k-panelbar-item > .k-link.k-selected:hover,
30268
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
30269
30067
  > .k-panelbar-item > .k-link.k-selected.k-hover {
30270
30068
  @include fill(
30271
30069
  $panelbar-item-selected-hovered-text,
@@ -30276,18 +30074,10 @@ $panelbar-header-expanded-gradient: null !default;
30276
30074
  }
30277
30075
 
30278
30076
  // Selected Focus
30279
- > .k-item > .k-link.k-state-selected:focus,
30280
30077
  > .k-item > .k-link.k-selected:focus,
30281
- > .k-item > .k-link.k-state-selected.k-state-focus,
30282
30078
  > .k-item > .k-link.k-selected.k-focus,
30283
- > .k-item > .k-link.k-state-selected.k-state-focused,
30284
- > .k-item > .k-link.k-selected.k-focused,
30285
- > .k-panelbar-item > .k-link.k-state-selected:focus,
30286
30079
  > .k-panelbar-item > .k-link.k-selected:focus,
30287
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
30288
- > .k-panelbar-item > .k-link.k-selected.k-focus,
30289
- > .k-item > .k-link.k-state-selected.k-state-focused,
30290
- > .k-item > .k-link.k-selected.k-focused {
30080
+ > .k-panelbar-item > .k-link.k-selected.k-focus {
30291
30081
  @include fill(
30292
30082
  $panelbar-item-selected-focused-text,
30293
30083
  $panelbar-item-selected-focused-bg,
@@ -30297,18 +30087,10 @@ $panelbar-header-expanded-gradient: null !default;
30297
30087
  }
30298
30088
 
30299
30089
  // Selected Focus & Hover
30300
- > .k-item > .k-link.k-state-selected:focus:hover,
30301
30090
  > .k-item > .k-link.k-selected:focus:hover,
30302
- > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
30303
- > .k-item > .k-link.k-selected.k-focus.k-state-hover,
30304
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
30305
- > .k-item > .k-link.k-selected.k-focused.k-state-hover,
30306
- > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
30091
+ > .k-item > .k-link.k-selected.k-focus.k-hover,
30307
30092
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
30308
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
30309
- > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
30310
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
30311
- > .k-item > .k-link.k-selected.k-focused.k-state-hover {
30093
+ > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
30312
30094
  @include fill(
30313
30095
  $panelbar-item-selected-hovered-focused-text,
30314
30096
  $panelbar-item-selected-hovered-focused-bg,
@@ -30546,7 +30328,7 @@ $splitbar-selected-text: $selected-text !default;
30546
30328
 
30547
30329
  .k-pane,
30548
30330
  .k-pane-flex {
30549
- &.k-state-hidden,
30331
+ &.k-hidden,
30550
30332
  &[hidden] {
30551
30333
  // sass-lint:disable-block no-important
30552
30334
  // hidden panes need to be zero-width to allow pane animation
@@ -30595,7 +30377,6 @@ $splitbar-selected-text: $selected-text !default;
30595
30377
  background-color: $splitbar-bg;
30596
30378
  }
30597
30379
  .k-splitbar:hover,
30598
- .k-splitbar.k-state-hover,
30599
30380
  .k-splitbar.k-hover,
30600
30381
  .k-splitbar-horizontal-hover,
30601
30382
  .k-splitbar-vertical-hover {
@@ -30603,9 +30384,6 @@ $splitbar-selected-text: $selected-text !default;
30603
30384
  background-color: $splitbar-hover-bg;
30604
30385
  }
30605
30386
  .k-splitbar:focus,
30606
- .k-splitbar.k-state-focus,
30607
- .k-splitbar.k-focus,
30608
- .k-splitbar.k-state-focused,
30609
30387
  .k-splitbar.k-focus {
30610
30388
  color: $splitbar-selected-text;
30611
30389
  background: $splitbar-selected-bg;
@@ -30716,9 +30494,6 @@ $tilelayout-hint-border: $component-border !default;
30716
30494
  }
30717
30495
 
30718
30496
  .k-tilelayout-item:focus,
30719
- .k-tilelayout-item.k-focus,
30720
- .k-tilelayout-item.k-state-focus,
30721
- .k-tilelayout-item.k-state-focused,
30722
30497
  .k-tilelayout-item.k-focus {
30723
30498
  @include box-shadow($tilelayout-card-focus-shadow);
30724
30499
  }
@@ -31396,12 +31171,10 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31396
31171
 
31397
31172
  .k-column-menu {
31398
31173
 
31399
- .k-listgroup-item.k-state-selected,
31400
31174
  .k-listgroup-item.k-selected {
31401
31175
  color: $adaptive-grid-sort-text;
31402
31176
  background: none;
31403
31177
  }
31404
- .k-listgroup-item.k-state-selected .k-link,
31405
31178
  .k-listgroup-item.k-selected .k-link {
31406
31179
  color: inherit;
31407
31180
  }
@@ -32981,34 +32754,27 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
32981
32754
 
32982
32755
  // Hover state
32983
32756
  tbody>tr:not(.k-detail-row):hover,
32984
- tbody>tr:not(.k-detail-row).k-state-hover,
32985
32757
  tbody>tr:not(.k-detail-row).k-hover {
32986
32758
  color: $grid-hovered-text;
32987
32759
  background-color: $grid-hovered-bg;
32988
32760
  }
32989
32761
 
32990
32762
  // Selected state
32991
- th.k-state-selected,
32992
32763
  th.k-selected,
32993
- td.k-state-selected,
32994
32764
  td.k-selected,
32995
- tr.k-state-selected > td,
32996
32765
  tr.k-selected > td {
32997
32766
  color: $grid-selected-text;
32998
32767
  background-color: $grid-selected-bg;
32999
32768
  }
33000
32769
 
33001
32770
  // Focused state
33002
- td.k-state-focused,
33003
32771
  td.k-focus,
33004
- th.k-state-focused,
33005
32772
  th.k-focus,
33006
32773
  th:focus,
33007
32774
  .k-master-row > td:focus,
33008
32775
  .k-grouping-row > td:focus,
33009
32776
  .k-detail-row > td:focus,
33010
32777
  .k-group-footer > td:focus,
33011
- .k-grid-pager.k-state-focused,
33012
32778
  .k-grid-pager.k-focus,
33013
32779
  .k-grid-pager:focus {
33014
32780
  box-shadow: $grid-focused-shadow;
@@ -33043,20 +32809,16 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33043
32809
  }
33044
32810
 
33045
32811
  // Selected state
33046
- .k-state-selected td,
33047
32812
  .k-selected td {
33048
32813
  @include fill( $bg: $grid-sticky-selected-bg );
33049
32814
  }
33050
32815
 
33051
- .k-state-selected.k-alt td,
33052
32816
  .k-selected.k-alt td {
33053
32817
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33054
32818
  }
33055
32819
 
33056
32820
  // Selected hover
33057
- .k-state-selected:hover td,
33058
32821
  .k-selected:hover td,
33059
- .k-state-selected.k-state-hover td,
33060
32822
  .k-selected.k-hover td {
33061
32823
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
33062
32824
  }
@@ -33114,12 +32876,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33114
32876
  .k-grid-header-menu,
33115
32877
  .k-hierarchy-cell .k-icon {
33116
32878
  &:focus,
33117
- &.k-state-focus,
33118
- &.k-focus,
33119
- &.k-state-border-down {
32879
+ &.k-focus {
33120
32880
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
33121
32881
  }
33122
- &.k-state-active,
33123
32882
  &.k-active {
33124
32883
  color: $selected-text;
33125
32884
  background-color: $selected-bg;
@@ -33173,20 +32932,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33173
32932
  }
33174
32933
 
33175
32934
  // Selected state
33176
- &.k-state-selected .k-grid-content-sticky,
33177
32935
  &.k-selected .k-grid-content-sticky,
33178
- &.k-state-selected .k-grid-row-sticky,
33179
32936
  &.k-selected .k-grid-row-sticky,
33180
- td.k-grid-content-sticky.k-state-selected,
33181
32937
  td.k-grid-content-sticky.k-selected {
33182
32938
  @include fill( $bg: $grid-sticky-selected-bg );
33183
32939
  }
33184
32940
 
33185
- &.k-state-selected.k-alt .k-grid-content-sticky,
33186
32941
  &.k-selected.k-alt .k-grid-content-sticky,
33187
- &.k-state-selected.k-alt .k-grid-row-sticky,
33188
32942
  &.k-selected.k-alt .k-grid-row-sticky,
33189
- &.k-alt td.k-grid-content-sticky.k-state-selected,
33190
32943
  &.k-alt td.k-grid-content-sticky.k-selected {
33191
32944
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33192
32945
  }
@@ -33194,27 +32947,19 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33194
32947
 
33195
32948
  // Hovered state
33196
32949
  &:hover .k-grid-content-sticky,
33197
- &:hover .k-grid-row-sticky,
33198
- &.k-state-hover .k-grid-content-sticky,
33199
32950
  &.k-hover .k-grid-content-sticky,
33200
- &.k-state-hover .k-grid-row-sticky,
32951
+ &:hover .k-grid-row-sticky,
33201
32952
  &.k-hover .k-grid-row-sticky {
33202
32953
  background-color: $grid-sticky-hovered-bg;
33203
32954
  }
33204
32955
 
33205
32956
 
33206
32957
  // Selected hover
33207
- &.k-state-selected:hover .k-grid-content-sticky,
33208
32958
  &.k-selected:hover .k-grid-content-sticky,
33209
- &.k-state-selected:hover .k-grid-row-sticky,
33210
- &.k-selected:hover .k-grid-row-sticky,
33211
- &.k-state-selected.k-state-hover .k-grid-content-sticky,
33212
32959
  &.k-selected.k-hover .k-grid-content-sticky,
33213
- &.k-state-selected.k-state-hover .k-grid-row-sticky,
32960
+ &.k-selected:hover .k-grid-row-sticky,
33214
32961
  &.k-selected.k-hover .k-grid-row-sticky,
33215
- &:hover td.k-grid-content-sticky.k-state-selected,
33216
32962
  &:hover td.k-grid-content-sticky.k-selected,
33217
- &.k-state-hover td.k-grid-content-sticky.k-state-selected,
33218
32963
  &.k-hover td.k-grid-content-sticky.k-selected {
33219
32964
  background-color: $grid-sticky-selected-hovered-bg;
33220
32965
  }
@@ -33228,7 +32973,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33228
32973
  background-color: $grid-sticky-bg;
33229
32974
 
33230
32975
  &:hover,
33231
- &.k-state-hover,
33232
32976
  &.k-hover {
33233
32977
  background-color: $grid-sticky-hovered-bg;
33234
32978
  }
@@ -33240,7 +32984,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33240
32984
  background-color: $grid-sticky-bg;
33241
32985
 
33242
32986
  &:hover td,
33243
- &.k-state-hover td,
33244
32987
  &.k-hover td {
33245
32988
  background-color: $grid-sticky-hovered-bg;
33246
32989
  }
@@ -33252,66 +32995,43 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33252
32995
  }
33253
32996
 
33254
32997
  // Selected state
33255
- tr.k-state-selected .k-grid-content-sticky,
33256
32998
  tr.k-selected .k-grid-content-sticky,
33257
- .k-state-selected.k-grid-row-sticky td,
33258
32999
  .k-selected.k-grid-row-sticky td,
33259
- .k-grid-row-sticky td.k-state-selected,
33260
33000
  .k-grid-row-sticky td.k-selected,
33261
- .k-state-selected.k-grid-content-sticky,
33262
33001
  .k-selected.k-grid-content-sticky {
33263
33002
  @include fill( $bg: $grid-sticky-selected-bg );
33264
33003
  }
33265
33004
 
33266
- tr.k-state-selected.k-alt .k-grid-content-sticky,
33267
33005
  tr.k-selected.k-alt .k-grid-content-sticky,
33268
- .k-state-selected.k-alt.k-grid-row-sticky td,
33269
33006
  .k-selected.k-alt.k-grid-row-sticky td,
33270
- .k-alt .k-state-selected.k-grid-content-sticky,
33271
33007
  .k-alt .k-selected.k-grid-content-sticky {
33272
33008
  @include fill( $bg: $grid-sticky-selected-alt-bg );
33273
33009
  }
33274
33010
 
33275
33011
  // Hover state
33276
33012
  tr:hover .k-grid-content-sticky,
33277
- tr.k-state-hover .k-grid-content-sticky,
33278
33013
  tr.k-hover .k-grid-content-sticky,
33279
33014
  .k-grid-row-sticky:hover td,
33280
- .k-grid-row-sticky.k-state-hover td,
33281
33015
  .k-grid-row-sticky.k-hover td,
33282
33016
  .k-grid-row-sticky.k-alt:hover td,
33283
- .k-grid-row-sticky.k-alt.k-state-hover td,
33284
33017
  .k-grid-row-sticky.k-alt.k-hover td,
33285
33018
  .k-alt:hover .k-grid-content-sticky,
33286
- .k-alt.k-state-hover .k-grid-content-sticky,
33287
33019
  .k-alt.k-hover .k-grid-content-sticky {
33288
33020
  background-color: $grid-sticky-hovered-bg;
33289
33021
  }
33290
33022
 
33291
33023
  // Selected + Hover
33292
- tr.k-state-selected:hover .k-grid-content-sticky,
33293
33024
  tr.k-selected:hover .k-grid-content-sticky,
33294
- tr.k-state-selected.k-state-hover .k-grid-content-sticky,
33295
33025
  tr.k-selected.k-hover .k-grid-content-sticky,
33296
- .k-state-selected.k-grid-row-sticky:hover td,
33297
33026
  .k-selected.k-grid-row-sticky:hover td,
33298
- .k-state-selected.k-grid-row-sticky.k-state-hover td,
33299
33027
  .k-selected.k-grid-row-sticky.k-hover td,
33300
- .k-state-selected.k-alt.k-grid-row-sticky:hover td,
33301
33028
  .k-selected.k-alt.k-grid-row-sticky:hover td,
33302
- .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
33303
33029
  .k-selected.k-alt.k-grid-row-sticky.k-hover td,
33304
- tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
33305
33030
  tr.k-selected.k-alt:hover .k-grid-content-sticky,
33306
- tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
33307
33031
  tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
33308
- .k-grid-row-sticky:hover td.k-state-selected,
33309
33032
  .k-grid-row-sticky:hover td.k-selected,
33310
- .k-grid-row-sticky.k-state-hover td.k-state-selected,
33311
33033
  .k-grid-row-sticky.k-hover td.k-selected,
33312
- tr:hover .k-grid-content-sticky.k-state-selected,
33313
33034
  tr:hover .k-grid-content-sticky.k-selected,
33314
- tr.k-state-hover .k-grid-content-sticky.k-state-selected,
33315
33035
  tr.k-hover .k-grid-content-sticky.k-selected {
33316
33036
  background-color: $grid-sticky-selected-hovered-bg;
33317
33037
  }
@@ -33323,7 +33043,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33323
33043
  }
33324
33044
 
33325
33045
  &:hover .k-grid-content-sticky,
33326
- &.k-state-hover .k-grid-content-sticky,
33327
33046
  &.k-hover .k-grid-content-sticky {
33328
33047
  @include fill( $bg: $grid-sticky-hovered-bg );
33329
33048
  }
@@ -33336,7 +33055,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33336
33055
  }
33337
33056
 
33338
33057
  &:hover .k-grid-footer-sticky,
33339
- &.k-state-hover .k-grid-footer-sticky,
33340
33058
  &.k-hover .k-grid-footer-sticky {
33341
33059
  @include fill( $bg: $grid-sticky-footer-hovered-bg );
33342
33060
  }
@@ -33379,7 +33097,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33379
33097
  );
33380
33098
  }
33381
33099
  .k-columnmenu-item:focus,
33382
- .k-columnmenu-item.k-state-focus,
33383
33100
  .k-columnmenu-item.k-focus {
33384
33101
  @include box-shadow( $kendo-list-item-focus-shadow );
33385
33102
  }
@@ -33389,7 +33106,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33389
33106
  }
33390
33107
 
33391
33108
  .k-columnmenu-item {
33392
- &.k-state-selected,
33393
33109
  &.k-selected {
33394
33110
  @include fill(
33395
33111
  $kendo-list-item-selected-text,
@@ -33415,7 +33131,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33415
33131
  );
33416
33132
 
33417
33133
  &:hover,
33418
- &.k-state-hover,
33419
33134
  &.k-hover {
33420
33135
  @include fill(
33421
33136
  $kendo-list-item-hover-text,
@@ -33423,7 +33138,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33423
33138
  );
33424
33139
  }
33425
33140
 
33426
- &.k-state-selected,
33427
33141
  &.k-selected {
33428
33142
  @include fill(
33429
33143
  $kendo-list-item-selected-text,
@@ -33432,7 +33146,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
33432
33146
  }
33433
33147
 
33434
33148
  &:focus,
33435
- &.k-state-focused,
33436
33149
  &.k-focus {
33437
33150
  @include box-shadow( $kendo-list-item-focus-shadow );
33438
33151
  }
@@ -33671,7 +33384,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
33671
33384
  // Listview content
33672
33385
  .k-listview-content {
33673
33386
 
33674
- > .k-state-focused,
33675
33387
  > .k-focus {
33676
33388
  @include fill(
33677
33389
  $listview-item-focus-text,
@@ -33681,7 +33393,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
33681
33393
  @include box-shadow( $listview-item-focus-shadow );
33682
33394
  }
33683
33395
 
33684
- > .k-state-selected,
33685
33396
  > .k-selected {
33686
33397
  @include fill(
33687
33398
  $listview-item-selected-text,
@@ -33893,7 +33604,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
33893
33604
  [data-tool="merge"],
33894
33605
  [data-tool="freeze"] {
33895
33606
  width: auto;
33896
- min-width: $form-line-height * 1em;
33607
+ min-width: calc( #{$form-line-height} * 1em );
33897
33608
  }
33898
33609
 
33899
33610
  .k-color-picker {
@@ -34062,7 +33773,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34062
33773
  overflow: hidden;
34063
33774
 
34064
33775
  // disabled cells in the Spreadsheet should allow navigation if link is used
34065
- .k-state-disabled,
34066
33776
  .k-disabled {
34067
33777
  pointer-events: auto;
34068
33778
  }
@@ -34624,7 +34334,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34624
34334
  background-position: 50% 50%;
34625
34335
 
34626
34336
  &:hover div,
34627
- &.k-state-hovered div,
34628
34337
  &.k-hover div {
34629
34338
  margin: 0;
34630
34339
  align-self: center;
@@ -34690,7 +34399,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34690
34399
  .k-spreadsheet-insert-image-dialog {
34691
34400
  .k-spreadsheet-has-image {
34692
34401
  &:hover,
34693
- &.k-state-hovered,
34694
34402
  &.k-hover {
34695
34403
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
34696
34404
  }
@@ -34867,7 +34575,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34867
34575
  );
34868
34576
  box-shadow: inset 0 0 0 1px $kendo-button-border;
34869
34577
 
34870
- &.k-state-active,
34871
34578
  &.k-active {
34872
34579
  @include fill(
34873
34580
  $kendo-button-active-text,
@@ -34894,7 +34601,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34894
34601
  > .k-menu,
34895
34602
  > .k-menu:not(.k-context-menu) {
34896
34603
  .k-item {
34897
- &.k-state-hover,
34898
34604
  &.k-hover {
34899
34605
  @include fill(
34900
34606
  $kendo-list-item-hover-text,
@@ -34925,13 +34631,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34925
34631
 
34926
34632
  .k-spreadsheet-has-image {
34927
34633
  &:hover,
34928
- &.k-state-hovered,
34929
34634
  &.k-hover {
34930
34635
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
34931
34636
  }
34932
34637
 
34933
34638
  &:hover div,
34934
- &.k-state-hovered div,
34935
34639
  &.k-hover div {
34936
34640
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
34937
34641
  }
@@ -34966,7 +34670,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34966
34670
  .k-button {}
34967
34671
 
34968
34672
  .k-button:hover,
34969
- .k-button.k-state-hover,
34970
34673
  .k-button.k-hover {
34971
34674
  @include fill(
34972
34675
  $kendo-list-item-hover-text,
@@ -34974,9 +34677,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34974
34677
  );
34975
34678
  }
34976
34679
  .k-button:active,
34977
- .k-button.k-state-active,
34978
34680
  .k-button.k-active,
34979
- .k-button.k-state-selected,
34980
34681
  .k-button.k-selected {
34981
34682
  @include fill(
34982
34683
  $kendo-list-item-selected-text,
@@ -35923,15 +35624,12 @@ $pivotgrid-remove-text: null !default;
35923
35624
 
35924
35625
 
35925
35626
  // Hover state
35926
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
35927
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
35928
35627
  .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
35929
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
35930
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
35628
+ .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
35931
35629
  .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
35932
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
35933
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
35934
- .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
35630
+ .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
35631
+ .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
35632
+ .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
35935
35633
  @include fill (
35936
35634
  $pivotgrid-hover-text,
35937
35635
  $pivotgrid-hover-bg,
@@ -35940,9 +35638,10 @@ $pivotgrid-remove-text: null !default;
35940
35638
  }
35941
35639
 
35942
35640
  // Focus state
35943
- .k-pivotgrid-cell.k-state-focus,
35944
- .k-pivotgrid-cell.k-focus,
35945
35641
  .k-pivotgrid-cell:focus,
35642
+ .k-pivotgrid-cell.k-focus,
35643
+ .k-pivotgrid-empty-cell:focus,
35644
+ .k-pivotgrid-empty-cell.k-focus,
35946
35645
  .k-master-row > .k-pivotgrid-cell:focus,
35947
35646
  .k-grouping-row > .k-pivotgrid-cell:focus,
35948
35647
  .k-detail-row > .k-pivotgrid-cell:focus,
@@ -35951,9 +35650,7 @@ $pivotgrid-remove-text: null !default;
35951
35650
  }
35952
35651
 
35953
35652
  // Selected state
35954
- .k-pivotgrid-cell.k-state-selected,
35955
35653
  .k-pivotgrid-cell.k-selected,
35956
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
35957
35654
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
35958
35655
  @include fill (
35959
35656
  $pivotgrid-selected-text,
@@ -36185,7 +35882,6 @@ $treelist-footer-row-border-width: 1px !default;
36185
35882
  }
36186
35883
 
36187
35884
  .k-treelist-dragging,
36188
- .k-treelist-dragging .k-state-hover,
36189
35885
  .k-treelist-dragging .k-hover {
36190
35886
  cursor: default;
36191
35887
  }
@@ -36951,7 +36647,6 @@ $filemanager-preview-icon-border: null !default;
36951
36647
  );
36952
36648
  }
36953
36649
 
36954
- &.k-state-selected .k-file-icon,
36955
36650
  &.k-selected .k-file-icon {
36956
36651
  @include fill(
36957
36652
  inherit,
@@ -37320,10 +37015,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
37320
37015
 
37321
37016
  &:focus,
37322
37017
  &.k-focus,
37323
- &.k-state-focus,
37324
37018
  &:hover,
37325
- &.k-hover,
37326
- &.k-state-hover {
37019
+ &.k-hover {
37327
37020
  text-decoration: underline;
37328
37021
  }
37329
37022
  }
@@ -37415,7 +37108,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
37415
37108
  );
37416
37109
  }
37417
37110
  .k-taskboard-column:focus,
37418
- .k-taskboard-column.k-state-focus,
37419
37111
  .k-taskboard-column.k-focus {
37420
37112
  @include fill(
37421
37113
  $taskboard-column-focus-text,
@@ -37454,39 +37146,33 @@ $taskboard-drag-placeholder-border: $component-border !default;
37454
37146
  @include fill( $color: $taskboard-card-header-text );
37455
37147
 
37456
37148
  &:focus,
37457
- &.k-focus,
37458
- &.k-state-focus {
37149
+ &.k-focus {
37459
37150
  @include fill( $color: $taskboard-card-header-focus-text );
37460
37151
  }
37461
37152
 
37462
37153
  &:hover,
37463
- &.k-hover,
37464
- &.k-state-hover {
37154
+ &.k-hover {
37465
37155
  @include fill( $color: $taskboard-card-header-hover-text );
37466
37156
  }
37467
37157
  }
37468
37158
 
37469
37159
  &:focus,
37470
- &.k-focus,
37471
- &.k-state-focus {
37160
+ &.k-focus {
37472
37161
  @include fill( $border: $taskboard-card-focus-border );
37473
37162
  @include box-shadow( $taskboard-card-focus-shadow );
37474
37163
  }
37475
37164
 
37476
37165
  &:hover,
37477
- &.k-hover,
37478
- &.k-state-hover {
37166
+ &.k-hover {
37479
37167
  @include fill( $border: $taskboard-card-hover-border );
37480
37168
  }
37481
37169
 
37482
- &.k-selected,
37483
- &.k-state-selected {
37170
+ &.k-selected {
37484
37171
  @include fill( $border: $taskboard-card-selected-border );
37485
37172
  @include box-shadow( $taskboard-card-selected-shadow );
37486
37173
  }
37487
37174
 
37488
- &.k-disabled,
37489
- &.k-state-disabled {
37175
+ &.k-disabled {
37490
37176
  @include disabled( $disabled-styling );
37491
37177
  }
37492
37178
  }
@@ -37618,7 +37304,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
37618
37304
  pointer-events: auto;
37619
37305
  }
37620
37306
 
37621
- .k-editor-content.k-state-focused,
37622
37307
  .k-editor-content.k-focus {
37623
37308
  outline-width: 1px;
37624
37309
  outline-style: dashed;
@@ -38073,7 +37758,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38073
37758
  display: block;
38074
37759
  margin: auto;
38075
37760
 
38076
- &.k-state-selected,
38077
37761
  &.k-selected {
38078
37762
  color: inherit;
38079
37763
  border-width: 0;
@@ -38296,7 +37980,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38296
37980
 
38297
37981
  kendo-editor {
38298
37982
  &.k-readonly {
38299
- .k-editor-content.k-state-focused,
38300
37983
  .k-editor-content.k-focus {
38301
37984
  outline-color: $body-text;
38302
37985
  }
@@ -38334,7 +38017,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38334
38017
 
38335
38018
  // Hover & Actve state
38336
38019
  &:hover,
38337
- &.k-state-active,
38020
+ &.k-active,
38338
38021
  &.k-active {
38339
38022
  border-color: $panel-border;
38340
38023
  }
@@ -38352,7 +38035,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38352
38035
 
38353
38036
  // Insert table
38354
38037
  .k-ct-popup {
38355
- .k-state-selected,
38356
38038
  .k-selected {
38357
38039
  @include fill( $selected-text, $selected-bg, $selected-border, none );
38358
38040
  }
@@ -38865,7 +38547,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
38865
38547
  }
38866
38548
 
38867
38549
  &.k-gantt-planned .k-grid-content tr {
38868
- height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
38550
+ height: calc( #{$line-height-em} * 1.7 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
38869
38551
  }
38870
38552
 
38871
38553
  // Layout
@@ -38910,7 +38592,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
38910
38592
  }
38911
38593
  }
38912
38594
 
38913
- tr.k-state-selected > td:last-child,
38914
38595
  tr.k-selected > td:last-child {
38915
38596
  background: transparent;
38916
38597
  }
@@ -39089,7 +38770,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39089
38770
  padding: 0 !important; // sass-lint:disable-line no-important
39090
38771
  }
39091
38772
  .k-grid-header tr {
39092
- height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
38773
+ height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
39093
38774
  vertical-align: bottom;
39094
38775
  }
39095
38776
  .k-grid-content {
@@ -39180,7 +38861,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39180
38861
  border-color: currentColor;
39181
38862
  position: absolute;
39182
38863
  }
39183
- .k-gantt-line.k-state-selected,
39184
38864
  .k-gantt-line.k-selected {
39185
38865
  z-index: 3;
39186
38866
  }
@@ -39254,7 +38934,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39254
38934
  transform: translate(-50%, -50%);
39255
38935
  }
39256
38936
  .k-task-dot:hover::before,
39257
- .k-task-dot.k-state-hover::before,
39258
38937
  .k-task-dot.k-hover::before {
39259
38938
  border-width: 1px;
39260
38939
  }
@@ -39728,7 +39407,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39728
39407
  $border: $gantt-milestone-border
39729
39408
  );
39730
39409
  }
39731
- .k-task-milestone.k-state-selected .k-task-milestone-content,
39732
39410
  .k-task-milestone.k-selected .k-task-milestone-content {
39733
39411
  @include fill(
39734
39412
  $bg: $gantt-milestone-selected-bg,
@@ -39743,7 +39421,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39743
39421
  stroke: $gantt-line-fill;
39744
39422
  }
39745
39423
 
39746
- polyline.k-state-selected,
39747
39424
  polyline.k-selected {
39748
39425
  stroke: $gantt-line-selected-fill;
39749
39426
  }
@@ -39797,7 +39474,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39797
39474
  );
39798
39475
  }
39799
39476
  .k-task-dot:hover::before,
39800
- .k-task-dot.k-state-hover::before,
39801
39477
  .k-task-dot.k-hover::before {
39802
39478
  @include fill(
39803
39479
  $bg: $gantt-dot-hover-bg,
@@ -39823,7 +39499,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39823
39499
  );
39824
39500
  }
39825
39501
  }
39826
- .k-task-milestone.k-state-selected,
39827
39502
  .k-task-milestone.k-selected {
39828
39503
  background-image: none;
39829
39504
  @include fill(
@@ -39854,7 +39529,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39854
39529
  .k-task-advanced .k-task-summary-complete {
39855
39530
  color: $gantt-advanced-bg;
39856
39531
  }
39857
- .k-task-summary.k-state-selected,
39858
39532
  .k-task-summary.k-selected {
39859
39533
  color: $gantt-summary-selected-bg;
39860
39534
 
@@ -39898,7 +39572,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39898
39572
  $bg: $gantt-advanced-bg
39899
39573
  );
39900
39574
  }
39901
- .k-task-single.k-state-selected,
39902
39575
  .k-task-single.k-selected {
39903
39576
  @include fill(
39904
39577
  $gantt-task-selected-text,
@@ -39915,7 +39588,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39915
39588
  .k-gantt-line {
39916
39589
  color: $gantt-line-fill;
39917
39590
  }
39918
- .k-gantt-line.k-state-selected,
39919
39591
  .k-gantt-line.k-selected {
39920
39592
  color: $gantt-line-selected-fill;
39921
39593
  }
@@ -40574,7 +40246,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40574
40246
  }
40575
40247
 
40576
40248
  &:hover,
40577
- &.k-state-hover,
40578
40249
  &.k-hover {
40579
40250
  .k-event-delete {
40580
40251
  opacity: 1;
@@ -40640,7 +40311,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40640
40311
 
40641
40312
  // Hover
40642
40313
  &:hover,
40643
- &.k-state-hover,
40644
40314
  &.k-hover {
40645
40315
  .k-event-actions .k-event-delete,
40646
40316
  .k-resize-handle {
@@ -40898,11 +40568,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40898
40568
  opacity: .5;
40899
40569
  visibility: hidden;
40900
40570
  }
40901
- .k-state-hover .k-task > .k-event-delete,
40902
40571
  .k-hover .k-task > .k-event-delete,
40903
40572
  .k-scheduler-content tr:hover .k-event-delete,
40904
40573
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
40905
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
40906
40574
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
40907
40575
  visibility: visible;
40908
40576
  }
@@ -40976,7 +40644,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40976
40644
  position: relative;
40977
40645
  }
40978
40646
 
40979
- td.k-state-selected,
40980
40647
  td.k-selected {
40981
40648
  background-color: inherit;
40982
40649
  }
@@ -41359,9 +41026,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41359
41026
  );
41360
41027
  }
41361
41028
 
41362
- .k-scheduler-layout td.k-state-selected,
41363
41029
  .k-scheduler-layout td.k-selected,
41364
- .k-scheduler-layout .k-scheduler-cell.k-state-selected,
41365
41030
  .k-scheduler-layout .k-scheduler-cell.k-selected {
41366
41031
  background-color: rgba($selected-bg, .25);
41367
41032
  }
@@ -41384,7 +41049,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41384
41049
  );
41385
41050
  @include box-shadow( $scheduler-event-shadow );
41386
41051
 
41387
- &.k-state-hover,
41052
+ &:hover,
41388
41053
  &.k-hover {
41389
41054
  @include fill(
41390
41055
  $scheduler-event-hover-text,
@@ -41395,7 +41060,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41395
41060
  @include box-shadow( $scheduler-event-hover-shadow );
41396
41061
  }
41397
41062
 
41398
- &.k-state-selected,
41399
41063
  &.k-selected {
41400
41064
  @include fill(
41401
41065
  $scheduler-event-selected-text,
@@ -41462,10 +41126,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41462
41126
 
41463
41127
  // Hover
41464
41128
  .k-scheduler-content tr:hover,
41465
- .k-scheduler-content tr.k-state-hover,
41466
41129
  .k-scheduler-content tr.k-hover,
41467
41130
  .k-scheduler-content .k-scheduler-row:hover,
41468
- .k-scheduler-content .k-scheduler-row.k-state-hover,
41469
41131
  .k-scheduler-content .k-scheduler-row.k-hover {
41470
41132
  @include fill(
41471
41133
  $hovered-text,
@@ -41477,9 +41139,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41477
41139
 
41478
41140
  .k-scheduler-content tr:hover .k-scheduler-datecolumn,
41479
41141
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
41480
- .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
41481
41142
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
41482
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
41483
41143
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
41484
41144
  @include fill(
41485
41145
  $scheduler-text,
@@ -41489,13 +41149,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41489
41149
  }
41490
41150
 
41491
41151
  // Selected
41492
- .k-scheduler-content tr.k-state-selected,
41493
41152
  .k-scheduler-content tr.k-selected {
41494
41153
  background-color: rgba($selected-bg, .25);
41495
41154
  }
41496
- .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
41497
41155
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
41498
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
41499
41156
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
41500
41157
  background-color: $scheduler-bg;
41501
41158
  }
@@ -41513,7 +41170,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41513
41170
  @include fill( $bg: $scheduler-yearview-indicator-bg );
41514
41171
  }
41515
41172
 
41516
- .k-state-selected .k-day-indicator,
41517
41173
  .k-selected .k-day-indicator {
41518
41174
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
41519
41175
  }
@@ -41817,7 +41473,6 @@ $chat-quick-reply-hover-border: $primary !default;
41817
41473
 
41818
41474
 
41819
41475
  // Message states
41820
- .k-message.k-state-selected,
41821
41476
  .k-message.k-selected {
41822
41477
  margin-bottom: $chat-item-spacing-y;
41823
41478
  border: 0;
@@ -41946,7 +41601,6 @@ $chat-quick-reply-hover-border: $primary !default;
41946
41601
  align-items: center;
41947
41602
 
41948
41603
  &:focus,
41949
- &.k-state-focus,
41950
41604
  &.k-focus,
41951
41605
  &:focus-within {
41952
41606
  outline: 0;
@@ -42027,7 +41681,6 @@ $chat-quick-reply-hover-border: $primary !default;
42027
41681
  flex: 0 0 auto;
42028
41682
  }
42029
41683
 
42030
- &.k-state-selected,
42031
41684
  &.k-selected {
42032
41685
  background: none;
42033
41686
  }
@@ -42264,7 +41917,6 @@ $chat-quick-reply-hover-border: $primary !default;
42264
41917
  .k-bubble:hover {
42265
41918
  @include box-shadow( $chat-bubble-hover-shadow );
42266
41919
  }
42267
- .k-state-selected .k-bubble,
42268
41920
  .k-selected .k-bubble {
42269
41921
  @include box-shadow( $chat-bubble-selected-shadow );
42270
41922
  }
@@ -42280,7 +41932,6 @@ $chat-quick-reply-hover-border: $primary !default;
42280
41932
  .k-alt .k-bubble:hover {
42281
41933
  @include box-shadow( $chat-alt-bubble-hover-shadow );
42282
41934
  }
42283
- .k-alt .k-state-selected .k-bubble,
42284
41935
  .k-alt .k-selected .k-bubble {
42285
41936
  @include box-shadow( $chat-alt-bubble-selected-shadow );
42286
41937
  }
@@ -43085,7 +42736,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43085
42736
  color: $body-text;
43086
42737
  }
43087
42738
 
43088
- .k-timeline-arrow.k-state-disabled,
43089
42739
  .k-timeline-arrow.k-disabled {
43090
42740
  opacity: 1; // The arrow button in disabled mode should have a solid background
43091
42741
  color: $timeline-track-arrow-disabled-text;
@@ -43106,7 +42756,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43106
42756
  background-color: $timeline-flag-bg;
43107
42757
  }
43108
42758
 
43109
- .k-timeline-track-item.k-state-focus .k-timeline-circle,
43110
42759
  .k-timeline-track-item.k-focus .k-timeline-circle {
43111
42760
  @include box-shadow( $timeline-track-item-focus-shadow );
43112
42761
  }
@@ -43908,7 +43557,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
43908
43557
  outline-width: 0;
43909
43558
 
43910
43559
  &:focus,
43911
- &.k-state-focus,
43912
43560
  &.k-focus {
43913
43561
  color: $scrollview-navigation-color;
43914
43562
  opacity: $scrollview-navigation-hover-opacity;
@@ -43919,7 +43567,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
43919
43567
  }
43920
43568
 
43921
43569
  &:hover,
43922
- &.k-state-hover,
43923
43570
  &.k-hover {
43924
43571
  color: $scrollview-navigation-color;
43925
43572
  opacity: $scrollview-navigation-hover-opacity;
@@ -43941,14 +43588,12 @@ $scrollview-transition-timing-function: ease-in-out !default;
43941
43588
 
43942
43589
 
43943
43590
  &:focus,
43944
- &.k-state-focused,
43945
43591
  &.k-focus {
43946
43592
  box-shadow: $scrollview-pagebutton-shadow;
43947
43593
  }
43948
43594
  }
43949
43595
 
43950
43596
  .k-scrollview-nav > .k-link:hover,
43951
- .k-scrollview-nav > .k-link.k-state-hover,
43952
43597
  .k-scrollview-nav > .k-link.k-hover {
43953
43598
  box-shadow: $scrollview-pagebutton-shadow;
43954
43599
  }
@@ -44765,7 +44410,7 @@ $treemap-line-height: $line-height !default;
44765
44410
  .k-leaf.k-inverse {
44766
44411
  color: $component-text;
44767
44412
  }
44768
- .k-leaf.k-state-hover,
44413
+ .k-leaf:hover,
44769
44414
  .k-leaf.k-hover {
44770
44415
  box-shadow: inset 0 0 0 3px $component-border;
44771
44416
  }
@@ -45247,8 +44892,7 @@ $orgchart-line-v-height: 25px !default;
45247
44892
  }
45248
44893
 
45249
44894
  &:focus,
45250
- &.k-focus,
45251
- &.k-state-focus {
44895
+ &.k-focus {
45252
44896
  @include box-shadow( $orgchart-card-focus-shadow );
45253
44897
  }
45254
44898
  }
@@ -45262,9 +44906,6 @@ $orgchart-line-v-height: 25px !default;
45262
44906
  );
45263
44907
  }
45264
44908
  .k-orgchart-node-group-container:focus,
45265
- .k-orgchart-node-group-container.k-focus,
45266
- .k-orgchart-node-group-container.k-state-focus,
45267
- .k-orgchart-node-group-container.k-state-focused,
45268
44909
  .k-orgchart-node-group-container.k-focus {
45269
44910
  @include box-shadow( $orgchart-node-group-focus-shadow );
45270
44911
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -45308,40 +44949,42 @@ $kendo-signature-height: 108px !default;
45308
44949
  $kendo-signature-maximized-width: 750px !default;
45309
44950
  $kendo-signature-maximized-height: 252px !default;
45310
44951
 
45311
- $kendo-signature-padding: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
45312
- $kendo-signature-padding-sm: map-get( $spacing, 1 ) !default;
45313
- $kendo-signature-padding-md: $kendo-signature-padding !default;
45314
- $kendo-signature-padding-lg: map-get( $spacing, 2 ) !default;
44952
+ $kendo-signature-padding-x: map-get( $spacing, 3 ) !default;
44953
+ $kendo-signature-padding-x-sm: map-get( $spacing, 2 ) !default;
44954
+ $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
44955
+ $kendo-signature-padding-x-lg: map-get( $spacing, 4 ) !default;
44956
+
44957
+ $kendo-signature-padding-y: map-get( $spacing, 1 ) !default;
44958
+ $kendo-signature-padding-y-sm: map-get( $spacing, thin ) !default;
44959
+ $kendo-signature-padding-y-md: $kendo-signature-padding-y !default;
44960
+ $kendo-signature-padding-y-lg: map-get( $spacing, 2 ) !default;
45315
44961
 
45316
44962
  $kendo-signature-line-width: 1px !default;
45317
44963
  $kendo-signature-line-style: dashed !default;
45318
44964
  $kendo-signature-line-color: rgba( $info, .24 ) !default;
45319
44965
 
45320
- $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
45321
- $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
45322
- $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
45323
- $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
44966
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
44967
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
44968
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
44969
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
45324
44970
 
45325
- $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
45326
- $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
45327
- $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
45328
- $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
44971
+ $kendo-signature-line-bottom-offset: 33% !default;
45329
44972
 
45330
44973
  $kendo-signature-sizes: (
45331
44974
  sm: (
45332
- padding: $kendo-signature-padding-sm,
45333
- line-size: $kendo-signature-line-size-sm,
45334
- line-offset: $kendo-signature-line-bottom-offset-sm
44975
+ padding-x: $kendo-signature-padding-x-sm,
44976
+ padding-y: $kendo-signature-padding-y-sm,
44977
+ line-size: $kendo-signature-line-size-sm
45335
44978
  ),
45336
44979
  md: (
45337
- padding: $kendo-signature-padding-md,
45338
- line-size: $kendo-signature-line-size-md,
45339
- line-offset: $kendo-signature-line-bottom-offset-md
44980
+ padding-x: $kendo-signature-padding-x-md,
44981
+ padding-y: $kendo-signature-padding-y-md,
44982
+ line-size: $kendo-signature-line-size-md
45340
44983
  ),
45341
44984
  lg: (
45342
- padding: $kendo-signature-padding-lg,
45343
- line-size: $kendo-signature-line-size-lg,
45344
- line-offset: $kendo-signature-line-bottom-offset-lg
44985
+ padding-x: $kendo-signature-padding-x-lg,
44986
+ padding-y: $kendo-signature-padding-y-lg,
44987
+ line-size: $kendo-signature-line-size-lg
45345
44988
  )
45346
44989
  ) !default;
45347
44990
 
@@ -45355,7 +44998,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
45355
44998
 
45356
44999
  .k-signature {
45357
45000
  width: $kendo-signature-width;
45358
- height: $kendo-signature-height;
45001
+ min-height: $kendo-signature-height;
45359
45002
  position: relative;
45360
45003
  box-sizing: border-box;
45361
45004
  display: flex;
@@ -45392,27 +45035,30 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
45392
45035
 
45393
45036
  .k-signature-line {
45394
45037
  position: absolute;
45395
- z-index: 0;
45038
+ bottom: $kendo-signature-line-bottom-offset;
45039
+ z-index: 2;
45040
+ pointer-events: none;
45396
45041
  border-bottom-width: $kendo-signature-line-width;
45397
45042
  border-bottom-style: $kendo-signature-line-style;
45398
45043
  }
45399
45044
 
45400
45045
  // Sizes
45401
45046
  @each $size, $size-props in $kendo-signature-sizes {
45402
- $_padding: map-get($size-props, padding);
45047
+ $_padding-x: map-get($size-props, padding-x);
45048
+ $_padding-y: map-get($size-props, padding-y);
45403
45049
  $_line-size: map-get($size-props, line-size);
45404
45050
  $_line-offset: map-get($size-props, line-offset);
45405
45051
 
45406
45052
  .k-signature-#{$size} {
45407
- padding: $_padding;
45053
+ padding-inline: $_padding-x;
45054
+ padding-block: $_padding-y;
45408
45055
 
45409
45056
  .k-signature-line {
45410
45057
  width: $_line-size;
45411
- bottom: $_line-offset;
45412
45058
  }
45413
45059
  }
45414
-
45415
45060
  }
45061
+
45416
45062
  }
45417
45063
 
45418
45064
  // #endregion