@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/all.css +672 -436
  2. package/dist/all.scss +783 -361
  3. package/lib/swatches/default-blue.json +1 -1
  4. package/lib/swatches/default-dataviz-v4.json +1 -1
  5. package/lib/swatches/default-green.json +1 -1
  6. package/lib/swatches/default-main-dark.json +1 -1
  7. package/lib/swatches/default-main.json +1 -1
  8. package/lib/swatches/default-nordic.json +1 -1
  9. package/lib/swatches/default-ocean-blue.json +1 -1
  10. package/lib/swatches/default-orange.json +1 -1
  11. package/lib/swatches/default-purple.json +1 -1
  12. package/lib/swatches/default-turquoise.json +1 -1
  13. package/lib/swatches/default-urban.json +1 -1
  14. package/package.json +7 -10
  15. package/scss/action-sheet/_layout.scss +64 -0
  16. package/scss/action-sheet/_theme.scss +3 -3
  17. package/scss/adaptive/_theme.scss +2 -2
  18. package/scss/bottom-navigation/_layout.scss +1 -1
  19. package/scss/bottom-navigation/_theme.scss +2 -2
  20. package/scss/breadcrumb/_theme.scss +5 -5
  21. package/scss/button/_layout.scss +17 -35
  22. package/scss/button/_variables.scss +34 -14
  23. package/scss/calendar/_layout.scss +103 -41
  24. package/scss/calendar/_theme.scss +30 -48
  25. package/scss/calendar/_variables.scss +44 -1
  26. package/scss/chat/_layout.scss +2 -2
  27. package/scss/chat/_theme.scss +2 -2
  28. package/scss/chip/_variables.scss +1 -1
  29. package/scss/colorpalette/_layout.scss +1 -1
  30. package/scss/dataviz/_theme.scss +1 -3
  31. package/scss/drawer/_theme.scss +5 -5
  32. package/scss/editor/_layout.scss +2 -2
  33. package/scss/editor/_theme.scss +3 -3
  34. package/scss/expansion-panel/_theme.scss +3 -3
  35. package/scss/filemanager/_theme.scss +1 -1
  36. package/scss/forms/_layout.scss +2 -1
  37. package/scss/gantt/_layout.scss +3 -3
  38. package/scss/gantt/_theme.scss +7 -7
  39. package/scss/grid/_layout.scss +6 -27
  40. package/scss/grid/_theme.scss +25 -25
  41. package/scss/index.scss +1 -0
  42. package/scss/input/_variables.scss +21 -4
  43. package/scss/list/_variables.scss +6 -6
  44. package/scss/listview/_theme.scss +2 -2
  45. package/scss/orgchart/_theme.scss +1 -1
  46. package/scss/pager/_layout.scss +3 -3
  47. package/scss/pager/_theme.scss +10 -10
  48. package/scss/panelbar/_theme.scss +14 -14
  49. package/scss/pivotgrid/_theme.scss +1 -1
  50. package/scss/progressbar/_layout.scss +54 -11
  51. package/scss/progressbar/_theme.scss +14 -1
  52. package/scss/progressbar/_variables.scss +5 -0
  53. package/scss/radio/_layout.scss +1 -1
  54. package/scss/radio/_theme.scss +3 -3
  55. package/scss/rating/_theme.scss +5 -5
  56. package/scss/scheduler/_layout.scss +4 -4
  57. package/scss/scheduler/_theme.scss +8 -8
  58. package/scss/scrollview/_theme.scss +4 -4
  59. package/scss/signature/_index.scss +10 -0
  60. package/scss/signature/_layout.scss +63 -0
  61. package/scss/signature/_theme.scss +12 -0
  62. package/scss/signature/_variables.scss +45 -0
  63. package/scss/slider/_layout.scss +1 -1
  64. package/scss/slider/_theme.scss +3 -3
  65. package/scss/splitter/_theme.scss +1 -1
  66. package/scss/spreadsheet/_layout.scss +3 -3
  67. package/scss/spreadsheet/_theme.scss +6 -6
  68. package/scss/stepper/_layout.scss +1 -1
  69. package/scss/stepper/_theme.scss +1 -1
  70. package/scss/tabstrip/_layout.scss +7 -7
  71. package/scss/tabstrip/_theme.scss +5 -5
  72. package/scss/taskboard/_theme.scss +1 -1
  73. package/scss/tilelayout/_theme.scss +1 -1
  74. package/scss/timeline/_theme.scss +2 -2
  75. package/scss/timeselector/_layout.scss +31 -1
  76. package/scss/timeselector/_theme.scss +1 -1
  77. package/scss/timeselector/_variables.scss +38 -0
  78. package/scss/treelist/_layout.scss +1 -1
  79. package/scss/treeview/_variables.scss +4 -4
  80. package/scss/upload/_layout.scss +1 -1
  81. package/scss/upload/_theme.scss +2 -2
  82. package/scss/window/_theme.scss +1 -1
  83. package/scss/wizard/_layout.scss +1 -1
  84. package/scss/wizard/_theme.scss +2 -2
package/dist/all.scss CHANGED
@@ -6036,14 +6036,14 @@ $message-box-link-text-decoration: underline !default;
6036
6036
  $kendo-list-font-size: null !default;
6037
6037
  $kendo-list-font-size-sm: $font-size-md !default;
6038
6038
  $kendo-list-font-size-md: $font-size-md !default;
6039
- $kendo-list-font-size-lg: $font-size-md !default;
6039
+ $kendo-list-font-size-lg: $font-size-lg !default;
6040
6040
 
6041
6041
  /// Line height of the list component, if no size is set.
6042
6042
  /// @group list
6043
6043
  $kendo-list-line-height: null !default;
6044
- $kendo-list-line-height-sm: null !default;
6045
- $kendo-list-line-height-md: null !default;
6046
- $kendo-list-line-height-lg: null !default;
6044
+ $kendo-list-line-height-sm: $line-height-md !default;
6045
+ $kendo-list-line-height-md: $line-height-md !default;
6046
+ $kendo-list-line-height-lg: $line-height-lg !default;
6047
6047
 
6048
6048
  /// Horizontal padding of list header, if no size is set.
6049
6049
  /// @group list
@@ -6089,7 +6089,7 @@ $kendo-list-item-padding-x: null !default;
6089
6089
  $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
6090
6090
  $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
6091
6091
  $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
6092
- $kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
6092
+ $kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
6093
6093
 
6094
6094
  /// Vertical padding of list items, when no size is set.
6095
6095
  /// @group list
@@ -6097,7 +6097,7 @@ $kendo-list-item-padding-y: null !default;
6097
6097
  $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
6098
6098
  $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
6099
6099
  $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
6100
- $kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
6100
+ $kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
6101
6101
 
6102
6102
  /// Font size of list items, if no size is set.
6103
6103
  /// @group list
@@ -7955,34 +7955,33 @@ $kendo-button-border-radius: null !default;
7955
7955
  /// Horizontal padding of the button.
7956
7956
  /// @group button
7957
7957
  $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
7958
- $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
7959
- $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
7960
- $kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
7961
-
7962
7958
  /// Vertical padding of the button.
7963
7959
  /// @group button
7964
7960
  $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
7965
- $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
7966
- $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
7967
- $kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
7968
-
7969
7961
  /// Font family of the button.
7970
7962
  /// @group button
7971
7963
  $kendo-button-font-family: $font-family !default;
7972
-
7973
7964
  /// Font sizes of the button.
7974
7965
  /// @group button
7975
7966
  $kendo-button-font-size: $font-size-md !default;
7976
- $kendo-button-font-size-sm: $font-size-md !default;
7977
- $kendo-button-font-size-md: $font-size-md !default;
7978
- $kendo-button-font-size-lg: $font-size-md !default;
7979
-
7980
7967
  /// Line heights used along with $font-size.
7981
7968
  /// @group button
7982
7969
  $kendo-button-line-height: $line-height-md !default;
7970
+
7971
+ $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
7972
+ $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
7973
+ $kendo-button-font-size-sm: $font-size-md !default;
7983
7974
  $kendo-button-line-height-sm: $line-height-md !default;
7975
+
7976
+ $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
7977
+ $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
7978
+ $kendo-button-font-size-md: $font-size-md !default;
7984
7979
  $kendo-button-line-height-md: $line-height-md !default;
7985
- $kendo-button-line-height-lg: $line-height-md !default;
7980
+
7981
+ $kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
7982
+ $kendo-button-padding-y-lg: map-get( $spacing, 2 );
7983
+ $kendo-button-font-size-lg: $font-size-lg !default;
7984
+ $kendo-button-line-height-lg: $line-height-lg !default;
7986
7985
 
7987
7986
  /// Calculated height of the button.
7988
7987
  /// @group button
@@ -7992,6 +7991,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
7992
7991
  /// @group button
7993
7992
  $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
7994
7993
 
7994
+ $kendo-button-sizes: (
7995
+ sm: (
7996
+ padding-x: $kendo-button-padding-x-sm,
7997
+ padding-y: $kendo-button-padding-y-sm,
7998
+ font-size: $kendo-button-font-size-sm,
7999
+ line-height: $kendo-button-line-height-sm
8000
+ ),
8001
+ md: (
8002
+ padding-x: $kendo-button-padding-x-md,
8003
+ padding-y: $kendo-button-padding-y-md,
8004
+ font-size: $kendo-button-font-size-md,
8005
+ line-height: $kendo-button-line-height-md
8006
+ ),
8007
+ lg: (
8008
+ padding-x: $kendo-button-padding-x-lg,
8009
+ padding-y: $kendo-button-padding-y-lg,
8010
+ font-size: $kendo-button-font-size-lg,
8011
+ line-height: $kendo-button-line-height-lg
8012
+ )
8013
+ ) !default;
8014
+
7995
8015
  /// Theme colors map for the button.
7996
8016
  /// @group button
