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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/all.scss CHANGED
@@ -1486,7 +1486,7 @@ $line-height-xs: 1 !default;
1486
1486
  $line-height-sm: 1.25 !default;
1487
1487
  $line-height-md: $line-height !default;
1488
1488
  $line-height-lg: 1.5 !default;
1489
- $line-height-em: $line-height * 1em !default;
1489
+ $line-height-em: calc( #{$line-height} * 1em ) !default;
1490
1490
 
1491
1491
 
1492
1492
  // Font weight
@@ -1719,7 +1719,6 @@ $display4-letter-spacing: null !default;
1719
1719
  @include exports( "common/disabled" ) {
1720
1720
 
1721
1721
  // Disabled state
1722
- .k-state-disabled,
1723
1722
  .k-disabled,
1724
1723
  .k-widget[disabled],
1725
1724
  .k-disabled {
@@ -1734,8 +1733,7 @@ $display4-letter-spacing: null !default;
1734
1733
 
1735
1734
  // Nested disabled
1736
1735
  [disabled],
1737
- .k-disabled,
1738
- .k-state-disabled {
1736
+ .k-disabled {
1739
1737
  opacity: 1;
1740
1738
  filter: grayscale(0);
1741
1739
  }
@@ -3983,6 +3981,9 @@ $utils-border-radius: (
3983
3981
  @each $pos in (static, relative, absolute, fixed, sticky) {
3984
3982
  .k-#{$pos},
3985
3983
  .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
3984
+
3985
+ .\!k-#{$pos},
3986
+ .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
3986
3987
  }
3987
3988
 
3988
3989
  /// @name k-pos-top
@@ -4510,18 +4511,28 @@ $utils-border-radius: (
4510
4511
  @include exports( "common/decoration/color" ) {
4511
4512
 
4512
4513
  // sass-lint:disable-block no-important
4514
+ // sass-lint:disable-block class-name-format
4513
4515
  // stylelint-disable block-opening-brace-space-before
4514
4516
 
4515
4517
  .k-text-base,
4516
4518
  .k-color-base {
4517
4519
  color: $base-text;
4518
4520
  }
4521
+ .\!k-text-base,
4522
+ .\!k-color-base {
4523
+ color: $base-text !important;
4524
+ }
4519
4525
 
4520
4526
  .k-color-inherit { color: inherit; }
4527
+ .\!k-color-inherit { color: inherit !important; }
4521
4528
 
4522
4529
  @each $name, $color in $kendo-theme-colors {
4523
4530
  .k-text-#{$name},
4524
4531
  .k-color-#{$name} {
4532
+ color: $color;
4533
+ }
4534
+ .\!k-text-#{$name},
4535
+ .\!k-color-#{$name} {
4525
4536
  color: $color !important;
4526
4537
  }
4527
4538
  }
@@ -4532,60 +4543,16 @@ $utils-border-radius: (
4532
4543
  @include exports( "common/decoration/background" ) {
4533
4544
 
4534
4545
  // sass-lint:disable-block no-important
4546
+ // sass-lint:disable-block class-name-format
4535
4547
 
4536
4548
  @each $name, $bg-color in $kendo-theme-colors {
4537
4549
  .k-bg-#{$name} {
4538
- background-color: $bg-color !important;
4550
+ background-color: $bg-color;
4539
4551
  }
4540
- }
4541
-
4542
- }
4543
-
4544
-
4545
- @mixin variant( $base ) {
4546
- background-color: tint($base, 10);
4547
- color: shade($base, 6);
4548
- border-color: tint($base, 9);
4549
- }
4550
-
4551
- @include exports( "common/decoration/variant" ) {
4552
-
4553
- @each $name, $variant in $kendo-theme-colors {
4554
- .k-state-#{$name} {
4555
- @include variant( $variant );
4552
+ .\!k-bg-#{$name} {
4553
+ background-color: $bg-color !important;
4556
4554
  }
4557
4555
  }
4558
- }
4559
-
4560
-
4561
- @include exports( "common/decoration/legacy" ) {
4562
-
4563
- .k-info-colored {
4564
- color: #50607f;
4565
- border-color: #d0d9df;
4566
- background-color: #f0f9ff;
4567
- }
4568
-
4569
- .k-success-colored {
4570
- color: #507f50;
4571
- border-color: #d0dfd0;
4572
- background-color: #f0fff0;
4573
- }
4574
-
4575
- .k-error-colored {
4576
- color: #7f5050;
4577
- border-color: #dfd0d0;
4578
- background-color: #fff0f0;
4579
- }
4580
-
4581
- .k-shadow {
4582
- // Shadow moved to popup/_layout.scss due to variable flow
4583
- // box-shadow: $popup-shadow;
4584
- }
4585
-
4586
- .k-inset {
4587
- box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
4588
- }
4589
4556
 
4590
4557
  }
4591
4558
 
@@ -7787,41 +7754,75 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
7787
7754
  // Component
7788
7755
  // #region @import "_variables.scss"; -> packages/classic/scss/badge/_variables.scss
7789
7756
  // Badge
7790
- $badge-padding-x: $padding-x-sm !default;
7791
- $badge-padding-y: $badge-padding-x !default;
7792
- $badge-border-width: 1px !default;
7793
- $badge-border-radius: $kendo-border-radius-md !default;
7794
- $badge-font-size: $font-size-xs !default;
7795
- $badge-line-height: 1 !default;
7796
-
7797
- $badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
7798
- $badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
7799
- $badge-border-width-sm: $badge-border-width !default;
7800
- $badge-border-radius-sm: $kendo-border-radius-sm !default;
7801
- $badge-font-size-sm: $font-size-xs !default;
7802
- $badge-line-height-sm: 1 !default;
7803
-
7804
- $badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
7805
- $badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
7806
- $badge-border-width-lg: $badge-border-width !default;
7807
- $badge-border-radius-lg: $kendo-border-radius-lg !default;
7808
- $badge-font-size-lg: $font-size-sm !default;
7809
- $badge-line-height-lg: 1 !default;
7810
-
7811
- $badge-fixed-size: 20px !default;
7812
- $badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
7813
- $badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
7814
- $badge-dot-size: 10px !default;
7815
-
7816
- $badge-fixed-size-sm: 16px !default;
7817
- $badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
7818
- $badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
7819
- $badge-dot-size-sm: 6px !default;
7820
-
7821
- $badge-fixed-size-lg: 26px !default;
7822
- $badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
7823
- $badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
7824
- $badge-dot-size-lg: 12px !default;
7757
+ /// Width of the border around the badge.
7758
+ /// @group badge
7759
+ $kendo-badge-border-width: 1px !default;
7760
+
7761
+ /// Border radius of the badge.
7762
+ /// @group badge
7763
+ $kendo-badge-border-radius: $kendo-border-radius-md !default;
7764
+
7765
+
7766
+ /// Horizontal padding of the badge.
7767
+ /// @group badge
7768
+ $kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
7769
+ $kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
7770
+ $kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
7771
+ $kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
7772
+
7773
+ /// Vertical padding of the badge.
7774
+ /// @group badge
7775
+ $kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
7776
+ $kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
7777
+ $kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
7778
+ $kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
7779
+
7780
+ /// Font sizes of the badge.
7781
+ /// @group badge
7782
+ $kendo-badge-font-size: $font-size-xs !default;
7783
+ $kendo-badge-font-size-sm: $font-size-xs !default;
7784
+ $kendo-badge-font-size-md: $font-size-xs !default;
7785
+ $kendo-badge-font-size-lg: $font-size-xs !default;
7786
+
7787
+ /// Line heights used along with $font-size.
7788
+ /// @group badge
7789
+ $kendo-badge-line-height: 1 !default;
7790
+ $kendo-badge-line-height-sm: $kendo-badge-line-height !default;
7791
+ $kendo-badge-line-height-md: $kendo-badge-line-height !default;
7792
+ $kendo-badge-line-height-lg: $kendo-badge-line-height !default;
7793
+
7794
+ /// Badge min width used for circle badge.
7795
+ /// @group badge
7796
+ $kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
7797
+ $kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm * 1em} + #{$kendo-badge-padding-y-sm * 2} + #{$kendo-badge-border-width * 2} ) !default;
7798
+ $kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md * 1em} + #{$kendo-badge-padding-y-md * 2} + #{$kendo-badge-border-width * 2} ) !default;
7799
+ $kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg * 1em} + #{$kendo-badge-padding-y-lg * 2} + #{$kendo-badge-border-width * 2} ) !default;
7800
+
7801
+ /// Sizes map for the badge.
7802
+ /// @group badge
7803
+ $kendo-badge-sizes: (
7804
+ sm: (
7805
+ padding-x: $kendo-badge-padding-x-sm,
7806
+ padding-y: $kendo-badge-padding-y-sm,
7807
+ font-size: $kendo-badge-font-size-sm,
7808
+ line-height: $kendo-badge-line-height-sm,
7809
+ min-width: $kendo-badge-min-width-sm
7810
+ ),
7811
+ md: (
7812
+ padding-x: $kendo-badge-padding-x-md,
7813
+ padding-y: $kendo-badge-padding-y-md,
7814
+ font-size: $kendo-badge-font-size-md,
7815
+ line-height: $kendo-badge-line-height-md,
7816
+ min-width: $kendo-badge-min-width-md
7817
+ ),
7818
+ lg: (
7819
+ padding-x: $kendo-badge-padding-x-lg,
7820
+ padding-y: $kendo-badge-padding-y-lg,
7821
+ font-size: $kendo-badge-font-size-lg,
7822
+ line-height: $kendo-badge-line-height-lg,
7823
+ min-width: $kendo-badge-min-width-lg
7824
+ )
7825
+ ) !default;
7825
7826
 
7826
7827
  // #endregion
7827
7828
  // #region @import "_layout.scss"; -> packages/classic/scss/badge/_layout.scss
@@ -7830,7 +7831,7 @@ $badge-dot-size-lg: 12px !default;
7830
7831
 
7831
7832
  .k-badge {
7832
7833
  padding: 0;
7833
- border-width: 0;
7834
+ border-width: $kendo-badge-border-width;
7834
7835
  border-style: solid;
7835
7836
  border-color: transparent;
7836
7837
  box-sizing: border-box;
@@ -7880,74 +7881,23 @@ $badge-dot-size-lg: 12px !default;
7880
7881
 
7881
7882
 
7882
7883
  // Badge sizes
7883
- .k-badge-sm {
7884
- padding: $badge-padding-y-sm $badge-padding-x-sm;
7885
- border-width: $badge-border-width-sm;
7886
- font-size: $badge-font-size-sm;
7887
- line-height: $badge-line-height-sm;
7888
-
7889
- &:empty { padding: $badge-padding-y-sm; }
7890
- }
7891
- .k-badge-md {
7892
- padding: $badge-padding-y $badge-padding-x;
7893
- border-width: $badge-border-width;
7894
- font-size: $badge-font-size;
7895
- line-height: $badge-line-height;
7896
-
7897
- &:empty { padding: $badge-padding-y; }
7898
- }
7899
- .k-badge-lg {
7900
- padding: $badge-padding-y-lg $badge-padding-x-lg;
7901
- border-width: $badge-border-width-lg;
7902
- font-size: $badge-font-size-lg;
7903
- line-height: $badge-line-height-lg;
7904
-
7905
- &:empty { padding: $badge-padding-y-lg; }
7906
- }
7907
-
7908
-
7909
- // Badge shapes
7910
- .k-badge-rounded {
7911
- &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
7912
- &.k-badge-md { @include border-radius( $badge-border-radius ); }
7913
- &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
7914
- }
7915
- .k-badge-pill {
7916
- border-radius: 5rem;
7917
- }
7918
- .k-badge-circle {
7919
- padding: 0 !important; // sass-lint:disable-line no-important
7920
- border-radius: 100%;
7884
+ @each $size, $size-props in $kendo-badge-sizes {
7885
+ $_padding-x: map-get( $size-props, padding-x );
7886
+ $_padding-y: map-get( $size-props, padding-y );
7887
+ $_font-size: map-get( $size-props, font-size );
7888
+ $_line-height: map-get( $size-props, line-height );
7889
+ $_min-width: map-get( $size-props, min-width );
7921
7890
 
7922
- &.k-badge-sm {
7923
- width: $badge-size-sm;
7924
- height: $badge-size-sm;
7925
- }
7926
- &.k-badge-md {
7927
- width: $badge-size;
7928
- height: $badge-size;
7929
- }
7930
- &.k-badge-lg {
7931
- width: $badge-size-lg;
7932
- height: $badge-size-lg;
7933
- }
7934
- }
7935
- .k-badge-dot {
7936
- padding: 0 !important; // sass-lint:disable-line no-important
7937
- border-radius: 100%;
7938
- font-size: 0;
7891
+ .k-badge-#{$size} {
7892
+ padding: $_padding-y $_padding-x;
7893
+ font-size: $_font-size;
7894
+ line-height: $_line-height;
7895
+ min-width: $_min-width;
7939
7896
 
7940
- &.k-badge-sm {
7941
- width: $badge-dot-size-sm;
7942
- height: $badge-dot-size-sm;
7943
- }
7944
- &.k-badge-md {
7945
- width: $badge-dot-size;
7946
- height: $badge-dot-size;
7947
- }
7948
- &.k-badge-lg {
7949
- width: $badge-dot-size-lg;
7950
- height: $badge-dot-size-lg;
7897
+ &:empty {
7898
+ padding: $_padding-y;
7899
+ min-width: auto;
7900
+ }
7951
7901
  }
7952
7902
  }
7953
7903
 
@@ -8031,7 +7981,7 @@ $badge-dot-size-lg: 12px !default;
8031
7981
 
8032
7982
  // Solid badges
8033
7983
  @each $name, $color in $kendo-theme-colors {
8034
- .k-badge-solid.k-badge-#{$name} {
7984
+ .k-badge-solid-#{$name} {
8035
7985
  border-color: $color;
8036
7986
  color: contrast-wcag( $color );
8037
7987
  background-color: $color;
@@ -8045,7 +7995,7 @@ $badge-dot-size-lg: 12px !default;
8045
7995
  }
8046
7996
 
8047
7997
  @each $name, $color in $kendo-theme-colors {
8048
- .k-badge-outline.k-badge-#{$name} {
7998
+ .k-badge-outline-#{$name} {
8049
7999
  color: $color;
8050
8000
  }
8051
8001
  }
@@ -8102,7 +8052,7 @@ $kendo-button-font-size-md: $font-size-md !default;
8102
8052
  $kendo-button-line-height-md: $line-height-md !default;
8103
8053
 
8104
8054
  $kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
8105
- $kendo-button-padding-y-lg: map-get( $spacing, 2 );
8055
+ $kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
8106
8056
  $kendo-button-font-size-lg: $font-size-lg !default;
8107
8057
  $kendo-button-line-height-lg: $line-height-lg !default;
8108
8058
 
@@ -9192,8 +9142,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9192
9142
  @include disabled( $disabled-styling );
9193
9143
 
9194
9144
  [disabled] &,
9195
- .k-disabled &,
9196
- .k-state-disabled & {
9145
+ .k-disabled & {
9197
9146
  opacity: 1;
9198
9147
  filter: grayscale(0);
9199
9148
  }
@@ -9214,8 +9163,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9214
9163
  @include disabled( $disabled-styling );
9215
9164
 
9216
9165
  [disabled] &,
9217
- .k-disabled &,
9218
- .k-state-disabled & {
9166
+ .k-disabled & {
9219
9167
  opacity: 1;
9220
9168
  filter: grayscale(0);
9221
9169
  }
@@ -10136,7 +10084,6 @@ $floating-label-focus-text: null !default;
10136
10084
  width: auto;
10137
10085
  }
10138
10086
 
10139
- &.k-state-empty,
10140
10087
  &.k-empty {
10141
10088
  > .k-label {
10142
10089
  top: $floating-label-offset-y;
@@ -10147,8 +10094,6 @@ $floating-label-focus-text: null !default;
10147
10094
  }
10148
10095
 
10149
10096
  > .k-label,
10150
- // &:focus-within > .k-label,
10151
- &.k-state-focused > .k-label,
10152
10097
  &.k-focus > .k-label {
10153
10098
  top: $floating-label-focus-offset-y;
10154
10099
  left: $floating-label-focus-offset-x;
@@ -10160,7 +10105,6 @@ $floating-label-focus-text: null !default;
10160
10105
  transform: scale( $floating-label-focus-scale );
10161
10106
  }
10162
10107
 
10163
- &.k-state-empty:not(.k-state-focused) ::placeholder,
10164
10108
  &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
10165
10109
  color: transparent;
10166
10110
  }
@@ -10174,7 +10118,6 @@ $floating-label-focus-text: null !default;
10174
10118
  transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
10175
10119
  }
10176
10120
 
10177
- &.k-state-empty,
10178
10121
  &.k-empty {
10179
10122
  > .k-label {
10180
10123
  left: auto;
@@ -10183,8 +10126,6 @@ $floating-label-focus-text: null !default;
10183
10126
  }
10184
10127
 
10185
10128
  > .k-label,
10186
- // &:focus-within > .k-label,
10187
- &.k-state-focused > .k-label,
10188
10129
  &.k-focus > .k-label {
10189
10130
  left: auto;
10190
10131
  right: $floating-label-focus-offset-x;
@@ -10215,8 +10156,7 @@ $floating-label-focus-text: null !default;
10215
10156
  );
10216
10157
  }
10217
10158
 
10218
- &.k-focus > .k-label,
10219
- &.k-state-focused > .k-label {
10159
+ &.k-focus > .k-label {
10220
10160
  @include fill(
10221
10161
  $color: $floating-label-focus-text,
10222
10162
  $bg: $floating-label-focus-bg
@@ -12572,8 +12512,11 @@ $loader-container-font-size-lg: $font-size-lg !default;
12572
12512
  }
12573
12513
 
12574
12514
  .k-loader-container-inner {
12575
- .k-text-secondary {
12576
- color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
12515
+ // sass-lint:disable-block no-important
12516
+ // sass-lint:disable-block class-name-format
12517
+ .k-text-secondary,
12518
+ .\!k-text-secondary {
12519
+ color: $loader-secondary-bg !important;
12577
12520
  }
12578
12521
  }
12579
12522
 
@@ -13460,6 +13403,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
13460
13403
  align-items: center;
13461
13404
  }
13462
13405
 
13406
+ // Template item
13407
+ .k-toolbar-item:focus {
13408
+ text-decoration: none;
13409
+ outline: 0;
13410
+ }
13411
+
13463
13412
  }
13464
13413
 
13465
13414
 
@@ -13624,6 +13573,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
13624
13573
  }
13625
13574
 
13626
13575
 
13576
+ // Template item
13577
+ .k-toolbar-item:focus,
13578
+ .k-toolbar-item.k-focus {
13579
+ @include box-shadow( $kendo-button-focus-shadow );
13580
+ }
13581
+
13582
+
13627
13583
  // Button group
13628
13584
  .k-button-group {}
13629
13585
 
@@ -13884,7 +13840,7 @@ $form-spacer: $padding-x * 2 !default;
13884
13840
 
13885
13841
  $form-font-size: $font-size !default;
13886
13842
  $form-line-height: $line-height !default;
13887
- $form-line-height-em: $form-line-height * 1em !default;
13843
+ $form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
13888
13844
  $form-line-height-sm: $line-height-sm !default;
13889
13845
  $form-line-height-lg: $line-height-lg !default;
13890
13846
 
@@ -15221,7 +15177,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15221
15177
 
15222
15178
 
15223
15179
  // Selection
15224
- > .k-state-selected,
15225
15180
  > .k-selected {
15226
15181
  border-width: 0;
15227
15182
  border-style: solid;
@@ -15292,7 +15247,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15292
15247
  flex-direction: row;
15293
15248
  }
15294
15249
 
15295
- > .k-state-selected,
15296
15250
  > .k-selected {
15297
15251
  width: 0;
15298
15252
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15319,7 +15273,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15319
15273
  // Horizontal reverse
15320
15274
  &.k-progressbar-reverse {
15321
15275
 
15322
- > .k-state-selected,
15323
15276
  > .k-selected {
15324
15277
  flex-direction: row-reverse;
15325
15278
  justify-self: flex-end;
@@ -15344,7 +15297,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15344
15297
  writing-mode: vertical-lr;
15345
15298
  }
15346
15299
 
15347
- > .k-state-selected,
15348
15300
  > .k-selected {
15349
15301
  height: 0;
15350
15302
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15374,7 +15326,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15374
15326
  &.k-progressbar-reverse {
15375
15327
  flex-direction: column;
15376
15328
 
15377
- > .k-state-selected,
15378
15329
  > .k-selected {
15379
15330
  flex-direction: column;
15380
15331
  align-self: flex-start;
@@ -15386,7 +15337,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15386
15337
  // Indeterminate
15387
15338
  .k-progressbar-indeterminate {
15388
15339
  .k-progress-status-wrap,
15389
- .k-state-selected,
15390
15340
  .k-selected,
15391
15341
  .k-item {
15392
15342
  display: none;
@@ -15397,9 +15347,7 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15397
15347
  // Blazor specific
15398
15348
  .telerik-blazor.k-progressbar-horizontal {
15399
15349
 
15400
- > .k-state-selected,
15401
15350
  > .k-selected,
15402
- > .k-state-selected > .k-progress-status-wrap,
15403
15351
  > .k-selected > .k-progress-status-wrap {
15404
15352
  transition: width .1s ease-in-out;
15405
15353
  }
@@ -15428,7 +15376,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15428
15376
  display: -ms-inline-grid;
15429
15377
 
15430
15378
  > .k-progress-status-wrap,
15431
- > .k-state-selected,
15432
15379
  > .k-selected {
15433
15380
  -ms-grid-column: 1;
15434
15381
  -ms-grid-row: 1;
@@ -15438,7 +15385,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15438
15385
  -ms-grid-columns: 1fr;
15439
15386
  -ms-grid-rows: $progressbar-height;
15440
15387
 
15441
- &.k-progressbar-reverse > .k-state-selected,
15442
15388
  &.k-progressbar-reverse > .k-selected {
15443
15389
  -ms-grid-column-align: end;
15444
15390
  }
@@ -15447,12 +15393,10 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15447
15393
  -ms-grid-columns: $progressbar-height;
15448
15394
  -ms-grid-rows: 1fr;
15449
15395
 
15450
- > .k-state-selected,
15451
15396
  > .k-selected {
15452
15397
  -ms-grid-row-align: end;
15453
15398
  }
15454
15399
 
15455
- &.k-progressbar-reverse > .k-state-selected,
15456
15400
  &.k-progressbar-reverse > .k-selected {
15457
15401
  -ms-grid-row-align: start;
15458
15402
  }
@@ -15518,7 +15462,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15518
15462
  .k-progressbar {
15519
15463
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
15520
15464
 
15521
- .k-state-selected,
15522
15465
  .k-selected {
15523
15466
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
15524
15467
  }
@@ -15901,7 +15844,6 @@ $kendo-radio-ripple-opacity: .25 !default;
15901
15844
  }
15902
15845
 
15903
15846
  .k-radio:focus,
15904
- .k-radio.k-state-focus,
15905
15847
  .k-radio.k-focus {
15906
15848
  box-shadow: none !important; // sass-lint:disable-line no-important
15907
15849
 
@@ -15965,7 +15907,6 @@ $kendo-radio-ripple-opacity: .25 !default;
15965
15907
 
15966
15908
  // Hover state
15967
15909
  .k-radio:hover,
15968
- .k-radio.k-state-hover,
15969
15910
  .k-radio.k-hover {
15970
15911
  @include fill(
15971
15912
  $kendo-radio-hover-text,
@@ -15977,7 +15918,6 @@ $kendo-radio-ripple-opacity: .25 !default;
15977
15918
 
15978
15919
  // Focus state
15979
15920
  .k-radio:focus,
15980
- .k-radio.k-state-focus,
15981
15921
  .k-radio.k-focus {
15982
15922
  @include fill( $border: $kendo-radio-focus-border );
15983
15923
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -15986,13 +15926,11 @@ $kendo-radio-ripple-opacity: .25 !default;
15986
15926
 
15987
15927
  // Invalid state
15988
15928
  .k-radio.k-invalid,
15989
- .k-radio.k-state-invalid,
15990
15929
  .k-radio.ng-invalid.ng-touched,
15991
15930
  .k-radio.ng-invalid.ng-dirty {
15992
15931
  @include fill( $border: $kendo-radio-invalid-border );
15993
15932
  }
15994
15933
  .k-radio.k-invalid + .k-radio-label,
15995
- .k-radio.k-state-invalid + .k-radio-label,
15996
15934
  .k-radio.ng-invalid.ng-touched + .k-radio-label,
15997
15935
  .k-radio.ng-invalid.ng-dirty + .k-radio-label {
15998
15936
  @include fill( $color: $kendo-radio-invalid-text );
@@ -16009,7 +15947,6 @@ $kendo-radio-ripple-opacity: .25 !default;
16009
15947
  );
16010
15948
  }
16011
15949
  .k-radio:checked:focus,
16012
- .k-radio.k-checked.k-state-focus,
16013
15950
  .k-radio.k-checked.k-focus {
16014
15951
  @include fill( $border: $kendo-radio-focus-checked-border );
16015
15952
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -16180,7 +16117,6 @@ $slider-disabled-opacity: null !default;
16180
16117
  }
16181
16118
 
16182
16119
 
16183
- &.k-state-disabled,
16184
16120
  &.k-disabled {
16185
16121
  .k-tick,
16186
16122
  .k-slider-track,
@@ -16474,8 +16410,8 @@ $slider-disabled-opacity: null !default;
16474
16410
  left: auto;
16475
16411
  }
16476
16412
 
16477
- .k-button .k-i-arrow-e,
16478
- .k-button .k-i-arrow-w {
16413
+ .k-button-increase .k-icon,
16414
+ .k-button-decrease .k-icon {
16479
16415
  transform: scaleX(-1);
16480
16416
  }
16481
16417
  }
@@ -16637,20 +16573,17 @@ $slider-disabled-opacity: null !default;
16637
16573
  }
16638
16574
 
16639
16575
  &:focus,
16640
- &.k-state-focused,
16641
16576
  &.k-focus {
16642
16577
  @include box-shadow( $slider-draghandle-focused-shadow );
16643
16578
  }
16644
16579
  }
16645
16580
 
16646
- &.k-state-focused,
16647
16581
  &.k-focus {
16648
16582
  .k-draghandle {
16649
16583
  @include box-shadow( $slider-draghandle-focused-shadow );
16650
16584
  }
16651
16585
  }
16652
16586
 
16653
- &.k-state-disabled,
16654
16587
  &.k-disabled {
16655
16588
  opacity: $slider-disabled-opacity;
16656
16589
  }
@@ -17302,7 +17235,6 @@ $kendo-calendar-sizes: (
17302
17235
  }
17303
17236
 
17304
17237
  // // styles are applied to the k-link element inside
17305
- // .k-state-selected,
17306
17238
  // .k-selected {
17307
17239
  // color: inherit;
17308
17240
  // background: transparent;
@@ -17430,10 +17362,8 @@ $kendo-calendar-sizes: (
17430
17362
 
17431
17363
  &:hover,
17432
17364
  &.k-hover,
17433
- &.k-state-hover,
17434
17365
  &:focus,
17435
- &.k-focus,
17436
- &.k-state-focus {
17366
+ &.k-focus {
17437
17367
  color: $calendar-today-nav-hover-text;
17438
17368
  }
17439
17369
  }
@@ -17454,8 +17384,7 @@ $kendo-calendar-sizes: (
17454
17384
  .k-calendar-cell-inner {
17455
17385
  box-shadow: inset 0 0 0 1px $calendar-today-color;
17456
17386
  }
17457
- &.k-focus .k-calendar-cell-inner,
17458
- &.k-state-focused .k-calendar-cell-inner {
17387
+ &.k-focus .k-calendar-cell-inner {
17459
17388
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
17460
17389
  }
17461
17390
  } @else if $calendar-today-style == color {
@@ -17489,8 +17418,7 @@ $kendo-calendar-sizes: (
17489
17418
 
17490
17419
  // Interactive states
17491
17420
  .k-calendar-td:hover .k-calendar-cell-inner,
17492
- .k-calendar-td.k-hover .k-calendar-cell-inner,
17493
- .k-calendar-td.k-state-hover .k-calendar-cell-inner {
17421
+ .k-calendar-td.k-hover .k-calendar-cell-inner {
17494
17422
  @include fill(
17495
17423
  $calendar-cell-hover-text,
17496
17424
  $calendar-cell-hover-bg,
@@ -17498,8 +17426,7 @@ $kendo-calendar-sizes: (
17498
17426
  $calendar-cell-hover-gradient
17499
17427
  );
17500
17428
  }
17501
- .k-calendar-td.k-selected .k-calendar-cell-inner,
17502
- .k-calendar-td.k-state-selected .k-calendar-cell-inner {
17429
+ .k-calendar-td.k-selected .k-calendar-cell-inner {
17503
17430
  @include fill(
17504
17431
  $calendar-cell-selected-text,
17505
17432
  $calendar-cell-selected-bg,
@@ -17508,8 +17435,7 @@ $kendo-calendar-sizes: (
17508
17435
  );
17509
17436
  }
17510
17437
  .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
17511
- .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
17512
- .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
17438
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
17513
17439
  @include fill(
17514
17440
  $calendar-cell-selected-hover-text,
17515
17441
  $calendar-cell-selected-hover-bg,
@@ -17518,14 +17444,11 @@ $kendo-calendar-sizes: (
17518
17444
  );
17519
17445
  }
17520
17446
  .k-calendar-td:focus .k-calendar-cell-inner,
17521
- .k-calendar-td.k-focus .k-calendar-cell-inner,
17522
- .k-calendar-td.k-state-focus .k-calendar-cell-inner,
17523
- .k-calendar-td.k-state-focused .k-calendar-cell-inner {
17447
+ .k-calendar-td.k-focus .k-calendar-cell-inner {
17524
17448
  box-shadow: $calendar-cell-focused-shadow;
17525
17449
  }
17526
17450
  .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
17527
- .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
17528
- .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
17451
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
17529
17452
  box-shadow: $calendar-cell-selected-focus-shadow;
17530
17453
  }
17531
17454
 
@@ -17539,8 +17462,7 @@ $kendo-calendar-sizes: (
17539
17462
  box-shadow: inset -1px 0 $calendar-navigation-border;
17540
17463
 
17541
17464
  li:hover,
17542
- li.k-hover,
17543
- li.k-state-hover {
17465
+ li.k-hover {
17544
17466
  color: $calendar-today-nav-hover-text;
17545
17467
  }
17546
17468
  }
@@ -17563,7 +17485,6 @@ $kendo-calendar-sizes: (
17563
17485
  // Invalid
17564
17486
  &.k-invalid,
17565
17487
  &.k-invalid:hover,
17566
- &.k-state-invalid,
17567
17488
  &.ng-invalid.ng-touched,
17568
17489
  &.ng-invalid.ng-dirty {
17569
17490
  border-color: $invalid-border;
@@ -17611,9 +17532,7 @@ $kendo-calendar-sizes: (
17611
17532
  }
17612
17533
 
17613
17534
  .k-range-start.k-active,
17614
- .k-range-start.k-state-active,
17615
- .k-range-end.k-active,
17616
- .k-range-end.k-state-active {
17535
+ .k-range-end.k-active {
17617
17536
  .k-calendar-cell-inner {
17618
17537
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
17619
17538
  }
@@ -17849,7 +17768,6 @@ $kendo-time-selector-sizes: (
17849
17768
  display: block;
17850
17769
  }
17851
17770
 
17852
- &.k-state-focused,
17853
17771
  &.k-focus {
17854
17772
  &::before,
17855
17773
  &::after {
@@ -18024,7 +17942,6 @@ $kendo-time-selector-sizes: (
18024
17942
  color: $time-list-title-text;
18025
17943
  }
18026
17944
 
18027
- &.k-state-focused,
18028
17945
  &.k-focus {
18029
17946
  .k-title {
18030
17947
  color: $time-list-title-focus-text;
@@ -18342,18 +18259,14 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18342
18259
  -ms-high-contrast-adjust: none;
18343
18260
 
18344
18261
  &:hover,
18345
- &.k-state-hover,
18346
18262
  &.k-hover {
18347
18263
  position: relative;
18348
18264
  z-index: 101;
18349
18265
  }
18350
18266
 
18351
18267
  &:focus,
18352
- &.k-state-focus,
18353
18268
  &.k-focus,
18354
- &.k-state-selected,
18355
18269
  &.k-selected,
18356
- &.k-state-selected:hover,
18357
18270
  &.k-selected:hover {
18358
18271
  position: relative;
18359
18272
  z-index: 100;
@@ -18373,20 +18286,15 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18373
18286
  .k-colorpalette-tile {
18374
18287
 
18375
18288
  &:focus,
18376
- &.k-state-focus,
18377
18289
  &.k-focus {
18378
18290
  @include box-shadow( $colorpalette-tile-focus-shadow );
18379
18291
  }
18380
18292
 
18381
18293
  &:hover,
18382
- &.k-state-hover,
18383
18294
  &.k-hover {
18384
18295
  @include box-shadow( $colorpalette-tile-hover-shadow );
18385
18296
  }
18386
18297
 
18387
- &.k-state-selected,
18388
- &.k-selected,
18389
- &.k-state-selected:hover,
18390
18298
  &.k-selected,
18391
18299
  &.k-selected:hover {
18392
18300
  @include box-shadow( $colorpalette-tile-selected-shadow );
@@ -18720,7 +18628,7 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
18720
18628
  }
18721
18629
 
18722
18630
  // Needed for the double check icons
18723
- .k-i-check + .k-i-check {
18631
+ .k-icon + .k-icon {
18724
18632
  margin-left: -13px;
18725
18633
  }
18726
18634
  }
@@ -18766,7 +18674,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
18766
18674
  }
18767
18675
 
18768
18676
  .k-colorgradient:focus,
18769
- .k-colorgradient.k-state-focus,
18770
18677
  .k-colorgradient.k-focus {
18771
18678
  @include fill( $border: $colorgradient-focus-border );
18772
18679
  @include box-shadow( $colorgradient-focus-shadow );
@@ -18787,16 +18694,15 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
18787
18694
  @include box-shadow( $colorgradient-draghandle-shadow );
18788
18695
 
18789
18696
  &:focus,
18790
- &.k-state-focus,
18791
18697
  &.k-focus {
18792
18698
  @include fill( $bg: transparent, $border: $white );
18793
18699
  @include box-shadow( $colorgradient-draghandle-focus-shadow );
18794
18700
  }
18795
18701
 
18796
- &:active,
18797
18702
  &:hover,
18798
- &.k-state-hover,
18799
- &.k-hover {
18703
+ &.k-hover,
18704
+ &.k-active,
18705
+ &:active {
18800
18706
  @include fill( $bg: transparent, $border: $white );
18801
18707
  @include box-shadow( $colorgradient-draghandle-hover-shadow );
18802
18708
  }
@@ -18992,7 +18898,6 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
18992
18898
  }
18993
18899
 
18994
18900
  .k-coloreditor:focus,
18995
- .k-coloreditor.k-state-focus,
18996
18901
  .k-coloreditor.k-focus {
18997
18902
  @include fill( $border: $coloreditor-focus-border );
18998
18903
  @include box-shadow( $coloreditor-focus-shadow );
@@ -20287,7 +20192,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20287
20192
  box-sizing: border-box;
20288
20193
  }
20289
20194
 
20290
- &.k-state-readonly {
20195
+ &.k-readonly {
20291
20196
  pointer-events: none;
20292
20197
  }
20293
20198
  }
@@ -20367,7 +20272,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20367
20272
  color: $component-text;
20368
20273
 
20369
20274
  &:focus,
20370
- &.k-state-focused,
20371
20275
  &.k-focus {
20372
20276
 
20373
20277
  .k-rating-item {
@@ -20375,7 +20279,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20375
20279
  text-shadow: $rating-icon-focused-shadow;
20376
20280
  }
20377
20281
 
20378
- &.k-state-selected > .k-icon,
20379
20282
  &.k-selected > .k-icon {
20380
20283
  text-shadow: $rating-icon-focused-selected-shadow;
20381
20284
  }
@@ -20386,19 +20289,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20386
20289
  .k-rating-item {
20387
20290
  color: $rating-icon-text;
20388
20291
 
20389
- &.k-state-selected,
20390
20292
  &.k-selected {
20391
20293
  color: $rating-icon-selected-text;
20392
20294
 
20393
20295
  &:focus,
20394
- &.k-state-focused,
20395
20296
  &.k-focus {
20396
20297
  color: $rating-icon-focused-text;
20397
20298
  }
20398
20299
  }
20399
20300
 
20400
20301
  &:hover,
20401
- &.k-state-hover,
20402
20302
  &.k-hover {
20403
20303
  color: $rating-icon-hover-text;
20404
20304
  cursor: pointer;
@@ -20406,7 +20306,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20406
20306
  }
20407
20307
  }
20408
20308
 
20409
-
20410
20309
  // #endregion
20411
20310
 
20412
20311
  // #endregion
@@ -21630,7 +21529,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21630
21529
  z-index: 1;
21631
21530
  }
21632
21531
  input[disabled],
21633
- input.k-state-disabled,
21634
21532
  input.k-disabled {
21635
21533
  visibility: hidden;
21636
21534
  }
@@ -21678,12 +21576,10 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21678
21576
 
21679
21577
  .k-file {
21680
21578
 
21681
- &.k-state-focused,
21682
21579
  &.k-focus {
21683
21580
  box-shadow: inset $upload-focused-shadow;
21684
21581
  }
21685
21582
 
21686
- .k-upload-action.k-state-focused,
21687
21583
  .k-upload-action.k-focus {
21688
21584
  box-shadow: $upload-focused-shadow;
21689
21585
  }
@@ -21775,7 +21671,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21775
21671
  }
21776
21672
 
21777
21673
  // Invalid,
21778
- &.k-state-invalid,
21779
21674
  &.k-invalid,
21780
21675
  &.ng-invalid.ng-touched,
21781
21676
  &.ng-invalid.ng-dirty {
@@ -22810,7 +22705,6 @@ $actionsheet-item-disabled-shadow: null !default;
22810
22705
 
22811
22706
  // Hover state
22812
22707
  &:hover,
22813
- &.k-state-hover,
22814
22708
  &.k-hover {
22815
22709
  @include fill(
22816
22710
  $actionsheet-item-hover-text,
@@ -22824,7 +22718,6 @@ $actionsheet-item-disabled-shadow: null !default;
22824
22718
 
22825
22719
  // Focus state
22826
22720
  &:focus,
22827
- &.k-state-focus,
22828
22721
  &.k-focus {
22829
22722
  @include fill(
22830
22723
  $actionsheet-item-focus-text,
@@ -22838,7 +22731,6 @@ $actionsheet-item-disabled-shadow: null !default;
22838
22731
 
22839
22732
  // Disabed state
22840
22733
  &:disabled,
22841
- &.k-state-disabled,
22842
22734
  &.k-disabled {
22843
22735
  @include fill(
22844
22736
  $actionsheet-item-disabled-text,
@@ -23083,7 +22975,6 @@ $actionsheet-item-disabled-shadow: null !default;
23083
22975
 
23084
22976
  .k-window {
23085
22977
  &:focus,
23086
- &.k-state-focused,
23087
22978
  &.k-focus {
23088
22979
  @include box-shadow( $window-focused-shadow );
23089
22980
  }
@@ -23568,33 +23459,28 @@ $drawer-selected-hover-text: $selected-hover-text !default;
23568
23459
  .k-drawer-item {
23569
23460
 
23570
23461
  &:hover,
23571
- &.k-state-hover,
23572
23462
  &.k-hover {
23573
23463
  color: $drawer-hovered-text;
23574
23464
  background-color: $drawer-hovered-bg;
23575
23465
  }
23576
23466
 
23577
23467
  &:focus,
23578
- &.k-state-focused,
23579
23468
  &.k-focus {
23580
23469
  background-color: $drawer-focused-bg;
23581
23470
  box-shadow: $drawer-focused-shadow;
23582
23471
 
23583
23472
  &:hover,
23584
- &.k-state-hover,
23585
23473
  &.k-hover {
23586
23474
  color: $drawer-hovered-text;
23587
23475
  background-color: $drawer-hovered-bg;
23588
23476
  }
23589
23477
  }
23590
23478
 
23591
- &.k-state-selected,
23592
23479
  &.k-selected {
23593
23480
  color: $drawer-selected-text;
23594
23481
  background-color: $drawer-selected-bg;
23595
23482
 
23596
23483
  &:hover,
23597
- &.k-state-hover,
23598
23484
  &.k-hover {
23599
23485
  color: $drawer-selected-hover-text;
23600
23486
  background-color: $drawer-selected-hover-bg;
@@ -23725,7 +23611,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
23725
23611
  flex: none;
23726
23612
  }
23727
23613
 
23728
- > .k-i-close {
23614
+ > .k-i-close,
23615
+ > .k-i-x {
23729
23616
  margin-right: 0;
23730
23617
  margin-left: $notification-icon-spacing;
23731
23618
  flex: none;
@@ -23748,7 +23635,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
23748
23635
  margin-left: $notification-icon-spacing;
23749
23636
  }
23750
23637
 
23751
- > .k-i-close {
23638
+ > .k-i-close,
23639
+ > .k-i-x {
23752
23640
  margin-left: 0;
23753
23641
  margin-right: $notification-icon-spacing;
23754
23642
  }
@@ -23773,7 +23661,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
23773
23661
  );
23774
23662
  }
23775
23663
  .k-notification-wrap {
23776
- > .k-i-close {
23664
+ > .k-i-close,
23665
+ > .k-i-x {
23777
23666
  color: inherit;
23778
23667
  }
23779
23668
  }
@@ -23912,16 +23801,6 @@ $card-deck-scroll-button-offset: -$kendo-button-border-width !default;
23912
23801
  $card-callout-width: 20px !default;
23913
23802
  $card-callout-height: 20px !default;
23914
23803
 
23915
- $card-callout-box-shadow-n: null !default;
23916
- $card-callout-box-shadow-e: null !default;
23917
- $card-callout-box-shadow-s: null !default;
23918
- $card-callout-box-shadow-w: null !default;
23919
-
23920
- $card-focus-callout-box-shadow-n: 1px -1px 4px 0 rgba( black, .06) !default;
23921
- $card-focus-callout-box-shadow-e: 2px -1px 4px 0 rgba( black, .06) !default;
23922
- $card-focus-callout-box-shadow-s: 2px -2px 4px 0 rgba( black, .06) !default;
23923
- $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
23924
-
23925
23804
  // #endregion
23926
23805
  // #region @import "_layout.scss"; -> packages/classic/scss/card/_layout.scss
23927
23806
  // #region @import "~@progress/kendo-theme-default/scss/card/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/card/_layout.scss
@@ -23966,6 +23845,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
23966
23845
  display: flex;
23967
23846
  flex-direction: inherit;
23968
23847
  overflow: hidden;
23848
+ position: relative;
23969
23849
  }
23970
23850
 
23971
23851
 
@@ -24256,7 +24136,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24256
24136
  margin: 0;
24257
24137
  width: $card-callout-width;
24258
24138
  height: $card-callout-height;
24259
- border-width: $card-border-width $card-border-width 0 0;
24139
+ border-width: $card-border-width;
24260
24140
  border-style: solid;
24261
24141
  box-sizing: border-box;
24262
24142
  position: absolute;
@@ -24265,22 +24145,22 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24265
24145
  .k-card-callout.k-callout-n {
24266
24146
  top: 0;
24267
24147
  left: 50%;
24268
- transform: translate(-50%, -50%) rotate(-45deg);
24148
+ transform: translate(-50%, -50%) rotate(45deg);
24269
24149
  }
24270
24150
  .k-card-callout.k-callout-e {
24271
24151
  top: 50%;
24272
24152
  right: 0;
24273
- transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
24153
+ transform: translate(50%, -50%) rotate(-45deg);
24274
24154
  }
24275
24155
  .k-card-callout.k-callout-s {
24276
24156
  bottom: 0;
24277
24157
  left: 50%;
24278
- transform: translate(-50%, 50%) rotate(135deg);
24158
+ transform: translate(-50%, 50%) rotate(45deg);
24279
24159
  }
24280
24160
  .k-card-callout.k-callout-w {
24281
24161
  top: 50%;
24282
24162
  left: 0;
24283
- transform: translate(-50%, -50%) rotate(-135deg);
24163
+ transform: translate(-50%, -50%) rotate(45deg);
24284
24164
  }
24285
24165
 
24286
24166
  }
@@ -24337,9 +24217,13 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24337
24217
  );
24338
24218
  @include box-shadow( $card-shadow );
24339
24219
 
24220
+ .k-card-inner {
24221
+ background-color: inherit;
24222
+ border-color: inherit;
24223
+ }
24224
+
24340
24225
  &:focus,
24341
- &.k-focus,
24342
- &.k-state-focus {
24226
+ &.k-focus {
24343
24227
  @include fill(
24344
24228
  $card-focus-text,
24345
24229
  $card-focus-bg,
@@ -24348,8 +24232,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24348
24232
  @include box-shadow( $card-focus-shadow );
24349
24233
  }
24350
24234
 
24351
- &.k-selected,
24352
- &.k-state-selected {
24235
+ &.k-selected {
24353
24236
  @include box-shadow( $card-focus-shadow );
24354
24237
  }
24355
24238
  }
@@ -24401,10 +24284,8 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24401
24284
 
24402
24285
 
24403
24286
  .k-card-wrap {
24404
- &.k-state-focused,
24405
- &.k-focus,
24406
24287
  &:focus,
24407
- &.k-state-selected,
24288
+ &.k-focus,
24408
24289
  &.k-selected {
24409
24290
  > .k-card {
24410
24291
  @include box-shadow( $card-focus-shadow );
@@ -24416,28 +24297,11 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
24416
24297
  // Card callout
24417
24298
  .k-card-callout {
24418
24299
  @include fill(
24419
- $bg: $card-bg,
24420
- $border: $card-border
24421
- );
24422
- }
24423
-
24424
- .k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
24425
- .k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
24426
- .k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
24427
- .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
24428
-
24429
- .k-card:focus .k-card-callout,
24430
- .k-card.k-focus .k-card-callout,
24431
- .k-card.k-state-focus .k-card-callout {
24432
- @include fill(
24433
- $bg: $card-focus-bg,
24434
- $border: $card-focus-border
24300
+ $bg: inherit,
24301
+ $border: inherit
24435
24302
  );
24436
24303
 
24437
- &.k-callout-n { @include box-shadow( $card-focus-callout-box-shadow-n ); }
24438
- &.k-callout-e { @include box-shadow( $card-focus-callout-box-shadow-e ); }
24439
- &.k-callout-s { @include box-shadow( $card-focus-callout-box-shadow-s ); }
24440
- &.k-callout-w { @include box-shadow( $card-focus-callout-box-shadow-w ); }
24304
+ @include box-shadow( inherit );
24441
24305
  }
24442
24306
 
24443
24307
  }
@@ -24483,11 +24347,6 @@ $popover-callout-border-style: $popover-border-style !default;
24483
24347
  $popover-callout-bg: $popover-bg !default;
24484
24348
  $popover-callout-border: $popover-border !default;
24485
24349
 
24486
- $popover-callout-shadow-n: $card-callout-box-shadow-n !default;
24487
- $popover-callout-shadow-e: $card-callout-box-shadow-e !default;
24488
- $popover-callout-shadow-s: $card-callout-box-shadow-s !default;
24489
- $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
24490
-
24491
24350
  // #endregion
24492
24351
  // #region @import "_layout.scss"; -> packages/classic/scss/popover/_layout.scss
24493
24352
  // #region @import "~@progress/kendo-theme-default/scss/popover/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/popover/_layout.scss
@@ -24517,6 +24376,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
24517
24376
  }
24518
24377
  }
24519
24378
 
24379
+ .k-popover-inner {
24380
+ position: relative;
24381
+ border-radius: inherit;
24382
+ }
24383
+
24520
24384
  // Header
24521
24385
  .k-popover-header {
24522
24386
  @include border-top-radius( $popover-border-radius );
@@ -24543,32 +24407,32 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
24543
24407
  margin: 0;
24544
24408
  width: $popover-callout-width;
24545
24409
  height: $popover-callout-height;
24546
- border-width: $popover-callout-border-width $popover-callout-border-width 0 0;
24410
+ border-width: $popover-callout-border-width;
24547
24411
  border-style: $popover-callout-border-style;
24548
24412
  position: absolute;
24549
24413
 
24550
24414
  &.k-callout-n {
24551
24415
  top: 0;
24552
24416
  left: 50%;
24553
- transform: translate(-50%, -50%) rotate(-45deg);
24417
+ transform: translate(-50%, -50%) rotate(45deg);
24554
24418
  }
24555
24419
 
24556
24420
  &.k-callout-e {
24557
24421
  top: 50%;
24558
24422
  right: 0;
24559
- transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
24423
+ transform: translate(50%, -50%) rotate(-45deg);
24560
24424
  }
24561
24425
 
24562
24426
  &.k-callout-s {
24563
24427
  bottom: 0;
24564
24428
  left: 50%;
24565
- transform: translate(-50%, 50%) rotate(135deg);
24429
+ transform: translate(-50%, 50%) rotate(45deg);
24566
24430
  }
24567
24431
 
24568
24432
  &.k-callout-w {
24569
24433
  top: 50%;
24570
24434
  left: 0;
24571
- transform: translate(-50%, -50%) rotate(-135deg);
24435
+ transform: translate(-50%, -50%) rotate(45deg);
24572
24436
  }
24573
24437
  }
24574
24438
 
@@ -24592,6 +24456,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
24592
24456
  );
24593
24457
  }
24594
24458
 
24459
+ .k-popover-inner {
24460
+ background-color: inherit;
24461
+ border-color: inherit;
24462
+ }
24463
+
24595
24464
  // Header
24596
24465
  .k-popover-header {
24597
24466
  @include fill(
@@ -24604,14 +24473,11 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
24604
24473
  // Callout
24605
24474
  .k-popover-callout {
24606
24475
  @include fill(
24607
- $bg: $popover-callout-bg,
24608
- $border: $popover-callout-border
24476
+ $bg: inherit,
24477
+ $border: inherit
24609
24478
  );
24610
24479
 
24611
- &.k-callout-n { @include box-shadow( $popover-callout-shadow-n ); }
24612
- &.k-callout-e { @include box-shadow( $popover-callout-shadow-e ); }
24613
- &.k-callout-s { @include box-shadow( $popover-callout-shadow-s ); }
24614
- &.k-callout-w { @include box-shadow( $popover-callout-shadow-w ); }
24480
+ @include box-shadow( inherit )
24615
24481
  }
24616
24482
 
24617
24483
  }
@@ -24853,7 +24719,6 @@ $bottom-nav-flat-border: $component-border !default;
24853
24719
  outline: 0;
24854
24720
  }
24855
24721
  }
24856
- .k-bottom-nav-item.k-state-disabled,
24857
24722
  .k-bottom-nav-item.k-disabled {
24858
24723
  background-color: initial;
24859
24724
  }
@@ -24900,15 +24765,11 @@ $bottom-nav-flat-border: $component-border !default;
24900
24765
  $bg: $color
24901
24766
  );
24902
24767
 
24903
- .k-bottom-nav-item.k-state-focus,
24904
- .k-bottom-nav-item.k-focus,
24905
- .k-bottom-nav-item.k-state-focused,
24906
24768
  .k-bottom-nav-item.k-focus,
24907
24769
  .k-bottom-nav-item:focus {
24908
24770
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
24909
24771
  }
24910
24772
 
24911
- .k-bottom-nav-item.k-state-selected,
24912
24773
  .k-bottom-nav-item.k-selected {
24913
24774
  @include fill( $color: contrast-wcag( $color ) );
24914
24775
  }
@@ -24923,16 +24784,12 @@ $bottom-nav-flat-border: $component-border !default;
24923
24784
  $bottom-nav-flat-border
24924
24785
  );
24925
24786
 
24926
- .k-bottom-nav-item.k-state-focus,
24927
- .k-bottom-nav-item.k-focus,
24928
- .k-bottom-nav-item.k-state-focused,
24929
24787
  .k-bottom-nav-item.k-focus,
24930
24788
  .k-bottom-nav-item:focus {
24931
24789
  @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
24932
24790
  }
24933
24791
 
24934
24792
  @each $name, $color in $kendo-theme-colors {
24935
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
24936
24793
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
24937
24794
  @if $name == "secondary" or $name == "light" {
24938
24795
  @include fill( $color: try-shade($color, 3) );
@@ -25193,7 +25050,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
25193
25050
  );
25194
25051
 
25195
25052
  &:focus,
25196
- &.k-state-focused,
25197
25053
  &.k-focus {
25198
25054
  @include box-shadow( $breadcrumb-focused-shadow );
25199
25055
  }
@@ -25210,7 +25066,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
25210
25066
 
25211
25067
  // Hovered state
25212
25068
  &:hover,
25213
- &.k-state-hover,
25214
25069
  &.k-hover {
25215
25070
  @include fill(
25216
25071
  $breadcrumb-link-hovered-text,
@@ -25221,7 +25076,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
25221
25076
 
25222
25077
  // Focused state
25223
25078
  &:focus,
25224
- &.k-state-focused,
25225
25079
  &.k-focus {
25226
25080
  @include fill(
25227
25081
  $breadcrumb-link-focused-text,
@@ -25243,7 +25097,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
25243
25097
 
25244
25098
  // Hovered state
25245
25099
  &:hover,
25246
- &.k-state-hover,
25247
25100
  &.k-hover {
25248
25101
  @include fill(
25249
25102
  $breadcrumb-root-link-hovered-text,
@@ -25254,7 +25107,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
25254
25107
 
25255
25108
  // Focused state
25256
25109
  &:focus,
25257
- &.k-state-focused,
25258
25110
  &.k-focus {
25259
25111
  @include fill(
25260
25112
  $breadcrumb-root-link-focused-text,
@@ -25404,7 +25256,6 @@ $pager-dropdown-width: 5em !default;
25404
25256
 
25405
25257
  // Focused state
25406
25258
  &:focus,
25407
- &.k-state-focus,
25408
25259
  &.k-focus {
25409
25260
  z-index: 3;
25410
25261
  }
@@ -25413,6 +25264,10 @@ $pager-dropdown-width: 5em !default;
25413
25264
  .k-rtl &,
25414
25265
  &[dir="rtl"],
25415
25266
  [dir="rtl"] & {
25267
+ .k-i-caret-alt-to-left,
25268
+ .k-i-caret-alt-to-right,
25269
+ .k-i-caret-alt-left,
25270
+ .k-i-caret-alt-right,
25416
25271
  .k-i-arrow-end-left,
25417
25272
  .k-i-arrow-60-left,
25418
25273
  .k-i-arrow-60-right,
@@ -25454,7 +25309,6 @@ $pager-dropdown-width: 5em !default;
25454
25309
  &:hover {
25455
25310
  z-index: 2;
25456
25311
  }
25457
- &.k-state-disabled,
25458
25312
  &.k-disabled {
25459
25313
  color: inherit;
25460
25314
  }
@@ -25504,7 +25358,6 @@ $pager-dropdown-width: 5em !default;
25504
25358
  }
25505
25359
 
25506
25360
  // Selected state
25507
- .k-state-selected,
25508
25361
  .k-selected {
25509
25362
  cursor: inherit;
25510
25363
  z-index: 2;
@@ -25652,9 +25505,6 @@ $pager-dropdown-width: 5em !default;
25652
25505
  );
25653
25506
 
25654
25507
  &:focus,
25655
- &.k-focus,
25656
- &.k-state-focus,
25657
- &.k-state-focused,
25658
25508
  &.k-focus {
25659
25509
  @include fill( $bg: $pager-focus-bg );
25660
25510
  @include box-shadow( $pager-focus-shadow );
@@ -25670,7 +25520,6 @@ $pager-dropdown-width: 5em !default;
25670
25520
  );
25671
25521
 
25672
25522
  &:hover,
25673
- &.k-state-hover,
25674
25523
  &.k-hover {
25675
25524
  @include fill(
25676
25525
  $pager-item-hover-text,
@@ -25679,7 +25528,6 @@ $pager-dropdown-width: 5em !default;
25679
25528
  );
25680
25529
  }
25681
25530
 
25682
- &.k-state-selected,
25683
25531
  &.k-selected {
25684
25532
  @include fill(
25685
25533
  $pager-item-selected-text,
@@ -25689,7 +25537,6 @@ $pager-dropdown-width: 5em !default;
25689
25537
  }
25690
25538
 
25691
25539
  &:focus,
25692
- &.k-state-focus,
25693
25540
  &.k-focus {
25694
25541
  background-color: $pager-item-focus-bg;
25695
25542
  @include box-shadow( $pager-item-focus-shadow );
@@ -25713,7 +25560,6 @@ $pager-dropdown-width: 5em !default;
25713
25560
  );
25714
25561
 
25715
25562
  &:hover,
25716
- &.k-state-hover,
25717
25563
  &.k-hover {
25718
25564
  @include fill(
25719
25565
  $pager-number-hover-text,
@@ -25723,13 +25569,11 @@ $pager-dropdown-width: 5em !default;
25723
25569
  }
25724
25570
 
25725
25571
  &:focus,
25726
- &.k-state-focus,
25727
25572
  &.k-focus {
25728
25573
  background-color: $pager-number-focus-bg;
25729
25574
  @include box-shadow( $pager-number-focus-shadow );
25730
25575
  }
25731
25576
 
25732
- &.k-state-selected,
25733
25577
  &.k-selected {
25734
25578
  @include fill(
25735
25579
  $pager-number-selected-text,
@@ -25762,7 +25606,6 @@ $pager-dropdown-width: 5em !default;
25762
25606
  );
25763
25607
 
25764
25608
  &:hover,
25765
- &.k-state-hover,
25766
25609
  &.k-hover {
25767
25610
  @include fill(
25768
25611
  $dropdownlist-hovered-text,
@@ -25772,7 +25615,7 @@ $pager-dropdown-width: 5em !default;
25772
25615
  }
25773
25616
  }
25774
25617
 
25775
- &.k-state-expanded {
25618
+ &.k-expanded {
25776
25619
  @include fill(
25777
25620
  $popup-text,
25778
25621
  $popup-bg,
@@ -25783,7 +25626,6 @@ $pager-dropdown-width: 5em !default;
25783
25626
  .k-link {
25784
25627
 
25785
25628
  &:hover,
25786
- &.k-state-hover,
25787
25629
  &.k-hover {
25788
25630
  @include fill(
25789
25631
  $kendo-list-item-hover-text,
@@ -25791,7 +25633,6 @@ $pager-dropdown-width: 5em !default;
25791
25633
  );
25792
25634
  }
25793
25635
 
25794
- &.k-state-selected,
25795
25636
  &.k-selected {
25796
25637
  @include fill(
25797
25638
  $kendo-list-item-selected-text,
@@ -26394,7 +26235,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
26394
26235
  $bg: $stepper-progressbar-bg
26395
26236
  );
26396
26237
 
26397
- .k-state-selected,
26398
26238
  .k-selected {
26399
26239
  @include fill(
26400
26240
  $color: $stepper-progressbar-fill-text,
@@ -26645,13 +26485,11 @@ $tabstrip-content-border-focused: $component-text !default;
26645
26485
  position: relative;
26646
26486
  z-index: 1;
26647
26487
 
26648
- &.k-state-active,
26649
26488
  &.k-active {
26650
26489
  display: block;
26651
26490
  }
26652
26491
 
26653
26492
  &:focus,
26654
- &.k-state-focused,
26655
26493
  &.k-focus {
26656
26494
  outline-width: 1px;
26657
26495
  outline-style: dotted;
@@ -26740,7 +26578,6 @@ $tabstrip-content-border-focused: $component-text !default;
26740
26578
  margin-left: $tabstrip-item-gap;
26741
26579
  }
26742
26580
 
26743
- .k-item.k-state-active,
26744
26581
  .k-item.k-active {
26745
26582
  border-bottom-color: transparent;
26746
26583
  }
@@ -26770,7 +26607,6 @@ $tabstrip-content-border-focused: $component-text !default;
26770
26607
  margin-left: $tabstrip-item-gap;
26771
26608
  }
26772
26609
 
26773
- .k-item.k-state-active,
26774
26610
  .k-item.k-active {
26775
26611
  border-top-color: transparent;
26776
26612
  }
@@ -26804,7 +26640,6 @@ $tabstrip-content-border-focused: $component-text !default;
26804
26640
  margin-top: $tabstrip-item-gap;
26805
26641
  }
26806
26642
 
26807
- .k-item.k-state-active,
26808
26643
  .k-item.k-active {
26809
26644
  border-right-color: transparent;
26810
26645
  }
@@ -26840,7 +26675,6 @@ $tabstrip-content-border-focused: $component-text !default;
26840
26675
  margin-top: $tabstrip-item-gap;
26841
26676
  }
26842
26677
 
26843
- .k-item.k-state-active,
26844
26678
  .k-item.k-active {
26845
26679
  border-left-color: transparent;
26846
26680
  }
@@ -26886,7 +26720,6 @@ $tabstrip-content-border-focused: $component-text !default;
26886
26720
  border-left-width: $tabstrip-indicator-size;
26887
26721
  }
26888
26722
  }
26889
- .k-item.k-state-active::after,
26890
26723
  .k-item.k-active::after {
26891
26724
  display: block;
26892
26725
  }
@@ -26960,7 +26793,6 @@ $tabstrip-content-border-focused: $component-text !default;
26960
26793
  );
26961
26794
 
26962
26795
  &:hover,
26963
- &.k-state-hover,
26964
26796
  &.k-hover {
26965
26797
  @include fill(
26966
26798
  $tabstrip-item-hovered-text,
@@ -26971,9 +26803,7 @@ $tabstrip-content-border-focused: $component-text !default;
26971
26803
  }
26972
26804
 
26973
26805
  &:active,
26974
- &.k-state-active,
26975
26806
  &.k-active,
26976
- &.k-state-selected,
26977
26807
  &.k-selected {
26978
26808
  @include fill(
26979
26809
  $tabstrip-item-selected-text,
@@ -26984,7 +26814,6 @@ $tabstrip-content-border-focused: $component-text !default;
26984
26814
  }
26985
26815
 
26986
26816
  &:focus,
26987
- &.k-state-focused,
26988
26817
  &.k-focus {
26989
26818
  @include box-shadow( $tabstrip-item-focused-shadow );
26990
26819
  }
@@ -27007,7 +26836,6 @@ $tabstrip-content-border-focused: $component-text !default;
27007
26836
  );
27008
26837
 
27009
26838
  &:focus,
27010
- &.k-state-focused,
27011
26839
  &.k-focus {
27012
26840
  outline-color: $tabstrip-content-border-focused;
27013
26841
  }
@@ -27018,7 +26846,6 @@ $tabstrip-content-border-focused: $component-text !default;
27018
26846
  @if ($tabstrip-indicator-size) {
27019
26847
 
27020
26848
  .k-tabstrip-items-wrapper {
27021
- .k-item.k-state-active::after,
27022
26849
  .k-item.k-active::after {
27023
26850
  border-color: $tabstrip-indicator-color;
27024
26851
  }
@@ -27112,7 +26939,6 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
27112
26939
  justify-content: space-between;
27113
26940
 
27114
26941
  &:focus,
27115
- &.k-state-focused,
27116
26942
  &.k-focus {
27117
26943
  outline-width: 1px;
27118
26944
  outline-style: dotted;
@@ -27207,20 +27033,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
27207
27033
  // #region @import "_theme.scss"; -> packages/classic/scss/wizard/_theme.scss
27208
27034
  // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/wizard/_theme.scss
27209
27035
  @include exports("wizard/theme") {
27036
+
27210
27037
  .k-wizard-step {
27211
27038
  &:focus,
27212
- &.k-state-focused,
27213
27039
  &.k-focus {
27214
27040
  outline-color: $wizard-step-border-focused;
27215
27041
  }
27216
27042
 
27217
27043
  .k-ie &:focus,
27218
- .k-ie &.k-state-focused,
27219
27044
  .k-ie &.k-focus {
27220
27045
  @include box-shadow($wizard-focused-shadow);
27221
27046
  outline: none;
27222
27047
  }
27223
27048
  }
27049
+
27224
27050
  }
27225
27051
 
27226
27052
  // #endregion
@@ -27386,7 +27212,6 @@ $expander-content-padding-y: $padding-y * 4 !default;
27386
27212
  $expander-border
27387
27213
  );
27388
27214
 
27389
- &.k-state-focus,
27390
27215
  &.k-focus {
27391
27216
  box-shadow: $expander-focus-shadow;
27392
27217
  }
@@ -27401,13 +27226,10 @@ $expander-content-padding-y: $padding-y * 4 !default;
27401
27226
  outline: none;
27402
27227
 
27403
27228
  &:hover,
27404
- &.k-state-hover,
27405
27229
  &.k-hover {
27406
27230
  background-color: $expander-header-hover-bg;
27407
27231
  }
27408
27232
 
27409
- // Should be removed
27410
- &.k-state-focused,
27411
27233
  &.k-focus {
27412
27234
  background-color: $expander-header-focused-bg;
27413
27235
  box-shadow: $expander-header-focused-shadow;
@@ -27654,6 +27476,10 @@ $panelbar-header-expanded-gradient: null !default;
27654
27476
  }
27655
27477
  }
27656
27478
 
27479
+ // Panelbar item
27480
+ .k-panelbar-item {
27481
+ outline-style: none;
27482
+ }
27657
27483
 
27658
27484
  // Panelbar content
27659
27485
  .k-panelbar-content {
@@ -27755,7 +27581,6 @@ $panelbar-header-expanded-gradient: null !default;
27755
27581
  > .k-item,
27756
27582
  > .k-panelbar-header {
27757
27583
 
27758
- &.k-state-expanded.k-level-0 > .k-link,
27759
27584
  &.k-expanded.k-level-0 > .k-link {
27760
27585
  @include fill(
27761
27586
  $panelbar-header-expanded-text,
@@ -27782,7 +27607,6 @@ $panelbar-header-expanded-gradient: null !default;
27782
27607
 
27783
27608
  // Hover
27784
27609
  > .k-link:hover,
27785
- > .k-link.k-state-hover,
27786
27610
  > .k-link.k-hover {
27787
27611
  @include fill(
27788
27612
  $panelbar-header-hovered-text,
@@ -27794,9 +27618,6 @@ $panelbar-header-expanded-gradient: null !default;
27794
27618
 
27795
27619
  // Focus
27796
27620
  > .k-link:focus,
27797
- > .k-link.k-state-focus,
27798
- > .k-link.k-focus,
27799
- > .k-link.k-state-focused,
27800
27621
  > .k-link.k-focus {
27801
27622
  @include fill(
27802
27623
  $panelbar-header-focused-text,
@@ -27809,7 +27630,6 @@ $panelbar-header-expanded-gradient: null !default;
27809
27630
 
27810
27631
  // Focus & Hover
27811
27632
  > .k-link:focus:hover,
27812
- > .k-link.k-state-focus.k-state-hover,
27813
27633
  > .k-link.k-focus.k-hover {
27814
27634
  @include fill(
27815
27635
  $panelbar-header-hovered-focused-text,
@@ -27820,7 +27640,6 @@ $panelbar-header-expanded-gradient: null !default;
27820
27640
  }
27821
27641
 
27822
27642
  // Selected
27823
- > .k-link.k-state-selected,
27824
27643
  > .k-link.k-selected {
27825
27644
  @include fill(
27826
27645
  $panelbar-header-selected-text,
@@ -27836,9 +27655,7 @@ $panelbar-header-expanded-gradient: null !default;
27836
27655
  }
27837
27656
 
27838
27657
  // Selected Hover
27839
- > .k-link.k-state-selected:hover,
27840
27658
  > .k-link.k-selected:hover,
27841
- > .k-link.k-state-selected.k-state-hover,
27842
27659
  > .k-link.k-selected.k-hover {
27843
27660
  @include fill(
27844
27661
  $panelbar-header-selected-hovered-text,
@@ -27849,12 +27666,8 @@ $panelbar-header-expanded-gradient: null !default;
27849
27666
  }
27850
27667
 
27851
27668
  // Selected Focus
27852
- > .k-link.k-state-selected:focus,
27853
27669
  > .k-link.k-selected:focus,
27854
- > .k-link.k-state-selected.k-state-focus,
27855
- > .k-link.k-selected.k-focus,
27856
- > .k-link.k-state-selected.k-state-focused,
27857
- > .k-link.k-selected.k-focused {
27670
+ > .k-link.k-selected.k-focus {
27858
27671
  @include fill(
27859
27672
  $panelbar-header-selected-focused-text,
27860
27673
  $panelbar-header-selected-focused-bg,
@@ -27864,12 +27677,8 @@ $panelbar-header-expanded-gradient: null !default;
27864
27677
  }
27865
27678
 
27866
27679
  // Selected Focus & Hover
27867
- > .k-link.k-state-selected:hover:focus,
27868
27680
  > .k-link.k-selected:hover:focus,
27869
- > .k-link.k-state-selected.k-state-hover.k-state-focus,
27870
- > .k-link.k-selected.k-hover.k-state-focus,
27871
- > .k-link.k-state-selected.k-state-hover.k-state-focused,
27872
- > .k-link.k-selected.k-hover.k-state-focused {
27681
+ > .k-link.k-selected.k-hover.k-focus {
27873
27682
  @include fill(
27874
27683
  $panelbar-header-selected-hovered-focused-text,
27875
27684
  $panelbar-header-selected-hovered-focused-bg,
@@ -27886,10 +27695,8 @@ $panelbar-header-expanded-gradient: null !default;
27886
27695
 
27887
27696
  // Hover
27888
27697
  > .k-item > .k-link:hover,
27889
- > .k-item > .k-link.k-state-hover,
27890
27698
  > .k-item > .k-link.k-hover,
27891
27699
  > .k-panelbar-item > .k-link:hover,
27892
- > .k-panelbar-item > .k-link.k-state-hover,
27893
27700
  > .k-panelbar-item > .k-link.k-hover {
27894
27701
  @include fill(
27895
27702
  $panelbar-item-hovered-text,
@@ -27901,14 +27708,8 @@ $panelbar-header-expanded-gradient: null !default;
27901
27708
 
27902
27709
  // Focus
27903
27710
  > .k-item > .k-link:focus,
27904
- > .k-item > .k-link.k-state-focus,
27905
- > .k-item > .k-link.k-focus,
27906
- > .k-item > .k-link.k-state-focused,
27907
27711
  > .k-item > .k-link.k-focus,
27908
27712
  > .k-panelbar-item > .k-link:focus,
27909
- > .k-panelbar-item > .k-link.k-state-focus,
27910
- > .k-panelbar-item > .k-link.k-focus,
27911
- > .k-panelbar-item > .k-link.k-state-focused,
27912
27713
  > .k-panelbar-item > .k-link.k-focus {
27913
27714
  @include fill(
27914
27715
  $panelbar-item-focused-text,
@@ -27921,10 +27722,8 @@ $panelbar-header-expanded-gradient: null !default;
27921
27722
 
27922
27723
  // Focus & Hover
27923
27724
  > .k-item > .k-link:focus:hover,
27924
- > .k-item > .k-link.k-state-focus.k-state-hover,
27925
27725
  > .k-item > .k-link.k-focus.k-hover,
27926
27726
  > .k-panelbar-item > .k-link:focus:hover,
27927
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
27928
27727
  > .k-panelbar-item > .k-link.k-focus.k-hover {
27929
27728
  @include fill(
27930
27729
  $panelbar-item-hovered-focused-text,
@@ -27935,9 +27734,7 @@ $panelbar-header-expanded-gradient: null !default;
27935
27734
  }
27936
27735
 
27937
27736
  // Selected
27938
- > .k-item > .k-link.k-state-selected,
27939
27737
  > .k-item > .k-link.k-selected,
27940
- > .k-panelbar-item > .k-link.k-state-selected,
27941
27738
  > .k-panelbar-item > .k-link.k-selected {
27942
27739
  @include fill(
27943
27740
  $panelbar-item-selected-text,
@@ -27948,13 +27745,9 @@ $panelbar-header-expanded-gradient: null !default;
27948
27745
  }
27949
27746
 
27950
27747
  // Selected Hover
27951
- > .k-item > .k-link.k-state-selected:hover,
27952
27748
  > .k-item > .k-link.k-selected:hover,
27953
- > .k-item > .k-link.k-state-selected.k-state-hover,
27954
27749
  > .k-item > .k-link.k-selected.k-hover,
27955
- > .k-panelbar-item > .k-link.k-state-selected:hover,
27956
27750
  > .k-panelbar-item > .k-link.k-selected:hover,
27957
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
27958
27751
  > .k-panelbar-item > .k-link.k-selected.k-hover {
27959
27752
  @include fill(
27960
27753
  $panelbar-item-selected-hovered-text,
@@ -27965,18 +27758,10 @@ $panelbar-header-expanded-gradient: null !default;
27965
27758
  }
27966
27759
 
27967
27760
  // Selected Focus
27968
- > .k-item > .k-link.k-state-selected:focus,
27969
27761
  > .k-item > .k-link.k-selected:focus,
27970
- > .k-item > .k-link.k-state-selected.k-state-focus,
27971
27762
  > .k-item > .k-link.k-selected.k-focus,
27972
- > .k-item > .k-link.k-state-selected.k-state-focused,
27973
- > .k-item > .k-link.k-selected.k-focused,
27974
- > .k-panelbar-item > .k-link.k-state-selected:focus,
27975
27763
  > .k-panelbar-item > .k-link.k-selected:focus,
27976
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
27977
- > .k-panelbar-item > .k-link.k-selected.k-focus,
27978
- > .k-item > .k-link.k-state-selected.k-state-focused,
27979
- > .k-item > .k-link.k-selected.k-focused {
27764
+ > .k-panelbar-item > .k-link.k-selected.k-focus {
27980
27765
  @include fill(
27981
27766
  $panelbar-item-selected-focused-text,
27982
27767
  $panelbar-item-selected-focused-bg,
@@ -27986,18 +27771,10 @@ $panelbar-header-expanded-gradient: null !default;
27986
27771
  }
27987
27772
 
27988
27773
  // Selected Focus & Hover
27989
- > .k-item > .k-link.k-state-selected:focus:hover,
27990
27774
  > .k-item > .k-link.k-selected:focus:hover,
27991
- > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
27992
- > .k-item > .k-link.k-selected.k-focus.k-state-hover,
27993
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
27994
- > .k-item > .k-link.k-selected.k-focused.k-state-hover,
27995
- > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
27775
+ > .k-item > .k-link.k-selected.k-focus.k-hover,
27996
27776
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
27997
- > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
27998
- > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
27999
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
28000
- > .k-item > .k-link.k-selected.k-focused.k-state-hover {
27777
+ > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
28001
27778
  @include fill(
28002
27779
  $panelbar-item-selected-hovered-focused-text,
28003
27780
  $panelbar-item-selected-hovered-focused-bg,
@@ -28235,7 +28012,7 @@ $splitbar-selected-text: $selected-text !default;
28235
28012
 
28236
28013
  .k-pane,
28237
28014
  .k-pane-flex {
28238
- &.k-state-hidden,
28015
+ &.k-hidden,
28239
28016
  &[hidden] {
28240
28017
  // sass-lint:disable-block no-important
28241
28018
  // hidden panes need to be zero-width to allow pane animation
@@ -28284,7 +28061,6 @@ $splitbar-selected-text: $selected-text !default;
28284
28061
  background-color: $splitbar-bg;
28285
28062
  }
28286
28063
  .k-splitbar:hover,
28287
- .k-splitbar.k-state-hover,
28288
28064
  .k-splitbar.k-hover,
28289
28065
  .k-splitbar-horizontal-hover,
28290
28066
  .k-splitbar-vertical-hover {
@@ -28292,9 +28068,6 @@ $splitbar-selected-text: $selected-text !default;
28292
28068
  background-color: $splitbar-hover-bg;
28293
28069
  }
28294
28070
  .k-splitbar:focus,
28295
- .k-splitbar.k-state-focus,
28296
- .k-splitbar.k-focus,
28297
- .k-splitbar.k-state-focused,
28298
28071
  .k-splitbar.k-focus {
28299
28072
  color: $splitbar-selected-text;
28300
28073
  background: $splitbar-selected-bg;
@@ -28405,9 +28178,6 @@ $tilelayout-hint-border: $component-border !default;
28405
28178
  }
28406
28179
 
28407
28180
  .k-tilelayout-item:focus,
28408
- .k-tilelayout-item.k-focus,
28409
- .k-tilelayout-item.k-state-focus,
28410
- .k-tilelayout-item.k-state-focused,
28411
28181
  .k-tilelayout-item.k-focus {
28412
28182
  @include box-shadow($tilelayout-card-focus-shadow);
28413
28183
  }
@@ -28823,7 +28593,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28823
28593
  border-radius: 50%;
28824
28594
  }
28825
28595
 
28826
- .k-i-reload {
28596
+ .k-i-reload,
28597
+ .k-i-arrow-rotate-cw {
28827
28598
  font-size: 1em;
28828
28599
  margin-right: .5em;
28829
28600
  }
@@ -29086,12 +28857,10 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29086
28857
 
29087
28858
  .k-column-menu {
29088
28859
 
29089
- .k-listgroup-item.k-state-selected,
29090
28860
  .k-listgroup-item.k-selected {
29091
28861
  color: $adaptive-grid-sort-text;
29092
28862
  background: none;
29093
28863
  }
29094
- .k-listgroup-item.k-state-selected .k-link,
29095
28864
  .k-listgroup-item.k-selected .k-link {
29096
28865
  color: inherit;
29097
28866
  }
@@ -29837,7 +29606,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29837
29606
 
29838
29607
  .k-cell-inner > .k-link > .k-icon {
29839
29608
  &.k-i-sort-desc-sm,
29840
- &.k-i-sort-asc-sm {
29609
+ &.k-i-sort-asc-sm,
29610
+ &.k-i-sort-asc-small,
29611
+ &.k-i-sort-desc-small {
29841
29612
  vertical-align: text-top;
29842
29613
  margin-inline-start: $grid-sorted-icon-spacing;
29843
29614
  }
@@ -30716,33 +30487,28 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30716
30487
  }
30717
30488
 
30718
30489
  // Hover state
30719
- tbody>tr:not(.k-detail-row):hover,
30720
- tbody>tr:not(.k-detail-row).k-state-hover,
30721
- tbody>tr:not(.k-detail-row).k-hover {
30490
+ tbody > tr:not(.k-detail-row):hover,
30491
+ tbody > tr:not(.k-detail-row).k-hover {
30722
30492
  color: $grid-hovered-text;
30723
30493
  background-color: $grid-hovered-bg;
30724
30494
  }
30725
30495
 
30726
30496
  // Selected state
30727
- td.k-state-selected,
30728
30497
  td.k-selected,
30729
- tr.k-state-selected > td,
30730
30498
  tr.k-selected > td {
30731
30499
  color: $grid-selected-text;
30732
30500
  background-color: $grid-selected-bg;
30733
30501
  }
30734
30502
 
30735
30503
  // Focused state
30736
- td.k-state-focused,
30504
+ td:focus,
30737
30505
  td.k-focus,
30738
- th.k-state-focused,
30739
- th.k-focus,
30740
30506
  th:focus,
30507
+ th.k-focus,
30741
30508
  .k-master-row > td:focus,
30742
30509
  .k-grouping-row > td:focus,
30743
30510
  .k-detail-row > td:focus,
30744
30511
  .k-group-footer > td:focus,
30745
- .k-grid-pager.k-state-focused,
30746
30512
  .k-grid-pager.k-focus {
30747
30513
  box-shadow: $grid-focused-shadow;
30748
30514
  }
@@ -30786,20 +30552,16 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30786
30552
  }
30787
30553
 
30788
30554
  // Selected state
30789
- .k-state-selected td,
30790
30555
  .k-selected td {
30791
30556
  @include fill( $bg: $grid-sticky-selected-bg );
30792
30557
  }
30793
30558
 
30794
- .k-state-selected.k-alt td,
30795
30559
  .k-selected.k-alt td {
30796
30560
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30797
30561
  }
30798
30562
 
30799
30563
  // Selected hover
30800
- .k-state-selected:hover td,
30801
30564
  .k-selected:hover td,
30802
- .k-state-selected.k-state-hover td,
30803
30565
  .k-selected.k-hover td {
30804
30566
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
30805
30567
  }
@@ -30828,6 +30590,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30828
30590
 
30829
30591
  .k-i-sort-asc-sm,
30830
30592
  .k-i-sort-desc-sm,
30593
+ .k-i-sort-asc-small,
30594
+ .k-i-sort-desc-small,
30831
30595
  .k-sort-order {
30832
30596
  color: $grid-sorting-indicator-text;
30833
30597
  }
@@ -30841,12 +30605,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30841
30605
  background-color: $kendo-button-hover-bg;
30842
30606
  }
30843
30607
  &:focus,
30844
- &.k-state-focus,
30845
- &.k-focus,
30846
- &.k-state-border-down {
30608
+ &.k-focus {
30847
30609
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
30848
30610
  }
30849
- &.k-state-active,
30850
30611
  &.k-active {
30851
30612
  color: $selected-text;
30852
30613
  background-color: $selected-bg;
@@ -30902,20 +30663,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30902
30663
  }
30903
30664
 
30904
30665
  // Selected state
30905
- &.k-state-selected .k-grid-content-sticky,
30906
30666
  &.k-selected .k-grid-content-sticky,
30907
- &.k-state-selected .k-grid-row-sticky,
30908
30667
  &.k-selected .k-grid-row-sticky,
30909
- td.k-grid-content-sticky.k-state-selected,
30910
30668
  td.k-grid-content-sticky.k-selected {
30911
30669
  @include fill( $bg: $grid-sticky-selected-bg );
30912
30670
  }
30913
30671
 
30914
- &.k-state-selected.k-alt .k-grid-content-sticky,
30915
30672
  &.k-selected.k-alt .k-grid-content-sticky,
30916
- &.k-state-selected.k-alt .k-grid-row-sticky,
30917
30673
  &.k-selected.k-alt .k-grid-row-sticky,
30918
- &.k-alt td.k-grid-content-sticky.k-state-selected,
30919
30674
  &.k-alt td.k-grid-content-sticky.k-selected {
30920
30675
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30921
30676
  }
@@ -30924,26 +30679,18 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30924
30679
  // Hovered state
30925
30680
  &:hover .k-grid-content-sticky,
30926
30681
  &:hover .k-grid-row-sticky,
30927
- &.k-state-hover .k-grid-content-sticky,
30928
30682
  &.k-hover .k-grid-content-sticky,
30929
- &.k-state-hover .k-grid-row-sticky,
30930
30683
  &.k-hover .k-grid-row-sticky {
30931
30684
  background-color: $grid-sticky-hovered-bg;
30932
30685
  }
30933
30686
 
30934
30687
 
30935
30688
  // Selected hover
30936
- &.k-state-selected:hover .k-grid-content-sticky,
30937
30689
  &.k-selected:hover .k-grid-content-sticky,
30938
- &.k-state-selected:hover .k-grid-row-sticky,
30939
30690
  &.k-selected:hover .k-grid-row-sticky,
30940
- &.k-state-selected.k-state-hover .k-grid-content-sticky,
30941
30691
  &.k-selected.k-hover .k-grid-content-sticky,
30942
- &.k-state-selected.k-state-hover .k-grid-row-sticky,
30943
30692
  &.k-selected.k-hover .k-grid-row-sticky,
30944
- &:hover td.k-grid-content-sticky.k-state-selected,
30945
30693
  &:hover td.k-grid-content-sticky.k-selected,
30946
- &.k-state-hover td.k-grid-content-sticky.k-state-selected,
30947
30694
  &.k-hover td.k-grid-content-sticky.k-selected {
30948
30695
  background-color: $grid-sticky-selected-hovered-bg;
30949
30696
  }
@@ -30957,7 +30704,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30957
30704
  background-color: $grid-sticky-bg;
30958
30705
 
30959
30706
  &:hover,
30960
- &.k-state-hover,
30961
30707
  &.k-hover {
30962
30708
  background-color: $grid-sticky-hovered-bg;
30963
30709
  }
@@ -30971,7 +30717,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30971
30717
  }
30972
30718
 
30973
30719
  &:hover td,
30974
- &.k-state-hover td,
30975
30720
  &.k-hover td {
30976
30721
  background-color: $grid-sticky-hovered-bg;
30977
30722
  }
@@ -30983,66 +30728,43 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30983
30728
  }
30984
30729
 
30985
30730
  // Selected state
30986
- tr.k-state-selected .k-grid-content-sticky,
30987
30731
  tr.k-selected .k-grid-content-sticky,
30988
- .k-state-selected.k-grid-row-sticky td,
30989
30732
  .k-selected.k-grid-row-sticky td,
30990
- .k-grid-row-sticky td.k-state-selected,
30991
30733
  .k-grid-row-sticky td.k-selected,
30992
- .k-state-selected.k-grid-content-sticky,
30993
30734
  .k-selected.k-grid-content-sticky {
30994
30735
  @include fill( $bg: $grid-sticky-selected-bg );
30995
30736
  }
30996
30737
 
30997
- tr.k-state-selected.k-alt .k-grid-content-sticky,
30998
30738
  tr.k-selected.k-alt .k-grid-content-sticky,
30999
- .k-state-selected.k-alt.k-grid-row-sticky td,
31000
30739
  .k-selected.k-alt.k-grid-row-sticky td,
31001
- .k-alt .k-state-selected.k-grid-content-sticky,
31002
30740
  .k-alt .k-selected.k-grid-content-sticky {
31003
30741
  @include fill( $bg: $grid-sticky-selected-alt-bg );
31004
30742
  }
31005
30743
 
31006
30744
  // Hover state
31007
30745
  tr:hover .k-grid-content-sticky,
31008
- tr.k-state-hover .k-grid-content-sticky,
31009
30746
  tr.k-hover .k-grid-content-sticky,
31010
30747
  .k-grid-row-sticky:hover td,
31011
- .k-grid-row-sticky.k-state-hover td,
31012
30748
  .k-grid-row-sticky.k-hover td,
31013
30749
  .k-grid-row-sticky.k-alt:hover td,
31014
- .k-grid-row-sticky.k-alt.k-state-hover td,
31015
30750
  .k-grid-row-sticky.k-alt.k-hover td,
31016
30751
  .k-alt:hover .k-grid-content-sticky,
31017
- .k-alt.k-state-hover .k-grid-content-sticky,
31018
30752
  .k-alt.k-hover .k-grid-content-sticky {
31019
30753
  background-color: $grid-sticky-hovered-bg;
31020
30754
  }
31021
30755
 
31022
30756
  // Selected + Hover
31023
- tr.k-state-selected:hover .k-grid-content-sticky,
31024
30757
  tr.k-selected:hover .k-grid-content-sticky,
31025
- tr.k-state-selected.k-state-hover .k-grid-content-sticky,
31026
30758
  tr.k-selected.k-hover .k-grid-content-sticky,
31027
- .k-state-selected.k-grid-row-sticky:hover td,
31028
30759
  .k-selected.k-grid-row-sticky:hover td,
31029
- .k-state-selected.k-grid-row-sticky.k-state-hover td,
31030
30760
  .k-selected.k-grid-row-sticky.k-hover td,
31031
- .k-state-selected.k-alt.k-grid-row-sticky:hover td,
31032
30761
  .k-selected.k-alt.k-grid-row-sticky:hover td,
31033
- .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
31034
30762
  .k-selected.k-alt.k-grid-row-sticky.k-hover td,
31035
- tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
31036
30763
  tr.k-selected.k-alt:hover .k-grid-content-sticky,
31037
- tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
31038
30764
  tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
31039
- .k-grid-row-sticky:hover td.k-state-selected,
31040
30765
  .k-grid-row-sticky:hover td.k-selected,
31041
- .k-grid-row-sticky.k-state-hover td.k-state-selected,
31042
30766
  .k-grid-row-sticky.k-hover td.k-selected,
31043
- tr:hover .k-grid-content-sticky.k-state-selected,
31044
30767
  tr:hover .k-grid-content-sticky.k-selected,
31045
- tr.k-state-hover .k-grid-content-sticky.k-state-selected,
31046
30768
  tr.k-hover .k-grid-content-sticky.k-selected {
31047
30769
  background-color: $grid-sticky-selected-hovered-bg;
31048
30770
  }
@@ -31054,7 +30776,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31054
30776
  }
31055
30777
 
31056
30778
  &:hover .k-grid-content-sticky,
31057
- &.k-state-hover .k-grid-content-sticky,
31058
30779
  &.k-hover .k-grid-content-sticky {
31059
30780
  @include fill( $bg: $grid-sticky-hovered-bg );
31060
30781
  }
@@ -31068,13 +30789,11 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31068
30789
  );
31069
30790
  }
31070
30791
  .k-columnmenu-item:focus,
31071
- .k-columnmenu-item.k-state-focus,
31072
30792
  .k-columnmenu-item.k-focus {
31073
30793
  @include box-shadow( $kendo-list-item-focus-shadow );
31074
30794
  }
31075
30795
 
31076
30796
  .k-columnmenu-item {
31077
- &.k-state-selected,
31078
30797
  &.k-selected {
31079
30798
  @include fill(
31080
30799
  $kendo-list-item-selected-text,
@@ -31100,7 +30819,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31100
30819
  );
31101
30820
 
31102
30821
  &:hover,
31103
- &.k-state-hover,
31104
30822
  &.k-hover {
31105
30823
  @include fill(
31106
30824
  $kendo-list-item-hover-text,
@@ -31108,7 +30826,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31108
30826
  );
31109
30827
  }
31110
30828
 
31111
- &.k-state-selected,
31112
30829
  &.k-selected {
31113
30830
  @include fill(
31114
30831
  $kendo-list-item-selected-text,
@@ -31117,7 +30834,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31117
30834
  }
31118
30835
 
31119
30836
  &:focus,
31120
- &.k-state-focused,
31121
30837
  &.k-focus {
31122
30838
  @include box-shadow( $kendo-list-item-focus-shadow );
31123
30839
  }
@@ -31359,7 +31075,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31359
31075
  // Listview content
31360
31076
  .k-listview-content {
31361
31077
 
31362
- > .k-state-focused,
31363
31078
  > .k-focus {
31364
31079
  @include fill(
31365
31080
  $listview-item-focus-text,
@@ -31369,7 +31084,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31369
31084
  @include box-shadow( $listview-item-focus-shadow );
31370
31085
  }
31371
31086
 
31372
- > .k-state-selected,
31373
31087
  > .k-selected {
31374
31088
  @include fill(
31375
31089
  $listview-item-selected-text,
@@ -31581,7 +31295,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31581
31295
  [data-tool="merge"],
31582
31296
  [data-tool="freeze"] {
31583
31297
  width: auto;
31584
- min-width: $form-line-height * 1em;
31298
+ min-width: calc( #{$form-line-height} * 1em );
31585
31299
  }
31586
31300
 
31587
31301
  .k-color-picker {
@@ -31750,7 +31464,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31750
31464
  overflow: hidden;
31751
31465
 
31752
31466
  // disabled cells in the Spreadsheet should allow navigation if link is used
31753
- .k-state-disabled,
31754
31467
  .k-disabled {
31755
31468
  pointer-events: auto;
31756
31469
  }
@@ -32312,7 +32025,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32312
32025
  background-position: 50% 50%;
32313
32026
 
32314
32027
  &:hover div,
32315
- &.k-state-hovered div,
32316
32028
  &.k-hover div {
32317
32029
  margin: 0;
32318
32030
  align-self: center;
@@ -32378,7 +32090,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32378
32090
  .k-spreadsheet-insert-image-dialog {
32379
32091
  .k-spreadsheet-has-image {
32380
32092
  &:hover,
32381
- &.k-state-hovered,
32382
32093
  &.k-hover {
32383
32094
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
32384
32095
  }
@@ -32558,7 +32269,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32558
32269
  );
32559
32270
  }
32560
32271
 
32561
- &.k-state-active,
32562
32272
  &.k-active {
32563
32273
  @include fill(
32564
32274
  $kendo-button-active-text,
@@ -32576,7 +32286,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32576
32286
  > .k-menu,
32577
32287
  > .k-menu:not(.k-context-menu) {
32578
32288
 
32579
- .k-item.k-state-hover,
32289
+ .k-item:hover,
32580
32290
  .k-item.k-hover {
32581
32291
  @include fill(
32582
32292
  $kendo-list-item-hover-text,
@@ -32607,7 +32317,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32607
32317
  .k-button {}
32608
32318
 
32609
32319
  .k-button:hover,
32610
- .k-button.k-state-hover,
32611
32320
  .k-button.k-hover {
32612
32321
  @include fill(
32613
32322
  $kendo-list-item-hover-text,
@@ -32615,9 +32324,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32615
32324
  );
32616
32325
  }
32617
32326
  .k-button:active,
32618
- .k-button.k-state-active,
32619
32327
  .k-button.k-active,
32620
- .k-button.k-state-selected,
32621
32328
  .k-button.k-selected {
32622
32329
  @include fill(
32623
32330
  $kendo-list-item-selected-text,
@@ -32639,13 +32346,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32639
32346
 
32640
32347
  .k-spreadsheet-has-image {
32641
32348
  &:hover,
32642
- &.k-state-hovered,
32643
32349
  &.k-hover {
32644
32350
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
32645
32351
  }
32646
32352
 
32647
32353
  &:hover div,
32648
- &.k-state-hovered div,
32649
32354
  &.k-hover div {
32650
32355
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
32651
32356
  }
@@ -33606,15 +33311,12 @@ $pivotgrid-remove-text: null !default;
33606
33311
 
33607
33312
 
33608
33313
  // Hover state
33609
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
33610
- .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
33611
33314
  .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
33612
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
33613
- .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
33315
+ .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
33614
33316
  .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
33615
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
33616
- .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
33617
- .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
33317
+ .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
33318
+ .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
33319
+ .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
33618
33320
  @include fill (
33619
33321
  $pivotgrid-hover-text,
33620
33322
  $pivotgrid-hover-bg,
@@ -33623,9 +33325,10 @@ $pivotgrid-remove-text: null !default;
33623
33325
  }
33624
33326
 
33625
33327
  // Focus state
33626
- .k-pivotgrid-cell.k-state-focus,
33627
- .k-pivotgrid-cell.k-focus,
33628
33328
  .k-pivotgrid-cell:focus,
33329
+ .k-pivotgrid-cell.k-focus,
33330
+ .k-pivotgrid-empty-cell:focus,
33331
+ .k-pivotgrid-empty-cell.k-focus,
33629
33332
  .k-master-row > .k-pivotgrid-cell:focus,
33630
33333
  .k-grouping-row > .k-pivotgrid-cell:focus,
33631
33334
  .k-detail-row > .k-pivotgrid-cell:focus,
@@ -33634,9 +33337,7 @@ $pivotgrid-remove-text: null !default;
33634
33337
  }
33635
33338
 
33636
33339
  // Selected state
33637
- .k-pivotgrid-cell.k-state-selected,
33638
33340
  .k-pivotgrid-cell.k-selected,
33639
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
33640
33341
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
33641
33342
  @include fill (
33642
33343
  $pivotgrid-selected-text,
@@ -33868,7 +33569,6 @@ $treelist-footer-row-border-width: 1px !default;
33868
33569
  }
33869
33570
 
33870
33571
  .k-treelist-dragging,
33871
- .k-treelist-dragging .k-state-hover,
33872
33572
  .k-treelist-dragging .k-hover {
33873
33573
  cursor: default;
33874
33574
  }
@@ -34599,7 +34299,6 @@ $filemanager-preview-icon-border: null !default;
34599
34299
  );
34600
34300
  }
34601
34301
 
34602
- &.k-state-selected .k-file-icon,
34603
34302
  &.k-selected .k-file-icon {
34604
34303
  @include fill(
34605
34304
  inherit,
@@ -34968,10 +34667,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
34968
34667
 
34969
34668
  &:focus,
34970
34669
  &.k-focus,
34971
- &.k-state-focus,
34972
34670
  &:hover,
34973
- &.k-hover,
34974
- &.k-state-hover {
34671
+ &.k-hover {
34975
34672
  text-decoration: underline;
34976
34673
  }
34977
34674
  }
@@ -35063,7 +34760,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
35063
34760
  );
35064
34761
  }
35065
34762
  .k-taskboard-column:focus,
35066
- .k-taskboard-column.k-state-focus,
35067
34763
  .k-taskboard-column.k-focus {
35068
34764
  @include fill(
35069
34765
  $taskboard-column-focus-text,
@@ -35102,39 +34798,33 @@ $taskboard-drag-placeholder-border: $component-border !default;
35102
34798
  @include fill( $color: $taskboard-card-header-text );
35103
34799
 
35104
34800
  &:focus,
35105
- &.k-focus,
35106
- &.k-state-focus {
34801
+ &.k-focus {
35107
34802
  @include fill( $color: $taskboard-card-header-focus-text );
35108
34803
  }
35109
34804
 
35110
34805
  &:hover,
35111
- &.k-hover,
35112
- &.k-state-hover {
34806
+ &.k-hover {
35113
34807
  @include fill( $color: $taskboard-card-header-hover-text );
35114
34808
  }
35115
34809
  }
35116
34810
 
35117
34811
  &:focus,
35118
- &.k-focus,
35119
- &.k-state-focus {
34812
+ &.k-focus {
35120
34813
  @include fill( $border: $taskboard-card-focus-border );
35121
34814
  @include box-shadow( $taskboard-card-focus-shadow );
35122
34815
  }
35123
34816
 
35124
34817
  &:hover,
35125
- &.k-hover,
35126
- &.k-state-hover {
34818
+ &.k-hover {
35127
34819
  @include fill( $border: $taskboard-card-hover-border );
35128
34820
  }
35129
34821
 
35130
- &.k-selected,
35131
- &.k-state-selected {
34822
+ &.k-selected {
35132
34823
  @include fill( $border: $taskboard-card-selected-border );
35133
34824
  @include box-shadow( $taskboard-card-selected-shadow );
35134
34825
  }
35135
34826
 
35136
- &.k-disabled,
35137
- &.k-state-disabled {
34827
+ &.k-disabled {
35138
34828
  @include disabled( $disabled-styling );
35139
34829
  }
35140
34830
  }
@@ -35266,7 +34956,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35266
34956
  pointer-events: auto;
35267
34957
  }
35268
34958
 
35269
- .k-editor-content.k-state-focused,
35270
34959
  .k-editor-content.k-focus {
35271
34960
  outline-width: 1px;
35272
34961
  outline-style: dashed;
@@ -35522,7 +35211,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35522
35211
  border-bottom-color: inherit;
35523
35212
  cursor: se-resize;
35524
35213
 
35525
- .k-i-arrow-45-down-right {
35214
+ .k-i-arrow-45-down-right,
35215
+ .k-i-caret-br {
35526
35216
  display: none;
35527
35217
  }
35528
35218
  }
@@ -35720,7 +35410,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35720
35410
  display: block;
35721
35411
  margin: auto;
35722
35412
 
35723
- &.k-state-selected,
35724
35413
  &.k-selected {
35725
35414
  color: inherit;
35726
35415
  border-width: 0;
@@ -35943,7 +35632,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35943
35632
 
35944
35633
  kendo-editor {
35945
35634
  &.k-readonly {
35946
- .k-editor-content.k-state-focused,
35947
35635
  .k-editor-content.k-focus {
35948
35636
  outline-color: $body-text;
35949
35637
  }
@@ -35981,7 +35669,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35981
35669
 
35982
35670
  // Hover & Actve state
35983
35671
  &:hover,
35984
- &.k-state-active,
35672
+ &.k-active,
35985
35673
  &.k-active {
35986
35674
  border-color: $panel-border;
35987
35675
  }
@@ -35999,7 +35687,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35999
35687
 
36000
35688
  // Insert table
36001
35689
  .k-ct-popup {
36002
- .k-state-selected,
36003
35690
  .k-selected {
36004
35691
  @include fill( $selected-text, $selected-bg, $selected-border, none );
36005
35692
  }
@@ -36512,7 +36199,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36512
36199
  }
36513
36200
 
36514
36201
  &.k-gantt-planned .k-grid-content tr {
36515
- height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
36202
+ height: calc( #{$line-height-em} * 1.7 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
36516
36203
  }
36517
36204
 
36518
36205
  // Layout
@@ -36557,7 +36244,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36557
36244
  }
36558
36245
  }
36559
36246
 
36560
- tr.k-state-selected > td:last-child,
36561
36247
  tr.k-selected > td:last-child {
36562
36248
  background: transparent;
36563
36249
  }
@@ -36736,7 +36422,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36736
36422
  padding: 0 !important; // sass-lint:disable-line no-important
36737
36423
  }
36738
36424
  .k-grid-header tr {
36739
- height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
36425
+ height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
36740
36426
  vertical-align: bottom;
36741
36427
  }
36742
36428
  .k-grid-content {
@@ -36827,7 +36513,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36827
36513
  border-color: currentColor;
36828
36514
  position: absolute;
36829
36515
  }
36830
- .k-gantt-line.k-state-selected,
36831
36516
  .k-gantt-line.k-selected {
36832
36517
  z-index: 3;
36833
36518
  }
@@ -36901,7 +36586,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36901
36586
  transform: translate(-50%, -50%);
36902
36587
  }
36903
36588
  .k-task-dot:hover::before,
36904
- .k-task-dot.k-state-hover::before,
36905
36589
  .k-task-dot.k-hover::before {
36906
36590
  border-width: 1px;
36907
36591
  }
@@ -37375,7 +37059,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37375
37059
  $border: $gantt-milestone-border
37376
37060
  );
37377
37061
  }
37378
- .k-task-milestone.k-state-selected .k-task-milestone-content,
37379
37062
  .k-task-milestone.k-selected .k-task-milestone-content {
37380
37063
  @include fill(
37381
37064
  $bg: $gantt-milestone-selected-bg,
@@ -37390,7 +37073,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37390
37073
  stroke: $gantt-line-fill;
37391
37074
  }
37392
37075
 
37393
- polyline.k-state-selected,
37394
37076
  polyline.k-selected {
37395
37077
  stroke: $gantt-line-selected-fill;
37396
37078
  }
@@ -37444,7 +37126,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37444
37126
  );
37445
37127
  }
37446
37128
  .k-task-dot:hover::before,
37447
- .k-task-dot.k-state-hover::before,
37448
37129
  .k-task-dot.k-hover::before {
37449
37130
  @include fill(
37450
37131
  $bg: $gantt-dot-hover-bg,
@@ -37470,7 +37151,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37470
37151
  );
37471
37152
  }
37472
37153
  }
37473
- .k-task-milestone.k-state-selected,
37474
37154
  .k-task-milestone.k-selected {
37475
37155
  background-image: none;
37476
37156
  @include fill(
@@ -37501,7 +37181,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37501
37181
  .k-task-advanced .k-task-summary-complete {
37502
37182
  color: $gantt-advanced-bg;
37503
37183
  }
37504
- .k-task-summary.k-state-selected,
37505
37184
  .k-task-summary.k-selected {
37506
37185
  color: $gantt-summary-selected-bg;
37507
37186
 
@@ -37545,7 +37224,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37545
37224
  $bg: $gantt-advanced-bg
37546
37225
  );
37547
37226
  }
37548
- .k-task-single.k-state-selected,
37549
37227
  .k-task-single.k-selected {
37550
37228
  @include fill(
37551
37229
  $gantt-task-selected-text,
@@ -37562,7 +37240,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37562
37240
  .k-gantt-line {
37563
37241
  color: $gantt-line-fill;
37564
37242
  }
37565
- .k-gantt-line.k-state-selected,
37566
37243
  .k-gantt-line.k-selected {
37567
37244
  color: $gantt-line-selected-fill;
37568
37245
  }
@@ -38221,7 +37898,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38221
37898
  }
38222
37899
 
38223
37900
  &:hover,
38224
- &.k-state-hover,
38225
37901
  &.k-hover {
38226
37902
  .k-event-delete {
38227
37903
  opacity: 1;
@@ -38287,7 +37963,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38287
37963
 
38288
37964
  // Hover
38289
37965
  &:hover,
38290
- &.k-state-hover,
38291
37966
  &.k-hover {
38292
37967
  .k-event-actions .k-event-delete,
38293
37968
  .k-resize-handle {
@@ -38545,11 +38220,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38545
38220
  opacity: .5;
38546
38221
  visibility: hidden;
38547
38222
  }
38548
- .k-state-hover .k-task > .k-event-delete,
38549
38223
  .k-hover .k-task > .k-event-delete,
38550
38224
  .k-scheduler-content tr:hover .k-event-delete,
38551
38225
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
38552
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
38553
38226
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
38554
38227
  visibility: visible;
38555
38228
  }
@@ -38623,7 +38296,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38623
38296
  position: relative;
38624
38297
  }
38625
38298
 
38626
- td.k-state-selected,
38627
38299
  td.k-selected {
38628
38300
  background-color: inherit;
38629
38301
  }
@@ -38832,6 +38504,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38832
38504
 
38833
38505
  .k-scheduler,
38834
38506
  &.k-scheduler {
38507
+ .k-i-caret-alt-left,
38508
+ .k-i-caret-alt-right,
38835
38509
  .k-i-arrow-60-left,
38836
38510
  .k-i-arrow-60-right,
38837
38511
  .k-current-time-arrow-right {
@@ -38971,9 +38645,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38971
38645
  );
38972
38646
  }
38973
38647
 
38974
- .k-scheduler-layout td.k-state-selected,
38975
38648
  .k-scheduler-layout td.k-selected,
38976
- .k-scheduler-layout .k-scheduler-cell.k-state-selected,
38977
38649
  .k-scheduler-layout .k-scheduler-cell.k-selected {
38978
38650
  background-color: rgba($selected-bg, .25);
38979
38651
  }
@@ -38996,7 +38668,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38996
38668
  );
38997
38669
  @include box-shadow( $scheduler-event-shadow );
38998
38670
 
38999
- &.k-state-hover,
38671
+ &:hover,
39000
38672
  &.k-hover {
39001
38673
  @include fill(
39002
38674
  $scheduler-event-hover-text,
@@ -39007,7 +38679,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39007
38679
  @include box-shadow( $scheduler-event-hover-shadow );
39008
38680
  }
39009
38681
 
39010
- &.k-state-selected,
39011
38682
  &.k-selected {
39012
38683
  @include fill(
39013
38684
  $scheduler-event-selected-text,
@@ -39074,10 +38745,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39074
38745
 
39075
38746
  // Hover
39076
38747
  .k-scheduler-content tr:hover,
39077
- .k-scheduler-content tr.k-state-hover,
39078
38748
  .k-scheduler-content tr.k-hover,
39079
38749
  .k-scheduler-content .k-scheduler-row:hover,
39080
- .k-scheduler-content .k-scheduler-row.k-state-hover,
39081
38750
  .k-scheduler-content .k-scheduler-row.k-hover {
39082
38751
  @include fill(
39083
38752
  $hovered-text,
@@ -39089,9 +38758,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39089
38758
 
39090
38759
  .k-scheduler-content tr:hover .k-scheduler-datecolumn,
39091
38760
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
39092
- .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
39093
38761
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
39094
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
39095
38762
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
39096
38763
  @include fill(
39097
38764
  $scheduler-text,
@@ -39101,13 +38768,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39101
38768
  }
39102
38769
 
39103
38770
  // Selected
39104
- .k-scheduler-content tr.k-state-selected,
39105
38771
  .k-scheduler-content tr.k-selected {
39106
38772
  background-color: rgba($selected-bg, .25);
39107
38773
  }
39108
- .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
39109
38774
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
39110
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
39111
38775
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
39112
38776
  background-color: $scheduler-bg;
39113
38777
  }
@@ -39125,7 +38789,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39125
38789
  @include fill( $bg: $scheduler-yearview-indicator-bg );
39126
38790
  }
39127
38791
 
39128
- .k-state-selected .k-day-indicator,
39129
38792
  .k-selected .k-day-indicator {
39130
38793
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
39131
38794
  }
@@ -39429,7 +39092,6 @@ $chat-quick-reply-hover-border: $primary !default;
39429
39092
 
39430
39093
 
39431
39094
  // Message states
39432
- .k-message.k-state-selected,
39433
39095
  .k-message.k-selected {
39434
39096
  margin-bottom: $chat-item-spacing-y;
39435
39097
  border: 0;
@@ -39558,7 +39220,6 @@ $chat-quick-reply-hover-border: $primary !default;
39558
39220
  align-items: center;
39559
39221
 
39560
39222
  &:focus,
39561
- &.k-state-focus,
39562
39223
  &.k-focus,
39563
39224
  &:focus-within {
39564
39225
  outline: 0;
@@ -39639,7 +39300,6 @@ $chat-quick-reply-hover-border: $primary !default;
39639
39300
  flex: 0 0 auto;
39640
39301
  }
39641
39302
 
39642
- &.k-state-selected,
39643
39303
  &.k-selected {
39644
39304
  background: none;
39645
39305
  }
@@ -39876,7 +39536,6 @@ $chat-quick-reply-hover-border: $primary !default;
39876
39536
  .k-bubble:hover {
39877
39537
  @include box-shadow( $chat-bubble-hover-shadow );
39878
39538
  }
39879
- .k-state-selected .k-bubble,
39880
39539
  .k-selected .k-bubble {
39881
39540
  @include box-shadow( $chat-bubble-selected-shadow );
39882
39541
  }
@@ -39892,7 +39551,6 @@ $chat-quick-reply-hover-border: $primary !default;
39892
39551
  .k-alt .k-bubble:hover {
39893
39552
  @include box-shadow( $chat-alt-bubble-hover-shadow );
39894
39553
  }
39895
- .k-alt .k-state-selected .k-bubble,
39896
39554
  .k-alt .k-selected .k-bubble {
39897
39555
  @include box-shadow( $chat-alt-bubble-selected-shadow );
39898
39556
  }
@@ -40691,7 +40349,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40691
40349
  color: $body-text;
40692
40350
  }
40693
40351
 
40694
- .k-timeline-arrow.k-state-disabled,
40695
40352
  .k-timeline-arrow.k-disabled {
40696
40353
  opacity: 1; // The arrow button in disabled mode should have a solid background
40697
40354
  color: $timeline-track-arrow-disabled-text;
@@ -40712,7 +40369,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40712
40369
  background-color: $timeline-flag-bg;
40713
40370
  }
40714
40371
 
40715
- .k-timeline-track-item.k-state-focus .k-timeline-circle,
40716
40372
  .k-timeline-track-item.k-focus .k-timeline-circle {
40717
40373
  @include box-shadow( $timeline-track-item-focus-shadow );
40718
40374
  }
@@ -40733,6 +40389,9 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40733
40389
  // #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
40734
40390
  // File already imported_once. Skipping output.
40735
40391
  // #endregion
40392
+ // #region @import "../button/_variables.scss"; -> packages/classic/scss/button/_variables.scss
40393
+ // File already imported_once. Skipping output.
40394
+ // #endregion
40736
40395
  // #region @import "../combobox/_index.scss"; -> packages/classic/scss/combobox/_index.scss
40737
40396
  // File already imported_once. Skipping output.
40738
40397
  // #endregion
@@ -40748,6 +40407,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40748
40407
  // #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
40749
40408
  // File already imported_once. Skipping output.
40750
40409
  // #endregion
40410
+ // #region @import "../dropzone/_index.scss"; -> packages/classic/scss/dropzone/_index.scss
40411
+ // File already imported_once. Skipping output.
40412
+ // #endregion
40413
+ // #region @import "../window/_index.scss"; -> packages/classic/scss/window/_index.scss
40414
+ // File already imported_once. Skipping output.
40415
+ // #endregion
40751
40416
 
40752
40417
 
40753
40418
  // Component
@@ -40778,12 +40443,25 @@ $pdf-viewer-page-text: $component-text !default;
40778
40443
  $pdf-viewer-page-border: $component-border !default;
40779
40444
  $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
40780
40445
 
40781
- $pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
40446
+ $pdf-viewer-search-panel-border-width: 1px !default;
40447
+ $pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
40448
+ $pdf-viewer-search-panel-bg: $component-bg !default;
40449
+ $pdf-viewer-search-panel-text: $component-text !default;
40450
+ $pdf-viewer-search-panel-border: $component-border !default;
40451
+ $pdf-viewer-search-panel-shadow: $window-shadow !default;
40452
+ $pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
40453
+
40454
+ $pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
40455
+ $pdf-viewer-search-dialog-padding-y: map-get( $spacing, 3 ) !default;
40782
40456
  $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
40783
40457
 
40784
40458
  $pdf-viewer-selection-line-height: $line-height-sm !default;
40785
40459
 
40786
40460
  $pdf-viewer-search-highlight-bg: $body-text !default;
40461
+ $pdf-viewer-search-highlight-mark-bg: yellow !default;
40462
+
40463
+ $pdf-viewer-icon-text: $dropzone-icon-text !default;
40464
+ $pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
40787
40465
 
40788
40466
  // #endregion
40789
40467
  // #region @import "_layout.scss"; -> packages/classic/scss/pdf-viewer/_layout.scss
@@ -40794,6 +40472,7 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
40794
40472
  border-width: $pdf-viewer-border-width;
40795
40473
  border-style: solid;
40796
40474
  box-sizing: border-box;
40475
+ position: relative;
40797
40476
  outline: 0;
40798
40477
  font-family: $pdf-viewer-font-family;
40799
40478
  font-size: $pdf-viewer-font-size;
@@ -40824,11 +40503,14 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
40824
40503
 
40825
40504
 
40826
40505
  // Canvas
40827
- .k-list-scroller {
40506
+ .k-canvas {
40507
+ display: flex;
40508
+ flex-direction: column;
40828
40509
  flex: 1 1 auto;
40829
40510
  outline: none;
40830
40511
 
40831
- .k-enable-text-select {
40512
+ .k-enable-text-select,
40513
+ &.k-enable-text-select {
40832
40514
  -webkit-user-select: text;
40833
40515
  -moz-user-select: text;
40834
40516
  -ms-user-select: text;
@@ -40836,16 +40518,22 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
40836
40518
  cursor: text;
40837
40519
  }
40838
40520
 
40839
- .k-enable-panning {
40521
+ .k-enable-panning,
40522
+ &.k-enable-panning {
40840
40523
  cursor: grab;
40841
40524
  }
40842
- .k-enable-panning span::selection {
40525
+ .k-enable-panning span::selection,
40526
+ &.k-enable-panning span::selection {
40843
40527
  background-color: transparent;
40844
40528
  }
40845
40529
  }
40846
40530
 
40847
40531
 
40848
- // Page
40532
+ // Pages
40533
+ .k-pdf-viewer-pages {
40534
+ flex: 1 1 auto;
40535
+ }
40536
+
40849
40537
  .k-page {
40850
40538
  position: relative;
40851
40539
  margin: $pdf-viewer-page-spacing auto;
@@ -40871,46 +40559,88 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
40871
40559
  mark {
40872
40560
  color: transparent;
40873
40561
  }
40562
+
40563
+ .k-search-highlight-mark {
40564
+ color: transparent;
40565
+ }
40874
40566
  }
40875
40567
  }
40568
+
40569
+ .k-blank-page {
40570
+ margin: 0;
40571
+ display: flex;
40572
+ flex-flow: column nowrap;
40573
+ width: 100%;
40574
+ height: 100%;
40575
+ align-items: center;
40576
+ justify-content: center;
40577
+ background-color: inherit !important; // sass-lint:disable-line no-important
40578
+
40579
+ .k-upload,
40580
+ .k-dropzone,
40581
+ .k-dropzone-inner {
40582
+ border: 0;
40583
+ background: none;
40584
+ }
40585
+
40586
+ > .k-icon {
40587
+ font-size: $pdf-viewer-icon-size;
40588
+ }
40589
+ }
40590
+
40876
40591
  }
40877
40592
 
40878
40593
  // Search
40879
40594
  .k-pdf-viewer-search-dialog {
40880
- padding: $pdf-viewer-search-dialog-padding;
40595
+ padding: 0 !important; // sass-lint:disable-line no-important
40596
+ }
40881
40597
 
40882
- .k-search-container {
40883
- display: flex;
40884
- gap: $pdf-viewer-search-dialog-spacing;
40885
- flex-flow: row nowrap;
40886
- flex: 0 0 auto;
40887
- justify-content: flex-start;
40888
- align-items: center;
40598
+ .k-search-panel {
40599
+ padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
40600
+ display: flex;
40601
+ gap: $pdf-viewer-search-dialog-spacing;
40602
+ flex-flow: row nowrap;
40603
+ flex: 0 0 auto;
40604
+ justify-content: flex-start;
40605
+ align-items: center;
40889
40606
 
40890
- .k-search-dialog-draghandle {
40891
- cursor: move;
40892
- margin-left: 0;
40893
- }
40607
+ .k-search-dialog-draghandle {
40608
+ cursor: move;
40609
+ margin-left: 0;
40610
+ }
40894
40611
 
40895
- .k-textbox {
40896
- width: 10em;
40897
- flex: none;
40612
+ .k-textbox {
40613
+ width: 10em;
40614
+ flex: none;
40898
40615
 
40899
- .k-button {
40900
- border-width: 0;
40901
- }
40616
+ .k-button {
40617
+ border-width: 0;
40902
40618
  }
40619
+ }
40903
40620
 
40904
- .k-search-matches {
40905
- flex: 1 1 auto;
40906
- }
40621
+ .k-search-matches {
40622
+ display: inline-flex;
40623
+ gap: $pdf-viewer-search-panel-matches-spacing;
40907
40624
  }
40908
40625
  }
40909
40626
 
40627
+ .k-pdf-viewer-canvas > .k-search-panel {
40628
+ width: max-content;
40629
+ margin-top: calc( (#{$kendo-button-calc-size} + #{$pdf-viewer-search-panel-border-width} + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
40630
+ border-width: $pdf-viewer-search-panel-border-width;
40631
+ border-style: solid;
40632
+ border-radius: $pdf-viewer-search-panel-border-radius;
40633
+ z-index: 10;
40634
+ }
40635
+
40636
+ // Alias
40637
+ .k-search-container {
40638
+ @extend .k-search-panel !optional;
40639
+ }
40640
+
40910
40641
 
40911
40642
  // IE
40912
40643
  .k-ie .k-pdf-viewer-search-dialog {
40913
-
40914
40644
  .k-search-container > * + * {
40915
40645
  margin-left: $pdf-viewer-search-dialog-spacing;
40916
40646
  }
@@ -40965,12 +40695,33 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
40965
40695
  @include box-shadow( $pdf-viewer-page-shadow );
40966
40696
  }
40967
40697
 
40698
+ .k-blank-page > .k-icon {
40699
+ @include fill( $color: $pdf-viewer-icon-text );
40700
+ }
40701
+
40968
40702
 
40969
40703
  // Search
40970
40704
  .k-search-highlight {
40971
40705
  background-color: $pdf-viewer-search-highlight-bg;
40972
40706
  }
40973
40707
 
40708
+ .k-search-highlight-mark {
40709
+ @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
40710
+ }
40711
+
40712
+ }
40713
+
40714
+ .k-pdf-viewer-canvas > .k-search-panel {
40715
+ @include fill(
40716
+ $pdf-viewer-search-panel-text,
40717
+ $pdf-viewer-search-panel-bg,
40718
+ $pdf-viewer-search-panel-border,
40719
+ );
40720
+ @include box-shadow( $pdf-viewer-search-panel-shadow );
40721
+ }
40722
+
40723
+ .k-search-container {
40724
+ @extend .k-search-panel !optional;
40974
40725
  }
40975
40726
 
40976
40727
  }
@@ -41424,7 +41175,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
41424
41175
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
41425
41176
 
41426
41177
  &:focus,
41427
- &.k-state-focus,
41428
41178
  &.k-focus {
41429
41179
  color: $scrollview-navigation-color;
41430
41180
  opacity: $scrollview-navigation-hover-opacity;
@@ -41435,7 +41185,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
41435
41185
  }
41436
41186
 
41437
41187
  &:hover,
41438
- &.k-state-hover,
41439
41188
  &.k-hover {
41440
41189
  color: $scrollview-navigation-color;
41441
41190
  opacity: $scrollview-navigation-hover-opacity;
@@ -41455,14 +41204,12 @@ $scrollview-transition-timing-function: ease-in-out !default;
41455
41204
  }
41456
41205
 
41457
41206
  &:focus,
41458
- &.k-state-focused,
41459
41207
  &.k-focus {
41460
41208
  box-shadow: $scrollview-pagebutton-shadow;
41461
41209
  }
41462
41210
  }
41463
41211
 
41464
41212
  .k-scrollview-nav > .k-link:hover,
41465
- .k-scrollview-nav > .k-link.k-state-hover,
41466
41213
  .k-scrollview-nav > .k-link.k-hover {
41467
41214
  box-shadow: $scrollview-pagebutton-shadow;
41468
41215
  }
@@ -41713,7 +41460,7 @@ $treemap-line-height: $line-height !default;
41713
41460
  .k-chart-tooltip-wrapper {
41714
41461
  z-index: 12000;
41715
41462
 
41716
- > .k-popup {
41463
+ .k-popup {
41717
41464
  padding: 0;
41718
41465
  border-width: 0;
41719
41466
  background: transparent;
@@ -42281,7 +42028,7 @@ $treemap-line-height: $line-height !default;
42281
42028
  .k-leaf.k-inverse {
42282
42029
  color: $component-text;
42283
42030
  }
42284
- .k-leaf.k-state-hover,
42031
+ .k-leaf:hover,
42285
42032
  .k-leaf.k-hover {
42286
42033
  box-shadow: inset 0 0 0 3px $component-border;
42287
42034
  }
@@ -42763,8 +42510,7 @@ $orgchart-line-v-height: 25px !default;
42763
42510
  }
42764
42511
 
42765
42512
  &:focus,
42766
- &.k-focus,
42767
- &.k-state-focus {
42513
+ &.k-focus {
42768
42514
  @include box-shadow( $orgchart-card-focus-shadow );
42769
42515
  }
42770
42516
  }
@@ -42778,9 +42524,6 @@ $orgchart-line-v-height: 25px !default;
42778
42524
  );
42779
42525
  }
42780
42526
  .k-orgchart-node-group-container:focus,
42781
- .k-orgchart-node-group-container.k-focus,
42782
- .k-orgchart-node-group-container.k-state-focus,
42783
- .k-orgchart-node-group-container.k-state-focused,
42784
42527
  .k-orgchart-node-group-container.k-focus {
42785
42528
  @include box-shadow( $orgchart-node-group-focus-shadow );
42786
42529
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -42821,40 +42564,42 @@ $kendo-signature-height: 84px !default;
42821
42564
  $kendo-signature-maximized-width: 750px !default;
42822
42565
  $kendo-signature-maximized-height: 252px !default;
42823
42566
 
42824
- $kendo-signature-padding: map-get( $spacing, 1 ) !default;
42825
- $kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
42826
- $kendo-signature-padding-md: $kendo-signature-padding !default;
42827
- $kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
42567
+ $kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
42568
+ $kendo-signature-padding-x-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
42569
+ $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
42570
+ $kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
42571
+
42572
+ $kendo-signature-padding-y: $kendo-signature-padding-x !default;
42573
+ $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
42574
+ $kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
42575
+ $kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
42828
42576
 
42829
42577
  $kendo-signature-line-width: 1px !default;
42830
42578
  $kendo-signature-line-style: dashed !default;
42831
42579
  $kendo-signature-line-color: rgba( $info, .24 ) !default;
42832
42580
 
42833
- $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
42834
- $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
42835
- $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
42836
- $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
42581
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
42582
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
42583
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
42584
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
42837
42585
 
42838
- $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
42839
- $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
42840
- $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
42841
- $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
42586
+ $kendo-signature-line-bottom-offset: 33% !default;
42842
42587
 
42843
42588
  $kendo-signature-sizes: (
42844
42589
  sm: (
42845
- padding: $kendo-signature-padding-sm,
42846
- line-size: $kendo-signature-line-size-sm,
42847
- line-offset: $kendo-signature-line-bottom-offset-sm
42590
+ padding-x: $kendo-signature-padding-x-sm,
42591
+ padding-y: $kendo-signature-padding-y-sm,
42592
+ line-size: $kendo-signature-line-size-sm
42848
42593
  ),
42849
42594
  md: (
42850
- padding: $kendo-signature-padding-md,
42851
- line-size: $kendo-signature-line-size-md,
42852
- line-offset: $kendo-signature-line-bottom-offset-md
42595
+ padding-x: $kendo-signature-padding-x-md,
42596
+ padding-y: $kendo-signature-padding-y-md,
42597
+ line-size: $kendo-signature-line-size-md
42853
42598
  ),
42854
42599
  lg: (
42855
- padding: $kendo-signature-padding-lg,
42856
- line-size: $kendo-signature-line-size-lg,
42857
- line-offset: $kendo-signature-line-bottom-offset-lg
42600
+ padding-x: $kendo-signature-padding-x-lg,
42601
+ padding-y: $kendo-signature-padding-y-lg,
42602
+ line-size: $kendo-signature-line-size-lg
42858
42603
  )
42859
42604
  ) !default;
42860
42605
 
@@ -42868,7 +42613,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
42868
42613
 
42869
42614
  .k-signature {
42870
42615
  width: $kendo-signature-width;
42871
- height: $kendo-signature-height;
42616
+ min-height: $kendo-signature-height;
42872
42617
  position: relative;
42873
42618
  box-sizing: border-box;
42874
42619
  display: flex;
@@ -42905,27 +42650,30 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
42905
42650
 
42906
42651
  .k-signature-line {
42907
42652
  position: absolute;
42908
- z-index: 0;
42653
+ bottom: $kendo-signature-line-bottom-offset;
42654
+ z-index: 2;
42655
+ pointer-events: none;
42909
42656
  border-bottom-width: $kendo-signature-line-width;
42910
42657
  border-bottom-style: $kendo-signature-line-style;
42911
42658
  }
42912
42659
 
42913
42660
  // Sizes
42914
42661
  @each $size, $size-props in $kendo-signature-sizes {
42915
- $_padding: map-get($size-props, padding);
42662
+ $_padding-x: map-get($size-props, padding-x);
42663
+ $_padding-y: map-get($size-props, padding-y);
42916
42664
  $_line-size: map-get($size-props, line-size);
42917
42665
  $_line-offset: map-get($size-props, line-offset);
42918
42666
 
42919
42667
  .k-signature-#{$size} {
42920
- padding: $_padding;
42668
+ padding-inline: $_padding-x;
42669
+ padding-block: $_padding-y;
42921
42670
 
42922
42671
  .k-signature-line {
42923
42672
  width: $_line-size;
42924
- bottom: $_line-offset;
42925
42673
  }
42926
42674
  }
42927
-
42928
42675
  }
42676
+
42929
42677
  }
42930
42678
 
42931
42679
  // #endregion