@progress/kendo-theme-classic 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.
package/dist/all.scss CHANGED
@@ -6118,14 +6118,14 @@ $message-box-link-text-decoration: underline !default;
6118
6118
  $kendo-list-font-size: null !default;
6119
6119
  $kendo-list-font-size-sm: $font-size-md !default;
6120
6120
  $kendo-list-font-size-md: $font-size-md !default;
6121
- $kendo-list-font-size-lg: $font-size-md !default;
6121
+ $kendo-list-font-size-lg: $font-size-lg !default;
6122
6122
 
6123
6123
  /// Line height of the list component, if no size is set.
6124
6124
  /// @group list
6125
6125
  $kendo-list-line-height: null !default;
6126
- $kendo-list-line-height-sm: null !default;
6127
- $kendo-list-line-height-md: null !default;
6128
- $kendo-list-line-height-lg: null !default;
6126
+ $kendo-list-line-height-sm: $line-height-md !default;
6127
+ $kendo-list-line-height-md: $line-height-md !default;
6128
+ $kendo-list-line-height-lg: $line-height-lg !default;
6129
6129
 
6130
6130
  /// Horizontal padding of list header, if no size is set.
6131
6131
  /// @group list
@@ -6171,7 +6171,7 @@ $kendo-list-item-padding-x: null !default;
6171
6171
  $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
6172
6172
  $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
6173
6173
  $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
6174
- $kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
6174
+ $kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
6175
6175
 
6176
6176
  /// Vertical padding of list items, when no size is set.
6177
6177
  /// @group list
@@ -6179,7 +6179,7 @@ $kendo-list-item-padding-y: null !default;
6179
6179
  $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
6180
6180
  $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
6181
6181
  $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
6182
- $kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
6182
+ $kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
6183
6183
 
6184
6184
  /// Font size of list items, if no size is set.
6185
6185
  /// @group list
@@ -8078,34 +8078,33 @@ $kendo-button-border-radius: null !default;
8078
8078
  /// Horizontal padding of the button.
8079
8079
  /// @group button
8080
8080
  $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
8081
- $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
8082
- $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
8083
- $kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
8084
-
8085
8081
  /// Vertical padding of the button.
8086
8082
  /// @group button
8087
8083
  $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
8088
- $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
8089
- $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
8090
- $kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
8091
-
8092
8084
  /// Font family of the button.
8093
8085
  /// @group button
8094
8086
  $kendo-button-font-family: $font-family !default;
8095
-
8096
8087
  /// Font sizes of the button.
8097
8088
  /// @group button
8098
8089
  $kendo-button-font-size: $font-size-md !default;
8099
- $kendo-button-font-size-sm: $font-size-md !default;
8100
- $kendo-button-font-size-md: $font-size-md !default;
8101
- $kendo-button-font-size-lg: $font-size-md !default;
8102
-
8103
8090
  /// Line heights used along with $font-size.
8104
8091
  /// @group button
8105
8092
  $kendo-button-line-height: $line-height-md !default;
8093
+
8094
+ $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
8095
+ $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
8096
+ $kendo-button-font-size-sm: $font-size-md !default;
8106
8097
  $kendo-button-line-height-sm: $line-height-md !default;
8098
+
8099
+ $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
8100
+ $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
8101
+ $kendo-button-font-size-md: $font-size-md !default;
8107
8102
  $kendo-button-line-height-md: $line-height-md !default;
8108
- $kendo-button-line-height-lg: $line-height-md !default;
8103
+
8104
+ $kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
8105
+ $kendo-button-padding-y-lg: map-get( $spacing, 2 );
8106
+ $kendo-button-font-size-lg: $font-size-lg !default;
8107
+ $kendo-button-line-height-lg: $line-height-lg !default;
8109
8108
 
8110
8109
  /// Calculated height of the button.
8111
8110
  /// @group button
@@ -8115,6 +8114,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
8115
8114
  /// @group button
8116
8115
  $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
8117
8116
 
8117
+ $kendo-button-sizes: (
8118
+ sm: (
8119
+ padding-x: $kendo-button-padding-x-sm,
8120
+ padding-y: $kendo-button-padding-y-sm,
8121
+ font-size: $kendo-button-font-size-sm,
8122
+ line-height: $kendo-button-line-height-sm
8123
+ ),
8124
+ md: (
8125
+ padding-x: $kendo-button-padding-x-md,
8126
+ padding-y: $kendo-button-padding-y-md,
8127
+ font-size: $kendo-button-font-size-md,
8128
+ line-height: $kendo-button-line-height-md
8129
+ ),
8130
+ lg: (
8131
+ padding-x: $kendo-button-padding-x-lg,
8132
+ padding-y: $kendo-button-padding-y-lg,
8133
+ font-size: $kendo-button-font-size-lg,
8134
+ line-height: $kendo-button-line-height-lg
8135
+ )
8136
+ ) !default;
8137
+
8118
8138
  /// Theme colors map for the button.
8119
8139
  /// @group button