7997
8017
  $kendo-button-theme-colors: map-merge(
@@ -8216,45 +8236,27 @@ $kendo-button-transition: color .2s ease-in-out !default;
8216
8236
 
8217
8237
  .k-button-text {}
8218
8238
 
8219
- // Sizes
8220
- .k-button-sm {
8221
- padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
8222
- font-size: $kendo-button-font-size-sm;
8223
- line-height: $kendo-button-line-height-sm;
8224
- }
8225
- .k-button-md {
8226
- padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
8227
- font-size: $kendo-button-font-size-md;
8228
- line-height: $kendo-button-line-height-md;
8229
- }
8230
- .k-button-lg {
8231
- padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
8232
- font-size: $kendo-button-font-size-lg;
8233
- line-height: $kendo-button-line-height-lg;
8234
- }
8235
8239
 
8236
- .k-icon-button.k-button-sm {
8237
- padding: $kendo-button-padding-y-sm;
8240
+ // Sizes
8241
+ @each $size, $size-props in $kendo-button-sizes {
8242
+ $_padding-x: map-get( $size-props, padding-x );
8243
+ $_padding-y: map-get( $size-props, padding-y );
8244
+ $_font-size: map-get( $size-props, font-size );
8245
+ $_line-height: map-get( $size-props, line-height );
8238
8246
 
8239
- > .k-button-icon {
8240
- min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
8241
- min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
8247
+ .k-button-#{$size} {
8248
+ padding: $_padding-y $_padding-x;
8249
+ font-size: $_font-size;
8250
+ line-height: $_line-height;
8242
8251
  }
8243
- }
8244
- .k-icon-button.k-button-md {
8245
- padding: $kendo-button-padding-y-md;
8246
8252
 
8247
- > .k-button-icon {
8248
- min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
8249
- min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
8250
- }
8251
- }
8252
- .k-icon-button.k-button-lg {
8253
- padding: $kendo-button-padding-y-lg;
8253
+ .k-button-#{$size}.k-icon-button {
8254
+ padding: $_padding-y;
8254
8255
 
8255
- > .k-button-icon {
8256
- min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
8257
- min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
8256
+ > .k-button-icon {
8257
+ min-width: calc( #{$_font-size} * #{$_line-height} );
8258
+ min-height: calc( #{$_font-size} * #{$_line-height} );
8259
+ }
8258
8260
  }
8259
8261
  }
8260
8262
 
@@ -8777,16 +8779,33 @@ $kendo-button-transition: color .2s ease-in-out !default;
8777
8779
  // Component
8778
8780
  // #region @import "_variables.scss"; -> packages/default/scss/input/_variables.scss
8779
8781
  // Input
8782
+
8783
+ /// Default width of input components.
8784
+ /// @group input
8780
8785
  $kendo-input-default-width: 100% !default;
8781
8786
 
8787
+ /// Border width of input components.
8788
+ /// @group input
8782
8789
  $kendo-input-border-width: 1px !default;
8783
8790
  $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
8791
+ /// Border radius of input components.
8792
+ /// @group input
8784
8793
  $kendo-input-border-radius: null !default;
8785
8794
 
8795
+ /// Horizontal padding of input components.
8796
+ /// @group input
8786
8797
  $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
8798
+ /// Vertical padding of input components.
8799
+ /// @group input
8787
8800
  $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
8801
+ /// Font family of input components.
8802
+ /// @group input
8788
8803
  $kendo-input-font-family: $font-family !default;
8804
+ /// Font size of input components.
8805
+ /// @group input
8789
8806
  $kendo-input-font-size: $font-size-md !default;
8807
+ /// Line height of input components.
8808
+ /// @group input
8790
8809
  $kendo-input-line-height: $line-height-md !default;
8791
8810
 
8792
8811
  $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -8799,10 +8818,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
8799
8818
  $kendo-input-font-size-md: $font-size-md !default;
8800
8819
  $kendo-input-line-height-md: $line-height-md !default;
8801
8820
 
8802
- $kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
8803
- $kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
8804
- $kendo-input-font-size-lg: $font-size-md !default;
8805
- $kendo-input-line-height-lg: $line-height-md !default;
8821
+ $kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
8822
+ $kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
8823
+ $kendo-input-font-size-lg: $font-size-lg !default;
8824
+ $kendo-input-line-height-lg: $line-height-lg !default;
8806
8825
 
8807
8826
  $kendo-input-sizes: (
8808
8827
  sm: (
@@ -11260,7 +11279,7 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
11260
11279
  $kendo-chip-border-width: 1px !default;
11261
11280
  /// The spacing between the text and the icons of the chip.
11262
11281
  /// @group chip
11263
- $kendo-chip-spacing: map-get( $spacing, 1 );
11282
+ $kendo-chip-spacing: map-get( $spacing, 1 ) !default;
11264
11283
 
11265
11284
  /// Horizontal padding of the chip.
11266
11285
  /// @group chip
@@ -13862,7 +13881,8 @@ $fieldset-legend-border: null !default;
13862
13881
 
13863
13882
  .k-multiselect,
13864
13883
  .k-floating-label-container,
13865
- .k-daterangepicker .k-dateinput {
13884
+ .k-daterangepicker .k-dateinput,
13885
+ .k-signature {
13866
13886
  display: inline-flex;
13867
13887
  width: 100%;
13868
13888
  }
@@ -14886,6 +14906,7 @@ $listbox-drop-hint-width: 1px !default;
14886
14906
  // #region @import "_variables.scss"; -> packages/default/scss/progressbar/_variables.scss
14887
14907
  // Progressbar
14888
14908
  $progressbar-height: 22px !default;
14909
+ $progressbar-horizontal-width: 100% !default;
14889
14910
  $progressbar-animation-timing: 1s linear infinite !default;
14890
14911
  $progressbar-border-width: 0px !default;
14891
14912
  $progressbar-font-family: $font-family !default;
@@ -14909,6 +14930,10 @@ $progressbar-indeterminate-gradient: null !default;
14909
14930
 
14910
14931
  $progressbar-chunk-border: $body-bg !default;
14911
14932
 
14933
+ // Circular Progressbar
14934
+ $kendo-circular-progressbar-arc-stroke: $primary !default;
14935
+ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
14936
+
14912
14937
  // #endregion
14913
14938
  // #region @import "_layout.scss"; -> packages/default/scss/progressbar/_layout.scss
14914
14939
  @include exports("progressbar/layout") {
@@ -14939,7 +14964,7 @@ $progressbar-chunk-border: $body-bg !default;
14939
14964
 
14940
14965
 
14941
14966
  // Selection
14942
- > .k-state-selected ,
14967
+ > .k-state-selected,
14943
14968
  > .k-selected {
14944
14969
  border-width: 0;
14945
14970
  border-style: solid;
@@ -15000,7 +15025,7 @@ $progressbar-chunk-border: $body-bg !default;
15000
15025
 
15001
15026
  // Horizontal
15002
15027
  .k-progressbar-horizontal {
15003
- width: 27em;
15028
+ width: $progressbar-horizontal-width;
15004
15029
  height: $progressbar-height;
15005
15030
  grid-template-columns: 1fr;
15006
15031
  grid-template-rows: 100%;
@@ -15010,7 +15035,7 @@ $progressbar-chunk-border: $body-bg !default;
15010
15035
  flex-direction: row;
15011
15036
  }
15012
15037
 
15013
- > .k-state-selected ,
15038
+ > .k-state-selected,
15014
15039
  > .k-selected {
15015
15040
  width: 0;
15016
15041
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15037,7 +15062,7 @@ $progressbar-chunk-border: $body-bg !default;
15037
15062
  // Horizontal reverse
15038
15063
  &.k-progressbar-reverse {
15039
15064
 
15040
- > .k-state-selected ,
15065
+ > .k-state-selected,
15041
15066
  > .k-selected {
15042
15067
  flex-direction: row-reverse;
15043
15068
  justify-self: flex-end;
@@ -15062,7 +15087,7 @@ $progressbar-chunk-border: $body-bg !default;
15062
15087
  writing-mode: vertical-lr;
15063
15088
  }
15064
15089
 
15065
- > .k-state-selected ,
15090
+ > .k-state-selected,
15066
15091
  > .k-selected {
15067
15092
  height: 0;
15068
15093
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15092,7 +15117,7 @@ $progressbar-chunk-border: $body-bg !default;
15092
15117
  &.k-progressbar-reverse {
15093
15118
  flex-direction: column;
15094
15119
 
15095
- > .k-state-selected ,
15120
+ > .k-state-selected,
15096
15121
  > .k-selected {
15097
15122
  flex-direction: column;
15098
15123
  align-self: flex-start;
@@ -15117,7 +15142,7 @@ $progressbar-chunk-border: $body-bg !default;
15117
15142
 
15118
15143
  > .k-state-selected,
15119
15144
  > .k-selected,
15120
- > .k-state-selected > .k-progress-status-wrap ,
15145
+ > .k-state-selected > .k-progress-status-wrap,
15121
15146
  > .k-selected > .k-progress-status-wrap {
15122
15147
  transition: width .1s ease-in-out;
15123
15148
  }
@@ -15146,7 +15171,7 @@ $progressbar-chunk-border: $body-bg !default;
15146
15171
  display: -ms-inline-grid;
15147
15172
 
15148
15173
  > .k-progress-status-wrap,
15149
- > .k-state-selected ,
15174
+ > .k-state-selected,
15150
15175
  > .k-selected {
15151
15176
  -ms-grid-column: 1;
15152
15177
  -ms-grid-row: 1;
@@ -15156,7 +15181,7 @@ $progressbar-chunk-border: $body-bg !default;
15156
15181
  -ms-grid-columns: 1fr;
15157
15182
  -ms-grid-rows: $progressbar-height;
15158
15183
 
15159
- &.k-progressbar-reverse > .k-state-selected ,
15184
+ &.k-progressbar-reverse > .k-state-selected,
15160
15185
  &.k-progressbar-reverse > .k-selected {
15161
15186
  -ms-grid-column-align: end;
15162
15187
  }
@@ -15165,12 +15190,12 @@ $progressbar-chunk-border: $body-bg !default;
15165
15190
  -ms-grid-columns: $progressbar-height;
15166
15191
  -ms-grid-rows: 1fr;
15167
15192
 
15168
- > .k-state-selected ,
15193
+ > .k-state-selected,
15169
15194
  > .k-selected {
15170
15195
  -ms-grid-row-align: end;
15171
15196
  }
15172
15197
 
15173
- &.k-progressbar-reverse > .k-state-selected ,
15198
+ &.k-progressbar-reverse > .k-state-selected,
15174
15199
  &.k-progressbar-reverse > .k-selected {
15175
15200
  -ms-grid-row-align: start;
15176
15201
  }
@@ -15178,6 +15203,49 @@ $progressbar-chunk-border: $body-bg !default;
15178
15203
 
15179
15204
  }
15180
15205
 
15206
+ @include exports("circular-progressbar/layout") {
15207
+
15208
+ .k-circular-progressbar {
15209
+ display: inline-block;
15210
+ text-align: left;
15211
+ position: relative;
15212
+ }
15213
+
15214
+ .k-circular-progressbar-surface {
15215
+ height: 100%;
15216
+
15217
+ & > div {
15218
+ width: 100%;
15219
+ height: 100%;
15220
+ }
15221
+
15222
+ svg {
15223
+ width: 100%;
15224
+ height: 100%;
15225
+ }
15226
+ }
15227
+
15228
+ .k-circular-progressbar-scale {
15229
+ fill: none;
15230
+ }
15231
+
15232
+ .k-circular-progressbar-arc {
15233
+ transform-box: fill-box;
15234
+ transform-origin: center center;
15235
+ transform: rotate(-90deg);
15236
+ stroke-linecap: round;
15237
+ fill: none;
15238
+ }
15239
+
15240
+ .k-circular-progressbar-label {
15241
+ position: absolute;
15242
+ text-align: center;
15243
+ padding: 0;
15244
+ margin: 0;
15245
+ }
15246
+
15247
+ }
15248
+
15181
15249
  // #endregion
15182
15250
  // #region @import "_theme.scss"; -> packages/default/scss/progressbar/_theme.scss
15183
15251
  @include exports("progressbar/theme") {
@@ -15190,7 +15258,7 @@ $progressbar-chunk-border: $body-bg !default;
15190
15258
  .k-progressbar {
15191
15259
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
15192
15260
 
15193
- .k-state-selected ,
15261
+ .k-state-selected,
15194
15262
  .k-selected {
15195
15263
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
15196
15264
  }
@@ -15209,6 +15277,19 @@ $progressbar-chunk-border: $body-bg !default;
15209
15277
 
15210
15278
  }
15211
15279
 
15280
+ @include exports("circular-progressbar/theme") {
15281
+
15282
+ .k-circular-progressbar-scale {
15283
+ stroke: $kendo-circular-progressbar-scale-stroke;
15284
+ }
15285
+
15286
+ .k-circular-progressbar-arc {
15287
+ stroke: $kendo-circular-progressbar-arc-stroke;
15288
+ transition: stroke .5s ease;
15289
+ }
15290
+
15291
+ }
15292
+
15212
15293
  // #endregion
15213
15294
 
15214
15295
  // #endregion
@@ -15557,7 +15638,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15557
15638
  }
15558
15639
 
15559
15640
  .k-radio:focus,
15560
- .k-radio.k-state-focus ,
15641
+ .k-radio.k-state-focus,
15561
15642
  .k-radio.k-focus {
15562
15643
  box-shadow: none !important; // sass-lint:disable-line no-important
15563
15644
 
@@ -15618,7 +15699,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15618
15699
 
15619
15700
  // Hover state
15620
15701
  .k-radio:hover,
15621
- .k-radio.k-state-hover ,
15702
+ .k-radio.k-state-hover,
15622
15703
  .k-radio.k-hover {
15623
15704
  @include fill(
15624
15705
  $kendo-radio-hover-text,
@@ -15630,7 +15711,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15630
15711
 
15631
15712
  // Focus state
15632
15713
  .k-radio:focus,
15633
- .k-radio.k-state-focus ,
15714
+ .k-radio.k-state-focus,
15634
15715
  .k-radio.k-focus {
15635
15716
  @include fill( $border: $kendo-radio-focus-border );
15636
15717
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -15662,7 +15743,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15662
15743
  );
15663
15744
  }
15664
15745
  .k-radio:checked:focus,
15665
- .k-radio.k-checked.k-state-focus ,
15746
+ .k-radio.k-checked.k-state-focus,
15666
15747
  .k-radio.k-checked.k-focus {
15667
15748
  @include fill( $border: $kendo-radio-focus-checked-border );
15668
15749
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -15830,7 +15911,7 @@ $slider-disabled-opacity: null !default;
15830
15911
  }
15831
15912
 
15832
15913
 
15833
- &.k-state-disabled ,
15914
+ &.k-state-disabled,
15834
15915
  &.k-disabled {
15835
15916
  .k-tick,
15836
15917
  .k-slider-track,
@@ -16284,20 +16365,20 @@ $slider-disabled-opacity: null !default;
16284
16365
  }
16285
16366
 
16286
16367
  &:focus,
16287
- &.k-state-focused ,
16368
+ &.k-state-focused,
16288
16369
  &.k-focus {
16289
16370
  @include box-shadow( $slider-draghandle-focused-shadow );
16290
16371
  }
16291
16372
  }
16292
16373
 
16293
- &.k-state-focused ,
16374
+ &.k-state-focused,
16294
16375
  &.k-focus {
16295
16376
  .k-draghandle {
16296
16377
  @include box-shadow( $slider-draghandle-focused-shadow );
16297
16378
  }
16298
16379
  }
16299
16380
 
16300
- &.k-state-disabled ,
16381
+ &.k-state-disabled,
16301
16382
  &.k-disabled {
16302
16383
  opacity: $slider-disabled-opacity;
16303
16384
  }
@@ -16356,7 +16437,6 @@ $calendar-border: $component-border !default;
16356
16437
  $calendar-header-padding-x: map-get( $spacing, 1 ) !default;
16357
16438
  $calendar-header-padding-y: map-get( $spacing, 1 ) !default;
16358
16439
  $calendar-header-border-width: 1px !default;
16359
- $calendar-header-min-width: ($calendar-cell-size * 8) !default;
16360
16440
 
16361
16441
  $calendar-header-bg: $header-bg !default;
16362
16442
  $calendar-header-text: $header-text !default;
@@ -16454,12 +16534,58 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16454
16534
 
16455
16535
  // Multiview calendar
16456
16536
 
16537
+
16538
+ // Calendar sizes
16539
+ $kendo-calendar-sm-font-size: $font-size-md !default;
16540
+ $kendo-calendar-sm-line-height: $line-height-md !default;
16541
+ $kendo-calendar-sm-cell-size: 28px !default;
16542
+ $kendo-calendar-sm-cell-padding-x: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
16543
+ $kendo-calendar-sm-cell-padding-y: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
16544
+
16545
+ $kendo-calendar-md-font-size: $font-size-md !default;
16546
+ $kendo-calendar-md-line-height: $line-height-md !default;
16547
+ $kendo-calendar-md-cell-size: 32px !default;
16548
+ $kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
16549
+ $kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
16550
+
16551
+ $kendo-calendar-lg-font-size: $font-size-lg !default;
16552
+ $kendo-calendar-lg-line-height: $line-height-lg !default;
16553
+ $kendo-calendar-lg-cell-size: 40px !default;
16554
+ $kendo-calendar-lg-cell-padding-x: map-get( $spacing, 2 ) !default;
16555
+ $kendo-calendar-lg-cell-padding-y: map-get( $spacing, 2 ) !default;
16556
+
16557
+ $kendo-calendar-sizes: (
16558
+ sm: (
16559
+ font-size: $kendo-calendar-sm-font-size,
16560
+ line-height: $kendo-calendar-sm-line-height,
16561
+ cell-size: $kendo-calendar-sm-cell-size,
16562
+ cell-padding-x: $kendo-calendar-sm-cell-padding-y,
16563
+ cell-padding-y: $kendo-calendar-sm-cell-padding-x
16564
+ ),
16565
+ md: (
16566
+ font-size: $kendo-calendar-md-font-size,
16567
+ line-height: $kendo-calendar-md-line-height,
16568
+ cell-size: $kendo-calendar-md-cell-size,
16569
+ cell-padding-x: $kendo-calendar-md-cell-padding-y,
16570
+ cell-padding-y: $kendo-calendar-md-cell-padding-x
16571
+ ),
16572
+ lg: (
16573
+ font-size: $kendo-calendar-lg-font-size,
16574
+ line-height: $kendo-calendar-lg-line-height,
16575
+ cell-size: $kendo-calendar-lg-cell-size,
16576
+ cell-padding-x: $kendo-calendar-lg-cell-padding-y,
16577
+ cell-padding-y: $kendo-calendar-lg-cell-padding-x
16578
+ )
16579
+ ) !default;
16580
+
16457
16581
  // #endregion
16458
16582
  // #region @import "_layout.scss"; -> packages/default/scss/calendar/_layout.scss
16459
16583
  @include exports("calendar/layout") {
16460
16584
 
16461
16585
  // Base
16462
16586
  .k-calendar {
16587
+ inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
16588
+ block-size: var( --INTERNAL--kendo-calendar-height, min-content );
16463
16589
  border-width: $calendar-border-width;
16464
16590
  border-style: solid;
16465
16591
  box-sizing: border-box;
@@ -16480,19 +16606,12 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16480
16606
  > .k-calendar {
16481
16607
  border: 0;
16482
16608
  }
16483
-
16484
- // Common
16485
- .k-link {
16486
- white-space: normal;
16487
- position: relative;
16488
- overflow: hidden;
16489
- }
16490
16609
  }
16491
16610
 
16492
16611
 
16493
16612
  // Calendar table
16494
16613
  .k-calendar-table {
16495
- margin: 0;
16614
+ margin: 0 auto;
16496
16615
  border-width: 0;
16497
16616
  border-color: inherit;
16498
16617
  border-spacing: 0;
@@ -16500,8 +16619,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16500
16619
  table-layout: fixed;
16501
16620
  text-align: center;
16502
16621
  outline: 0;
16503
- display: inline-table;
16504
- vertical-align: top;
16622
+ display: table;
16505
16623
  position: relative;
16506
16624
  z-index: 1;
16507
16625
  }
@@ -16519,6 +16637,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16519
16637
  font-weight: $calendar-caption-font-weight;
16520
16638
  cursor: default;
16521
16639
  }
16640
+
16641
+
16642
+ // Calendar cell
16522
16643
  .k-calendar-th,
16523
16644
  .k-calendar-td {
16524
16645
  border-width: 0;
@@ -16540,10 +16661,32 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16540
16661
  }
16541
16662
  .k-calendar-td {
16542
16663
  @include border-radius( $calendar-cell-border-radius );
16664
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
16665
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
16543
16666
  border-color: transparent;
16544
16667
  }
16545
16668
 
16546
16669
 
16670
+ // Calendar cell inner
16671
+ // Remove .k-calendar once we remove k-link
16672
+ .k-calendar .k-calendar-cell-inner {
16673
+ @include border-radius( $calendar-cell-border-radius );
16674
+ padding: $calendar-cell-padding-y $calendar-cell-padding-x;
16675
+ padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$calendar-cell-padding-x} );
16676
+ padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$calendar-cell-padding-y} );
16677
+ width: 100%;
16678
+ height: 100%;
16679
+ box-sizing: border-box;
16680
+ display: flex;
16681
+ flex-direction: row;
16682
+ align-items: center;
16683
+ justify-content: center;
16684
+ white-space: normal;
16685
+ position: relative;
16686
+ overflow: hidden;
16687
+ }
16688
+
16689
+
16547
16690
  // Calendar header
16548
16691
  .k-calendar .k-header {
16549
16692
  padding: $calendar-header-padding-y $calendar-header-padding-x;
@@ -16561,7 +16704,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16561
16704
  // Calendar header
16562
16705
  .k-calendar-header {
16563
16706
  padding: $calendar-header-padding-y $calendar-header-padding-x;
16564
- min-width: $calendar-header-min-width;
16707
+ min-width: ($calendar-cell-size * 8);
16565
16708
  box-sizing: border-box;
16566
16709
  display: flex;
16567
16710
  align-items: center;
@@ -16603,22 +16746,13 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16603
16746
  padding: 0 $calendar-header-padding-x;
16604
16747
  // setting width / height prevents layout changes in meta views
16605
16748
  width: $calendar-view-width;
16749
+ inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$calendar-view-width});
16606
16750
  min-height: $calendar-view-height;
16607
16751
  box-sizing: content-box;
16608
16752
  gap: $calendar-view-gap;
16609
16753
  position: relative;
16610
16754
  z-index: 1;
16611
16755
  overflow: hidden;
16612
-
16613
- .k-link {
16614
- @include border-radius( $calendar-cell-border-radius );
16615
- padding: $calendar-cell-padding-y $calendar-cell-padding-x;
16616
- box-sizing: border-box;
16617
- display: flex;
16618
- flex-direction: row;
16619
- align-items: center;
16620
- justify-content: center;
16621
- }
16622
16756
  }
16623
16757
  .k-week-number .k-calendar-view {
16624
16758
  width: (8 * $calendar-cell-size);
@@ -16626,61 +16760,59 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16626
16760
 
16627
16761
 
16628
16762
  // Month view
16763
+ .k-month-calendar,
16629
16764
  .k-calendar-monthview {
16630
16765
  $_month-cell-size: $calendar-cell-size;
16631
16766
 
16632
16767
  .k-calendar-td {
16633
16768
  width: $_month-cell-size;
16634
16769
  height: $_month-cell-size;
16635
- }
16636
- .k-link {
16637
- width: $_month-cell-size;
16638
- height: $_month-cell-size;
16770
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
16771
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
16639
16772
  }
16640
16773
  }
16641
16774
 
16642
16775
 
16643
16776
  // Year view
16777
+ .k-year-calendar,
16644
16778
  .k-calendar-yearview {
16645
- $_year-cell-size: ( (7 / 4) * $calendar-cell-size);
16779
+ $_year-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16646
16780
 
16647
16781
  .k-calendar-td {
16648
- width: auto;
16649
- height: auto;
16650
- }
16651
- .k-link {
16652
16782
  width: $_year-cell-size;
16653
16783
  height: $_year-cell-size;
16784
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
16785
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
16654
16786
  }
16655
16787
  }
16656
16788
 
16657
16789
 
16658
16790
  // Decade view
16791
+ .k-decade-calendar,
16659
16792
  .k-calendar-decadeview {
16660
- $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);
16793
+ $_decade-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16661
16794
 
16662
16795
  .k-calendar-td {
16663
- width: auto;
16664
- height: auto;
16665
- }
16666
- .k-link {
16667
16796
  width: $_decade-cell-size;
16668
16797
  height: $_decade-cell-size;
16798
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
16799
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
16669
16800
  }
16670
16801
  }
16671
16802
 
16672
16803
 
16673
16804
  // Century view
16805
+ .k-century-calendar,
16674
16806
  .k-calendar-centuryview {
16675
- $_century-cell-size: ( (7 / 4) * $calendar-cell-size);
16807
+ $_century-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16676
16808
 
16677
16809
  .k-calendar-td {
16678
- width: auto;
16679
- height: auto;
16680
- }
16681
- .k-link {
16682
16810
  width: $_century-cell-size;
16683
16811
  height: $_century-cell-size;
16812
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
16813
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
16814
+ }
16815
+ .k-calendar-cell-inner {
16684
16816
  text-align: left;
16685
16817
  }
16686
16818
  }
@@ -16720,6 +16852,56 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16720
16852
  top: 0;
16721
16853
  right: 0;
16722
16854
  }
16855
+
16856
+
16857
+
16858
+
16859
+ // Calendar sizes
16860
+ @each $size, $size-props in $kendo-calendar-sizes {
16861
+ $_font-size: map-get( $size-props, font-size );
16862
+ $_line-height: map-get( $size-props, line-height );
16863
+ $_cell-size: map-get( $size-props, cell-size );
16864
+ $_cell-padding-x: map-get( $size-props, cell-padding-x );
16865
+ $_cell-padding-y: map-get( $size-props, cell-padding-y );
16866
+
16867
+ $_month-cell-size: $_cell-size;
16868
+ $_year-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
16869
+ $_decade-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
16870
+ $_century-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
16871
+
16872
+ .k-calendar-#{$size} {
16873
+ --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
16874
+ --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
16875
+ --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
16876
+ font-size: $_font-size;
16877
+ line-height: $_line-height;
16878
+
16879
+ &.k-month-calendar,
16880
+ .k-calendar-monthview {
16881
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
16882
+ }
16883
+ &.k-year-calendar,
16884
+ .k-calendar-yearview {
16885
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
16886
+ }
16887
+ &.k-decade-calendar,
16888
+ .k-calendar-decadeview {
16889
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
16890
+ }
16891
+ &.k-century-calendar,
16892
+ .k-calendar-centuryview {
16893
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
16894
+ }
16895
+ }
16896
+ }
16897
+
16898
+
16899
+
16900
+
16901
+ // Alias
16902
+ .k-link {
16903
+ @extend .k-calendar-cell-inner;
16904
+ }
16723
16905
  }
16724
16906
 
16725
16907
 
@@ -16844,7 +17026,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16844
17026
  }
16845
17027
 
16846
17028
  // // styles are applied to the k-link element inside
16847
- // .k-state-selected ,
17029
+ // .k-state-selected,
16848
17030
  // .k-selected {
16849
17031
  // color: inherit;
16850
17032
  // background: transparent;
@@ -16870,6 +17052,10 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16870
17052
  &::after {
16871
17053
  display: none;
16872
17054
  }
17055
+
17056
+ &:focus {
17057
+ outline: 0;
17058
+ }
16873
17059
  }
16874
17060
 
16875
17061
  .k-range-start {
@@ -16964,8 +17150,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16964
17150
  &.k-hover,
16965
17151
  &.k-state-hover,
16966
17152
  &:focus,
16967
- &.k-state-focus,
16968
- &.k-focus {
17153
+ &.k-focus,
17154
+ &.k-state-focus {
16969
17155
  color: $calendar-today-nav-hover-text;
16970
17156
  }
16971
17157
  }
@@ -16983,11 +17169,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16983
17169
  // Special days
16984
17170
  .k-calendar-view .k-today {
16985
17171
  @if $calendar-today-style == box {
16986
- .k-link {
17172
+ .k-calendar-cell-inner {
16987
17173
  box-shadow: inset 0 0 0 1px $calendar-today-color;
16988
17174
  }
16989
- &.k-state-focused .k-link,
16990
- &.k-focus .k-link {
17175
+ &.k-focus .k-calendar-cell-inner,
17176
+ &.k-state-focused .k-calendar-cell-inner {
16991
17177
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
16992
17178
  }
16993
17179
  } @else if $calendar-today-style == color {
@@ -17021,9 +17207,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17021
17207
 
17022
17208
 
17023
17209
  // Interactive states
17024
- .k-calendar-td:hover .k-link,
17025
- .k-calendar-td.k-state-hover .k-link,
17026
- .k-calendar-td.k-hover .k-link {
17210
+ .k-calendar-td:hover .k-calendar-cell-inner,
17211
+ .k-calendar-td.k-hover .k-calendar-cell-inner,
17212
+ .k-calendar-td.k-state-hover .k-calendar-cell-inner {
17027
17213
  @include fill(
17028
17214
  $calendar-cell-hover-text,
17029
17215
  $calendar-cell-hover-bg,
@@ -17031,8 +17217,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17031
17217
  $calendar-cell-hover-gradient
17032
17218
  );
17033
17219
  }
17034
- .k-calendar-td.k-state-selected .k-link,
17035
- .k-calendar-td.k-selected .k-link {
17220
+ .k-calendar-td.k-selected .k-calendar-cell-inner,
17221
+ .k-calendar-td.k-state-selected .k-calendar-cell-inner {
17036
17222
  @include fill(
17037
17223
  $calendar-cell-selected-text,
17038
17224
  $calendar-cell-selected-bg,
@@ -17040,12 +17226,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17040
17226
  $calendar-cell-selected-gradient
17041
17227
  );
17042
17228
  }
17043
- .k-calendar-td.k-state-selected:hover .k-link,
17044
- .k-calendar-td.k-selected:hover .k-link,
17045
- .k-calendar-td.k-state-selected.k-state-hover .k-link,
17046
- .k-calendar-td.k-selected.k-hover .k-link,
17047
- .k-calendar-td.k-selected:hover .k-link,
17048
- .k-calendar-td.k-selected.k-hover .k-link {
17229
+ .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
17230
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
17231
+ .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
17049
17232
  @include fill(
17050
17233
  $calendar-cell-selected-hover-text,
17051
17234
  $calendar-cell-selected-hover-bg,
@@ -17053,18 +17236,15 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17053
17236
  $calendar-cell-selected-hover-gradient
17054
17237
  );
17055
17238
  }
17056
- .k-calendar-td.k-state-focused .k-link,
17057
- .k-calendar-td.k-focus .k-link,
17058
- .k-calendar-td.k-state-focus .k-link,
17059
- .k-calendar-td.k-focus .k-link {
17239
+ .k-calendar-td:focus .k-calendar-cell-inner,
17240
+ .k-calendar-td.k-focus .k-calendar-cell-inner,
17241
+ .k-calendar-td.k-state-focus .k-calendar-cell-inner,
17242
+ .k-calendar-td.k-state-focused .k-calendar-cell-inner {
17060
17243
  box-shadow: $calendar-cell-focused-shadow;
17061
17244
  }
17062
- .k-calendar-td.k-state-selected.k-state-focused .k-link,
17063
- .k-calendar-td.k-selected.k-focused .k-link,
17064
- .k-calendar-td.k-state-selected.k-state-focus .k-link,
17065
- .k-calendar-td.k-selected.k-focus .k-link,
17066
- .k-calendar-td.k-selected:focus .k-link,
17067
- .k-calendar-td.k-selected.k-focus .k-link {
17245
+ .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
17246
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
17247
+ .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
17068
17248
  box-shadow: $calendar-cell-selected-focus-shadow;
17069
17249
  }
17070
17250
 
@@ -17078,8 +17258,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17078
17258
  box-shadow: inset -1px 0 $calendar-navigation-border;
17079
17259
 
17080
17260
  li:hover,
17081
- li.k-state-hover,
17082
- li.k-hover {
17261
+ li.k-hover,
17262
+ li.k-state-hover {
17083
17263
  color: $calendar-today-nav-hover-text;
17084
17264
  }
17085
17265
  }
@@ -17134,19 +17314,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17134
17314
  .k-range-start,
17135
17315
  .k-range-end,
17136
17316
  .k-range-mid {
17137
- // sass-lint:disable-block indentation
17138
- background-image:
17139
- linear-gradient(
17140
- transparent $calendar-range-gap,
17141
- $calendar-range-bg $calendar-range-gap,
17142
- $calendar-range-bg calc(100% - #{$calendar-range-gap}),
17143
- transparent calc(100% - #{$calendar-range-gap})
17144
- );
17145
-
17146
- .k-ie & {
17147
- background-image: none;
17148
- background-color: $calendar-range-bg;
17149
- }
17317
+ background-color: $calendar-range-bg;
17150
17318
  }
17151
17319
 
17152
17320
  .k-range-start.k-range-end {
@@ -17156,16 +17324,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17156
17324
 
17157
17325
  .k-range-start,
17158
17326
  .k-range-end {
17159
- .k-link {
17327
+ .k-calendar-cell-inner {
17160
17328
  background-color: $calendar-cell-selected-bg;
17161
17329
  }
17162
17330
  }
17163
17331
 
17164
- .k-range-start.k-state-active,
17165
17332
  .k-range-start.k-active,
17166
- .k-range-end.k-state-active,
17167
- .k-range-end.k-active {
17168
- .k-link {
17333
+ .k-range-start.k-state-active,
17334
+ .k-range-end.k-active,
17335
+ .k-range-end.k-state-active {
17336
+ .k-calendar-cell-inner {
17169
17337
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
17170
17338
  }
17171
17339
  }
@@ -17178,8 +17346,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17178
17346
  content: "";
17179
17347
  display: block;
17180
17348
  position: absolute;
17181
- top: $calendar-range-gap;
17182
- bottom: $calendar-range-gap;
17349
+ top: 0;
17350
+ bottom: 0;
17183
17351
  width: $calendar-range-split-size;
17184
17352
  }
17185
17353
  }
@@ -17255,6 +17423,44 @@ $time-list-highlight-border: $component-border !default;
17255
17423
 
17256
17424
  $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17257
17425
 
17426
+
17427
+ // Time selector sizes
17428
+ $kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
17429
+ $kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
17430
+ $kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
17431
+ $kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
17432
+
17433
+ $kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
17434
+ $kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
17435
+ $kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
17436
+ $kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
17437
+
17438
+ $kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
17439
+ $kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
17440
+ $kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
17441
+ $kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
17442
+
17443
+ $kendo-time-selector-sizes: (
17444
+ sm: (
17445
+ font-size: $kendo-time-selector-sm-font-size,
17446
+ line-height: $kendo-time-selector-sm-line-height,
17447
+ list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
17448
+ list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
17449
+ ),
17450
+ md: (
17451
+ font-size: $kendo-time-selector-md-font-size,
17452
+ line-height: $kendo-time-selector-md-line-height,
17453
+ list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
17454
+ list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
17455
+ ),
17456
+ lg: (
17457
+ font-size: $kendo-time-selector-lg-font-size,
17458
+ line-height: $kendo-time-selector-lg-line-height,
17459
+ list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
17460
+ list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
17461
+ )
17462
+ ) !default;
17463
+
17258
17464
  // #endregion
17259
17465
  // #region @import "_layout.scss"; -> packages/default/scss/timeselector/_layout.scss
17260
17466
  @include exports( "timeselector/layout" ) {
@@ -17359,7 +17565,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17359
17565
  display: block;
17360
17566
  }
17361
17567
 
17362
- &.k-state-focused ,
17568
+ &.k-state-focused,
17363
17569
  &.k-focus {
17364
17570
  &::before,
17365
17571
  &::after {
@@ -17465,6 +17671,36 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17465
17671
  top: calc( #{$time-list-title-height / 2} );
17466
17672
  }
17467
17673
 
17674
+
17675
+ // Time selector sizes
17676
+ @each $size, $size-props in $kendo-time-selector-sizes {
17677
+ $_font-size: map-get( $size-props, font-size );
17678
+ $_line-height: map-get( $size-props, line-height );
17679
+ $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
17680
+ $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
17681
+ $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
17682
+
17683
+
17684
+ .k-timeselector-#{$size} {
17685
+ font-size: $_font-size;
17686
+ line-height: $_line-height;
17687
+
17688
+ .k-time-highlight,
17689
+ .k-time-list-highlight {
17690
+ height: $_highlight-height;
17691
+ }
17692
+
17693
+ .k-time-separator {
17694
+ height: $_highlight-height;
17695
+ }
17696
+
17697
+ .k-time-list-item,
17698
+ .k-time-list .k-item {
17699
+ padding: $_list-item-padding-y $_list-item-padding-x;
17700
+ }
17701
+ }
17702
+ }
17703
+
17468
17704
  }
17469
17705
 
17470
17706
  // #endregion
@@ -17501,7 +17737,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17501
17737
  color: $time-list-title-text;
17502
17738
  }
17503
17739
 
17504
- &.k-state-focused ,
17740
+ &.k-state-focused,
17505
17741
  &.k-focus {
17506
17742
  .k-title {
17507
17743
  color: $time-list-title-focus-text;
@@ -17815,7 +18051,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
17815
18051
  &.k-focus,
17816
18052
  &.k-state-selected,
17817
18053
  &.k-selected,
17818
- &.k-state-selected:hover ,
18054
+ &.k-state-selected:hover,
17819
18055
  &.k-selected:hover {
17820
18056
  position: relative;
17821
18057
  z-index: 100;
@@ -19089,13 +19325,13 @@ $kendo-treeview-font-family: $font-family !default;
19089
19325
  $kendo-treeview-font-size: $font-size-md !default;
19090
19326
  $kendo-treeview-font-size-sm: $font-size-md !default;
19091
19327
  $kendo-treeview-font-size-md: $font-size-md !default;
19092
- $kendo-treeview-font-size-lg: $font-size-md !default;
19328
+ $kendo-treeview-font-size-lg: $font-size-lg !default;
19093
19329
  /// Line height of the treeview component.
19094
19330
  /// @group treeview
19095
19331
  $kendo-treeview-line-height: $line-height-md !default;
19096
19332
  $kendo-treeview-line-height-sm: $line-height-md !default;
19097
19333
  $kendo-treeview-line-height-md: $line-height-md !default;
19098
- $kendo-treeview-line-height-lg: $line-height-md !default;
19334
+ $kendo-treeview-line-height-lg: $line-height-lg !default;
19099
19335
  /// Indentation of child groups in treeview component.
19100
19336
  /// @group treeview
19101
19337
  $kendo-treeview-indent: 16px !default;
@@ -19105,13 +19341,13 @@ $kendo-treeview-indent: 16px !default;
19105
19341
  $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
19106
19342
  $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
19107
19343
  $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
19108
- $kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
19344
+ $kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
19109
19345
  /// Vertical padding of treeview items.
19110
19346
  /// @group treeview
19111
19347
  $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
19112
19348
  $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
19113
19349
  $kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
19114
- $kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
19350
+ $kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
19115
19351
  /// Border width of treeview items.
19116
19352
  /// @group treeview
19117
19353
  $kendo-treeview-item-border-width: 0px !default;
@@ -19728,7 +19964,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
19728
19964
  color: $component-text;
19729
19965
 
19730
19966
  &:focus,
19731
- &.k-state-focused ,
19967
+ &.k-state-focused,
19732
19968
  &.k-focus {
19733
19969
 
19734
19970
  .k-rating-item {
@@ -19736,7 +19972,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
19736
19972
  text-shadow: $rating-icon-focused-shadow;
19737
19973
  }
19738
19974
 
19739
- &.k-state-selected > .k-icon ,
19975
+ &.k-state-selected > .k-icon,
19740
19976
  &.k-selected > .k-icon {
19741
19977
  text-shadow: $rating-icon-focused-selected-shadow;
19742
19978
  }
@@ -19747,19 +19983,19 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
19747
19983
  .k-rating-item {
19748
19984
  color: $rating-icon-text;
19749
19985
 
19750
- &.k-state-selected ,
19986
+ &.k-state-selected,
19751
19987
  &.k-selected {
19752
19988
  color: $rating-icon-selected-text;
19753
19989
 
19754
19990
  &:focus,
19755
- &.k-state-focused ,
19991
+ &.k-state-focused,
19756
19992
  &.k-focus {
19757
19993
  color: $rating-icon-focused-text;
19758
19994
  }
19759
19995
  }
19760
19996
 
19761
19997
  &:hover,
19762
- &.k-state-hover ,
19998
+ &.k-state-hover,
19763
19999
  &.k-hover {
19764
20000
  color: $rating-icon-hover-text;
19765
20001
  cursor: pointer;
@@ -20970,7 +21206,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
20970
21206
  z-index: 1;
20971
21207
  }
20972
21208
  input[disabled],
20973
- input.k-state-disabled ,
21209
+ input.k-state-disabled,
20974
21210
  input.k-disabled {
20975
21211
  visibility: hidden;
20976
21212
  }
@@ -21015,12 +21251,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21015
21251
 
21016
21252
  .k-file {
21017
21253
 
21018
- &.k-state-focused ,
21254
+ &.k-state-focused,
21019
21255
  &.k-focus {
21020
21256
  box-shadow: inset $upload-focused-shadow;
21021
21257
  }
21022
21258
 
21023
- .k-upload-action.k-state-focused ,
21259
+ .k-upload-action.k-state-focused,
21024
21260
  .k-upload-action.k-focus {
21025
21261
  box-shadow: $upload-focused-shadow;
21026
21262
  }
@@ -21907,6 +22143,10 @@ $actionsheet-item-disabled-shadow: null !default;
21907
22143
  box-sizing: border-box;
21908
22144
  }
21909
22145
  }
22146
+ .k-actionsheet-fullscreen {
22147
+ max-height: 100%;
22148
+ height: 100%;
22149
+ }
21910
22150
 
21911
22151
 
21912
22152
  // Actionsheet header
@@ -21920,6 +22160,35 @@ $actionsheet-item-disabled-shadow: null !default;
21920
22160
  font-size: $actionsheet-header-font-size;
21921
22161
  font-family: $actionsheet-header-font-family;
21922
22162
  line-height: $actionsheet-header-line-height;
22163
+ flex: none;
22164
+ }
22165
+
22166
+
22167
+ // Actionsheet titlebar
22168
+ .k-actionsheet-titlebar {
22169
+ @extend .k-actionsheet-header !optional;
22170
+ display: flex;
22171
+ flex-flow: row nowrap;
22172
+ align-items: center;
22173
+ }
22174
+ .k-actionsheet-title {
22175
+ flex: 1;
22176
+ }
22177
+ .k-actionsheet-actions {
22178
+ flex: none;
22179
+ }
22180
+
22181
+
22182
+ // Actionsheet content
22183
+ .k-actionsheet-content {
22184
+ flex: 1;
22185
+ overflow: auto;
22186
+ }
22187
+
22188
+
22189
+ // Actionsheet footer
22190
+ .k-actionsheet-footer {
22191
+ flex: none;
21923
22192
  }
21924
22193
 
21925
22194
 
@@ -22016,6 +22285,37 @@ $actionsheet-item-disabled-shadow: null !default;
22016
22285
  transform: none;
22017
22286
  }
22018
22287
 
22288
+
22289
+ // Adaptive action sheet
22290
+ .k-adaptive-actionsheet {
22291
+ max-width: 100%;
22292
+ width: 100%;
22293
+
22294
+ // TMP: this should be moved to action sheet
22295
+ display: flex;
22296
+ flex-flow: column nowrap;
22297
+
22298
+ .k-calendar {
22299
+ margin-inline: auto;
22300
+ border-width: 0;
22301
+ display: flex;
22302
+ }
22303
+
22304
+ .k-timeselector {
22305
+ height: 100%;
22306
+ border-width: 0;
22307
+ overflow: hidden;
22308
+
22309
+ .k-time-part {
22310
+ display: contents;
22311
+ }
22312
+
22313
+ .k-time-list-wrapper {
22314
+ height: 100%;
22315
+ }
22316
+ }
22317
+ }
22318
+
22019
22319
  }
22020
22320
 
22021
22321
  // #endregion
@@ -22065,7 +22365,7 @@ $actionsheet-item-disabled-shadow: null !default;
22065
22365
 
22066
22366
  // Hover state
22067
22367
  &:hover,
22068
- &.k-state-hover ,
22368
+ &.k-state-hover,
22069
22369
  &.k-hover {
22070
22370
  @include fill(
22071
22371
  $actionsheet-item-hover-text,
@@ -22079,7 +22379,7 @@ $actionsheet-item-disabled-shadow: null !default;
22079
22379
 
22080
22380
  // Focus state
22081
22381
  &:focus,
22082
- &.k-state-focus ,
22382
+ &.k-state-focus,
22083
22383
  &.k-focus {
22084
22384
  @include fill(
22085
22385
  $actionsheet-item-focus-text,
@@ -22093,7 +22393,7 @@ $actionsheet-item-disabled-shadow: null !default;
22093
22393
 
22094
22394
  // Disabed state
22095
22395
  &:disabled,
22096
- &.k-state-disabled ,
22396
+ &.k-state-disabled,
22097
22397
  &.k-disabled {
22098
22398
  @include fill(
22099
22399
  $actionsheet-item-disabled-text,
@@ -22332,7 +22632,7 @@ $actionsheet-item-disabled-shadow: null !default;
22332
22632
 
22333
22633
  .k-window {
22334
22634
  &:focus,
22335
- &.k-state-focused ,
22635
+ &.k-state-focused,
22336
22636
  &.k-focus {
22337
22637
  @include box-shadow( $window-focused-shadow );
22338
22638
  }
@@ -22809,33 +23109,33 @@ $drawer-selected-hover-text: $selected-hover-text !default;
22809
23109
  .k-drawer-item {
22810
23110
 
22811
23111
  &:hover,
22812
- &.k-state-hover ,
23112
+ &.k-state-hover,
22813
23113
  &.k-hover {
22814
23114
  color: $drawer-hovered-text;
22815
23115
  background-color: $drawer-hovered-bg;
22816
23116
  }
22817
23117
 
22818
23118
  &:focus,
22819
- &.k-state-focused ,
23119
+ &.k-state-focused,
22820
23120
  &.k-focus {
22821
23121
  background-color: $drawer-focused-bg;
22822
23122
  box-shadow: $drawer-focused-shadow;
22823
23123
 
22824
23124
  &:hover,
22825
- &.k-state-hover ,
23125
+ &.k-state-hover,
22826
23126
  &.k-hover {
22827
23127
  color: $drawer-hovered-text;
22828
23128
  background-color: $drawer-hovered-bg;
22829
23129
  }
22830
23130
  }
22831
23131
 
22832
- &.k-state-selected ,
23132
+ &.k-state-selected,
22833
23133
  &.k-selected {
22834
23134
  color: $drawer-selected-text;
22835
23135
  background-color: $drawer-selected-bg;
22836
23136
 
22837
23137
  &:hover,
22838
- &.k-state-hover ,
23138
+ &.k-state-hover,
22839
23139
  &.k-hover {
22840
23140
  color: $drawer-selected-hover-text;
22841
23141
  background-color: $drawer-selected-hover-bg;
@@ -24069,7 +24369,7 @@ $bottom-nav-flat-border: $component-border !default;
24069
24369
  outline: 0;
24070
24370
  }
24071
24371
  }
24072
- .k-bottom-nav-item.k-state-disabled ,
24372
+ .k-bottom-nav-item.k-state-disabled,
24073
24373
  .k-bottom-nav-item.k-disabled {
24074
24374
  background-color: initial;
24075
24375
  }
@@ -24121,7 +24421,7 @@ $bottom-nav-flat-border: $component-border !default;
24121
24421
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
24122
24422
  }
24123
24423
 
24124
- .k-bottom-nav-item.k-state-selected ,
24424
+ .k-bottom-nav-item.k-state-selected,
24125
24425
  .k-bottom-nav-item.k-selected {
24126
24426
  @include fill( $color: contrast-wcag( $color ) );
24127
24427
  }
@@ -24145,7 +24445,7 @@ $bottom-nav-flat-border: $component-border !default;
24145
24445
  }
24146
24446
 
24147
24447
  @each $name, $color in $kendo-theme-colors {
24148
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected ,
24448
+ &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
24149
24449
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
24150
24450
  @if $name == "secondary" or $name == "light" {
24151
24451
  @include fill( $color: try-shade($color, 3) );
@@ -24400,7 +24700,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24400
24700
  );
24401
24701
 
24402
24702
  &:focus,
24403
- &.k-state-focused ,
24703
+ &.k-state-focused,
24404
24704
  &.k-focus {
24405
24705
  @include box-shadow( $breadcrumb-focused-shadow );
24406
24706
  }
@@ -24417,7 +24717,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24417
24717
 
24418
24718
  // Hovered state
24419
24719
  &:hover,
24420
- &.k-state-hover ,
24720
+ &.k-state-hover,
24421
24721
  &.k-hover {
24422
24722
  @include fill(
24423
24723
  $breadcrumb-link-hovered-text,
@@ -24428,7 +24728,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24428
24728
 
24429
24729
  // Focused state
24430
24730
  &:focus,
24431
- &.k-state-focused ,
24731
+ &.k-state-focused,
24432
24732
  &.k-focus {
24433
24733
  @include fill(
24434
24734
  $breadcrumb-link-focused-text,
@@ -24450,7 +24750,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24450
24750
 
24451
24751
  // Hovered state
24452
24752
  &:hover,
24453
- &.k-state-hover ,
24753
+ &.k-state-hover,
24454
24754
  &.k-hover {
24455
24755
  @include fill(
24456
24756
  $breadcrumb-root-link-hovered-text,
@@ -24461,7 +24761,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24461
24761
 
24462
24762
  // Focused state
24463
24763
  &:focus,
24464
- &.k-state-focused ,
24764
+ &.k-state-focused,
24465
24765
  &.k-focus {
24466
24766
  @include fill(
24467
24767
  $breadcrumb-root-link-focused-text,
@@ -24607,7 +24907,7 @@ $pager-dropdown-width: 5em !default;
24607
24907
 
24608
24908
  // Focused state
24609
24909
  &:focus,
24610
- &.k-state-focus ,
24910
+ &.k-state-focus,
24611
24911
  &.k-focus {
24612
24912
  z-index: 3;
24613
24913
  }
@@ -24657,7 +24957,7 @@ $pager-dropdown-width: 5em !default;
24657
24957
  &:hover {
24658
24958
  z-index: 2;
24659
24959
  }
24660
- &.k-state-disabled ,
24960
+ &.k-state-disabled,
24661
24961
  &.k-disabled {
24662
24962
  color: inherit;
24663
24963
  }
@@ -24707,7 +25007,7 @@ $pager-dropdown-width: 5em !default;
24707
25007
  }
24708
25008
 
24709
25009
  // Selected state
24710
- .k-state-selected ,
25010
+ .k-state-selected,
24711
25011
  .k-selected {
24712
25012
  cursor: inherit;
24713
25013
  z-index: 2;
@@ -24853,7 +25153,7 @@ $pager-dropdown-width: 5em !default;
24853
25153
  &:focus,
24854
25154
  &.k-focus,
24855
25155
  &.k-state-focus,
24856
- &.k-state-focused ,
25156
+ &.k-state-focused,
24857
25157
  &.k-focus {
24858
25158
  @include fill( $bg: $pager-focus-bg );
24859
25159
  @include box-shadow( $pager-focus-shadow );
@@ -24869,7 +25169,7 @@ $pager-dropdown-width: 5em !default;
24869
25169
  );
24870
25170
 
24871
25171
  &:hover,
24872
- &.k-state-hover ,
25172
+ &.k-state-hover,
24873
25173
  &.k-hover {
24874
25174
  @include fill(
24875
25175
  $pager-item-hover-text,
@@ -24878,7 +25178,7 @@ $pager-dropdown-width: 5em !default;
24878
25178
  );
24879
25179
  }
24880
25180
 
24881
- &.k-state-selected ,
25181
+ &.k-state-selected,
24882
25182
  &.k-selected {
24883
25183
  @include fill(
24884
25184
  $pager-item-selected-text,
@@ -24888,7 +25188,7 @@ $pager-dropdown-width: 5em !default;
24888
25188
  }
24889
25189
 
24890
25190
  &:focus,
24891
- &.k-state-focus ,
25191
+ &.k-state-focus,
24892
25192
  &.k-focus {
24893
25193
  background-color: $pager-item-focus-bg;
24894
25194
  @include box-shadow( $pager-item-focus-shadow );
@@ -24912,7 +25212,7 @@ $pager-dropdown-width: 5em !default;
24912
25212
  );
24913
25213
 
24914
25214
  &:hover,
24915
- &.k-state-hover ,
25215
+ &.k-state-hover,
24916
25216
  &.k-hover {
24917
25217
  @include fill(
24918
25218
  $pager-number-hover-text,
@@ -24922,13 +25222,13 @@ $pager-dropdown-width: 5em !default;
24922
25222
  }
24923
25223
 
24924
25224
  &:focus,
24925
- &.k-state-focus ,
25225
+ &.k-state-focus,
24926
25226
  &.k-focus {
24927
25227
  background-color: $pager-number-focus-bg;
24928
25228
  @include box-shadow( $pager-number-focus-shadow );
24929
25229
  }
24930
25230
 
24931
- &.k-state-selected ,
25231
+ &.k-state-selected,
24932
25232
  &.k-selected {
24933
25233
  @include fill(
24934
25234
  $pager-number-selected-text,
@@ -24961,7 +25261,7 @@ $pager-dropdown-width: 5em !default;
24961
25261
  );
24962
25262
 
24963
25263
  &:hover,
24964
- &.k-state-hover ,
25264
+ &.k-state-hover,
24965
25265
  &.k-hover {
24966
25266
  @include fill(
24967
25267
  $dropdownlist-hovered-text,
@@ -24982,7 +25282,7 @@ $pager-dropdown-width: 5em !default;
24982
25282
  .k-link {
24983
25283
 
24984
25284
  &:hover,
24985
- &.k-state-hover ,
25285
+ &.k-state-hover,
24986
25286
  &.k-hover {
24987
25287
  @include fill(
24988
25288
  $kendo-list-item-hover-text,
@@ -24990,7 +25290,7 @@ $pager-dropdown-width: 5em !default;
24990
25290
  );
24991
25291
  }
24992
25292
 
24993
- &.k-state-selected ,
25293
+ &.k-state-selected,
24994
25294
  &.k-selected {
24995
25295
  @include fill(
24996
25296
  $kendo-list-item-selected-text,
@@ -25258,7 +25558,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
25258
25558
  opacity: $stepper-optional-label-opacity;
25259
25559
  }
25260
25560
  .k-step-disabled .k-step-label-optional,
25261
- &.k-state-disabled .k-step-label-optional ,
25561
+ &.k-state-disabled .k-step-label-optional,
25262
25562
  &.k-disabled .k-step-label-optional {
25263
25563
  color: inherit;
25264
25564
  }
@@ -25573,7 +25873,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
25573
25873
  $bg: $stepper-progressbar-bg
25574
25874
  );
25575
25875
 
25576
- .k-state-selected ,
25876
+ .k-state-selected,
25577
25877
  .k-selected {
25578
25878
  @include fill(
25579
25879
  $color: $stepper-progressbar-fill-text,
@@ -25821,13 +26121,13 @@ $tabstrip-content-border-focused: $component-text !default;
25821
26121
  position: relative;
25822
26122
  z-index: 1;
25823
26123
 
25824
- &.k-state-active ,
26124
+ &.k-state-active,
25825
26125
  &.k-active {
25826
26126
  display: block;
25827
26127
  }
25828
26128
 
25829
26129
  &:focus,
25830
- &.k-state-focused ,
26130
+ &.k-state-focused,
25831
26131
  &.k-focus {
25832
26132
  outline-width: 1px;
25833
26133
  outline-style: dotted;
@@ -25916,7 +26216,7 @@ $tabstrip-content-border-focused: $component-text !default;
25916
26216
  margin-left: $tabstrip-item-gap;
25917
26217
  }
25918
26218
 
25919
- .k-item.k-state-active ,
26219
+ .k-item.k-state-active,
25920
26220
  .k-item.k-active {
25921
26221
  border-bottom-color: transparent;
25922
26222
  }
@@ -25946,7 +26246,7 @@ $tabstrip-content-border-focused: $component-text !default;
25946
26246
  margin-left: $tabstrip-item-gap;
25947
26247
  }
25948
26248
 
25949
- .k-item.k-state-active ,
26249
+ .k-item.k-state-active,
25950
26250
  .k-item.k-active {
25951
26251
  border-top-color: transparent;
25952
26252
  }
@@ -25980,7 +26280,7 @@ $tabstrip-content-border-focused: $component-text !default;
25980
26280
  margin-top: $tabstrip-item-gap;
25981
26281
  }
25982
26282
 
25983
- .k-item.k-state-active ,
26283
+ .k-item.k-state-active,
25984
26284
  .k-item.k-active {
25985
26285
  border-right-color: transparent;
25986
26286
  }
@@ -26016,7 +26316,7 @@ $tabstrip-content-border-focused: $component-text !default;
26016
26316
  margin-top: $tabstrip-item-gap;
26017
26317
  }
26018
26318
 
26019
- .k-item.k-state-active ,
26319
+ .k-item.k-state-active,
26020
26320
  .k-item.k-active {
26021
26321
  border-left-color: transparent;
26022
26322
  }
@@ -26062,7 +26362,7 @@ $tabstrip-content-border-focused: $component-text !default;
26062
26362
  border-left-width: $tabstrip-indicator-size;
26063
26363
  }
26064
26364
  }
26065
- .k-item.k-state-active::after ,
26365
+ .k-item.k-state-active::after,
26066
26366
  .k-item.k-active::after {
26067
26367
  display: block;
26068
26368
  }
@@ -26133,7 +26433,7 @@ $tabstrip-content-border-focused: $component-text !default;
26133
26433
  );
26134
26434
 
26135
26435
  &:hover,
26136
- &.k-state-hover ,
26436
+ &.k-state-hover,
26137
26437
  &.k-hover {
26138
26438
  @include fill(
26139
26439
  $tabstrip-item-hovered-text,
@@ -26146,7 +26446,7 @@ $tabstrip-content-border-focused: $component-text !default;
26146
26446
  &:active,
26147
26447
  &.k-state-active,
26148
26448
  &.k-active,
26149
- &.k-state-selected ,
26449
+ &.k-state-selected,
26150
26450
  &.k-selected {
26151
26451
  @include fill(
26152
26452
  $tabstrip-item-selected-text,
@@ -26157,7 +26457,7 @@ $tabstrip-content-border-focused: $component-text !default;
26157
26457
  }
26158
26458
 
26159
26459
  &:focus,
26160
- &.k-state-focused ,
26460
+ &.k-state-focused,
26161
26461
  &.k-focus {
26162
26462
  @include box-shadow( $tabstrip-item-focused-shadow );
26163
26463
  }
@@ -26180,7 +26480,7 @@ $tabstrip-content-border-focused: $component-text !default;
26180
26480
  );
26181
26481
 
26182
26482
  &:focus,
26183
- &.k-state-focused ,
26483
+ &.k-state-focused,
26184
26484
  &.k-focus {
26185
26485
  outline-color: $tabstrip-content-border-focused;
26186
26486
  }
@@ -26191,7 +26491,7 @@ $tabstrip-content-border-focused: $component-text !default;
26191
26491
  @if ($tabstrip-indicator-size) {
26192
26492
 
26193
26493
  .k-tabstrip-items-wrapper {
26194
- .k-item.k-state-active::after ,
26494
+ .k-item.k-state-active::after,
26195
26495
  .k-item.k-active::after {
26196
26496
  border-color: $tabstrip-indicator-color;
26197
26497
  }
@@ -26282,7 +26582,7 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26282
26582
  justify-content: space-between;
26283
26583
 
26284
26584
  &:focus,
26285
- &.k-state-focused ,
26585
+ &.k-state-focused,
26286
26586
  &.k-focus {
26287
26587
  outline-width: 1px;
26288
26588
  outline-style: dotted;
@@ -26376,13 +26676,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26376
26676
  @include exports("wizard/theme") {
26377
26677
  .k-wizard-step {
26378
26678
  &:focus,
26379
- &.k-state-focused ,
26679
+ &.k-state-focused,
26380
26680
  &.k-focus {
26381
26681
  outline-color: $wizard-step-border-focused;
26382
26682
  }
26383
26683
 
26384
26684
  .k-ie &:focus,
26385
- .k-ie &.k-state-focused ,
26685
+ .k-ie &.k-state-focused,
26386
26686
  .k-ie &.k-focus {
26387
26687
  @include box-shadow($wizard-focused-shadow);
26388
26688
  outline: none;
@@ -26547,7 +26847,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
26547
26847
  $expander-border
26548
26848
  );
26549
26849
 
26550
- &.k-state-focus ,
26850
+ &.k-state-focus,
26551
26851
  &.k-focus {
26552
26852
  box-shadow: $expander-focus-shadow;
26553
26853
  }
@@ -26562,13 +26862,13 @@ $expander-content-padding-y: $padding-y * 4 !default;
26562
26862
  outline: none;
26563
26863
 
26564
26864
  &:hover,
26565
- &.k-state-hover ,
26865
+ &.k-state-hover,
26566
26866
  &.k-hover {
26567
26867
  background-color: $expander-header-hover-bg;
26568
26868
  }
26569
26869
 
26570
26870
  // Should be removed
26571
- &.k-state-focused ,
26871
+ &.k-state-focused,
26572
26872
  &.k-focus {
26573
26873
  background-color: $expander-header-focused-bg;
26574
26874
  box-shadow: $expander-header-focused-shadow;
@@ -26935,7 +27235,7 @@ $panelbar-header-expanded-gradient: null !default;
26935
27235
 
26936
27236
  // Hover
26937
27237
  > .k-link:hover,
26938
- > .k-link.k-state-hover ,
27238
+ > .k-link.k-state-hover,
26939
27239
  > .k-link.k-hover {
26940
27240
  @include fill(
26941
27241
  $panelbar-header-hovered-text,
@@ -26949,7 +27249,7 @@ $panelbar-header-expanded-gradient: null !default;
26949
27249
  > .k-link:focus,
26950
27250
  > .k-link.k-state-focus,
26951
27251
  > .k-link.k-focus,
26952
- > .k-link.k-state-focused ,
27252
+ > .k-link.k-state-focused,
26953
27253
  > .k-link.k-focus {
26954
27254
  @include fill(
26955
27255
  $panelbar-header-focused-text,
@@ -26962,7 +27262,7 @@ $panelbar-header-expanded-gradient: null !default;
26962
27262
 
26963
27263
  // Focus & Hover
26964
27264
  > .k-link:focus:hover,
26965
- > .k-link.k-state-focus.k-state-hover ,
27265
+ > .k-link.k-state-focus.k-state-hover,
26966
27266
  > .k-link.k-focus.k-hover {
26967
27267
  @include fill(
26968
27268
  $panelbar-header-hovered-focused-text,
@@ -26973,7 +27273,7 @@ $panelbar-header-expanded-gradient: null !default;
26973
27273
  }
26974
27274
 
26975
27275
  // Selected
26976
- > .k-link.k-state-selected ,
27276
+ > .k-link.k-state-selected,
26977
27277
  > .k-link.k-selected {
26978
27278
  @include fill(
26979
27279
  $panelbar-header-selected-text,
@@ -26991,7 +27291,7 @@ $panelbar-header-expanded-gradient: null !default;
26991
27291
  // Selected Hover
26992
27292
  > .k-link.k-state-selected:hover,
26993
27293
  > .k-link.k-selected:hover,
26994
- > .k-link.k-state-selected.k-state-hover ,
27294
+ > .k-link.k-state-selected.k-state-hover,
26995
27295
  > .k-link.k-selected.k-hover {
26996
27296
  @include fill(
26997
27297
  $panelbar-header-selected-hovered-text,
@@ -27006,7 +27306,7 @@ $panelbar-header-expanded-gradient: null !default;
27006
27306
  > .k-link.k-selected:focus,
27007
27307
  > .k-link.k-state-selected.k-state-focus,
27008
27308
  > .k-link.k-selected.k-focus,
27009
- > .k-link.k-state-selected.k-state-focused ,
27309
+ > .k-link.k-state-selected.k-state-focused,
27010
27310
  > .k-link.k-selected.k-focused {
27011
27311
  @include fill(
27012
27312
  $panelbar-header-selected-focused-text,
@@ -27021,7 +27321,7 @@ $panelbar-header-expanded-gradient: null !default;
27021
27321
  > .k-link.k-selected:hover:focus,
27022
27322
  > .k-link.k-state-selected.k-state-hover.k-state-focus,
27023
27323
  > .k-link.k-selected.k-hover.k-state-focus,
27024
- > .k-link.k-state-selected.k-state-hover.k-state-focused ,
27324
+ > .k-link.k-state-selected.k-state-hover.k-state-focused,
27025
27325
  > .k-link.k-selected.k-hover.k-state-focused {
27026
27326
  @include fill(
27027
27327
  $panelbar-header-selected-hovered-focused-text,
@@ -27042,7 +27342,7 @@ $panelbar-header-expanded-gradient: null !default;
27042
27342
  > .k-item > .k-link.k-state-hover,
27043
27343
  > .k-item > .k-link.k-hover,
27044
27344
  > .k-panelbar-item > .k-link:hover,
27045
- > .k-panelbar-item > .k-link.k-state-hover ,
27345
+ > .k-panelbar-item > .k-link.k-state-hover,
27046
27346
  > .k-panelbar-item > .k-link.k-hover {
27047
27347
  @include fill(
27048
27348
  $panelbar-item-hovered-text,
@@ -27061,7 +27361,7 @@ $panelbar-header-expanded-gradient: null !default;
27061
27361
  > .k-panelbar-item > .k-link:focus,
27062
27362
  > .k-panelbar-item > .k-link.k-state-focus,
27063
27363
  > .k-panelbar-item > .k-link.k-focus,
27064
- > .k-panelbar-item > .k-link.k-state-focused ,
27364
+ > .k-panelbar-item > .k-link.k-state-focused,
27065
27365
  > .k-panelbar-item > .k-link.k-focus {
27066
27366
  @include fill(
27067
27367
  $panelbar-item-focused-text,
@@ -27077,7 +27377,7 @@ $panelbar-header-expanded-gradient: null !default;
27077
27377
  > .k-item > .k-link.k-state-focus.k-state-hover,
27078
27378
  > .k-item > .k-link.k-focus.k-hover,
27079
27379
  > .k-panelbar-item > .k-link:focus:hover,
27080
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
27380
+ > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
27081
27381
  > .k-panelbar-item > .k-link.k-focus.k-hover {
27082
27382
  @include fill(
27083
27383
  $panelbar-item-hovered-focused-text,
@@ -27090,7 +27390,7 @@ $panelbar-header-expanded-gradient: null !default;
27090
27390
  // Selected
27091
27391
  > .k-item > .k-link.k-state-selected,
27092
27392
  > .k-item > .k-link.k-selected,
27093
- > .k-panelbar-item > .k-link.k-state-selected ,
27393
+ > .k-panelbar-item > .k-link.k-state-selected,
27094
27394
  > .k-panelbar-item > .k-link.k-selected {
27095
27395
  @include fill(
27096
27396
  $panelbar-item-selected-text,
@@ -27107,7 +27407,7 @@ $panelbar-header-expanded-gradient: null !default;
27107
27407
  > .k-item > .k-link.k-selected.k-hover,
27108
27408
  > .k-panelbar-item > .k-link.k-state-selected:hover,
27109
27409
  > .k-panelbar-item > .k-link.k-selected:hover,
27110
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
27410
+ > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
27111
27411
  > .k-panelbar-item > .k-link.k-selected.k-hover {
27112
27412
  @include fill(
27113
27413
  $panelbar-item-selected-hovered-text,
@@ -27128,7 +27428,7 @@ $panelbar-header-expanded-gradient: null !default;
27128
27428
  > .k-panelbar-item > .k-link.k-selected:focus,
27129
27429
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
27130
27430
  > .k-panelbar-item > .k-link.k-selected.k-focus,
27131
- > .k-item > .k-link.k-state-selected.k-state-focused ,
27431
+ > .k-item > .k-link.k-state-selected.k-state-focused,
27132
27432
  > .k-item > .k-link.k-selected.k-focused {
27133
27433
  @include fill(
27134
27434
  $panelbar-item-selected-focused-text,
@@ -27149,7 +27449,7 @@ $panelbar-header-expanded-gradient: null !default;
27149
27449
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
27150
27450
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
27151
27451
  > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
27152
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover ,
27452
+ > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
27153
27453
  > .k-item > .k-link.k-selected.k-focused.k-state-hover {
27154
27454
  @include fill(
27155
27455
  $panelbar-item-selected-hovered-focused-text,
@@ -27437,7 +27737,7 @@ $splitbar-selected-text: $selected-text !default;
27437
27737
  .k-splitbar:focus,
27438
27738
  .k-splitbar.k-state-focus,
27439
27739
  .k-splitbar.k-focus,
27440
- .k-splitbar.k-state-focused ,
27740
+ .k-splitbar.k-state-focused,
27441
27741
  .k-splitbar.k-focus {
27442
27742
  color: $splitbar-selected-text;
27443
27743
  background: $splitbar-selected-bg;
@@ -27544,7 +27844,7 @@ $tilelayout-hint-border: $component-border !default;
27544
27844
  .k-tilelayout-item:focus,
27545
27845
  .k-tilelayout-item.k-focus,
27546
27846
  .k-tilelayout-item.k-state-focus,
27547
- .k-tilelayout-item.k-state-focused ,
27847
+ .k-tilelayout-item.k-state-focused,
27548
27848
  .k-tilelayout-item.k-focus {
27549
27849
  @include box-shadow($tilelayout-card-focus-shadow);
27550
27850
  }
@@ -28216,12 +28516,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28216
28516
 
28217
28517
  .k-column-menu {
28218
28518
 
28219
- .k-listgroup-item.k-state-selected ,
28519
+ .k-listgroup-item.k-state-selected,
28220
28520
  .k-listgroup-item.k-selected {
28221
28521
  color: $adaptive-grid-sort-text;
28222
28522
  background: none;
28223
28523
  }
28224
- .k-listgroup-item.k-state-selected .k-link ,
28524
+ .k-listgroup-item.k-state-selected .k-link,
28225
28525
  .k-listgroup-item.k-selected .k-link {
28226
28526
  color: inherit;
28227
28527
  }
@@ -28963,7 +29263,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28963
29263
  &.k-i-sort-desc-sm,
28964
29264
  &.k-i-sort-asc-sm {
28965
29265
  vertical-align: text-top;
28966
- margin-left: $grid-sorted-icon-spacing;
29266
+ margin-inline-start: $grid-sorted-icon-spacing;
28967
29267
  }
28968
29268
  }
28969
29269
 
@@ -28973,7 +29273,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28973
29273
  height: $icon-size;
28974
29274
  font-size: $grid-sorting-index-font-size;
28975
29275
  margin-top: $grid-sorting-index-spacing-y;
28976
- margin-left: $grid-sorting-index-spacing-x;
29276
+ margin-inline-start: $grid-sorting-index-spacing-x;
28977
29277
  }
28978
29278
  }
28979
29279
 
@@ -29374,15 +29674,15 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29374
29674
  }
29375
29675
 
29376
29676
  .k-header > .k-cell-inner {
29377
- margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
29677
+ margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
29378
29678
  }
29379
29679
 
29380
29680
  .k-filterable {
29381
29681
  > .k-cell-inner {
29382
- margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
29682
+ margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
29383
29683
 
29384
29684
  .k-link {
29385
- padding-right: 0;
29685
+ padding-inline-end: 0;
29386
29686
  }
29387
29687
  }
29388
29688
  }
@@ -29421,6 +29721,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29421
29721
  .k-grid-filter,
29422
29722
  .k-header-column-menu {
29423
29723
  position: static;
29724
+ margin-inline-end: $grid-header-menu-icon-spacing;
29424
29725
  }
29425
29726
 
29426
29727
  .k-grid-filter,
@@ -29731,28 +30032,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29731
30032
  margin-left: $icon-spacing;
29732
30033
  margin-right: 0;
29733
30034
  }
29734
-
29735
- .k-header > .k-cell-inner {
29736
- margin-right: (-1 * $grid-cell-padding-x);
29737
- margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
29738
-
29739
- .k-sort-order {
29740
- margin-right: $grid-sorting-index-spacing-x;
29741
- margin-left: 0;
29742
- }
29743
- }
29744
-
29745
- .k-filterable {
29746
- > .k-cell-inner {
29747
- margin-right: (-1 * $grid-cell-padding-x);
29748
- margin-left: calc(-1 * #{$kendo-button-calc-size});
29749
-
29750
- .k-link {
29751
- padding-right: $grid-header-padding-x;
29752
- padding-left: 0;
29753
- }
29754
- }
29755
- }
29756
30035
  }
29757
30036
  }
29758
30037
 
@@ -29855,9 +30134,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29855
30134
  }
29856
30135
 
29857
30136
  // Hover state
29858
- tbody tr:not(.k-detail-row):hover,
29859
- tbody tr:not(.k-detail-row).k-state-hover ,
29860
- tbody tr:not(.k-detail-row).k-hover {
30137
+ tbody>tr:not(.k-detail-row):hover,
30138
+ tbody>tr:not(.k-detail-row).k-state-hover,
30139
+ tbody>tr:not(.k-detail-row).k-hover {
29861
30140
  color: $grid-hovered-text;
29862
30141
  background-color: $grid-hovered-bg;
29863
30142
  }
@@ -29865,7 +30144,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29865
30144
  // Selected state
29866
30145
  td.k-state-selected,
29867
30146
  td.k-selected,
29868
- tr.k-state-selected > td ,
30147
+ tr.k-state-selected > td,
29869
30148
  tr.k-selected > td {
29870
30149
  color: $grid-selected-text;
29871
30150
  background-color: $grid-selected-bg;
@@ -29881,7 +30160,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29881
30160
  .k-grouping-row > td:focus,
29882
30161
  .k-detail-row > td:focus,
29883
30162
  .k-group-footer > td:focus,
29884
- .k-grid-pager.k-state-focused ,
30163
+ .k-grid-pager.k-state-focused,
29885
30164
  .k-grid-pager.k-focus {
29886
30165
  box-shadow: $grid-focused-shadow;
29887
30166
  }
@@ -29924,12 +30203,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29924
30203
  }
29925
30204
 
29926
30205
  // Selected state
29927
- .k-state-selected td ,
30206
+ .k-state-selected td,
29928
30207
  .k-selected td {
29929
30208
  @include fill( $bg: $grid-sticky-selected-bg );
29930
30209
  }
29931
30210
 
29932
- .k-state-selected.k-alt td ,
30211
+ .k-state-selected.k-alt td,
29933
30212
  .k-selected.k-alt td {
29934
30213
  @include fill( $bg: $grid-sticky-selected-alt-bg );
29935
30214
  }
@@ -29937,7 +30216,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29937
30216
  // Selected hover
29938
30217
  .k-state-selected:hover td,
29939
30218
  .k-selected:hover td,
29940
- .k-state-selected.k-state-hover td ,
30219
+ .k-state-selected.k-state-hover td,
29941
30220
  .k-selected.k-hover td {
29942
30221
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
29943
30222
  }
@@ -29983,7 +30262,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29983
30262
  &.k-state-border-down {
29984
30263
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
29985
30264
  }
29986
- &.k-state-active ,
30265
+ &.k-state-active,
29987
30266
  &.k-active {
29988
30267
  color: $selected-text;
29989
30268
  background-color: $selected-bg;
@@ -30043,7 +30322,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30043
30322
  &.k-selected .k-grid-content-sticky,
30044
30323
  &.k-state-selected .k-grid-row-sticky,
30045
30324
  &.k-selected .k-grid-row-sticky,
30046
- td.k-grid-content-sticky.k-state-selected ,
30325
+ td.k-grid-content-sticky.k-state-selected,
30047
30326
  td.k-grid-content-sticky.k-selected {
30048
30327
  @include fill( $bg: $grid-sticky-selected-bg );
30049
30328
  }
@@ -30052,7 +30331,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30052
30331
  &.k-selected.k-alt .k-grid-content-sticky,
30053
30332
  &.k-state-selected.k-alt .k-grid-row-sticky,
30054
30333
  &.k-selected.k-alt .k-grid-row-sticky,
30055
- &.k-alt td.k-grid-content-sticky.k-state-selected ,
30334
+ &.k-alt td.k-grid-content-sticky.k-state-selected,
30056
30335
  &.k-alt td.k-grid-content-sticky.k-selected {
30057
30336
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30058
30337
  }
@@ -30063,7 +30342,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30063
30342
  &:hover .k-grid-row-sticky,
30064
30343
  &.k-state-hover .k-grid-content-sticky,
30065
30344
  &.k-hover .k-grid-content-sticky,
30066
- &.k-state-hover .k-grid-row-sticky ,
30345
+ &.k-state-hover .k-grid-row-sticky,
30067
30346
  &.k-hover .k-grid-row-sticky {
30068
30347
  background-color: $grid-sticky-hovered-bg;
30069
30348
  }
@@ -30080,7 +30359,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30080
30359
  &.k-selected.k-hover .k-grid-row-sticky,
30081
30360
  &:hover td.k-grid-content-sticky.k-state-selected,
30082
30361
  &:hover td.k-grid-content-sticky.k-selected,
30083
- &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
30362
+ &.k-state-hover td.k-grid-content-sticky.k-state-selected,
30084
30363
  &.k-hover td.k-grid-content-sticky.k-selected {
30085
30364
  background-color: $grid-sticky-selected-hovered-bg;
30086
30365
  }
@@ -30094,7 +30373,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30094
30373
  background-color: $grid-sticky-bg;
30095
30374
 
30096
30375
  &:hover,
30097
- &.k-state-hover ,
30376
+ &.k-state-hover,
30098
30377
  &.k-hover {
30099
30378
  background-color: $grid-sticky-hovered-bg;
30100
30379
  }
@@ -30108,7 +30387,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30108
30387
  }
30109
30388
 
30110
30389
  &:hover td,
30111
- &.k-state-hover td ,
30390
+ &.k-state-hover td,
30112
30391
  &.k-hover td {
30113
30392
  background-color: $grid-sticky-hovered-bg;
30114
30393
  }
@@ -30126,7 +30405,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30126
30405
  .k-selected.k-grid-row-sticky td,
30127
30406
  .k-grid-row-sticky td.k-state-selected,
30128
30407
  .k-grid-row-sticky td.k-selected,
30129
- .k-state-selected.k-grid-content-sticky ,
30408
+ .k-state-selected.k-grid-content-sticky,
30130
30409
  .k-selected.k-grid-content-sticky {
30131
30410
  @include fill( $bg: $grid-sticky-selected-bg );
30132
30411
  }
@@ -30135,7 +30414,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30135
30414
  tr.k-selected.k-alt .k-grid-content-sticky,
30136
30415
  .k-state-selected.k-alt.k-grid-row-sticky td,
30137
30416
  .k-selected.k-alt.k-grid-row-sticky td,
30138
- .k-alt .k-state-selected.k-grid-content-sticky ,
30417
+ .k-alt .k-state-selected.k-grid-content-sticky,
30139
30418
  .k-alt .k-selected.k-grid-content-sticky {
30140
30419
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30141
30420
  }
@@ -30151,7 +30430,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30151
30430
  .k-grid-row-sticky.k-alt.k-state-hover td,
30152
30431
  .k-grid-row-sticky.k-alt.k-hover td,
30153
30432
  .k-alt:hover .k-grid-content-sticky,
30154
- .k-alt.k-state-hover .k-grid-content-sticky ,
30433
+ .k-alt.k-state-hover .k-grid-content-sticky,
30155
30434
  .k-alt.k-hover .k-grid-content-sticky {
30156
30435
  background-color: $grid-sticky-hovered-bg;
30157
30436
  }
@@ -30179,7 +30458,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30179
30458
  .k-grid-row-sticky.k-hover td.k-selected,
30180
30459
  tr:hover .k-grid-content-sticky.k-state-selected,
30181
30460
  tr:hover .k-grid-content-sticky.k-selected,
30182
- tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
30461
+ tr.k-state-hover .k-grid-content-sticky.k-state-selected,
30183
30462
  tr.k-hover .k-grid-content-sticky.k-selected {
30184
30463
  background-color: $grid-sticky-selected-hovered-bg;
30185
30464
  }
@@ -30191,7 +30470,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30191
30470
  }
30192
30471
 
30193
30472
  &:hover .k-grid-content-sticky,
30194
- &.k-state-hover .k-grid-content-sticky ,
30473
+ &.k-state-hover .k-grid-content-sticky,
30195
30474
  &.k-hover .k-grid-content-sticky {
30196
30475
  @include fill( $bg: $grid-sticky-hovered-bg );
30197
30476
  }
@@ -30205,13 +30484,13 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30205
30484
  );
30206
30485
  }
30207
30486
  .k-columnmenu-item:focus,
30208
- .k-columnmenu-item.k-state-focus ,
30487
+ .k-columnmenu-item.k-state-focus,
30209
30488
  .k-columnmenu-item.k-focus {
30210
30489
  @include box-shadow( $kendo-list-item-focus-shadow );
30211
30490
  }
30212
30491
 
30213
30492
  .k-columnmenu-item {
30214
- &.k-state-selected ,
30493
+ &.k-state-selected,
30215
30494
  &.k-selected {
30216
30495
  @include fill(
30217
30496
  $kendo-list-item-selected-text,
@@ -30237,7 +30516,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30237
30516
  );
30238
30517
 
30239
30518
  &:hover,
30240
- &.k-state-hover ,
30519
+ &.k-state-hover,
30241
30520
  &.k-hover {
30242
30521
  @include fill(
30243
30522
  $kendo-list-item-hover-text,
@@ -30245,7 +30524,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30245
30524
  );
30246
30525
  }
30247
30526
 
30248
- &.k-state-selected ,
30527
+ &.k-state-selected,
30249
30528
  &.k-selected {
30250
30529
  @include fill(
30251
30530
  $kendo-list-item-selected-text,
@@ -30254,7 +30533,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30254
30533
  }
30255
30534
 
30256
30535
  &:focus,
30257
- &.k-state-focused ,
30536
+ &.k-state-focused,
30258
30537
  &.k-focus {
30259
30538
  @include box-shadow( $kendo-list-item-focus-shadow );
30260
30539
  }
@@ -30490,7 +30769,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
30490
30769
  // Listview content
30491
30770
  .k-listview-content {
30492
30771
 
30493
- > .k-state-focused ,
30772
+ > .k-state-focused,
30494
30773
  > .k-focus {
30495
30774
  @include fill(
30496
30775
  $listview-item-focus-text,
@@ -30500,7 +30779,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
30500
30779
  @include box-shadow( $listview-item-focus-shadow );
30501
30780
  }
30502
30781
 
30503
- > .k-state-selected ,
30782
+ > .k-state-selected,
30504
30783
  > .k-selected {
30505
30784
  @include fill(
30506
30785
  $listview-item-selected-text,
@@ -30878,7 +31157,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
30878
31157
  overflow: hidden;
30879
31158
 
30880
31159
  // disabled cells in the Spreadsheet should allow navigation if link is used
30881
- .k-state-disabled ,
31160
+ .k-state-disabled,
30882
31161
  .k-disabled {
30883
31162
  pointer-events: auto;
30884
31163
  }
@@ -31440,7 +31719,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31440
31719
  background-position: 50% 50%;
31441
31720
 
31442
31721
  &:hover div,
31443
- &.k-state-hovered div ,
31722
+ &.k-state-hovered div,
31444
31723
  &.k-hover div {
31445
31724
  margin: 0;
31446
31725
  align-self: center;
@@ -31506,7 +31785,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31506
31785
  .k-spreadsheet-insert-image-dialog {
31507
31786
  .k-spreadsheet-has-image {
31508
31787
  &:hover,
31509
- &.k-state-hovered ,
31788
+ &.k-state-hovered,
31510
31789
  &.k-hover {
31511
31790
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
31512
31791
  }
@@ -31683,7 +31962,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31683
31962
  );
31684
31963
  }
31685
31964
 
31686
- &.k-state-active ,
31965
+ &.k-state-active,
31687
31966
  &.k-active {
31688
31967
  @include fill(
31689
31968
  $kendo-button-active-text,
@@ -31701,7 +31980,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31701
31980
  > .k-menu,
31702
31981
  > .k-menu:not(.k-context-menu) {
31703
31982
 
31704
- .k-item.k-state-hover ,
31983
+ .k-item.k-state-hover,
31705
31984
  .k-item.k-hover {
31706
31985
  @include fill(
31707
31986
  $kendo-list-item-hover-text,
@@ -31732,7 +32011,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31732
32011
  .k-button {}
31733
32012
 
31734
32013
  .k-button:hover,
31735
- .k-button.k-state-hover ,
32014
+ .k-button.k-state-hover,
31736
32015
  .k-button.k-hover {
31737
32016
  @include fill(
31738
32017
  $kendo-list-item-hover-text,
@@ -31742,7 +32021,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31742
32021
  .k-button:active,
31743
32022
  .k-button.k-state-active,
31744
32023
  .k-button.k-active,
31745
- .k-button.k-state-selected ,
32024
+ .k-button.k-state-selected,
31746
32025
  .k-button.k-selected {
31747
32026
  @include fill(
31748
32027
  $kendo-list-item-selected-text,
@@ -31764,13 +32043,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31764
32043
 
31765
32044
  .k-spreadsheet-has-image {
31766
32045
  &:hover,
31767
- &.k-state-hovered ,
32046
+ &.k-state-hovered,
31768
32047
  &.k-hover {
31769
32048
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
31770
32049
  }
31771
32050
 
31772
32051
  &:hover div,
31773
- &.k-state-hovered div ,
32052
+ &.k-state-hovered div,
31774
32053
  &.k-hover div {
31775
32054
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
31776
32055
  }
@@ -32754,7 +33033,7 @@ $pivotgrid-remove-text: null !default;
32754
33033
  // Selected state
32755
33034
  .k-pivotgrid-cell.k-state-selected,
32756
33035
  .k-pivotgrid-cell.k-selected,
32757
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
33036
+ .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
32758
33037
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
32759
33038
  @include fill (
32760
33039
  $pivotgrid-selected-text,
@@ -32983,7 +33262,7 @@ $treelist-footer-row-border-width: 1px !default;
32983
33262
  }
32984
33263
 
32985
33264
  .k-treelist-dragging,
32986
- .k-treelist-dragging .k-state-hover ,
33265
+ .k-treelist-dragging .k-state-hover,
32987
33266
  .k-treelist-dragging .k-hover {
32988
33267
  cursor: default;
32989
33268
  }
@@ -33699,7 +33978,7 @@ $filemanager-preview-icon-border: null !default;
33699
33978
  );
33700
33979
  }
33701
33980
 
33702
- &.k-state-selected .k-file-icon ,
33981
+ &.k-state-selected .k-file-icon,
33703
33982
  &.k-selected .k-file-icon {
33704
33983
  @include fill(
33705
33984
  inherit,
@@ -34158,7 +34437,7 @@ $taskboard-drag-placeholder-border: $component-border !default;
34158
34437
  );
34159
34438
  }
34160
34439
  .k-taskboard-column:focus,
34161
- .k-taskboard-column.k-state-focus ,
34440
+ .k-taskboard-column.k-state-focus,
34162
34441
  .k-taskboard-column.k-focus {
34163
34442
  @include fill(
34164
34443
  $taskboard-column-focus-text,
@@ -34358,7 +34637,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
34358
34637
  pointer-events: auto;
34359
34638
  }
34360
34639
 
34361
- .k-editor-content.k-state-focused ,
34640
+ .k-editor-content.k-state-focused,
34362
34641
  .k-editor-content.k-focus {
34363
34642
  outline-width: 1px;
34364
34643
  outline-style: dashed;
@@ -34812,7 +35091,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
34812
35091
  display: block;
34813
35092
  margin: auto;
34814
35093
 
34815
- &.k-state-selected ,
35094
+ &.k-state-selected,
34816
35095
  &.k-selected {
34817
35096
  color: inherit;
34818
35097
  border-width: 0;
@@ -35032,7 +35311,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35032
35311
 
35033
35312
  kendo-editor {
35034
35313
  &.k-readonly {
35035
- .k-editor-content.k-state-focused ,
35314
+ .k-editor-content.k-state-focused,
35036
35315
  .k-editor-content.k-focus {
35037
35316
  outline-color: $body-text;
35038
35317
  }
@@ -35070,7 +35349,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35070
35349
 
35071
35350
  // Hover & Actve state
35072
35351
  &:hover,
35073
- &.k-state-active ,
35352
+ &.k-state-active,
35074
35353
  &.k-active {
35075
35354
  border-color: $panel-border;
35076
35355
  }
@@ -35088,7 +35367,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35088
35367
 
35089
35368
  // Insert table
35090
35369
  .k-ct-popup {
35091
- .k-state-selected ,
35370
+ .k-state-selected,
35092
35371
  .k-selected {
35093
35372
  @include fill( $selected-text, $selected-bg, $selected-border, none );
35094
35373
  }
@@ -35637,7 +35916,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
35637
35916
  }
35638
35917
  }
35639
35918
 
35640
- tr.k-state-selected > td:last-child ,
35919
+ tr.k-state-selected > td:last-child,
35641
35920
  tr.k-selected > td:last-child {
35642
35921
  background: transparent;
35643
35922
  }
@@ -35907,7 +36186,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
35907
36186
  border-color: currentColor;
35908
36187
  position: absolute;
35909
36188
  }
35910
- .k-gantt-line.k-state-selected ,
36189
+ .k-gantt-line.k-state-selected,
35911
36190
  .k-gantt-line.k-selected {
35912
36191
  z-index: 3;
35913
36192
  }
@@ -35981,7 +36260,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
35981
36260
  transform: translate(-50%, -50%);
35982
36261
  }
35983
36262
  .k-task-dot:hover::before,
35984
- .k-task-dot.k-state-hover::before ,
36263
+ .k-task-dot.k-state-hover::before,
35985
36264
  .k-task-dot.k-hover::before {
35986
36265
  border-width: 1px;
35987
36266
  }
@@ -36452,7 +36731,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36452
36731
  $border: $gantt-milestone-border
36453
36732
  );
36454
36733
  }
36455
- .k-task-milestone.k-state-selected .k-task-milestone-content ,
36734
+ .k-task-milestone.k-state-selected .k-task-milestone-content,
36456
36735
  .k-task-milestone.k-selected .k-task-milestone-content {
36457
36736
  @include fill(
36458
36737
  $bg: $gantt-milestone-selected-bg,
@@ -36467,7 +36746,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36467
36746
  stroke: $gantt-line-fill;
36468
36747
  }
36469
36748
 
36470
- polyline.k-state-selected ,
36749
+ polyline.k-state-selected,
36471
36750
  polyline.k-selected {
36472
36751
  stroke: $gantt-line-selected-fill;
36473
36752
  }
@@ -36521,7 +36800,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36521
36800
  );
36522
36801
  }
36523
36802
  .k-task-dot:hover::before,
36524
- .k-task-dot.k-state-hover::before ,
36803
+ .k-task-dot.k-state-hover::before,
36525
36804
  .k-task-dot.k-hover::before {
36526
36805
  @include fill(
36527
36806
  $bg: $gantt-dot-hover-bg,
@@ -36547,7 +36826,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36547
36826
  );
36548
36827
  }
36549
36828
  }
36550
- .k-task-milestone.k-state-selected ,
36829
+ .k-task-milestone.k-state-selected,
36551
36830
  .k-task-milestone.k-selected {
36552
36831
  background-image: none;
36553
36832
  @include fill(
@@ -36578,7 +36857,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36578
36857
  .k-task-advanced .k-task-summary-complete {
36579
36858
  color: $gantt-advanced-bg;
36580
36859
  }
36581
- .k-task-summary.k-state-selected ,
36860
+ .k-task-summary.k-state-selected,
36582
36861
  .k-task-summary.k-selected {
36583
36862
  color: $gantt-summary-selected-bg;
36584
36863
 
@@ -36622,7 +36901,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36622
36901
  $bg: $gantt-advanced-bg
36623
36902
  );
36624
36903
  }
36625
- .k-task-single.k-state-selected ,
36904
+ .k-task-single.k-state-selected,
36626
36905
  .k-task-single.k-selected {
36627
36906
  @include fill(
36628
36907
  $gantt-task-selected-text,
@@ -36639,7 +36918,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36639
36918
  .k-gantt-line {
36640
36919
  color: $gantt-line-fill;
36641
36920
  }
36642
- .k-gantt-line.k-state-selected ,
36921
+ .k-gantt-line.k-state-selected,
36643
36922
  .k-gantt-line.k-selected {
36644
36923
  color: $gantt-line-selected-fill;
36645
36924
  }
@@ -37295,7 +37574,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37295
37574
  }
37296
37575
 
37297
37576
  &:hover,
37298
- &.k-state-hover ,
37577
+ &.k-state-hover,
37299
37578
  &.k-hover {
37300
37579
  .k-event-delete {
37301
37580
  opacity: 1;
@@ -37361,7 +37640,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37361
37640
 
37362
37641
  // Hover
37363
37642
  &:hover,
37364
- &.k-state-hover ,
37643
+ &.k-state-hover,
37365
37644
  &.k-hover {
37366
37645
  .k-event-actions .k-event-delete,
37367
37646
  .k-resize-handle {
@@ -37623,7 +37902,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37623
37902
  .k-hover .k-task > .k-event-delete,
37624
37903
  .k-scheduler-content tr:hover .k-event-delete,
37625
37904
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
37626
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
37905
+ .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
37627
37906
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
37628
37907
  visibility: visible;
37629
37908
  }
@@ -37697,7 +37976,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37697
37976
  position: relative;
37698
37977
  }
37699
37978
 
37700
- td.k-state-selected ,
37979
+ td.k-state-selected,
37701
37980
  td.k-selected {
37702
37981
  background-color: inherit;
37703
37982
  }
@@ -38044,7 +38323,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38044
38323
 
38045
38324
  .k-scheduler-layout td.k-state-selected,
38046
38325
  .k-scheduler-layout td.k-selected,
38047
- .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
38326
+ .k-scheduler-layout .k-scheduler-cell.k-state-selected,
38048
38327
  .k-scheduler-layout .k-scheduler-cell.k-selected {
38049
38328
  background-color: rgba($selected-bg, .25);
38050
38329
  }
@@ -38067,7 +38346,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38067
38346
  );
38068
38347
  @include box-shadow( $scheduler-event-shadow );
38069
38348
 
38070
- &.k-state-hover ,
38349
+ &.k-state-hover,
38071
38350
  &.k-hover {
38072
38351
  @include fill(
38073
38352
  $scheduler-event-hover-text,
@@ -38078,7 +38357,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38078
38357
  @include box-shadow( $scheduler-event-hover-shadow );
38079
38358
  }
38080
38359
 
38081
- &.k-state-selected ,
38360
+ &.k-state-selected,
38082
38361
  &.k-selected {
38083
38362
  @include fill(
38084
38363
  $scheduler-event-selected-text,
@@ -38148,7 +38427,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38148
38427
  .k-scheduler-content tr.k-state-hover,
38149
38428
  .k-scheduler-content tr.k-hover,
38150
38429
  .k-scheduler-content .k-scheduler-row:hover,
38151
- .k-scheduler-content .k-scheduler-row.k-state-hover ,
38430
+ .k-scheduler-content .k-scheduler-row.k-state-hover,
38152
38431
  .k-scheduler-content .k-scheduler-row.k-hover {
38153
38432
  @include fill(
38154
38433
  $hovered-text,
@@ -38162,7 +38441,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38162
38441
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
38163
38442
  .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
38164
38443
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
38165
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
38444
+ .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
38166
38445
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
38167
38446
  @include fill(
38168
38447
  $scheduler-text,
@@ -38172,13 +38451,13 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38172
38451
  }
38173
38452
 
38174
38453
  // Selected
38175
- .k-scheduler-content tr.k-state-selected ,
38454
+ .k-scheduler-content tr.k-state-selected,
38176
38455
  .k-scheduler-content tr.k-selected {
38177
38456
  background-color: rgba($selected-bg, .25);
38178
38457
  }
38179
38458
  .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
38180
38459
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
38181
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
38460
+ .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
38182
38461
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
38183
38462
  background-color: $scheduler-bg;
38184
38463
  }
@@ -38196,7 +38475,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38196
38475
  @include fill( $bg: $scheduler-yearview-indicator-bg );
38197
38476
  }
38198
38477
 
38199
- .k-state-selected .k-day-indicator ,
38478
+ .k-state-selected .k-day-indicator,
38200
38479
  .k-selected .k-day-indicator {
38201
38480
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
38202
38481
  }
@@ -38497,7 +38776,7 @@ $chat-quick-reply-hover-border: $primary !default;
38497
38776
 
38498
38777
 
38499
38778
  // Message states
38500
- .k-message.k-state-selected ,
38779
+ .k-message.k-state-selected,
38501
38780
  .k-message.k-selected {
38502
38781
  margin-bottom: $chat-item-spacing-y;
38503
38782
  border: 0;
@@ -38707,7 +38986,7 @@ $chat-quick-reply-hover-border: $primary !default;
38707
38986
  flex: 0 0 auto;
38708
38987
  }
38709
38988
 
38710
- &.k-state-selected ,
38989
+ &.k-state-selected,
38711
38990
  &.k-selected {
38712
38991
  background: none;
38713
38992
  }
@@ -38941,7 +39220,7 @@ $chat-quick-reply-hover-border: $primary !default;
38941
39220
  .k-bubble:hover {
38942
39221
  @include box-shadow( $chat-bubble-hover-shadow );
38943
39222
  }
38944
- .k-state-selected .k-bubble ,
39223
+ .k-state-selected .k-bubble,
38945
39224
  .k-selected .k-bubble {
38946
39225
  @include box-shadow( $chat-bubble-selected-shadow );
38947
39226
  }
@@ -38957,7 +39236,7 @@ $chat-quick-reply-hover-border: $primary !default;
38957
39236
  .k-alt .k-bubble:hover {
38958
39237
  @include box-shadow( $chat-alt-bubble-hover-shadow );
38959
39238
  }
38960
- .k-alt .k-state-selected .k-bubble ,
39239
+ .k-alt .k-state-selected .k-bubble,
38961
39240
  .k-alt .k-selected .k-bubble {
38962
39241
  @include box-shadow( $chat-alt-bubble-selected-shadow );
38963
39242
  }
@@ -39744,7 +40023,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
39744
40023
  color: $body-text;
39745
40024
  }
39746
40025
 
39747
- .k-timeline-arrow.k-state-disabled ,
40026
+ .k-timeline-arrow.k-state-disabled,
39748
40027
  .k-timeline-arrow.k-disabled {
39749
40028
  opacity: 1; // The arrow button in disabled mode should have a solid background
39750
40029
  color: $timeline-track-arrow-disabled-text;
@@ -39765,7 +40044,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
39765
40044
  background-color: $timeline-flag-bg;
39766
40045
  }
39767
40046
 
39768
- .k-timeline-track-item.k-state-focus .k-timeline-circle ,
40047
+ .k-timeline-track-item.k-state-focus .k-timeline-circle,
39769
40048
  .k-timeline-track-item.k-focus .k-timeline-circle {
39770
40049
  @include box-shadow( $timeline-track-item-focus-shadow );
39771
40050
  }
@@ -40458,7 +40737,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
40458
40737
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
40459
40738
 
40460
40739
  &:focus,
40461
- &.k-state-focus ,
40740
+ &.k-state-focus,
40462
40741
  &.k-focus {
40463
40742
  color: $scrollview-navigation-color;
40464
40743
  opacity: $scrollview-navigation-hover-opacity;
@@ -40469,7 +40748,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
40469
40748
  }
40470
40749
 
40471
40750
  &:hover,
40472
- &.k-state-hover ,
40751
+ &.k-state-hover,
40473
40752
  &.k-hover {
40474
40753
  color: $scrollview-navigation-color;
40475
40754
  opacity: $scrollview-navigation-hover-opacity;
@@ -40489,14 +40768,14 @@ $scrollview-transition-timing-function: ease-in-out !default;
40489
40768
  }
40490
40769
 
40491
40770
  &:focus,
40492
- &.k-state-focused ,
40771
+ &.k-state-focused,
40493
40772
  &.k-focus {
40494
40773
  box-shadow: $scrollview-pagebutton-shadow;
40495
40774
  }
40496
40775
  }
40497
40776
 
40498
40777
  .k-scrollview-nav > .k-link:hover,
40499
- .k-scrollview-nav > .k-link.k-state-hover ,
40778
+ .k-scrollview-nav > .k-link.k-state-hover,
40500
40779
  .k-scrollview-nav > .k-link.k-hover {
40501
40780
  box-shadow: $scrollview-pagebutton-shadow;
40502
40781
  }
@@ -41282,8 +41561,6 @@ $treemap-line-height: $line-height !default;
41282
41561
  }
41283
41562
 
41284
41563
 
41285
-
41286
-
41287
41564
  @include exports("dataviz/treemap/theme") {
41288
41565
 
41289
41566
  // Treemap
@@ -41311,7 +41588,7 @@ $treemap-line-height: $line-height !default;
41311
41588
  .k-leaf.k-inverse {
41312
41589
  color: $component-text;
41313
41590
  }
41314
- .k-leaf.k-state-hover ,
41591
+ .k-leaf.k-state-hover,
41315
41592
  .k-leaf.k-hover {
41316
41593
  box-shadow: inset 0 0 0 3px $component-border;
41317
41594
  }
@@ -41798,7 +42075,7 @@ $orgchart-line-v-height: 25px !default;
41798
42075
  .k-orgchart-node-group-container:focus,
41799
42076
  .k-orgchart-node-group-container.k-focus,
41800
42077
  .k-orgchart-node-group-container.k-state-focus,
41801
- .k-orgchart-node-group-container.k-state-focused ,
42078
+ .k-orgchart-node-group-container.k-state-focused,
41802
42079
  .k-orgchart-node-group-container.k-focus {
41803
42080
  @include box-shadow( $orgchart-node-group-focus-shadow );
41804
42081
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -41818,6 +42095,151 @@ $orgchart-line-v-height: 25px !default;
41818
42095
 
41819
42096
  // #endregion
41820
42097
 
42098
+ // #endregion
42099
+ // #region @import "signature/_index.scss"; -> packages/default/scss/signature/_index.scss
42100
+ // #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
42101
+ // File already imported_once. Skipping output.
42102
+ // #endregion
42103
+
42104
+ // Dependencies
42105
+ // #region @import "../button/_index.scss"; -> packages/default/scss/button/_index.scss
42106
+ // File already imported_once. Skipping output.
42107
+ // #endregion
42108
+ // #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
42109
+ // File already imported_once. Skipping output.
42110
+ // #endregion
42111
+
42112
+ // Component
42113
+ // #region @import "_variables.scss"; -> packages/default/scss/signature/_variables.scss
42114
+ $kendo-signature-width: 250px !default;
42115
+ $kendo-signature-height: 84px !default;
42116
+
42117
+ $kendo-signature-maximized-width: 750px !default;
42118
+ $kendo-signature-maximized-height: 252px !default;
42119
+
42120
+ $kendo-signature-padding: map-get( $spacing, 1 ) !default;
42121
+ $kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
42122
+ $kendo-signature-padding-md: $kendo-signature-padding !default;
42123
+ $kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get($spacing, thin) !default;
42124
+
42125
+ $kendo-signature-line-width: 1px !default;
42126
+ $kendo-signature-line-style: dashed !default;
42127
+ $kendo-signature-line-color: rgba( $info, .24 ) !default;
42128
+
42129
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
42130
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
42131
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
42132
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
42133
+
42134
+ $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
42135
+ $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
42136
+ $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
42137
+ $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
42138
+
42139
+ $kendo-signature-sizes: (
42140
+ sm: (
42141
+ padding: $kendo-signature-padding-sm,
42142
+ line-size: $kendo-signature-line-size-sm,
42143
+ line-offset: $kendo-signature-line-bottom-offset-sm
42144
+ ),
42145
+ md: (
42146
+ padding: $kendo-signature-padding-md,
42147
+ line-size: $kendo-signature-line-size-md,
42148
+ line-offset: $kendo-signature-line-bottom-offset-md
42149
+ ),
42150
+ lg: (
42151
+ padding: $kendo-signature-padding-lg,
42152
+ line-size: $kendo-signature-line-size-lg,
42153
+ line-offset: $kendo-signature-line-bottom-offset-lg
42154
+ )
42155
+ ) !default;
42156
+
42157
+ $kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
42158
+ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
42159
+
42160
+ // #endregion
42161
+ // #region @import "_layout.scss"; -> packages/default/scss/signature/_layout.scss
42162
+ @include exports("signature/layout") {
42163
+
42164
+ .k-signature {
42165
+ width: $kendo-signature-width;
42166
+ height: $kendo-signature-height;
42167
+ position: relative;
42168
+ box-sizing: border-box;
42169
+ display: flex;
42170
+ flex-direction: column;
42171
+ justify-content: space-between;
42172
+
42173
+ &.k-signature-maximized {
42174
+ width: $kendo-signature-maximized-width;
42175
+ height: $kendo-signature-maximized-height;
42176
+
42177
+ > .k-signature-line {
42178
+ border-bottom-width: $kendo-signature-maximized-line-width;
42179
+ }
42180
+ }
42181
+ }
42182
+
42183
+ .k-signature-actions {
42184
+ display: flex;
42185
+ width: min-content;
42186
+ margin-inline-start: auto;
42187
+ gap: $kendo-signature-actions-gap;
42188
+ z-index: 2;
42189
+ }
42190
+
42191
+ .k-signature-canvas {
42192
+ position: absolute;
42193
+ top: 0;
42194
+ left: 0;
42195
+ width: 100%;
42196
+ height: 100%;
42197
+ display: block;
42198
+ z-index: 1;
42199
+ }
42200
+
42201
+ .k-signature-line {
42202
+ position: absolute;
42203
+ z-index: 0;
42204
+ border-bottom-width: $kendo-signature-line-width;
42205
+ border-bottom-style: $kendo-signature-line-style;
42206
+ }
42207
+
42208
+ // Sizes
42209
+ @each $size, $size-props in $kendo-signature-sizes {
42210
+ $_padding: map-get($size-props, padding);
42211
+ $_line-size: map-get($size-props, line-size);
42212
+ $_line-offset: map-get($size-props, line-offset);
42213
+
42214
+ .k-signature-#{$size} {
42215
+ padding: $_padding;
42216
+
42217
+ .k-signature-line {
42218
+ width: $_line-size;
42219
+ bottom: $_line-offset;
42220
+ }
42221
+ }
42222
+
42223
+ }
42224
+ }
42225
+
42226
+ // #endregion
42227
+ // #region @import "_theme.scss"; -> packages/default/scss/signature/_theme.scss
42228
+ @include exports("signature/theme") {
42229
+
42230
+ // Solid signature
42231
+ .k-signature {
42232
+
42233
+ .k-signature-line {
42234
+ border-bottom-color: $kendo-signature-line-color;
42235
+ }
42236
+ }
42237
+
42238
+
42239
+ }
42240
+
42241
+ // #endregion
42242
+
41821
42243
  // #endregion
41822
42244
 
41823
42245
  // #endregion