8120
8140
  $kendo-button-theme-colors: map-merge(
@@ -8340,45 +8360,27 @@ $kendo-button-transition: color .2s ease-in-out !default;
8340
8360
 
8341
8361
  .k-button-text {}
8342
8362
 
8343
- // Sizes
8344
- .k-button-sm {
8345
- padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
8346
- font-size: $kendo-button-font-size-sm;
8347
- line-height: $kendo-button-line-height-sm;
8348
- }
8349
- .k-button-md {
8350
- padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
8351
- font-size: $kendo-button-font-size-md;
8352
- line-height: $kendo-button-line-height-md;
8353
- }
8354
- .k-button-lg {
8355
- padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
8356
- font-size: $kendo-button-font-size-lg;
8357
- line-height: $kendo-button-line-height-lg;
8358
- }
8359
8363
 
8360
- .k-icon-button.k-button-sm {
8361
- padding: $kendo-button-padding-y-sm;
8364
+ // Sizes
8365
+ @each $size, $size-props in $kendo-button-sizes {
8366
+ $_padding-x: map-get( $size-props, padding-x );
8367
+ $_padding-y: map-get( $size-props, padding-y );
8368
+ $_font-size: map-get( $size-props, font-size );
8369
+ $_line-height: map-get( $size-props, line-height );
8362
8370
 
8363
- > .k-button-icon {
8364
- min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
8365
- min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
8371
+ .k-button-#{$size} {
8372
+ padding: $_padding-y $_padding-x;
8373
+ font-size: $_font-size;
8374
+ line-height: $_line-height;
8366
8375
  }
8367
- }
8368
- .k-icon-button.k-button-md {
8369
- padding: $kendo-button-padding-y-md;
8370
8376
 
8371
- > .k-button-icon {
8372
- min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
8373
- min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
8374
- }
8375
- }
8376
- .k-icon-button.k-button-lg {
8377
- padding: $kendo-button-padding-y-lg;
8377
+ .k-button-#{$size}.k-icon-button {
8378
+ padding: $_padding-y;
8378
8379
 
8379
- > .k-button-icon {
8380
- min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
8381
- min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
8380
+ > .k-button-icon {
8381
+ min-width: calc( #{$_font-size} * #{$_line-height} );
8382
+ min-height: calc( #{$_font-size} * #{$_line-height} );
8383
+ }
8382
8384
  }
8383
8385
  }
8384
8386
 
@@ -8906,16 +8908,33 @@ $kendo-button-transition: color .2s ease-in-out !default;
8906
8908
  // Component
8907
8909
  // #region @import "_variables.scss"; -> packages/classic/scss/input/_variables.scss
8908
8910
  // Input
8911
+
8912
+ /// Default width of input components.
8913
+ /// @group input
8909
8914
  $kendo-input-default-width: 100% !default;
8910
8915
 
8916
+ /// Border width of input components.
8917
+ /// @group input
8911
8918
  $kendo-input-border-width: 1px !default;
8912
8919
  $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
8920
+ /// Border radius of input components.
8921
+ /// @group input
8913
8922
  $kendo-input-border-radius: null !default;
8914
8923
 
8924
+ /// Horizontal padding of input components.
8925
+ /// @group input
8915
8926
  $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
8927
+ /// Vertical padding of input components.
8928
+ /// @group input
8916
8929
  $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
8930
+ /// Font family of input components.
8931
+ /// @group input
8917
8932
  $kendo-input-font-family: $font-family !default;
8933
+ /// Font size of input components.
8934
+ /// @group input
8918
8935
  $kendo-input-font-size: $font-size-md !default;
8936
+ /// Line height of input components.
8937
+ /// @group input
8919
8938
  $kendo-input-line-height: $line-height-md !default;
8920
8939
 
8921
8940
  $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -8928,10 +8947,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
8928
8947
  $kendo-input-font-size-md: $font-size-md !default;
8929
8948
  $kendo-input-line-height-md: $line-height-md !default;
8930
8949
 
8931
- $kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
8932
- $kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
8933
- $kendo-input-font-size-lg: $font-size-md !default;
8934
- $kendo-input-line-height-lg: $line-height-md !default;
8950
+ $kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
8951
+ $kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
8952
+ $kendo-input-font-size-lg: $font-size-lg !default;
8953
+ $kendo-input-line-height-lg: $line-height-lg !default;
8935
8954
 
8936
8955
  $kendo-input-sizes: (
8937
8956
  sm: (
@@ -11425,7 +11444,7 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
11425
11444
  $kendo-chip-border-width: 1px !default;
11426
11445
  /// The spacing between the text and the icons of the chip.
11427
11446
  /// @group chip
11428
- $kendo-chip-spacing: map-get( $spacing, 1 );
11447
+ $kendo-chip-spacing: map-get( $spacing, 1 ) !default;
11429
11448
 
11430
11449
  /// Horizontal padding of the chip.
11431
11450
  /// @group chip
@@ -14071,7 +14090,8 @@ $fieldset-legend-border: null !default;
14071
14090
 
14072
14091
  .k-multiselect,
14073
14092
  .k-floating-label-container,
14074
- .k-daterangepicker .k-dateinput {
14093
+ .k-daterangepicker .k-dateinput,
14094
+ .k-signature {
14075
14095
  display: inline-flex;
14076
14096
  width: 100%;
14077
14097
  }
@@ -15142,6 +15162,7 @@ $listbox-drop-hint-width: 1px !default;
15142
15162
  // #region @import "_variables.scss"; -> packages/classic/scss/progressbar/_variables.scss
15143
15163
  // Progressbar
15144
15164
  $progressbar-height: 22px !default;
15165
+ $progressbar-horizontal-width: 100% !default;
15145
15166
  $progressbar-animation-timing: 1s linear infinite !default;
15146
15167
  $progressbar-border-width: 0px !default;
15147
15168
  $progressbar-font-family: $font-family !default;
@@ -15165,6 +15186,10 @@ $progressbar-indeterminate-gradient: null !default;
15165
15186
 
15166
15187
  $progressbar-chunk-border: $body-bg !default;
15167
15188
 
15189
+ // Circular Progressbar
15190
+ $kendo-circular-progressbar-arc-stroke: $primary !default;
15191
+ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
15192
+
15168
15193
  // #endregion
15169
15194
  // #region @import "_layout.scss"; -> packages/classic/scss/progressbar/_layout.scss
15170
15195
  // #region @import "~@progress/kendo-theme-default/scss/progressbar/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/progressbar/_layout.scss
@@ -15196,7 +15221,7 @@ $progressbar-chunk-border: $body-bg !default;
15196
15221
 
15197
15222
 
15198
15223
  // Selection
15199
- > .k-state-selected ,
15224
+ > .k-state-selected,
15200
15225
  > .k-selected {
15201
15226
  border-width: 0;
15202
15227
  border-style: solid;
@@ -15257,7 +15282,7 @@ $progressbar-chunk-border: $body-bg !default;
15257
15282
 
15258
15283
  // Horizontal
15259
15284
  .k-progressbar-horizontal {
15260
- width: 27em;
15285
+ width: $progressbar-horizontal-width;
15261
15286
  height: $progressbar-height;
15262
15287
  grid-template-columns: 1fr;
15263
15288
  grid-template-rows: 100%;
@@ -15267,7 +15292,7 @@ $progressbar-chunk-border: $body-bg !default;
15267
15292
  flex-direction: row;
15268
15293
  }
15269
15294
 
15270
- > .k-state-selected ,
15295
+ > .k-state-selected,
15271
15296
  > .k-selected {
15272
15297
  width: 0;
15273
15298
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15294,7 +15319,7 @@ $progressbar-chunk-border: $body-bg !default;
15294
15319
  // Horizontal reverse
15295
15320
  &.k-progressbar-reverse {
15296
15321
 
15297
- > .k-state-selected ,
15322
+ > .k-state-selected,
15298
15323
  > .k-selected {
15299
15324
  flex-direction: row-reverse;
15300
15325
  justify-self: flex-end;
@@ -15319,7 +15344,7 @@ $progressbar-chunk-border: $body-bg !default;
15319
15344
  writing-mode: vertical-lr;
15320
15345
  }
15321
15346
 
15322
- > .k-state-selected ,
15347
+ > .k-state-selected,
15323
15348
  > .k-selected {
15324
15349
  height: 0;
15325
15350
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15349,7 +15374,7 @@ $progressbar-chunk-border: $body-bg !default;
15349
15374
  &.k-progressbar-reverse {
15350
15375
  flex-direction: column;
15351
15376
 
15352
- > .k-state-selected ,
15377
+ > .k-state-selected,
15353
15378
  > .k-selected {
15354
15379
  flex-direction: column;
15355
15380
  align-self: flex-start;
@@ -15374,7 +15399,7 @@ $progressbar-chunk-border: $body-bg !default;
15374
15399
 
15375
15400
  > .k-state-selected,
15376
15401
  > .k-selected,
15377
- > .k-state-selected > .k-progress-status-wrap ,
15402
+ > .k-state-selected > .k-progress-status-wrap,
15378
15403
  > .k-selected > .k-progress-status-wrap {
15379
15404
  transition: width .1s ease-in-out;
15380
15405
  }
@@ -15403,7 +15428,7 @@ $progressbar-chunk-border: $body-bg !default;
15403
15428
  display: -ms-inline-grid;
15404
15429
 
15405
15430
  > .k-progress-status-wrap,
15406
- > .k-state-selected ,
15431
+ > .k-state-selected,
15407
15432
  > .k-selected {
15408
15433
  -ms-grid-column: 1;
15409
15434
  -ms-grid-row: 1;
@@ -15413,7 +15438,7 @@ $progressbar-chunk-border: $body-bg !default;
15413
15438
  -ms-grid-columns: 1fr;
15414
15439
  -ms-grid-rows: $progressbar-height;
15415
15440
 
15416
- &.k-progressbar-reverse > .k-state-selected ,
15441
+ &.k-progressbar-reverse > .k-state-selected,
15417
15442
  &.k-progressbar-reverse > .k-selected {
15418
15443
  -ms-grid-column-align: end;
15419
15444
  }
@@ -15422,12 +15447,12 @@ $progressbar-chunk-border: $body-bg !default;
15422
15447
  -ms-grid-columns: $progressbar-height;
15423
15448
  -ms-grid-rows: 1fr;
15424
15449
 
15425
- > .k-state-selected ,
15450
+ > .k-state-selected,
15426
15451
  > .k-selected {
15427
15452
  -ms-grid-row-align: end;
15428
15453
  }
15429
15454
 
15430
- &.k-progressbar-reverse > .k-state-selected ,
15455
+ &.k-progressbar-reverse > .k-state-selected,
15431
15456
  &.k-progressbar-reverse > .k-selected {
15432
15457
  -ms-grid-row-align: start;
15433
15458
  }
@@ -15435,6 +15460,49 @@ $progressbar-chunk-border: $body-bg !default;
15435
15460
 
15436
15461
  }
15437
15462
 
15463
+ @include exports("circular-progressbar/layout") {
15464
+
15465
+ .k-circular-progressbar {
15466
+ display: inline-block;
15467
+ text-align: left;
15468
+ position: relative;
15469
+ }
15470
+
15471
+ .k-circular-progressbar-surface {
15472
+ height: 100%;
15473
+
15474
+ & > div {
15475
+ width: 100%;
15476
+ height: 100%;
15477
+ }
15478
+
15479
+ svg {
15480
+ width: 100%;
15481
+ height: 100%;
15482
+ }
15483
+ }
15484
+
15485
+ .k-circular-progressbar-scale {
15486
+ fill: none;
15487
+ }
15488
+
15489
+ .k-circular-progressbar-arc {
15490
+ transform-box: fill-box;
15491
+ transform-origin: center center;
15492
+ transform: rotate(-90deg);
15493
+ stroke-linecap: round;
15494
+ fill: none;
15495
+ }
15496
+
15497
+ .k-circular-progressbar-label {
15498
+ position: absolute;
15499
+ text-align: center;
15500
+ padding: 0;
15501
+ margin: 0;
15502
+ }
15503
+
15504
+ }
15505
+
15438
15506
  // #endregion
15439
15507
 
15440
15508
  // #endregion
@@ -15450,7 +15518,7 @@ $progressbar-chunk-border: $body-bg !default;
15450
15518
  .k-progressbar {
15451
15519
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
15452
15520
 
15453
- .k-state-selected ,
15521
+ .k-state-selected,
15454
15522
  .k-selected {
15455
15523
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
15456
15524
  }
@@ -15469,6 +15537,19 @@ $progressbar-chunk-border: $body-bg !default;
15469
15537
 
15470
15538
  }
15471
15539
 
15540
+ @include exports("circular-progressbar/theme") {
15541
+
15542
+ .k-circular-progressbar-scale {
15543
+ stroke: $kendo-circular-progressbar-scale-stroke;
15544
+ }
15545
+
15546
+ .k-circular-progressbar-arc {
15547
+ stroke: $kendo-circular-progressbar-arc-stroke;
15548
+ transition: stroke .5s ease;
15549
+ }
15550
+
15551
+ }
15552
+
15472
15553
  // #endregion
15473
15554
 
15474
15555
  // #endregion
@@ -15820,7 +15901,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15820
15901
  }
15821
15902
 
15822
15903
  .k-radio:focus,
15823
- .k-radio.k-state-focus ,
15904
+ .k-radio.k-state-focus,
15824
15905
  .k-radio.k-focus {
15825
15906
  box-shadow: none !important; // sass-lint:disable-line no-important
15826
15907
 
@@ -15884,7 +15965,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15884
15965
 
15885
15966
  // Hover state
15886
15967
  .k-radio:hover,
15887
- .k-radio.k-state-hover ,
15968
+ .k-radio.k-state-hover,
15888
15969
  .k-radio.k-hover {
15889
15970
  @include fill(
15890
15971
  $kendo-radio-hover-text,
@@ -15896,7 +15977,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15896
15977
 
15897
15978
  // Focus state
15898
15979
  .k-radio:focus,
15899
- .k-radio.k-state-focus ,
15980
+ .k-radio.k-state-focus,
15900
15981
  .k-radio.k-focus {
15901
15982
  @include fill( $border: $kendo-radio-focus-border );
15902
15983
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -15928,7 +16009,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15928
16009
  );
15929
16010
  }
15930
16011
  .k-radio:checked:focus,
15931
- .k-radio.k-checked.k-state-focus ,
16012
+ .k-radio.k-checked.k-state-focus,
15932
16013
  .k-radio.k-checked.k-focus {
15933
16014
  @include fill( $border: $kendo-radio-focus-checked-border );
15934
16015
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -16099,7 +16180,7 @@ $slider-disabled-opacity: null !default;
16099
16180
  }
16100
16181
 
16101
16182
 
16102
- &.k-state-disabled ,
16183
+ &.k-state-disabled,
16103
16184
  &.k-disabled {
16104
16185
  .k-tick,
16105
16186
  .k-slider-track,
@@ -16556,20 +16637,20 @@ $slider-disabled-opacity: null !default;
16556
16637
  }
16557
16638
 
16558
16639
  &:focus,
16559
- &.k-state-focused ,
16640
+ &.k-state-focused,
16560
16641
  &.k-focus {
16561
16642
  @include box-shadow( $slider-draghandle-focused-shadow );
16562
16643
  }
16563
16644
  }
16564
16645
 
16565
- &.k-state-focused ,
16646
+ &.k-state-focused,
16566
16647
  &.k-focus {
16567
16648
  .k-draghandle {
16568
16649
  @include box-shadow( $slider-draghandle-focused-shadow );
16569
16650
  }
16570
16651
  }
16571
16652
 
16572
- &.k-state-disabled ,
16653
+ &.k-state-disabled,
16573
16654
  &.k-disabled {
16574
16655
  opacity: $slider-disabled-opacity;
16575
16656
  }
@@ -16630,7 +16711,6 @@ $calendar-border: $component-border !default;
16630
16711
  $calendar-header-padding-x: map-get( $spacing, 1 ) !default;
16631
16712
  $calendar-header-padding-y: map-get( $spacing, 1 ) !default;
16632
16713
  $calendar-header-border-width: 1px !default;
16633
- $calendar-header-min-width: ($calendar-cell-size * 8) !default;
16634
16714
 
16635
16715
  $calendar-header-bg: $header-bg !default;
16636
16716
  $calendar-header-text: $header-text !default;
@@ -16728,6 +16808,50 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16728
16808
 
16729
16809
  // Multiview calendar
16730
16810
 
16811
+
16812
+ // Calendar sizes
16813
+ $kendo-calendar-sm-font-size: $font-size-md !default;
16814
+ $kendo-calendar-sm-line-height: $line-height-md !default;
16815
+ $kendo-calendar-sm-cell-size: 28px !default;
16816
+ $kendo-calendar-sm-cell-padding-x: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
16817
+ $kendo-calendar-sm-cell-padding-y: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
16818
+
16819
+ $kendo-calendar-md-font-size: $font-size-md !default;
16820
+ $kendo-calendar-md-line-height: $line-height-md !default;
16821
+ $kendo-calendar-md-cell-size: 32px !default;
16822
+ $kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
16823
+ $kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
16824
+
16825
+ $kendo-calendar-lg-font-size: $font-size-lg !default;
16826
+ $kendo-calendar-lg-line-height: $line-height-lg !default;
16827
+ $kendo-calendar-lg-cell-size: 40px !default;
16828
+ $kendo-calendar-lg-cell-padding-x: map-get( $spacing, 2 ) !default;
16829
+ $kendo-calendar-lg-cell-padding-y: map-get( $spacing, 2 ) !default;
16830
+
16831
+ $kendo-calendar-sizes: (
16832
+ sm: (
16833
+ font-size: $kendo-calendar-sm-font-size,
16834
+ line-height: $kendo-calendar-sm-line-height,
16835
+ cell-size: $kendo-calendar-sm-cell-size,
16836
+ cell-padding-x: $kendo-calendar-sm-cell-padding-y,
16837
+ cell-padding-y: $kendo-calendar-sm-cell-padding-x
16838
+ ),
16839
+ md: (
16840
+ font-size: $kendo-calendar-md-font-size,
16841
+ line-height: $kendo-calendar-md-line-height,
16842
+ cell-size: $kendo-calendar-md-cell-size,
16843
+ cell-padding-x: $kendo-calendar-md-cell-padding-y,
16844
+ cell-padding-y: $kendo-calendar-md-cell-padding-x
16845
+ ),
16846
+ lg: (
16847
+ font-size: $kendo-calendar-lg-font-size,
16848
+ line-height: $kendo-calendar-lg-line-height,
16849
+ cell-size: $kendo-calendar-lg-cell-size,
16850
+ cell-padding-x: $kendo-calendar-lg-cell-padding-y,
16851
+ cell-padding-y: $kendo-calendar-lg-cell-padding-x
16852
+ )
16853
+ ) !default;
16854
+
16731
16855
  // #endregion
16732
16856
  // #region @import "_layout.scss"; -> packages/classic/scss/calendar/_layout.scss
16733
16857
  // #region @import "~@progress/kendo-theme-default/scss/calendar/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/calendar/_layout.scss
@@ -16735,6 +16859,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16735
16859
 
16736
16860
  // Base
16737
16861
  .k-calendar {
16862
+ inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
16863
+ block-size: var( --INTERNAL--kendo-calendar-height, min-content );
16738
16864
  border-width: $calendar-border-width;
16739
16865
  border-style: solid;
16740
16866
  box-sizing: border-box;
@@ -16755,19 +16881,12 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16755
16881
  > .k-calendar {
16756
16882
  border: 0;
16757
16883
  }
16758
-
16759
- // Common
16760
- .k-link {
16761
- white-space: normal;
16762
- position: relative;
16763
- overflow: hidden;
16764
- }
16765
16884
  }
16766
16885
 
16767
16886
 
16768
16887
  // Calendar table
16769
16888
  .k-calendar-table {
16770
- margin: 0;
16889
+ margin: 0 auto;
16771
16890
  border-width: 0;
16772
16891
  border-color: inherit;
16773
16892
  border-spacing: 0;
@@ -16775,8 +16894,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16775
16894
  table-layout: fixed;
16776
16895
  text-align: center;
16777
16896
  outline: 0;
16778
- display: inline-table;
16779
- vertical-align: top;
16897
+ display: table;
16780
16898
  position: relative;
16781
16899
  z-index: 1;
16782
16900
  }
@@ -16794,6 +16912,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16794
16912
  font-weight: $calendar-caption-font-weight;
16795
16913
  cursor: default;
16796
16914
  }
16915
+
16916
+
16917
+ // Calendar cell
16797
16918
  .k-calendar-th,
16798
16919
  .k-calendar-td {
16799
16920
  border-width: 0;
@@ -16815,10 +16936,32 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16815
16936
  }
16816
16937
  .k-calendar-td {
16817
16938
  @include border-radius( $calendar-cell-border-radius );
16939
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
16940
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
16818
16941
  border-color: transparent;
16819
16942
  }
16820
16943
 
16821
16944
 
16945
+ // Calendar cell inner
16946
+ // Remove .k-calendar once we remove k-link
16947
+ .k-calendar .k-calendar-cell-inner {
16948
+ @include border-radius( $calendar-cell-border-radius );
16949
+ padding: $calendar-cell-padding-y $calendar-cell-padding-x;
16950
+ padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$calendar-cell-padding-x} );
16951
+ padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$calendar-cell-padding-y} );
16952
+ width: 100%;
16953
+ height: 100%;
16954
+ box-sizing: border-box;
16955
+ display: flex;
16956
+ flex-direction: row;
16957
+ align-items: center;
16958
+ justify-content: center;
16959
+ white-space: normal;
16960
+ position: relative;
16961
+ overflow: hidden;
16962
+ }
16963
+
16964
+
16822
16965
  // Calendar header
16823
16966
  .k-calendar .k-header {
16824
16967
  padding: $calendar-header-padding-y $calendar-header-padding-x;
@@ -16836,7 +16979,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16836
16979
  // Calendar header
16837
16980
  .k-calendar-header {
16838
16981
  padding: $calendar-header-padding-y $calendar-header-padding-x;
16839
- min-width: $calendar-header-min-width;
16982
+ min-width: ($calendar-cell-size * 8);
16840
16983
  box-sizing: border-box;
16841
16984
  display: flex;
16842
16985
  align-items: center;
@@ -16878,22 +17021,13 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16878
17021
  padding: 0 $calendar-header-padding-x;
16879
17022
  // setting width / height prevents layout changes in meta views
16880
17023
  width: $calendar-view-width;
17024
+ inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$calendar-view-width});
16881
17025
  min-height: $calendar-view-height;
16882
17026
  box-sizing: content-box;
16883
17027
  gap: $calendar-view-gap;
16884
17028
  position: relative;
16885
17029
  z-index: 1;
16886
17030
  overflow: hidden;
16887
-
16888
- .k-link {
16889
- @include border-radius( $calendar-cell-border-radius );
16890
- padding: $calendar-cell-padding-y $calendar-cell-padding-x;
16891
- box-sizing: border-box;
16892
- display: flex;
16893
- flex-direction: row;
16894
- align-items: center;
16895
- justify-content: center;
16896
- }
16897
17031
  }
16898
17032
  .k-week-number .k-calendar-view {
16899
17033
  width: (8 * $calendar-cell-size);
@@ -16901,61 +17035,59 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16901
17035
 
16902
17036
 
16903
17037
  // Month view
17038
+ .k-month-calendar,
16904
17039
  .k-calendar-monthview {
16905
17040
  $_month-cell-size: $calendar-cell-size;
16906
17041
 
16907
17042
  .k-calendar-td {
16908
17043
  width: $_month-cell-size;
16909
17044
  height: $_month-cell-size;
16910
- }
16911
- .k-link {
16912
- width: $_month-cell-size;
16913
- height: $_month-cell-size;
17045
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
17046
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
16914
17047
  }
16915
17048
  }
16916
17049
 
16917
17050
 
16918
17051
  // Year view
17052
+ .k-year-calendar,
16919
17053
  .k-calendar-yearview {
16920
- $_year-cell-size: ( (7 / 4) * $calendar-cell-size);
17054
+ $_year-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16921
17055
 
16922
17056
  .k-calendar-td {
16923
- width: auto;
16924
- height: auto;
16925
- }
16926
- .k-link {
16927
17057
  width: $_year-cell-size;
16928
17058
  height: $_year-cell-size;
17059
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
17060
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
16929
17061
  }
16930
17062
  }
16931
17063
 
16932
17064
 
16933
17065
  // Decade view
17066
+ .k-decade-calendar,
16934
17067
  .k-calendar-decadeview {
16935
- $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);
17068
+ $_decade-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16936
17069
 
16937
17070
  .k-calendar-td {
16938
- width: auto;
16939
- height: auto;
16940
- }
16941
- .k-link {
16942
17071
  width: $_decade-cell-size;
16943
17072
  height: $_decade-cell-size;
17073
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
17074
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
16944
17075
  }
16945
17076
  }
16946
17077
 
16947
17078
 
16948
17079
  // Century view
17080
+ .k-century-calendar,
16949
17081
  .k-calendar-centuryview {
16950
- $_century-cell-size: ( (7 / 4) * $calendar-cell-size);
17082
+ $_century-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
16951
17083
 
16952
17084
  .k-calendar-td {
16953
- width: auto;
16954
- height: auto;
16955
- }
16956
- .k-link {
16957
17085
  width: $_century-cell-size;
16958
17086
  height: $_century-cell-size;
17087
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
17088
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
17089
+ }
17090
+ .k-calendar-cell-inner {
16959
17091
  text-align: left;
16960
17092
  }
16961
17093
  }
@@ -16995,6 +17127,56 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
16995
17127
  top: 0;
16996
17128
  right: 0;
16997
17129
  }
17130
+
17131
+
17132
+
17133
+
17134
+ // Calendar sizes
17135
+ @each $size, $size-props in $kendo-calendar-sizes {
17136
+ $_font-size: map-get( $size-props, font-size );
17137
+ $_line-height: map-get( $size-props, line-height );
17138
+ $_cell-size: map-get( $size-props, cell-size );
17139
+ $_cell-padding-x: map-get( $size-props, cell-padding-x );
17140
+ $_cell-padding-y: map-get( $size-props, cell-padding-y );
17141
+
17142
+ $_month-cell-size: $_cell-size;
17143
+ $_year-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
17144
+ $_decade-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
17145
+ $_century-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
17146
+
17147
+ .k-calendar-#{$size} {
17148
+ --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
17149
+ --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
17150
+ --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
17151
+ font-size: $_font-size;
17152
+ line-height: $_line-height;
17153
+
17154
+ &.k-month-calendar,
17155
+ .k-calendar-monthview {
17156
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
17157
+ }
17158
+ &.k-year-calendar,
17159
+ .k-calendar-yearview {
17160
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
17161
+ }
17162
+ &.k-decade-calendar,
17163
+ .k-calendar-decadeview {
17164
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
17165
+ }
17166
+ &.k-century-calendar,
17167
+ .k-calendar-centuryview {
17168
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
17169
+ }
17170
+ }
17171
+ }
17172
+
17173
+
17174
+
17175
+
17176
+ // Alias
17177
+ .k-link {
17178
+ @extend .k-calendar-cell-inner;
17179
+ }
16998
17180
  }
16999
17181
 
17000
17182
 
@@ -17119,7 +17301,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17119
17301
  }
17120
17302
 
17121
17303
  // // styles are applied to the k-link element inside
17122
- // .k-state-selected ,
17304
+ // .k-state-selected,
17123
17305
  // .k-selected {
17124
17306
  // color: inherit;
17125
17307
  // background: transparent;
@@ -17145,6 +17327,10 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17145
17327
  &::after {
17146
17328
  display: none;
17147
17329
  }
17330
+
17331
+ &:focus {
17332
+ outline: 0;
17333
+ }
17148
17334
  }
17149
17335
 
17150
17336
  .k-range-start {
@@ -17242,8 +17428,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17242
17428
  &.k-hover,
17243
17429
  &.k-state-hover,
17244
17430
  &:focus,
17245
- &.k-state-focus,
17246
- &.k-focus {
17431
+ &.k-focus,
17432
+ &.k-state-focus {
17247
17433
  color: $calendar-today-nav-hover-text;
17248
17434
  }
17249
17435
  }
@@ -17261,11 +17447,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17261
17447
  // Special days
17262
17448
  .k-calendar-view .k-today {
17263
17449
  @if $calendar-today-style == box {
17264
- .k-link {
17450
+ .k-calendar-cell-inner {
17265
17451
  box-shadow: inset 0 0 0 1px $calendar-today-color;
17266
17452
  }
17267
- &.k-state-focused .k-link,
17268
- &.k-focus .k-link {
17453
+ &.k-focus .k-calendar-cell-inner,
17454
+ &.k-state-focused .k-calendar-cell-inner {
17269
17455
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
17270
17456
  }
17271
17457
  } @else if $calendar-today-style == color {
@@ -17299,9 +17485,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17299
17485
 
17300
17486
 
17301
17487
  // Interactive states
17302
- .k-calendar-td:hover .k-link,
17303
- .k-calendar-td.k-state-hover .k-link,
17304
- .k-calendar-td.k-hover .k-link {
17488
+ .k-calendar-td:hover .k-calendar-cell-inner,
17489
+ .k-calendar-td.k-hover .k-calendar-cell-inner,
17490
+ .k-calendar-td.k-state-hover .k-calendar-cell-inner {
17305
17491
  @include fill(
17306
17492
  $calendar-cell-hover-text,
17307
17493
  $calendar-cell-hover-bg,
@@ -17309,8 +17495,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17309
17495
  $calendar-cell-hover-gradient
17310
17496
  );
17311
17497
  }
17312
- .k-calendar-td.k-state-selected .k-link,
17313
- .k-calendar-td.k-selected .k-link {
17498
+ .k-calendar-td.k-selected .k-calendar-cell-inner,
17499
+ .k-calendar-td.k-state-selected .k-calendar-cell-inner {
17314
17500
  @include fill(
17315
17501
  $calendar-cell-selected-text,
17316
17502
  $calendar-cell-selected-bg,
@@ -17318,12 +17504,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17318
17504
  $calendar-cell-selected-gradient
17319
17505
  );
17320
17506
  }
17321
- .k-calendar-td.k-state-selected:hover .k-link,
17322
- .k-calendar-td.k-selected:hover .k-link,
17323
- .k-calendar-td.k-state-selected.k-state-hover .k-link,
17324
- .k-calendar-td.k-selected.k-hover .k-link,
17325
- .k-calendar-td.k-selected:hover .k-link,
17326
- .k-calendar-td.k-selected.k-hover .k-link {
17507
+ .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
17508
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
17509
+ .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
17327
17510
  @include fill(
17328
17511
  $calendar-cell-selected-hover-text,
17329
17512
  $calendar-cell-selected-hover-bg,
@@ -17331,18 +17514,15 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17331
17514
  $calendar-cell-selected-hover-gradient
17332
17515
  );
17333
17516
  }
17334
- .k-calendar-td.k-state-focused .k-link,
17335
- .k-calendar-td.k-focus .k-link,
17336
- .k-calendar-td.k-state-focus .k-link,
17337
- .k-calendar-td.k-focus .k-link {
17517
+ .k-calendar-td:focus .k-calendar-cell-inner,
17518
+ .k-calendar-td.k-focus .k-calendar-cell-inner,
17519
+ .k-calendar-td.k-state-focus .k-calendar-cell-inner,
17520
+ .k-calendar-td.k-state-focused .k-calendar-cell-inner {
17338
17521
  box-shadow: $calendar-cell-focused-shadow;
17339
17522
  }
17340
- .k-calendar-td.k-state-selected.k-state-focused .k-link,
17341
- .k-calendar-td.k-selected.k-focused .k-link,
17342
- .k-calendar-td.k-state-selected.k-state-focus .k-link,
17343
- .k-calendar-td.k-selected.k-focus .k-link,
17344
- .k-calendar-td.k-selected:focus .k-link,
17345
- .k-calendar-td.k-selected.k-focus .k-link {
17523
+ .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
17524
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
17525
+ .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
17346
17526
  box-shadow: $calendar-cell-selected-focus-shadow;
17347
17527
  }
17348
17528
 
@@ -17356,8 +17536,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17356
17536
  box-shadow: inset -1px 0 $calendar-navigation-border;
17357
17537
 
17358
17538
  li:hover,
17359
- li.k-state-hover,
17360
- li.k-hover {
17539
+ li.k-hover,
17540
+ li.k-state-hover {
17361
17541
  color: $calendar-today-nav-hover-text;
17362
17542
  }
17363
17543
  }
@@ -17412,19 +17592,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17412
17592
  .k-range-start,
17413
17593
  .k-range-end,
17414
17594
  .k-range-mid {
17415
- // sass-lint:disable-block indentation
17416
- background-image:
17417
- linear-gradient(
17418
- transparent $calendar-range-gap,
17419
- $calendar-range-bg $calendar-range-gap,
17420
- $calendar-range-bg calc(100% - #{$calendar-range-gap}),
17421
- transparent calc(100% - #{$calendar-range-gap})
17422
- );
17423
-
17424
- .k-ie & {
17425
- background-image: none;
17426
- background-color: $calendar-range-bg;
17427
- }
17595
+ background-color: $calendar-range-bg;
17428
17596
  }
17429
17597
 
17430
17598
  .k-range-start.k-range-end {
@@ -17434,16 +17602,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17434
17602
 
17435
17603
  .k-range-start,
17436
17604
  .k-range-end {
17437
- .k-link {
17605
+ .k-calendar-cell-inner {
17438
17606
  background-color: $calendar-cell-selected-bg;
17439
17607
  }
17440
17608
  }
17441
17609
 
17442
- .k-range-start.k-state-active,
17443
17610
  .k-range-start.k-active,
17444
- .k-range-end.k-state-active,
17445
- .k-range-end.k-active {
17446
- .k-link {
17611
+ .k-range-start.k-state-active,
17612
+ .k-range-end.k-active,
17613
+ .k-range-end.k-state-active {
17614
+ .k-calendar-cell-inner {
17447
17615
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
17448
17616
  }
17449
17617
  }
@@ -17456,8 +17624,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17456
17624
  content: "";
17457
17625
  display: block;
17458
17626
  position: absolute;
17459
- top: $calendar-range-gap;
17460
- bottom: $calendar-range-gap;
17627
+ top: 0;
17628
+ bottom: 0;
17461
17629
  width: $calendar-range-split-size;
17462
17630
  }
17463
17631
  }
@@ -17535,6 +17703,44 @@ $time-list-highlight-border: $component-border !default;
17535
17703
 
17536
17704
  $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17537
17705
 
17706
+
17707
+ // Time selector sizes
17708
+ $kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
17709
+ $kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
17710
+ $kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
17711
+ $kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
17712
+
17713
+ $kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
17714
+ $kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
17715
+ $kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
17716
+ $kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
17717
+
17718
+ $kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
17719
+ $kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
17720
+ $kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
17721
+ $kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
17722
+
17723
+ $kendo-time-selector-sizes: (
17724
+ sm: (
17725
+ font-size: $kendo-time-selector-sm-font-size,
17726
+ line-height: $kendo-time-selector-sm-line-height,
17727
+ list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
17728
+ list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
17729
+ ),
17730
+ md: (
17731
+ font-size: $kendo-time-selector-md-font-size,
17732
+ line-height: $kendo-time-selector-md-line-height,
17733
+ list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
17734
+ list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
17735
+ ),
17736
+ lg: (
17737
+ font-size: $kendo-time-selector-lg-font-size,
17738
+ line-height: $kendo-time-selector-lg-line-height,
17739
+ list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
17740
+ list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
17741
+ )
17742
+ ) !default;
17743
+
17538
17744
  // #endregion
17539
17745
  // #region @import "_layout.scss"; -> packages/classic/scss/timeselector/_layout.scss
17540
17746
  // #region @import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss
@@ -17640,7 +17846,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17640
17846
  display: block;
17641
17847
  }
17642
17848
 
17643
- &.k-state-focused ,
17849
+ &.k-state-focused,
17644
17850
  &.k-focus {
17645
17851
  &::before,
17646
17852
  &::after {
@@ -17746,6 +17952,36 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17746
17952
  top: calc( #{$time-list-title-height / 2} );
17747
17953
  }
17748
17954
 
17955
+
17956
+ // Time selector sizes
17957
+ @each $size, $size-props in $kendo-time-selector-sizes {
17958
+ $_font-size: map-get( $size-props, font-size );
17959
+ $_line-height: map-get( $size-props, line-height );
17960
+ $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
17961
+ $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
17962
+ $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
17963
+
17964
+
17965
+ .k-timeselector-#{$size} {
17966
+ font-size: $_font-size;
17967
+ line-height: $_line-height;
17968
+
17969
+ .k-time-highlight,
17970
+ .k-time-list-highlight {
17971
+ height: $_highlight-height;
17972
+ }
17973
+
17974
+ .k-time-separator {
17975
+ height: $_highlight-height;
17976
+ }
17977
+
17978
+ .k-time-list-item,
17979
+ .k-time-list .k-item {
17980
+ padding: $_list-item-padding-y $_list-item-padding-x;
17981
+ }
17982
+ }
17983
+ }
17984
+
17749
17985
  }
17750
17986
 
17751
17987
  // #endregion
@@ -17785,7 +18021,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17785
18021
  color: $time-list-title-text;
17786
18022
  }
17787
18023
 
17788
- &.k-state-focused ,
18024
+ &.k-state-focused,
17789
18025
  &.k-focus {
17790
18026
  .k-title {
17791
18027
  color: $time-list-title-focus-text;
@@ -18114,7 +18350,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18114
18350
  &.k-focus,
18115
18351
  &.k-state-selected,
18116
18352
  &.k-selected,
18117
- &.k-state-selected:hover ,
18353
+ &.k-state-selected:hover,
18118
18354
  &.k-selected:hover {
18119
18355
  position: relative;
18120
18356
  z-index: 100;
@@ -19467,13 +19703,13 @@ $kendo-treeview-font-family: $font-family !default;
19467
19703
  $kendo-treeview-font-size: $font-size-md !default;
19468
19704
  $kendo-treeview-font-size-sm: $font-size-md !default;
19469
19705
  $kendo-treeview-font-size-md: $font-size-md !default;
19470
- $kendo-treeview-font-size-lg: $font-size-md !default;
19706
+ $kendo-treeview-font-size-lg: $font-size-lg !default;
19471
19707
  /// Line height of the treeview component.
19472
19708
  /// @group treeview
19473
19709
  $kendo-treeview-line-height: $line-height-md !default;
19474
19710
  $kendo-treeview-line-height-sm: $line-height-md !default;
19475
19711
  $kendo-treeview-line-height-md: $line-height-md !default;
19476
- $kendo-treeview-line-height-lg: $line-height-md !default;
19712
+ $kendo-treeview-line-height-lg: $line-height-lg !default;
19477
19713
  /// Indentation of child groups in treeview component.
19478
19714
  /// @group treeview
19479
19715
  $kendo-treeview-indent: 16px !default;
@@ -19483,13 +19719,13 @@ $kendo-treeview-indent: 16px !default;
19483
19719
  $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
19484
19720
  $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
19485
19721
  $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
19486
- $kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
19722
+ $kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
19487
19723
  /// Vertical padding of treeview items.
19488
19724
  /// @group treeview
19489
19725
  $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
19490
19726
  $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
19491
19727
  $kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
19492
- $kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
19728
+ $kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
19493
19729
  /// Border width of treeview items.
19494
19730
  /// @group treeview
19495
19731
  $kendo-treeview-item-border-width: 0px !default;
@@ -20128,7 +20364,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20128
20364
  color: $component-text;
20129
20365
 
20130
20366
  &:focus,
20131
- &.k-state-focused ,
20367
+ &.k-state-focused,
20132
20368
  &.k-focus {
20133
20369
 
20134
20370
  .k-rating-item {
@@ -20136,7 +20372,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20136
20372
  text-shadow: $rating-icon-focused-shadow;
20137
20373
  }
20138
20374
 
20139
- &.k-state-selected > .k-icon ,
20375
+ &.k-state-selected > .k-icon,
20140
20376
  &.k-selected > .k-icon {
20141
20377
  text-shadow: $rating-icon-focused-selected-shadow;
20142
20378
  }
@@ -20147,19 +20383,19 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20147
20383
  .k-rating-item {
20148
20384
  color: $rating-icon-text;
20149
20385
 
20150
- &.k-state-selected ,
20386
+ &.k-state-selected,
20151
20387
  &.k-selected {
20152
20388
  color: $rating-icon-selected-text;
20153
20389
 
20154
20390
  &:focus,
20155
- &.k-state-focused ,
20391
+ &.k-state-focused,
20156
20392
  &.k-focus {
20157
20393
  color: $rating-icon-focused-text;
20158
20394
  }
20159
20395
  }
20160
20396
 
20161
20397
  &:hover,
20162
- &.k-state-hover ,
20398
+ &.k-state-hover,
20163
20399
  &.k-hover {
20164
20400
  color: $rating-icon-hover-text;
20165
20401
  cursor: pointer;
@@ -21391,7 +21627,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21391
21627
  z-index: 1;
21392
21628
  }
21393
21629
  input[disabled],
21394
- input.k-state-disabled ,
21630
+ input.k-state-disabled,
21395
21631
  input.k-disabled {
21396
21632
  visibility: hidden;
21397
21633
  }
@@ -21439,12 +21675,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21439
21675
 
21440
21676
  .k-file {
21441
21677
 
21442
- &.k-state-focused ,
21678
+ &.k-state-focused,
21443
21679
  &.k-focus {
21444
21680
  box-shadow: inset $upload-focused-shadow;
21445
21681
  }
21446
21682
 
21447
- .k-upload-action.k-state-focused ,
21683
+ .k-upload-action.k-state-focused,
21448
21684
  .k-upload-action.k-focus {
21449
21685
  box-shadow: $upload-focused-shadow;
21450
21686
  }
@@ -22346,6 +22582,10 @@ $actionsheet-item-disabled-shadow: null !default;
22346
22582
  box-sizing: border-box;
22347
22583
  }
22348
22584
  }
22585
+ .k-actionsheet-fullscreen {
22586
+ max-height: 100%;
22587
+ height: 100%;
22588
+ }
22349
22589
 
22350
22590
 
22351
22591
  // Actionsheet header
@@ -22359,6 +22599,35 @@ $actionsheet-item-disabled-shadow: null !default;
22359
22599
  font-size: $actionsheet-header-font-size;
22360
22600
  font-family: $actionsheet-header-font-family;
22361
22601
  line-height: $actionsheet-header-line-height;
22602
+ flex: none;
22603
+ }
22604
+
22605
+
22606
+ // Actionsheet titlebar
22607
+ .k-actionsheet-titlebar {
22608
+ @extend .k-actionsheet-header !optional;
22609
+ display: flex;
22610
+ flex-flow: row nowrap;
22611
+ align-items: center;
22612
+ }
22613
+ .k-actionsheet-title {
22614
+ flex: 1;
22615
+ }
22616
+ .k-actionsheet-actions {
22617
+ flex: none;
22618
+ }
22619
+
22620
+
22621
+ // Actionsheet content
22622
+ .k-actionsheet-content {
22623
+ flex: 1;
22624
+ overflow: auto;
22625
+ }
22626
+
22627
+
22628
+ // Actionsheet footer
22629
+ .k-actionsheet-footer {
22630
+ flex: none;
22362
22631
  }
22363
22632
 
22364
22633
 
@@ -22455,6 +22724,37 @@ $actionsheet-item-disabled-shadow: null !default;
22455
22724
  transform: none;
22456
22725
  }
22457
22726
 
22727
+
22728
+ // Adaptive action sheet
22729
+ .k-adaptive-actionsheet {
22730
+ max-width: 100%;
22731
+ width: 100%;
22732
+
22733
+ // TMP: this should be moved to action sheet
22734
+ display: flex;
22735
+ flex-flow: column nowrap;
22736
+
22737
+ .k-calendar {
22738
+ margin-inline: auto;
22739
+ border-width: 0;
22740
+ display: flex;
22741
+ }
22742
+
22743
+ .k-timeselector {
22744
+ height: 100%;
22745
+ border-width: 0;
22746
+ overflow: hidden;
22747
+
22748
+ .k-time-part {
22749
+ display: contents;
22750
+ }
22751
+
22752
+ .k-time-list-wrapper {
22753
+ height: 100%;
22754
+ }
22755
+ }
22756
+ }
22757
+
22458
22758
  }
22459
22759
 
22460
22760
  // #endregion
@@ -22507,7 +22807,7 @@ $actionsheet-item-disabled-shadow: null !default;
22507
22807
 
22508
22808
  // Hover state
22509
22809
  &:hover,
22510
- &.k-state-hover ,
22810
+ &.k-state-hover,
22511
22811
  &.k-hover {
22512
22812
  @include fill(
22513
22813
  $actionsheet-item-hover-text,
@@ -22521,7 +22821,7 @@ $actionsheet-item-disabled-shadow: null !default;
22521
22821
 
22522
22822
  // Focus state
22523
22823
  &:focus,
22524
- &.k-state-focus ,
22824
+ &.k-state-focus,
22525
22825
  &.k-focus {
22526
22826
  @include fill(
22527
22827
  $actionsheet-item-focus-text,
@@ -22535,7 +22835,7 @@ $actionsheet-item-disabled-shadow: null !default;
22535
22835
 
22536
22836
  // Disabed state
22537
22837
  &:disabled,
22538
- &.k-state-disabled ,
22838
+ &.k-state-disabled,
22539
22839
  &.k-disabled {
22540
22840
  @include fill(
22541
22841
  $actionsheet-item-disabled-text,
@@ -22780,7 +23080,7 @@ $actionsheet-item-disabled-shadow: null !default;
22780
23080
 
22781
23081
  .k-window {
22782
23082
  &:focus,
22783
- &.k-state-focused ,
23083
+ &.k-state-focused,
22784
23084
  &.k-focus {
22785
23085
  @include box-shadow( $window-focused-shadow );
22786
23086
  }
@@ -23269,33 +23569,33 @@ $drawer-selected-hover-text: $selected-hover-text !default;
23269
23569
  .k-drawer-item {
23270
23570
 
23271
23571
  &:hover,
23272
- &.k-state-hover ,
23572
+ &.k-state-hover,
23273
23573
  &.k-hover {
23274
23574
  color: $drawer-hovered-text;
23275
23575
  background-color: $drawer-hovered-bg;
23276
23576
  }
23277
23577
 
23278
23578
  &:focus,
23279
- &.k-state-focused ,
23579
+ &.k-state-focused,
23280
23580
  &.k-focus {
23281
23581
  background-color: $drawer-focused-bg;
23282
23582
  box-shadow: $drawer-focused-shadow;
23283
23583
 
23284
23584
  &:hover,
23285
- &.k-state-hover ,
23585
+ &.k-state-hover,
23286
23586
  &.k-hover {
23287
23587
  color: $drawer-hovered-text;
23288
23588
  background-color: $drawer-hovered-bg;
23289
23589
  }
23290
23590
  }
23291
23591
 
23292
- &.k-state-selected ,
23592
+ &.k-state-selected,
23293
23593
  &.k-selected {
23294
23594
  color: $drawer-selected-text;
23295
23595
  background-color: $drawer-selected-bg;
23296
23596
 
23297
23597
  &:hover,
23298
- &.k-state-hover ,
23598
+ &.k-state-hover,
23299
23599
  &.k-hover {
23300
23600
  color: $drawer-selected-hover-text;
23301
23601
  background-color: $drawer-selected-hover-bg;
@@ -24554,7 +24854,7 @@ $bottom-nav-flat-border: $component-border !default;
24554
24854
  outline: 0;
24555
24855
  }
24556
24856
  }
24557
- .k-bottom-nav-item.k-state-disabled ,
24857
+ .k-bottom-nav-item.k-state-disabled,
24558
24858
  .k-bottom-nav-item.k-disabled {
24559
24859
  background-color: initial;
24560
24860
  }
@@ -24609,7 +24909,7 @@ $bottom-nav-flat-border: $component-border !default;
24609
24909
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
24610
24910
  }
24611
24911
 
24612
- .k-bottom-nav-item.k-state-selected ,
24912
+ .k-bottom-nav-item.k-state-selected,
24613
24913
  .k-bottom-nav-item.k-selected {
24614
24914
  @include fill( $color: contrast-wcag( $color ) );
24615
24915
  }
@@ -24633,7 +24933,7 @@ $bottom-nav-flat-border: $component-border !default;
24633
24933
  }
24634
24934
 
24635
24935
  @each $name, $color in $kendo-theme-colors {
24636
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected ,
24936
+ &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
24637
24937
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
24638
24938
  @if $name == "secondary" or $name == "light" {
24639
24939
  @include fill( $color: try-shade($color, 3) );
@@ -24894,7 +25194,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24894
25194
  );
24895
25195
 
24896
25196
  &:focus,
24897
- &.k-state-focused ,
25197
+ &.k-state-focused,
24898
25198
  &.k-focus {
24899
25199
  @include box-shadow( $breadcrumb-focused-shadow );
24900
25200
  }
@@ -24911,7 +25211,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24911
25211
 
24912
25212
  // Hovered state
24913
25213
  &:hover,
24914
- &.k-state-hover ,
25214
+ &.k-state-hover,
24915
25215
  &.k-hover {
24916
25216
  @include fill(
24917
25217
  $breadcrumb-link-hovered-text,
@@ -24922,7 +25222,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24922
25222
 
24923
25223
  // Focused state
24924
25224
  &:focus,
24925
- &.k-state-focused ,
25225
+ &.k-state-focused,
24926
25226
  &.k-focus {
24927
25227
  @include fill(
24928
25228
  $breadcrumb-link-focused-text,
@@ -24944,7 +25244,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24944
25244
 
24945
25245
  // Hovered state
24946
25246
  &:hover,
24947
- &.k-state-hover ,
25247
+ &.k-state-hover,
24948
25248
  &.k-hover {
24949
25249
  @include fill(
24950
25250
  $breadcrumb-root-link-hovered-text,
@@ -24955,7 +25255,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24955
25255
 
24956
25256
  // Focused state
24957
25257
  &:focus,
24958
- &.k-state-focused ,
25258
+ &.k-state-focused,
24959
25259
  &.k-focus {
24960
25260
  @include fill(
24961
25261
  $breadcrumb-root-link-focused-text,
@@ -25104,7 +25404,7 @@ $pager-dropdown-width: 5em !default;
25104
25404
 
25105
25405
  // Focused state
25106
25406
  &:focus,
25107
- &.k-state-focus ,
25407
+ &.k-state-focus,
25108
25408
  &.k-focus {
25109
25409
  z-index: 3;
25110
25410
  }
@@ -25154,7 +25454,7 @@ $pager-dropdown-width: 5em !default;
25154
25454
  &:hover {
25155
25455
  z-index: 2;
25156
25456
  }
25157
- &.k-state-disabled ,
25457
+ &.k-state-disabled,
25158
25458
  &.k-disabled {
25159
25459
  color: inherit;
25160
25460
  }
@@ -25204,7 +25504,7 @@ $pager-dropdown-width: 5em !default;
25204
25504
  }
25205
25505
 
25206
25506
  // Selected state
25207
- .k-state-selected ,
25507
+ .k-state-selected,
25208
25508
  .k-selected {
25209
25509
  cursor: inherit;
25210
25510
  z-index: 2;
@@ -25353,7 +25653,7 @@ $pager-dropdown-width: 5em !default;
25353
25653
  &:focus,
25354
25654
  &.k-focus,
25355
25655
  &.k-state-focus,
25356
- &.k-state-focused ,
25656
+ &.k-state-focused,
25357
25657
  &.k-focus {
25358
25658
  @include fill( $bg: $pager-focus-bg );
25359
25659
  @include box-shadow( $pager-focus-shadow );
@@ -25369,7 +25669,7 @@ $pager-dropdown-width: 5em !default;
25369
25669
  );
25370
25670
 
25371
25671
  &:hover,
25372
- &.k-state-hover ,
25672
+ &.k-state-hover,
25373
25673
  &.k-hover {
25374
25674
  @include fill(
25375
25675
  $pager-item-hover-text,
@@ -25378,7 +25678,7 @@ $pager-dropdown-width: 5em !default;
25378
25678
  );
25379
25679
  }
25380
25680
 
25381
- &.k-state-selected ,
25681
+ &.k-state-selected,
25382
25682
  &.k-selected {
25383
25683
  @include fill(
25384
25684
  $pager-item-selected-text,
@@ -25388,7 +25688,7 @@ $pager-dropdown-width: 5em !default;
25388
25688
  }
25389
25689
 
25390
25690
  &:focus,
25391
- &.k-state-focus ,
25691
+ &.k-state-focus,
25392
25692
  &.k-focus {
25393
25693
  background-color: $pager-item-focus-bg;
25394
25694
  @include box-shadow( $pager-item-focus-shadow );
@@ -25412,7 +25712,7 @@ $pager-dropdown-width: 5em !default;
25412
25712
  );
25413
25713
 
25414
25714
  &:hover,
25415
- &.k-state-hover ,
25715
+ &.k-state-hover,
25416
25716
  &.k-hover {
25417
25717
  @include fill(
25418
25718
  $pager-number-hover-text,
@@ -25422,13 +25722,13 @@ $pager-dropdown-width: 5em !default;
25422
25722
  }
25423
25723
 
25424
25724
  &:focus,
25425
- &.k-state-focus ,
25725
+ &.k-state-focus,
25426
25726
  &.k-focus {
25427
25727
  background-color: $pager-number-focus-bg;
25428
25728
  @include box-shadow( $pager-number-focus-shadow );
25429
25729
  }
25430
25730
 
25431
- &.k-state-selected ,
25731
+ &.k-state-selected,
25432
25732
  &.k-selected {
25433
25733
  @include fill(
25434
25734
  $pager-number-selected-text,
@@ -25461,7 +25761,7 @@ $pager-dropdown-width: 5em !default;
25461
25761
  );
25462
25762
 
25463
25763
  &:hover,
25464
- &.k-state-hover ,
25764
+ &.k-state-hover,
25465
25765
  &.k-hover {
25466
25766
  @include fill(
25467
25767
  $dropdownlist-hovered-text,
@@ -25482,7 +25782,7 @@ $pager-dropdown-width: 5em !default;
25482
25782
  .k-link {
25483
25783
 
25484
25784
  &:hover,
25485
- &.k-state-hover ,
25785
+ &.k-state-hover,
25486
25786
  &.k-hover {
25487
25787
  @include fill(
25488
25788
  $kendo-list-item-hover-text,
@@ -25490,7 +25790,7 @@ $pager-dropdown-width: 5em !default;
25490
25790
  );
25491
25791
  }
25492
25792
 
25493
- &.k-state-selected ,
25793
+ &.k-state-selected,
25494
25794
  &.k-selected {
25495
25795
  @include fill(
25496
25796
  $kendo-list-item-selected-text,
@@ -25761,7 +26061,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
25761
26061
  opacity: $stepper-optional-label-opacity;
25762
26062
  }
25763
26063
  .k-step-disabled .k-step-label-optional,
25764
- &.k-state-disabled .k-step-label-optional ,
26064
+ &.k-state-disabled .k-step-label-optional,
25765
26065
  &.k-disabled .k-step-label-optional {
25766
26066
  color: inherit;
25767
26067
  }
@@ -26079,7 +26379,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
26079
26379
  $bg: $stepper-progressbar-bg
26080
26380
  );
26081
26381
 
26082
- .k-state-selected ,
26382
+ .k-state-selected,
26083
26383
  .k-selected {
26084
26384
  @include fill(
26085
26385
  $color: $stepper-progressbar-fill-text,
@@ -26330,13 +26630,13 @@ $tabstrip-content-border-focused: $component-text !default;
26330
26630
  position: relative;
26331
26631
  z-index: 1;
26332
26632
 
26333
- &.k-state-active ,
26633
+ &.k-state-active,
26334
26634
  &.k-active {
26335
26635
  display: block;
26336
26636
  }
26337
26637
 
26338
26638
  &:focus,
26339
- &.k-state-focused ,
26639
+ &.k-state-focused,
26340
26640
  &.k-focus {
26341
26641
  outline-width: 1px;
26342
26642
  outline-style: dotted;
@@ -26425,7 +26725,7 @@ $tabstrip-content-border-focused: $component-text !default;
26425
26725
  margin-left: $tabstrip-item-gap;
26426
26726
  }
26427
26727
 
26428
- .k-item.k-state-active ,
26728
+ .k-item.k-state-active,
26429
26729
  .k-item.k-active {
26430
26730
  border-bottom-color: transparent;
26431
26731
  }
@@ -26455,7 +26755,7 @@ $tabstrip-content-border-focused: $component-text !default;
26455
26755
  margin-left: $tabstrip-item-gap;
26456
26756
  }
26457
26757
 
26458
- .k-item.k-state-active ,
26758
+ .k-item.k-state-active,
26459
26759
  .k-item.k-active {
26460
26760
  border-top-color: transparent;
26461
26761
  }
@@ -26489,7 +26789,7 @@ $tabstrip-content-border-focused: $component-text !default;
26489
26789
  margin-top: $tabstrip-item-gap;
26490
26790
  }
26491
26791
 
26492
- .k-item.k-state-active ,
26792
+ .k-item.k-state-active,
26493
26793
  .k-item.k-active {
26494
26794
  border-right-color: transparent;
26495
26795
  }
@@ -26525,7 +26825,7 @@ $tabstrip-content-border-focused: $component-text !default;
26525
26825
  margin-top: $tabstrip-item-gap;
26526
26826
  }
26527
26827
 
26528
- .k-item.k-state-active ,
26828
+ .k-item.k-state-active,
26529
26829
  .k-item.k-active {
26530
26830
  border-left-color: transparent;
26531
26831
  }
@@ -26571,7 +26871,7 @@ $tabstrip-content-border-focused: $component-text !default;
26571
26871
  border-left-width: $tabstrip-indicator-size;
26572
26872
  }
26573
26873
  }
26574
- .k-item.k-state-active::after ,
26874
+ .k-item.k-state-active::after,
26575
26875
  .k-item.k-active::after {
26576
26876
  display: block;
26577
26877
  }
@@ -26645,7 +26945,7 @@ $tabstrip-content-border-focused: $component-text !default;
26645
26945
  );
26646
26946
 
26647
26947
  &:hover,
26648
- &.k-state-hover ,
26948
+ &.k-state-hover,
26649
26949
  &.k-hover {
26650
26950
  @include fill(
26651
26951
  $tabstrip-item-hovered-text,
@@ -26658,7 +26958,7 @@ $tabstrip-content-border-focused: $component-text !default;
26658
26958
  &:active,
26659
26959
  &.k-state-active,
26660
26960
  &.k-active,
26661
- &.k-state-selected ,
26961
+ &.k-state-selected,
26662
26962
  &.k-selected {
26663
26963
  @include fill(
26664
26964
  $tabstrip-item-selected-text,
@@ -26669,7 +26969,7 @@ $tabstrip-content-border-focused: $component-text !default;
26669
26969
  }
26670
26970
 
26671
26971
  &:focus,
26672
- &.k-state-focused ,
26972
+ &.k-state-focused,
26673
26973
  &.k-focus {
26674
26974
  @include box-shadow( $tabstrip-item-focused-shadow );
26675
26975
  }
@@ -26692,7 +26992,7 @@ $tabstrip-content-border-focused: $component-text !default;
26692
26992
  );
26693
26993
 
26694
26994
  &:focus,
26695
- &.k-state-focused ,
26995
+ &.k-state-focused,
26696
26996
  &.k-focus {
26697
26997
  outline-color: $tabstrip-content-border-focused;
26698
26998
  }
@@ -26703,7 +27003,7 @@ $tabstrip-content-border-focused: $component-text !default;
26703
27003
  @if ($tabstrip-indicator-size) {
26704
27004
 
26705
27005
  .k-tabstrip-items-wrapper {
26706
- .k-item.k-state-active::after ,
27006
+ .k-item.k-state-active::after,
26707
27007
  .k-item.k-active::after {
26708
27008
  border-color: $tabstrip-indicator-color;
26709
27009
  }
@@ -26797,7 +27097,7 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26797
27097
  justify-content: space-between;
26798
27098
 
26799
27099
  &:focus,
26800
- &.k-state-focused ,
27100
+ &.k-state-focused,
26801
27101
  &.k-focus {
26802
27102
  outline-width: 1px;
26803
27103
  outline-style: dotted;
@@ -26894,13 +27194,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26894
27194
  @include exports("wizard/theme") {
26895
27195
  .k-wizard-step {
26896
27196
  &:focus,
26897
- &.k-state-focused ,
27197
+ &.k-state-focused,
26898
27198
  &.k-focus {
26899
27199
  outline-color: $wizard-step-border-focused;
26900
27200
  }
26901
27201
 
26902
27202
  .k-ie &:focus,
26903
- .k-ie &.k-state-focused ,
27203
+ .k-ie &.k-state-focused,
26904
27204
  .k-ie &.k-focus {
26905
27205
  @include box-shadow($wizard-focused-shadow);
26906
27206
  outline: none;
@@ -27071,7 +27371,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
27071
27371
  $expander-border
27072
27372
  );
27073
27373
 
27074
- &.k-state-focus ,
27374
+ &.k-state-focus,
27075
27375
  &.k-focus {
27076
27376
  box-shadow: $expander-focus-shadow;
27077
27377
  }
@@ -27086,13 +27386,13 @@ $expander-content-padding-y: $padding-y * 4 !default;
27086
27386
  outline: none;
27087
27387
 
27088
27388
  &:hover,
27089
- &.k-state-hover ,
27389
+ &.k-state-hover,
27090
27390
  &.k-hover {
27091
27391
  background-color: $expander-header-hover-bg;
27092
27392
  }
27093
27393
 
27094
27394
  // Should be removed
27095
- &.k-state-focused ,
27395
+ &.k-state-focused,
27096
27396
  &.k-focus {
27097
27397
  background-color: $expander-header-focused-bg;
27098
27398
  box-shadow: $expander-header-focused-shadow;
@@ -27466,7 +27766,7 @@ $panelbar-header-expanded-gradient: null !default;
27466
27766
 
27467
27767
  // Hover
27468
27768
  > .k-link:hover,
27469
- > .k-link.k-state-hover ,
27769
+ > .k-link.k-state-hover,
27470
27770
  > .k-link.k-hover {
27471
27771
  @include fill(
27472
27772
  $panelbar-header-hovered-text,
@@ -27480,7 +27780,7 @@ $panelbar-header-expanded-gradient: null !default;
27480
27780
  > .k-link:focus,
27481
27781
  > .k-link.k-state-focus,
27482
27782
  > .k-link.k-focus,
27483
- > .k-link.k-state-focused ,
27783
+ > .k-link.k-state-focused,
27484
27784
  > .k-link.k-focus {
27485
27785
  @include fill(
27486
27786
  $panelbar-header-focused-text,
@@ -27493,7 +27793,7 @@ $panelbar-header-expanded-gradient: null !default;
27493
27793
 
27494
27794
  // Focus & Hover
27495
27795
  > .k-link:focus:hover,
27496
- > .k-link.k-state-focus.k-state-hover ,
27796
+ > .k-link.k-state-focus.k-state-hover,
27497
27797
  > .k-link.k-focus.k-hover {
27498
27798
  @include fill(
27499
27799
  $panelbar-header-hovered-focused-text,
@@ -27504,7 +27804,7 @@ $panelbar-header-expanded-gradient: null !default;
27504
27804
  }
27505
27805
 
27506
27806
  // Selected
27507
- > .k-link.k-state-selected ,
27807
+ > .k-link.k-state-selected,
27508
27808
  > .k-link.k-selected {
27509
27809
  @include fill(
27510
27810
  $panelbar-header-selected-text,
@@ -27522,7 +27822,7 @@ $panelbar-header-expanded-gradient: null !default;
27522
27822
  // Selected Hover
27523
27823
  > .k-link.k-state-selected:hover,
27524
27824
  > .k-link.k-selected:hover,
27525
- > .k-link.k-state-selected.k-state-hover ,
27825
+ > .k-link.k-state-selected.k-state-hover,
27526
27826
  > .k-link.k-selected.k-hover {
27527
27827
  @include fill(
27528
27828
  $panelbar-header-selected-hovered-text,
@@ -27537,7 +27837,7 @@ $panelbar-header-expanded-gradient: null !default;
27537
27837
  > .k-link.k-selected:focus,
27538
27838
  > .k-link.k-state-selected.k-state-focus,
27539
27839
  > .k-link.k-selected.k-focus,
27540
- > .k-link.k-state-selected.k-state-focused ,
27840
+ > .k-link.k-state-selected.k-state-focused,
27541
27841
  > .k-link.k-selected.k-focused {
27542
27842
  @include fill(
27543
27843
  $panelbar-header-selected-focused-text,
@@ -27552,7 +27852,7 @@ $panelbar-header-expanded-gradient: null !default;
27552
27852
  > .k-link.k-selected:hover:focus,
27553
27853
  > .k-link.k-state-selected.k-state-hover.k-state-focus,
27554
27854
  > .k-link.k-selected.k-hover.k-state-focus,
27555
- > .k-link.k-state-selected.k-state-hover.k-state-focused ,
27855
+ > .k-link.k-state-selected.k-state-hover.k-state-focused,
27556
27856
  > .k-link.k-selected.k-hover.k-state-focused {
27557
27857
  @include fill(
27558
27858
  $panelbar-header-selected-hovered-focused-text,
@@ -27573,7 +27873,7 @@ $panelbar-header-expanded-gradient: null !default;
27573
27873
  > .k-item > .k-link.k-state-hover,
27574
27874
  > .k-item > .k-link.k-hover,
27575
27875
  > .k-panelbar-item > .k-link:hover,
27576
- > .k-panelbar-item > .k-link.k-state-hover ,
27876
+ > .k-panelbar-item > .k-link.k-state-hover,
27577
27877
  > .k-panelbar-item > .k-link.k-hover {
27578
27878
  @include fill(
27579
27879
  $panelbar-item-hovered-text,
@@ -27592,7 +27892,7 @@ $panelbar-header-expanded-gradient: null !default;
27592
27892
  > .k-panelbar-item > .k-link:focus,
27593
27893
  > .k-panelbar-item > .k-link.k-state-focus,
27594
27894
  > .k-panelbar-item > .k-link.k-focus,
27595
- > .k-panelbar-item > .k-link.k-state-focused ,
27895
+ > .k-panelbar-item > .k-link.k-state-focused,
27596
27896
  > .k-panelbar-item > .k-link.k-focus {
27597
27897
  @include fill(
27598
27898
  $panelbar-item-focused-text,
@@ -27608,7 +27908,7 @@ $panelbar-header-expanded-gradient: null !default;
27608
27908
  > .k-item > .k-link.k-state-focus.k-state-hover,
27609
27909
  > .k-item > .k-link.k-focus.k-hover,
27610
27910
  > .k-panelbar-item > .k-link:focus:hover,
27611
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
27911
+ > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
27612
27912
  > .k-panelbar-item > .k-link.k-focus.k-hover {
27613
27913
  @include fill(
27614
27914
  $panelbar-item-hovered-focused-text,
@@ -27621,7 +27921,7 @@ $panelbar-header-expanded-gradient: null !default;
27621
27921
  // Selected
27622
27922
  > .k-item > .k-link.k-state-selected,
27623
27923
  > .k-item > .k-link.k-selected,
27624
- > .k-panelbar-item > .k-link.k-state-selected ,
27924
+ > .k-panelbar-item > .k-link.k-state-selected,
27625
27925
  > .k-panelbar-item > .k-link.k-selected {
27626
27926
  @include fill(
27627
27927
  $panelbar-item-selected-text,
@@ -27638,7 +27938,7 @@ $panelbar-header-expanded-gradient: null !default;
27638
27938
  > .k-item > .k-link.k-selected.k-hover,
27639
27939
  > .k-panelbar-item > .k-link.k-state-selected:hover,
27640
27940
  > .k-panelbar-item > .k-link.k-selected:hover,
27641
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
27941
+ > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
27642
27942
  > .k-panelbar-item > .k-link.k-selected.k-hover {
27643
27943
  @include fill(
27644
27944
  $panelbar-item-selected-hovered-text,
@@ -27659,7 +27959,7 @@ $panelbar-header-expanded-gradient: null !default;
27659
27959
  > .k-panelbar-item > .k-link.k-selected:focus,
27660
27960
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
27661
27961
  > .k-panelbar-item > .k-link.k-selected.k-focus,
27662
- > .k-item > .k-link.k-state-selected.k-state-focused ,
27962
+ > .k-item > .k-link.k-state-selected.k-state-focused,
27663
27963
  > .k-item > .k-link.k-selected.k-focused {
27664
27964
  @include fill(
27665
27965
  $panelbar-item-selected-focused-text,
@@ -27680,7 +27980,7 @@ $panelbar-header-expanded-gradient: null !default;
27680
27980
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
27681
27981
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
27682
27982
  > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
27683
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover ,
27983
+ > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
27684
27984
  > .k-item > .k-link.k-selected.k-focused.k-state-hover {
27685
27985
  @include fill(
27686
27986
  $panelbar-item-selected-hovered-focused-text,
@@ -27974,7 +28274,7 @@ $splitbar-selected-text: $selected-text !default;
27974
28274
  .k-splitbar:focus,
27975
28275
  .k-splitbar.k-state-focus,
27976
28276
  .k-splitbar.k-focus,
27977
- .k-splitbar.k-state-focused ,
28277
+ .k-splitbar.k-state-focused,
27978
28278
  .k-splitbar.k-focus {
27979
28279
  color: $splitbar-selected-text;
27980
28280
  background: $splitbar-selected-bg;
@@ -28087,7 +28387,7 @@ $tilelayout-hint-border: $component-border !default;
28087
28387
  .k-tilelayout-item:focus,
28088
28388
  .k-tilelayout-item.k-focus,
28089
28389
  .k-tilelayout-item.k-state-focus,
28090
- .k-tilelayout-item.k-state-focused ,
28390
+ .k-tilelayout-item.k-state-focused,
28091
28391
  .k-tilelayout-item.k-focus {
28092
28392
  @include box-shadow($tilelayout-card-focus-shadow);
28093
28393
  }
@@ -28765,12 +29065,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28765
29065
 
28766
29066
  .k-column-menu {
28767
29067
 
28768
- .k-listgroup-item.k-state-selected ,
29068
+ .k-listgroup-item.k-state-selected,
28769
29069
  .k-listgroup-item.k-selected {
28770
29070
  color: $adaptive-grid-sort-text;
28771
29071
  background: none;
28772
29072
  }
28773
- .k-listgroup-item.k-state-selected .k-link ,
29073
+ .k-listgroup-item.k-state-selected .k-link,
28774
29074
  .k-listgroup-item.k-selected .k-link {
28775
29075
  color: inherit;
28776
29076
  }
@@ -29515,7 +29815,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29515
29815
  &.k-i-sort-desc-sm,
29516
29816
  &.k-i-sort-asc-sm {
29517
29817
  vertical-align: text-top;
29518
- margin-left: $grid-sorted-icon-spacing;
29818
+ margin-inline-start: $grid-sorted-icon-spacing;
29519
29819
  }
29520
29820
  }
29521
29821
 
@@ -29525,7 +29825,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29525
29825
  height: $icon-size;
29526
29826
  font-size: $grid-sorting-index-font-size;
29527
29827
  margin-top: $grid-sorting-index-spacing-y;
29528
- margin-left: $grid-sorting-index-spacing-x;
29828
+ margin-inline-start: $grid-sorting-index-spacing-x;
29529
29829
  }
29530
29830
  }
29531
29831
 
@@ -29926,15 +30226,15 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29926
30226
  }
29927
30227
 
29928
30228
  .k-header > .k-cell-inner {
29929
- 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);
30229
+ margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
29930
30230
  }
29931
30231
 
29932
30232
  .k-filterable {
29933
30233
  > .k-cell-inner {
29934
- margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
30234
+ margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
29935
30235
 
29936
30236
  .k-link {
29937
- padding-right: 0;
30237
+ padding-inline-end: 0;
29938
30238
  }
29939
30239
  }
29940
30240
  }
@@ -29973,6 +30273,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29973
30273
  .k-grid-filter,
29974
30274
  .k-header-column-menu {
29975
30275
  position: static;
30276
+ margin-inline-end: $grid-header-menu-icon-spacing;
29976
30277
  }
29977
30278
 
29978
30279
  .k-grid-filter,
@@ -30283,28 +30584,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30283
30584
  margin-left: $icon-spacing;
30284
30585
  margin-right: 0;
30285
30586
  }
30286
-
30287
- .k-header > .k-cell-inner {
30288
- margin-right: (-1 * $grid-cell-padding-x);
30289
- margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
30290
-
30291
- .k-sort-order {
30292
- margin-right: $grid-sorting-index-spacing-x;
30293
- margin-left: 0;
30294
- }
30295
- }
30296
-
30297
- .k-filterable {
30298
- > .k-cell-inner {
30299
- margin-right: (-1 * $grid-cell-padding-x);
30300
- margin-left: calc(-1 * #{$kendo-button-calc-size});
30301
-
30302
- .k-link {
30303
- padding-right: $grid-header-padding-x;
30304
- padding-left: 0;
30305
- }
30306
- }
30307
- }
30308
30587
  }
30309
30588
  }
30310
30589
 
@@ -30410,9 +30689,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30410
30689
  }
30411
30690
 
30412
30691
  // Hover state
30413
- tbody tr:not(.k-detail-row):hover,
30414
- tbody tr:not(.k-detail-row).k-state-hover ,
30415
- tbody tr:not(.k-detail-row).k-hover {
30692
+ tbody>tr:not(.k-detail-row):hover,
30693
+ tbody>tr:not(.k-detail-row).k-state-hover,
30694
+ tbody>tr:not(.k-detail-row).k-hover {
30416
30695
  color: $grid-hovered-text;
30417
30696
  background-color: $grid-hovered-bg;
30418
30697
  }
@@ -30420,7 +30699,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30420
30699
  // Selected state
30421
30700
  td.k-state-selected,
30422
30701
  td.k-selected,
30423
- tr.k-state-selected > td ,
30702
+ tr.k-state-selected > td,
30424
30703
  tr.k-selected > td {
30425
30704
  color: $grid-selected-text;
30426
30705
  background-color: $grid-selected-bg;
@@ -30436,7 +30715,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30436
30715
  .k-grouping-row > td:focus,
30437
30716
  .k-detail-row > td:focus,
30438
30717
  .k-group-footer > td:focus,
30439
- .k-grid-pager.k-state-focused ,
30718
+ .k-grid-pager.k-state-focused,
30440
30719
  .k-grid-pager.k-focus {
30441
30720
  box-shadow: $grid-focused-shadow;
30442
30721
  }
@@ -30479,12 +30758,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30479
30758
  }
30480
30759
 
30481
30760
  // Selected state
30482
- .k-state-selected td ,
30761
+ .k-state-selected td,
30483
30762
  .k-selected td {
30484
30763
  @include fill( $bg: $grid-sticky-selected-bg );
30485
30764
  }
30486
30765
 
30487
- .k-state-selected.k-alt td ,
30766
+ .k-state-selected.k-alt td,
30488
30767
  .k-selected.k-alt td {
30489
30768
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30490
30769
  }
@@ -30492,7 +30771,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30492
30771
  // Selected hover
30493
30772
  .k-state-selected:hover td,
30494
30773
  .k-selected:hover td,
30495
- .k-state-selected.k-state-hover td ,
30774
+ .k-state-selected.k-state-hover td,
30496
30775
  .k-selected.k-hover td {
30497
30776
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
30498
30777
  }
@@ -30538,7 +30817,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30538
30817
  &.k-state-border-down {
30539
30818
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
30540
30819
  }
30541
- &.k-state-active ,
30820
+ &.k-state-active,
30542
30821
  &.k-active {
30543
30822
  color: $selected-text;
30544
30823
  background-color: $selected-bg;
@@ -30598,7 +30877,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30598
30877
  &.k-selected .k-grid-content-sticky,
30599
30878
  &.k-state-selected .k-grid-row-sticky,
30600
30879
  &.k-selected .k-grid-row-sticky,
30601
- td.k-grid-content-sticky.k-state-selected ,
30880
+ td.k-grid-content-sticky.k-state-selected,
30602
30881
  td.k-grid-content-sticky.k-selected {
30603
30882
  @include fill( $bg: $grid-sticky-selected-bg );
30604
30883
  }
@@ -30607,7 +30886,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30607
30886
  &.k-selected.k-alt .k-grid-content-sticky,
30608
30887
  &.k-state-selected.k-alt .k-grid-row-sticky,
30609
30888
  &.k-selected.k-alt .k-grid-row-sticky,
30610
- &.k-alt td.k-grid-content-sticky.k-state-selected ,
30889
+ &.k-alt td.k-grid-content-sticky.k-state-selected,
30611
30890
  &.k-alt td.k-grid-content-sticky.k-selected {
30612
30891
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30613
30892
  }
@@ -30618,7 +30897,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30618
30897
  &:hover .k-grid-row-sticky,
30619
30898
  &.k-state-hover .k-grid-content-sticky,
30620
30899
  &.k-hover .k-grid-content-sticky,
30621
- &.k-state-hover .k-grid-row-sticky ,
30900
+ &.k-state-hover .k-grid-row-sticky,
30622
30901
  &.k-hover .k-grid-row-sticky {
30623
30902
  background-color: $grid-sticky-hovered-bg;
30624
30903
  }
@@ -30635,7 +30914,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30635
30914
  &.k-selected.k-hover .k-grid-row-sticky,
30636
30915
  &:hover td.k-grid-content-sticky.k-state-selected,
30637
30916
  &:hover td.k-grid-content-sticky.k-selected,
30638
- &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
30917
+ &.k-state-hover td.k-grid-content-sticky.k-state-selected,
30639
30918
  &.k-hover td.k-grid-content-sticky.k-selected {
30640
30919
  background-color: $grid-sticky-selected-hovered-bg;
30641
30920
  }
@@ -30649,7 +30928,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30649
30928
  background-color: $grid-sticky-bg;
30650
30929
 
30651
30930
  &:hover,
30652
- &.k-state-hover ,
30931
+ &.k-state-hover,
30653
30932
  &.k-hover {
30654
30933
  background-color: $grid-sticky-hovered-bg;
30655
30934
  }
@@ -30663,7 +30942,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30663
30942
  }
30664
30943
 
30665
30944
  &:hover td,
30666
- &.k-state-hover td ,
30945
+ &.k-state-hover td,
30667
30946
  &.k-hover td {
30668
30947
  background-color: $grid-sticky-hovered-bg;
30669
30948
  }
@@ -30681,7 +30960,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30681
30960
  .k-selected.k-grid-row-sticky td,
30682
30961
  .k-grid-row-sticky td.k-state-selected,
30683
30962
  .k-grid-row-sticky td.k-selected,
30684
- .k-state-selected.k-grid-content-sticky ,
30963
+ .k-state-selected.k-grid-content-sticky,
30685
30964
  .k-selected.k-grid-content-sticky {
30686
30965
  @include fill( $bg: $grid-sticky-selected-bg );
30687
30966
  }
@@ -30690,7 +30969,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30690
30969
  tr.k-selected.k-alt .k-grid-content-sticky,
30691
30970
  .k-state-selected.k-alt.k-grid-row-sticky td,
30692
30971
  .k-selected.k-alt.k-grid-row-sticky td,
30693
- .k-alt .k-state-selected.k-grid-content-sticky ,
30972
+ .k-alt .k-state-selected.k-grid-content-sticky,
30694
30973
  .k-alt .k-selected.k-grid-content-sticky {
30695
30974
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30696
30975
  }
@@ -30706,7 +30985,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30706
30985
  .k-grid-row-sticky.k-alt.k-state-hover td,
30707
30986
  .k-grid-row-sticky.k-alt.k-hover td,
30708
30987
  .k-alt:hover .k-grid-content-sticky,
30709
- .k-alt.k-state-hover .k-grid-content-sticky ,
30988
+ .k-alt.k-state-hover .k-grid-content-sticky,
30710
30989
  .k-alt.k-hover .k-grid-content-sticky {
30711
30990
  background-color: $grid-sticky-hovered-bg;
30712
30991
  }
@@ -30734,7 +31013,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30734
31013
  .k-grid-row-sticky.k-hover td.k-selected,
30735
31014
  tr:hover .k-grid-content-sticky.k-state-selected,
30736
31015
  tr:hover .k-grid-content-sticky.k-selected,
30737
- tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
31016
+ tr.k-state-hover .k-grid-content-sticky.k-state-selected,
30738
31017
  tr.k-hover .k-grid-content-sticky.k-selected {
30739
31018
  background-color: $grid-sticky-selected-hovered-bg;
30740
31019
  }
@@ -30746,7 +31025,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30746
31025
  }
30747
31026
 
30748
31027
  &:hover .k-grid-content-sticky,
30749
- &.k-state-hover .k-grid-content-sticky ,
31028
+ &.k-state-hover .k-grid-content-sticky,
30750
31029
  &.k-hover .k-grid-content-sticky {
30751
31030
  @include fill( $bg: $grid-sticky-hovered-bg );
30752
31031
  }
@@ -30760,13 +31039,13 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30760
31039
  );
30761
31040
  }
30762
31041
  .k-columnmenu-item:focus,
30763
- .k-columnmenu-item.k-state-focus ,
31042
+ .k-columnmenu-item.k-state-focus,
30764
31043
  .k-columnmenu-item.k-focus {
30765
31044
  @include box-shadow( $kendo-list-item-focus-shadow );
30766
31045
  }
30767
31046
 
30768
31047
  .k-columnmenu-item {
30769
- &.k-state-selected ,
31048
+ &.k-state-selected,
30770
31049
  &.k-selected {
30771
31050
  @include fill(
30772
31051
  $kendo-list-item-selected-text,
@@ -30792,7 +31071,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30792
31071
  );
30793
31072
 
30794
31073
  &:hover,
30795
- &.k-state-hover ,
31074
+ &.k-state-hover,
30796
31075
  &.k-hover {
30797
31076
  @include fill(
30798
31077
  $kendo-list-item-hover-text,
@@ -30800,7 +31079,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30800
31079
  );
30801
31080
  }
30802
31081
 
30803
- &.k-state-selected ,
31082
+ &.k-state-selected,
30804
31083
  &.k-selected {
30805
31084
  @include fill(
30806
31085
  $kendo-list-item-selected-text,
@@ -30809,7 +31088,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30809
31088
  }
30810
31089
 
30811
31090
  &:focus,
30812
- &.k-state-focused ,
31091
+ &.k-state-focused,
30813
31092
  &.k-focus {
30814
31093
  @include box-shadow( $kendo-list-item-focus-shadow );
30815
31094
  }
@@ -31051,7 +31330,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31051
31330
  // Listview content
31052
31331
  .k-listview-content {
31053
31332
 
31054
- > .k-state-focused ,
31333
+ > .k-state-focused,
31055
31334
  > .k-focus {
31056
31335
  @include fill(
31057
31336
  $listview-item-focus-text,
@@ -31061,7 +31340,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31061
31340
  @include box-shadow( $listview-item-focus-shadow );
31062
31341
  }
31063
31342
 
31064
- > .k-state-selected ,
31343
+ > .k-state-selected,
31065
31344
  > .k-selected {
31066
31345
  @include fill(
31067
31346
  $listview-item-selected-text,
@@ -31442,7 +31721,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31442
31721
  overflow: hidden;
31443
31722
 
31444
31723
  // disabled cells in the Spreadsheet should allow navigation if link is used
31445
- .k-state-disabled ,
31724
+ .k-state-disabled,
31446
31725
  .k-disabled {
31447
31726
  pointer-events: auto;
31448
31727
  }
@@ -32004,7 +32283,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32004
32283
  background-position: 50% 50%;
32005
32284
 
32006
32285
  &:hover div,
32007
- &.k-state-hovered div ,
32286
+ &.k-state-hovered div,
32008
32287
  &.k-hover div {
32009
32288
  margin: 0;
32010
32289
  align-self: center;
@@ -32070,7 +32349,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32070
32349
  .k-spreadsheet-insert-image-dialog {
32071
32350
  .k-spreadsheet-has-image {
32072
32351
  &:hover,
32073
- &.k-state-hovered ,
32352
+ &.k-state-hovered,
32074
32353
  &.k-hover {
32075
32354
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
32076
32355
  }
@@ -32250,7 +32529,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32250
32529
  );
32251
32530
  }
32252
32531
 
32253
- &.k-state-active ,
32532
+ &.k-state-active,
32254
32533
  &.k-active {
32255
32534
  @include fill(
32256
32535
  $kendo-button-active-text,
@@ -32268,7 +32547,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32268
32547
  > .k-menu,
32269
32548
  > .k-menu:not(.k-context-menu) {
32270
32549
 
32271
- .k-item.k-state-hover ,
32550
+ .k-item.k-state-hover,
32272
32551
  .k-item.k-hover {
32273
32552
  @include fill(
32274
32553
  $kendo-list-item-hover-text,
@@ -32299,7 +32578,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32299
32578
  .k-button {}
32300
32579
 
32301
32580
  .k-button:hover,
32302
- .k-button.k-state-hover ,
32581
+ .k-button.k-state-hover,
32303
32582
  .k-button.k-hover {
32304
32583
  @include fill(
32305
32584
  $kendo-list-item-hover-text,
@@ -32309,7 +32588,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32309
32588
  .k-button:active,
32310
32589
  .k-button.k-state-active,
32311
32590
  .k-button.k-active,
32312
- .k-button.k-state-selected ,
32591
+ .k-button.k-state-selected,
32313
32592
  .k-button.k-selected {
32314
32593
  @include fill(
32315
32594
  $kendo-list-item-selected-text,
@@ -32331,13 +32610,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32331
32610
 
32332
32611
  .k-spreadsheet-has-image {
32333
32612
  &:hover,
32334
- &.k-state-hovered ,
32613
+ &.k-state-hovered,
32335
32614
  &.k-hover {
32336
32615
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
32337
32616
  }
32338
32617
 
32339
32618
  &:hover div,
32340
- &.k-state-hovered div ,
32619
+ &.k-state-hovered div,
32341
32620
  &.k-hover div {
32342
32621
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
32343
32622
  }
@@ -33328,7 +33607,7 @@ $pivotgrid-remove-text: null !default;
33328
33607
  // Selected state
33329
33608
  .k-pivotgrid-cell.k-state-selected,
33330
33609
  .k-pivotgrid-cell.k-selected,
33331
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
33610
+ .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
33332
33611
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
33333
33612
  @include fill (
33334
33613
  $pivotgrid-selected-text,
@@ -33560,7 +33839,7 @@ $treelist-footer-row-border-width: 1px !default;
33560
33839
  }
33561
33840
 
33562
33841
  .k-treelist-dragging,
33563
- .k-treelist-dragging .k-state-hover ,
33842
+ .k-treelist-dragging .k-state-hover,
33564
33843
  .k-treelist-dragging .k-hover {
33565
33844
  cursor: default;
33566
33845
  }
@@ -34291,7 +34570,7 @@ $filemanager-preview-icon-border: null !default;
34291
34570
  );
34292
34571
  }
34293
34572
 
34294
- &.k-state-selected .k-file-icon ,
34573
+ &.k-state-selected .k-file-icon,
34295
34574
  &.k-selected .k-file-icon {
34296
34575
  @include fill(
34297
34576
  inherit,
@@ -34755,7 +35034,7 @@ $taskboard-drag-placeholder-border: $component-border !default;
34755
35034
  );
34756
35035
  }
34757
35036
  .k-taskboard-column:focus,
34758
- .k-taskboard-column.k-state-focus ,
35037
+ .k-taskboard-column.k-state-focus,
34759
35038
  .k-taskboard-column.k-focus {
34760
35039
  @include fill(
34761
35040
  $taskboard-column-focus-text,
@@ -34958,7 +35237,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
34958
35237
  pointer-events: auto;
34959
35238
  }
34960
35239
 
34961
- .k-editor-content.k-state-focused ,
35240
+ .k-editor-content.k-state-focused,
34962
35241
  .k-editor-content.k-focus {
34963
35242
  outline-width: 1px;
34964
35243
  outline-style: dashed;
@@ -35412,7 +35691,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35412
35691
  display: block;
35413
35692
  margin: auto;
35414
35693
 
35415
- &.k-state-selected ,
35694
+ &.k-state-selected,
35416
35695
  &.k-selected {
35417
35696
  color: inherit;
35418
35697
  border-width: 0;
@@ -35635,7 +35914,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35635
35914
 
35636
35915
  kendo-editor {
35637
35916
  &.k-readonly {
35638
- .k-editor-content.k-state-focused ,
35917
+ .k-editor-content.k-state-focused,
35639
35918
  .k-editor-content.k-focus {
35640
35919
  outline-color: $body-text;
35641
35920
  }
@@ -35673,7 +35952,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35673
35952
 
35674
35953
  // Hover & Actve state
35675
35954
  &:hover,
35676
- &.k-state-active ,
35955
+ &.k-state-active,
35677
35956
  &.k-active {
35678
35957
  border-color: $panel-border;
35679
35958
  }
@@ -35691,7 +35970,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35691
35970
 
35692
35971
  // Insert table
35693
35972
  .k-ct-popup {
35694
- .k-state-selected ,
35973
+ .k-state-selected,
35695
35974
  .k-selected {
35696
35975
  @include fill( $selected-text, $selected-bg, $selected-border, none );
35697
35976
  }
@@ -36249,7 +36528,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36249
36528
  }
36250
36529
  }
36251
36530
 
36252
- tr.k-state-selected > td:last-child ,
36531
+ tr.k-state-selected > td:last-child,
36253
36532
  tr.k-selected > td:last-child {
36254
36533
  background: transparent;
36255
36534
  }
@@ -36519,7 +36798,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36519
36798
  border-color: currentColor;
36520
36799
  position: absolute;
36521
36800
  }
36522
- .k-gantt-line.k-state-selected ,
36801
+ .k-gantt-line.k-state-selected,
36523
36802
  .k-gantt-line.k-selected {
36524
36803
  z-index: 3;
36525
36804
  }
@@ -36593,7 +36872,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36593
36872
  transform: translate(-50%, -50%);
36594
36873
  }
36595
36874
  .k-task-dot:hover::before,
36596
- .k-task-dot.k-state-hover::before ,
36875
+ .k-task-dot.k-state-hover::before,
36597
36876
  .k-task-dot.k-hover::before {
36598
36877
  border-width: 1px;
36599
36878
  }
@@ -37067,7 +37346,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37067
37346
  $border: $gantt-milestone-border
37068
37347
  );
37069
37348
  }
37070
- .k-task-milestone.k-state-selected .k-task-milestone-content ,
37349
+ .k-task-milestone.k-state-selected .k-task-milestone-content,
37071
37350
  .k-task-milestone.k-selected .k-task-milestone-content {
37072
37351
  @include fill(
37073
37352
  $bg: $gantt-milestone-selected-bg,
@@ -37082,7 +37361,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37082
37361
  stroke: $gantt-line-fill;
37083
37362
  }
37084
37363
 
37085
- polyline.k-state-selected ,
37364
+ polyline.k-state-selected,
37086
37365
  polyline.k-selected {
37087
37366
  stroke: $gantt-line-selected-fill;
37088
37367
  }
@@ -37136,7 +37415,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37136
37415
  );
37137
37416
  }
37138
37417
  .k-task-dot:hover::before,
37139
- .k-task-dot.k-state-hover::before ,
37418
+ .k-task-dot.k-state-hover::before,
37140
37419
  .k-task-dot.k-hover::before {
37141
37420
  @include fill(
37142
37421
  $bg: $gantt-dot-hover-bg,
@@ -37162,7 +37441,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37162
37441
  );
37163
37442
  }
37164
37443
  }
37165
- .k-task-milestone.k-state-selected ,
37444
+ .k-task-milestone.k-state-selected,
37166
37445
  .k-task-milestone.k-selected {
37167
37446
  background-image: none;
37168
37447
  @include fill(
@@ -37193,7 +37472,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37193
37472
  .k-task-advanced .k-task-summary-complete {
37194
37473
  color: $gantt-advanced-bg;
37195
37474
  }
37196
- .k-task-summary.k-state-selected ,
37475
+ .k-task-summary.k-state-selected,
37197
37476
  .k-task-summary.k-selected {
37198
37477
  color: $gantt-summary-selected-bg;
37199
37478
 
@@ -37237,7 +37516,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37237
37516
  $bg: $gantt-advanced-bg
37238
37517
  );
37239
37518
  }
37240
- .k-task-single.k-state-selected ,
37519
+ .k-task-single.k-state-selected,
37241
37520
  .k-task-single.k-selected {
37242
37521
  @include fill(
37243
37522
  $gantt-task-selected-text,
@@ -37254,7 +37533,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37254
37533
  .k-gantt-line {
37255
37534
  color: $gantt-line-fill;
37256
37535
  }
37257
- .k-gantt-line.k-state-selected ,
37536
+ .k-gantt-line.k-state-selected,
37258
37537
  .k-gantt-line.k-selected {
37259
37538
  color: $gantt-line-selected-fill;
37260
37539
  }
@@ -37913,7 +38192,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37913
38192
  }
37914
38193
 
37915
38194
  &:hover,
37916
- &.k-state-hover ,
38195
+ &.k-state-hover,
37917
38196
  &.k-hover {
37918
38197
  .k-event-delete {
37919
38198
  opacity: 1;
@@ -37979,7 +38258,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37979
38258
 
37980
38259
  // Hover
37981
38260
  &:hover,
37982
- &.k-state-hover ,
38261
+ &.k-state-hover,
37983
38262
  &.k-hover {
37984
38263
  .k-event-actions .k-event-delete,
37985
38264
  .k-resize-handle {
@@ -38241,7 +38520,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38241
38520
  .k-hover .k-task > .k-event-delete,
38242
38521
  .k-scheduler-content tr:hover .k-event-delete,
38243
38522
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
38244
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
38523
+ .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
38245
38524
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
38246
38525
  visibility: visible;
38247
38526
  }
@@ -38315,7 +38594,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38315
38594
  position: relative;
38316
38595
  }
38317
38596
 
38318
- td.k-state-selected ,
38597
+ td.k-state-selected,
38319
38598
  td.k-selected {
38320
38599
  background-color: inherit;
38321
38600
  }
@@ -38665,7 +38944,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38665
38944
 
38666
38945
  .k-scheduler-layout td.k-state-selected,
38667
38946
  .k-scheduler-layout td.k-selected,
38668
- .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
38947
+ .k-scheduler-layout .k-scheduler-cell.k-state-selected,
38669
38948
  .k-scheduler-layout .k-scheduler-cell.k-selected {
38670
38949
  background-color: rgba($selected-bg, .25);
38671
38950
  }
@@ -38688,7 +38967,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38688
38967
  );
38689
38968
  @include box-shadow( $scheduler-event-shadow );
38690
38969
 
38691
- &.k-state-hover ,
38970
+ &.k-state-hover,
38692
38971
  &.k-hover {
38693
38972
  @include fill(
38694
38973
  $scheduler-event-hover-text,
@@ -38699,7 +38978,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38699
38978
  @include box-shadow( $scheduler-event-hover-shadow );
38700
38979
  }
38701
38980
 
38702
- &.k-state-selected ,
38981
+ &.k-state-selected,
38703
38982
  &.k-selected {
38704
38983
  @include fill(
38705
38984
  $scheduler-event-selected-text,
@@ -38769,7 +39048,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38769
39048
  .k-scheduler-content tr.k-state-hover,
38770
39049
  .k-scheduler-content tr.k-hover,
38771
39050
  .k-scheduler-content .k-scheduler-row:hover,
38772
- .k-scheduler-content .k-scheduler-row.k-state-hover ,
39051
+ .k-scheduler-content .k-scheduler-row.k-state-hover,
38773
39052
  .k-scheduler-content .k-scheduler-row.k-hover {
38774
39053
  @include fill(
38775
39054
  $hovered-text,
@@ -38783,7 +39062,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38783
39062
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
38784
39063
  .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
38785
39064
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
38786
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
39065
+ .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
38787
39066
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
38788
39067
  @include fill(
38789
39068
  $scheduler-text,
@@ -38793,13 +39072,13 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38793
39072
  }
38794
39073
 
38795
39074
  // Selected
38796
- .k-scheduler-content tr.k-state-selected ,
39075
+ .k-scheduler-content tr.k-state-selected,
38797
39076
  .k-scheduler-content tr.k-selected {
38798
39077
  background-color: rgba($selected-bg, .25);
38799
39078
  }
38800
39079
  .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
38801
39080
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
38802
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
39081
+ .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
38803
39082
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
38804
39083
  background-color: $scheduler-bg;
38805
39084
  }
@@ -38817,7 +39096,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38817
39096
  @include fill( $bg: $scheduler-yearview-indicator-bg );
38818
39097
  }
38819
39098
 
38820
- .k-state-selected .k-day-indicator ,
39099
+ .k-state-selected .k-day-indicator,
38821
39100
  .k-selected .k-day-indicator {
38822
39101
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
38823
39102
  }
@@ -39121,7 +39400,7 @@ $chat-quick-reply-hover-border: $primary !default;
39121
39400
 
39122
39401
 
39123
39402
  // Message states
39124
- .k-message.k-state-selected ,
39403
+ .k-message.k-state-selected,
39125
39404
  .k-message.k-selected {
39126
39405
  margin-bottom: $chat-item-spacing-y;
39127
39406
  border: 0;
@@ -39331,7 +39610,7 @@ $chat-quick-reply-hover-border: $primary !default;
39331
39610
  flex: 0 0 auto;
39332
39611
  }
39333
39612
 
39334
- &.k-state-selected ,
39613
+ &.k-state-selected,
39335
39614
  &.k-selected {
39336
39615
  background: none;
39337
39616
  }
@@ -39568,7 +39847,7 @@ $chat-quick-reply-hover-border: $primary !default;
39568
39847
  .k-bubble:hover {
39569
39848
  @include box-shadow( $chat-bubble-hover-shadow );
39570
39849
  }
39571
- .k-state-selected .k-bubble ,
39850
+ .k-state-selected .k-bubble,
39572
39851
  .k-selected .k-bubble {
39573
39852
  @include box-shadow( $chat-bubble-selected-shadow );
39574
39853
  }
@@ -39584,7 +39863,7 @@ $chat-quick-reply-hover-border: $primary !default;
39584
39863
  .k-alt .k-bubble:hover {
39585
39864
  @include box-shadow( $chat-alt-bubble-hover-shadow );
39586
39865
  }
39587
- .k-alt .k-state-selected .k-bubble ,
39866
+ .k-alt .k-state-selected .k-bubble,
39588
39867
  .k-alt .k-selected .k-bubble {
39589
39868
  @include box-shadow( $chat-alt-bubble-selected-shadow );
39590
39869
  }
@@ -40383,7 +40662,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40383
40662
  color: $body-text;
40384
40663
  }
40385
40664
 
40386
- .k-timeline-arrow.k-state-disabled ,
40665
+ .k-timeline-arrow.k-state-disabled,
40387
40666
  .k-timeline-arrow.k-disabled {
40388
40667
  opacity: 1; // The arrow button in disabled mode should have a solid background
40389
40668
  color: $timeline-track-arrow-disabled-text;
@@ -40404,7 +40683,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40404
40683
  background-color: $timeline-flag-bg;
40405
40684
  }
40406
40685
 
40407
- .k-timeline-track-item.k-state-focus .k-timeline-circle ,
40686
+ .k-timeline-track-item.k-state-focus .k-timeline-circle,
40408
40687
  .k-timeline-track-item.k-focus .k-timeline-circle {
40409
40688
  @include box-shadow( $timeline-track-item-focus-shadow );
40410
40689
  }
@@ -41115,7 +41394,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
41115
41394
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
41116
41395
 
41117
41396
  &:focus,
41118
- &.k-state-focus ,
41397
+ &.k-state-focus,
41119
41398
  &.k-focus {
41120
41399
  color: $scrollview-navigation-color;
41121
41400
  opacity: $scrollview-navigation-hover-opacity;
@@ -41126,7 +41405,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
41126
41405
  }
41127
41406
 
41128
41407
  &:hover,
41129
- &.k-state-hover ,
41408
+ &.k-state-hover,
41130
41409
  &.k-hover {
41131
41410
  color: $scrollview-navigation-color;
41132
41411
  opacity: $scrollview-navigation-hover-opacity;
@@ -41146,14 +41425,14 @@ $scrollview-transition-timing-function: ease-in-out !default;
41146
41425
  }
41147
41426
 
41148
41427
  &:focus,
41149
- &.k-state-focused ,
41428
+ &.k-state-focused,
41150
41429
  &.k-focus {
41151
41430
  box-shadow: $scrollview-pagebutton-shadow;
41152
41431
  }
41153
41432
  }
41154
41433
 
41155
41434
  .k-scrollview-nav > .k-link:hover,
41156
- .k-scrollview-nav > .k-link.k-state-hover ,
41435
+ .k-scrollview-nav > .k-link.k-state-hover,
41157
41436
  .k-scrollview-nav > .k-link.k-hover {
41158
41437
  box-shadow: $scrollview-pagebutton-shadow;
41159
41438
  }
@@ -41945,8 +42224,6 @@ $treemap-line-height: $line-height !default;
41945
42224
  }
41946
42225
 
41947
42226
 
41948
-
41949
-
41950
42227
  @include exports("dataviz/treemap/theme") {
41951
42228
 
41952
42229
  // Treemap
@@ -41974,7 +42251,7 @@ $treemap-line-height: $line-height !default;
41974
42251
  .k-leaf.k-inverse {
41975
42252
  color: $component-text;
41976
42253
  }
41977
- .k-leaf.k-state-hover ,
42254
+ .k-leaf.k-state-hover,
41978
42255
  .k-leaf.k-hover {
41979
42256
  box-shadow: inset 0 0 0 3px $component-border;
41980
42257
  }
@@ -42473,7 +42750,7 @@ $orgchart-line-v-height: 25px !default;
42473
42750
  .k-orgchart-node-group-container:focus,
42474
42751
  .k-orgchart-node-group-container.k-focus,
42475
42752
  .k-orgchart-node-group-container.k-state-focus,
42476
- .k-orgchart-node-group-container.k-state-focused ,
42753
+ .k-orgchart-node-group-container.k-state-focused,
42477
42754
  .k-orgchart-node-group-container.k-focus {
42478
42755
  @include box-shadow( $orgchart-node-group-focus-shadow );
42479
42756
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -42495,6 +42772,154 @@ $orgchart-line-v-height: 25px !default;
42495
42772
 
42496
42773
  // #endregion
42497
42774
 
42775
+ // #endregion
42776
+ // #region @import "signature/_index.scss"; -> packages/classic/scss/signature/_index.scss
42777
+ // #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
42778
+ // File already imported_once. Skipping output.
42779
+ // #endregion
42780
+
42781
+ // Dependencies
42782
+ // #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
42783
+ // File already imported_once. Skipping output.
42784
+ // #endregion
42785
+
42786
+ // Component
42787
+ // #region @import "_variables.scss"; -> packages/classic/scss/signature/_variables.scss
42788
+ $kendo-signature-width: 250px !default;
42789
+ $kendo-signature-height: 84px !default;
42790
+
42791
+ $kendo-signature-maximized-width: 750px !default;
42792
+ $kendo-signature-maximized-height: 252px !default;
42793
+
42794
+ $kendo-signature-padding: map-get( $spacing, 1 ) !default;
42795
+ $kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
42796
+ $kendo-signature-padding-md: $kendo-signature-padding !default;
42797
+ $kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
42798
+
42799
+ $kendo-signature-line-width: 1px !default;
42800
+ $kendo-signature-line-style: dashed !default;
42801
+ $kendo-signature-line-color: rgba( $info, .24 ) !default;
42802
+
42803
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
42804
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
42805
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
42806
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
42807
+
42808
+ $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
42809
+ $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
42810
+ $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
42811
+ $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
42812
+
42813
+ $kendo-signature-sizes: (
42814
+ sm: (
42815
+ padding: $kendo-signature-padding-sm,
42816
+ line-size: $kendo-signature-line-size-sm,
42817
+ line-offset: $kendo-signature-line-bottom-offset-sm
42818
+ ),
42819
+ md: (
42820
+ padding: $kendo-signature-padding-md,
42821
+ line-size: $kendo-signature-line-size-md,
42822
+ line-offset: $kendo-signature-line-bottom-offset-md
42823
+ ),
42824
+ lg: (
42825
+ padding: $kendo-signature-padding-lg,
42826
+ line-size: $kendo-signature-line-size-lg,
42827
+ line-offset: $kendo-signature-line-bottom-offset-lg
42828
+ )
42829
+ ) !default;
42830
+
42831
+ $kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
42832
+ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
42833
+
42834
+ // #endregion
42835
+ // #region @import "_layout.scss"; -> packages/classic/scss/signature/_layout.scss
42836
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/signature/_layout.scss
42837
+ @include exports("signature/layout") {
42838
+
42839
+ .k-signature {
42840
+ width: $kendo-signature-width;
42841
+ height: $kendo-signature-height;
42842
+ position: relative;
42843
+ box-sizing: border-box;
42844
+ display: flex;
42845
+ flex-direction: column;
42846
+ justify-content: space-between;
42847
+
42848
+ &.k-signature-maximized {
42849
+ width: $kendo-signature-maximized-width;
42850
+ height: $kendo-signature-maximized-height;
42851
+
42852
+ > .k-signature-line {
42853
+ border-bottom-width: $kendo-signature-maximized-line-width;
42854
+ }
42855
+ }
42856
+ }
42857
+
42858
+ .k-signature-actions {
42859
+ display: flex;
42860
+ width: min-content;
42861
+ margin-inline-start: auto;
42862
+ gap: $kendo-signature-actions-gap;
42863
+ z-index: 2;
42864
+ }
42865
+
42866
+ .k-signature-canvas {
42867
+ position: absolute;
42868
+ top: 0;
42869
+ left: 0;
42870
+ width: 100%;
42871
+ height: 100%;
42872
+ display: block;
42873
+ z-index: 1;
42874
+ }
42875
+
42876
+ .k-signature-line {
42877
+ position: absolute;
42878
+ z-index: 0;
42879
+ border-bottom-width: $kendo-signature-line-width;
42880
+ border-bottom-style: $kendo-signature-line-style;
42881
+ }
42882
+
42883
+ // Sizes
42884
+ @each $size, $size-props in $kendo-signature-sizes {
42885
+ $_padding: map-get($size-props, padding);
42886
+ $_line-size: map-get($size-props, line-size);
42887
+ $_line-offset: map-get($size-props, line-offset);
42888
+
42889
+ .k-signature-#{$size} {
42890
+ padding: $_padding;
42891
+
42892
+ .k-signature-line {
42893
+ width: $_line-size;
42894
+ bottom: $_line-offset;
42895
+ }
42896
+ }
42897
+
42898
+ }
42899
+ }
42900
+
42901
+ // #endregion
42902
+
42903
+ // #endregion
42904
+ // #region @import "_theme.scss"; -> packages/classic/scss/signature/_theme.scss
42905
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/signature/_theme.scss
42906
+ @include exports("signature/theme") {
42907
+
42908
+ // Solid signature
42909
+ .k-signature {
42910
+
42911
+ .k-signature-line {
42912
+ border-bottom-color: $kendo-signature-line-color;
42913
+ }
42914
+ }
42915
+
42916
+
42917
+ }
42918
+
42919
+ // #endregion
42920
+
42921
+ // #endregion
42922
+
42498
42923
  // #endregion
42499
42924
 
42500
42925
  // #endregion