@progress/kendo-theme-classic 5.4.2-dev.6 → 5.5.1-dev.1

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
6126
  $kendo-list-line-height-sm: null !default;
6127
6127
  $kendo-list-line-height-md: null !default;
6128
- $kendo-list-line-height-lg: null !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;
@@ -15196,7 +15217,7 @@ $progressbar-chunk-border: $body-bg !default;
15196
15217
 
15197
15218
 
15198
15219
  // Selection
15199
- > .k-state-selected ,
15220
+ > .k-state-selected,
15200
15221
  > .k-selected {
15201
15222
  border-width: 0;
15202
15223
  border-style: solid;
@@ -15257,7 +15278,7 @@ $progressbar-chunk-border: $body-bg !default;
15257
15278
 
15258
15279
  // Horizontal
15259
15280
  .k-progressbar-horizontal {
15260
- width: 27em;
15281
+ width: $progressbar-horizontal-width;
15261
15282
  height: $progressbar-height;
15262
15283
  grid-template-columns: 1fr;
15263
15284
  grid-template-rows: 100%;
@@ -15267,7 +15288,7 @@ $progressbar-chunk-border: $body-bg !default;
15267
15288
  flex-direction: row;
15268
15289
  }
15269
15290
 
15270
- > .k-state-selected ,
15291
+ > .k-state-selected,
15271
15292
  > .k-selected {
15272
15293
  width: 0;
15273
15294
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15294,7 +15315,7 @@ $progressbar-chunk-border: $body-bg !default;
15294
15315
  // Horizontal reverse
15295
15316
  &.k-progressbar-reverse {
15296
15317
 
15297
- > .k-state-selected ,
15318
+ > .k-state-selected,
15298
15319
  > .k-selected {
15299
15320
  flex-direction: row-reverse;
15300
15321
  justify-self: flex-end;
@@ -15319,7 +15340,7 @@ $progressbar-chunk-border: $body-bg !default;
15319
15340
  writing-mode: vertical-lr;
15320
15341
  }
15321
15342
 
15322
- > .k-state-selected ,
15343
+ > .k-state-selected,
15323
15344
  > .k-selected {
15324
15345
  height: 0;
15325
15346
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15349,7 +15370,7 @@ $progressbar-chunk-border: $body-bg !default;
15349
15370
  &.k-progressbar-reverse {
15350
15371
  flex-direction: column;
15351
15372
 
15352
- > .k-state-selected ,
15373
+ > .k-state-selected,
15353
15374
  > .k-selected {
15354
15375
  flex-direction: column;
15355
15376
  align-self: flex-start;
@@ -15374,7 +15395,7 @@ $progressbar-chunk-border: $body-bg !default;
15374
15395
 
15375
15396
  > .k-state-selected,
15376
15397
  > .k-selected,
15377
- > .k-state-selected > .k-progress-status-wrap ,
15398
+ > .k-state-selected > .k-progress-status-wrap,
15378
15399
  > .k-selected > .k-progress-status-wrap {
15379
15400
  transition: width .1s ease-in-out;
15380
15401
  }
@@ -15403,7 +15424,7 @@ $progressbar-chunk-border: $body-bg !default;
15403
15424
  display: -ms-inline-grid;
15404
15425
 
15405
15426
  > .k-progress-status-wrap,
15406
- > .k-state-selected ,
15427
+ > .k-state-selected,
15407
15428
  > .k-selected {
15408
15429
  -ms-grid-column: 1;
15409
15430
  -ms-grid-row: 1;
@@ -15413,7 +15434,7 @@ $progressbar-chunk-border: $body-bg !default;
15413
15434
  -ms-grid-columns: 1fr;
15414
15435
  -ms-grid-rows: $progressbar-height;
15415
15436
 
15416
- &.k-progressbar-reverse > .k-state-selected ,
15437
+ &.k-progressbar-reverse > .k-state-selected,
15417
15438
  &.k-progressbar-reverse > .k-selected {
15418
15439
  -ms-grid-column-align: end;
15419
15440
  }
@@ -15422,12 +15443,12 @@ $progressbar-chunk-border: $body-bg !default;
15422
15443
  -ms-grid-columns: $progressbar-height;
15423
15444
  -ms-grid-rows: 1fr;
15424
15445
 
15425
- > .k-state-selected ,
15446
+ > .k-state-selected,
15426
15447
  > .k-selected {
15427
15448
  -ms-grid-row-align: end;
15428
15449
  }
15429
15450
 
15430
- &.k-progressbar-reverse > .k-state-selected ,
15451
+ &.k-progressbar-reverse > .k-state-selected,
15431
15452
  &.k-progressbar-reverse > .k-selected {
15432
15453
  -ms-grid-row-align: start;
15433
15454
  }
@@ -15450,7 +15471,7 @@ $progressbar-chunk-border: $body-bg !default;
15450
15471
  .k-progressbar {
15451
15472
  @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
15452
15473
 
15453
- .k-state-selected ,
15474
+ .k-state-selected,
15454
15475
  .k-selected {
15455
15476
  @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
15456
15477
  }
@@ -15820,7 +15841,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15820
15841
  }
15821
15842
 
15822
15843
  .k-radio:focus,
15823
- .k-radio.k-state-focus ,
15844
+ .k-radio.k-state-focus,
15824
15845
  .k-radio.k-focus {
15825
15846
  box-shadow: none !important; // sass-lint:disable-line no-important
15826
15847
 
@@ -15884,7 +15905,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15884
15905
 
15885
15906
  // Hover state
15886
15907
  .k-radio:hover,
15887
- .k-radio.k-state-hover ,
15908
+ .k-radio.k-state-hover,
15888
15909
  .k-radio.k-hover {
15889
15910
  @include fill(
15890
15911
  $kendo-radio-hover-text,
@@ -15896,7 +15917,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15896
15917
 
15897
15918
  // Focus state
15898
15919
  .k-radio:focus,
15899
- .k-radio.k-state-focus ,
15920
+ .k-radio.k-state-focus,
15900
15921
  .k-radio.k-focus {
15901
15922
  @include fill( $border: $kendo-radio-focus-border );
15902
15923
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -15928,7 +15949,7 @@ $kendo-radio-ripple-opacity: .25 !default;
15928
15949
  );
15929
15950
  }
15930
15951
  .k-radio:checked:focus,
15931
- .k-radio.k-checked.k-state-focus ,
15952
+ .k-radio.k-checked.k-state-focus,
15932
15953
  .k-radio.k-checked.k-focus {
15933
15954
  @include fill( $border: $kendo-radio-focus-checked-border );
15934
15955
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -16099,7 +16120,7 @@ $slider-disabled-opacity: null !default;
16099
16120
  }
16100
16121
 
16101
16122
 
16102
- &.k-state-disabled ,
16123
+ &.k-state-disabled,
16103
16124
  &.k-disabled {
16104
16125
  .k-tick,
16105
16126
  .k-slider-track,
@@ -16556,20 +16577,20 @@ $slider-disabled-opacity: null !default;
16556
16577
  }
16557
16578
 
16558
16579
  &:focus,
16559
- &.k-state-focused ,
16580
+ &.k-state-focused,
16560
16581
  &.k-focus {
16561
16582
  @include box-shadow( $slider-draghandle-focused-shadow );
16562
16583
  }
16563
16584
  }
16564
16585
 
16565
- &.k-state-focused ,
16586
+ &.k-state-focused,
16566
16587
  &.k-focus {
16567
16588
  .k-draghandle {
16568
16589
  @include box-shadow( $slider-draghandle-focused-shadow );
16569
16590
  }
16570
16591
  }
16571
16592
 
16572
- &.k-state-disabled ,
16593
+ &.k-state-disabled,
16573
16594
  &.k-disabled {
16574
16595
  opacity: $slider-disabled-opacity;
16575
16596
  }
@@ -17119,7 +17140,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17119
17140
  }
17120
17141
 
17121
17142
  // // styles are applied to the k-link element inside
17122
- // .k-state-selected ,
17143
+ // .k-state-selected,
17123
17144
  // .k-selected {
17124
17145
  // color: inherit;
17125
17146
  // background: transparent;
@@ -17145,6 +17166,10 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
17145
17166
  &::after {
17146
17167
  display: none;
17147
17168
  }
17169
+
17170
+ &:focus {
17171
+ outline: 0;
17172
+ }
17148
17173
  }
17149
17174
 
17150
17175
  .k-range-start {
@@ -17640,7 +17665,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17640
17665
  display: block;
17641
17666
  }
17642
17667
 
17643
- &.k-state-focused ,
17668
+ &.k-state-focused,
17644
17669
  &.k-focus {
17645
17670
  &::before,
17646
17671
  &::after {
@@ -17785,7 +17810,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
17785
17810
  color: $time-list-title-text;
17786
17811
  }
17787
17812
 
17788
- &.k-state-focused ,
17813
+ &.k-state-focused,
17789
17814
  &.k-focus {
17790
17815
  .k-title {
17791
17816
  color: $time-list-title-focus-text;
@@ -18114,7 +18139,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18114
18139
  &.k-focus,
18115
18140
  &.k-state-selected,
18116
18141
  &.k-selected,
18117
- &.k-state-selected:hover ,
18142
+ &.k-state-selected:hover,
18118
18143
  &.k-selected:hover {
18119
18144
  position: relative;
18120
18145
  z-index: 100;
@@ -19467,13 +19492,13 @@ $kendo-treeview-font-family: $font-family !default;
19467
19492
  $kendo-treeview-font-size: $font-size-md !default;
19468
19493
  $kendo-treeview-font-size-sm: $font-size-md !default;
19469
19494
  $kendo-treeview-font-size-md: $font-size-md !default;
19470
- $kendo-treeview-font-size-lg: $font-size-md !default;
19495
+ $kendo-treeview-font-size-lg: $font-size-lg !default;
19471
19496
  /// Line height of the treeview component.
19472
19497
  /// @group treeview
19473
19498
  $kendo-treeview-line-height: $line-height-md !default;
19474
19499
  $kendo-treeview-line-height-sm: $line-height-md !default;
19475
19500
  $kendo-treeview-line-height-md: $line-height-md !default;
19476
- $kendo-treeview-line-height-lg: $line-height-md !default;
19501
+ $kendo-treeview-line-height-lg: $line-height-lg !default;
19477
19502
  /// Indentation of child groups in treeview component.
19478
19503
  /// @group treeview
19479
19504
  $kendo-treeview-indent: 16px !default;
@@ -19483,13 +19508,13 @@ $kendo-treeview-indent: 16px !default;
19483
19508
  $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
19484
19509
  $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
19485
19510
  $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
19486
- $kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
19511
+ $kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
19487
19512
  /// Vertical padding of treeview items.
19488
19513
  /// @group treeview
19489
19514
  $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
19490
19515
  $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
19491
19516
  $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;
19517
+ $kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
19493
19518
  /// Border width of treeview items.
19494
19519
  /// @group treeview
19495
19520
  $kendo-treeview-item-border-width: 0px !default;
@@ -20128,7 +20153,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20128
20153
  color: $component-text;
20129
20154
 
20130
20155
  &:focus,
20131
- &.k-state-focused ,
20156
+ &.k-state-focused,
20132
20157
  &.k-focus {
20133
20158
 
20134
20159
  .k-rating-item {
@@ -20136,7 +20161,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20136
20161
  text-shadow: $rating-icon-focused-shadow;
20137
20162
  }
20138
20163
 
20139
- &.k-state-selected > .k-icon ,
20164
+ &.k-state-selected > .k-icon,
20140
20165
  &.k-selected > .k-icon {
20141
20166
  text-shadow: $rating-icon-focused-selected-shadow;
20142
20167
  }
@@ -20147,19 +20172,19 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20147
20172
  .k-rating-item {
20148
20173
  color: $rating-icon-text;
20149
20174
 
20150
- &.k-state-selected ,
20175
+ &.k-state-selected,
20151
20176
  &.k-selected {
20152
20177
  color: $rating-icon-selected-text;
20153
20178
 
20154
20179
  &:focus,
20155
- &.k-state-focused ,
20180
+ &.k-state-focused,
20156
20181
  &.k-focus {
20157
20182
  color: $rating-icon-focused-text;
20158
20183
  }
20159
20184
  }
20160
20185
 
20161
20186
  &:hover,
20162
- &.k-state-hover ,
20187
+ &.k-state-hover,
20163
20188
  &.k-hover {
20164
20189
  color: $rating-icon-hover-text;
20165
20190
  cursor: pointer;
@@ -21391,7 +21416,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21391
21416
  z-index: 1;
21392
21417
  }
21393
21418
  input[disabled],
21394
- input.k-state-disabled ,
21419
+ input.k-state-disabled,
21395
21420
  input.k-disabled {
21396
21421
  visibility: hidden;
21397
21422
  }
@@ -21439,12 +21464,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21439
21464
 
21440
21465
  .k-file {
21441
21466
 
21442
- &.k-state-focused ,
21467
+ &.k-state-focused,
21443
21468
  &.k-focus {
21444
21469
  box-shadow: inset $upload-focused-shadow;
21445
21470
  }
21446
21471
 
21447
- .k-upload-action.k-state-focused ,
21472
+ .k-upload-action.k-state-focused,
21448
21473
  .k-upload-action.k-focus {
21449
21474
  box-shadow: $upload-focused-shadow;
21450
21475
  }
@@ -22507,7 +22532,7 @@ $actionsheet-item-disabled-shadow: null !default;
22507
22532
 
22508
22533
  // Hover state
22509
22534
  &:hover,
22510
- &.k-state-hover ,
22535
+ &.k-state-hover,
22511
22536
  &.k-hover {
22512
22537
  @include fill(
22513
22538
  $actionsheet-item-hover-text,
@@ -22521,7 +22546,7 @@ $actionsheet-item-disabled-shadow: null !default;
22521
22546
 
22522
22547
  // Focus state
22523
22548
  &:focus,
22524
- &.k-state-focus ,
22549
+ &.k-state-focus,
22525
22550
  &.k-focus {
22526
22551
  @include fill(
22527
22552
  $actionsheet-item-focus-text,
@@ -22535,7 +22560,7 @@ $actionsheet-item-disabled-shadow: null !default;
22535
22560
 
22536
22561
  // Disabed state
22537
22562
  &:disabled,
22538
- &.k-state-disabled ,
22563
+ &.k-state-disabled,
22539
22564
  &.k-disabled {
22540
22565
  @include fill(
22541
22566
  $actionsheet-item-disabled-text,
@@ -22780,7 +22805,7 @@ $actionsheet-item-disabled-shadow: null !default;
22780
22805
 
22781
22806
  .k-window {
22782
22807
  &:focus,
22783
- &.k-state-focused ,
22808
+ &.k-state-focused,
22784
22809
  &.k-focus {
22785
22810
  @include box-shadow( $window-focused-shadow );
22786
22811
  }
@@ -23269,33 +23294,33 @@ $drawer-selected-hover-text: $selected-hover-text !default;
23269
23294
  .k-drawer-item {
23270
23295
 
23271
23296
  &:hover,
23272
- &.k-state-hover ,
23297
+ &.k-state-hover,
23273
23298
  &.k-hover {
23274
23299
  color: $drawer-hovered-text;
23275
23300
  background-color: $drawer-hovered-bg;
23276
23301
  }
23277
23302
 
23278
23303
  &:focus,
23279
- &.k-state-focused ,
23304
+ &.k-state-focused,
23280
23305
  &.k-focus {
23281
23306
  background-color: $drawer-focused-bg;
23282
23307
  box-shadow: $drawer-focused-shadow;
23283
23308
 
23284
23309
  &:hover,
23285
- &.k-state-hover ,
23310
+ &.k-state-hover,
23286
23311
  &.k-hover {
23287
23312
  color: $drawer-hovered-text;
23288
23313
  background-color: $drawer-hovered-bg;
23289
23314
  }
23290
23315
  }
23291
23316
 
23292
- &.k-state-selected ,
23317
+ &.k-state-selected,
23293
23318
  &.k-selected {
23294
23319
  color: $drawer-selected-text;
23295
23320
  background-color: $drawer-selected-bg;
23296
23321
 
23297
23322
  &:hover,
23298
- &.k-state-hover ,
23323
+ &.k-state-hover,
23299
23324
  &.k-hover {
23300
23325
  color: $drawer-selected-hover-text;
23301
23326
  background-color: $drawer-selected-hover-bg;
@@ -24554,7 +24579,7 @@ $bottom-nav-flat-border: $component-border !default;
24554
24579
  outline: 0;
24555
24580
  }
24556
24581
  }
24557
- .k-bottom-nav-item.k-state-disabled ,
24582
+ .k-bottom-nav-item.k-state-disabled,
24558
24583
  .k-bottom-nav-item.k-disabled {
24559
24584
  background-color: initial;
24560
24585
  }
@@ -24609,7 +24634,7 @@ $bottom-nav-flat-border: $component-border !default;
24609
24634
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
24610
24635
  }
24611
24636
 
24612
- .k-bottom-nav-item.k-state-selected ,
24637
+ .k-bottom-nav-item.k-state-selected,
24613
24638
  .k-bottom-nav-item.k-selected {
24614
24639
  @include fill( $color: contrast-wcag( $color ) );
24615
24640
  }
@@ -24633,7 +24658,7 @@ $bottom-nav-flat-border: $component-border !default;
24633
24658
  }
24634
24659
 
24635
24660
  @each $name, $color in $kendo-theme-colors {
24636
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected ,
24661
+ &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
24637
24662
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
24638
24663
  @if $name == "secondary" or $name == "light" {
24639
24664
  @include fill( $color: try-shade($color, 3) );
@@ -24894,7 +24919,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24894
24919
  );
24895
24920
 
24896
24921
  &:focus,
24897
- &.k-state-focused ,
24922
+ &.k-state-focused,
24898
24923
  &.k-focus {
24899
24924
  @include box-shadow( $breadcrumb-focused-shadow );
24900
24925
  }
@@ -24911,7 +24936,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24911
24936
 
24912
24937
  // Hovered state
24913
24938
  &:hover,
24914
- &.k-state-hover ,
24939
+ &.k-state-hover,
24915
24940
  &.k-hover {
24916
24941
  @include fill(
24917
24942
  $breadcrumb-link-hovered-text,
@@ -24922,7 +24947,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24922
24947
 
24923
24948
  // Focused state
24924
24949
  &:focus,
24925
- &.k-state-focused ,
24950
+ &.k-state-focused,
24926
24951
  &.k-focus {
24927
24952
  @include fill(
24928
24953
  $breadcrumb-link-focused-text,
@@ -24944,7 +24969,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24944
24969
 
24945
24970
  // Hovered state
24946
24971
  &:hover,
24947
- &.k-state-hover ,
24972
+ &.k-state-hover,
24948
24973
  &.k-hover {
24949
24974
  @include fill(
24950
24975
  $breadcrumb-root-link-hovered-text,
@@ -24955,7 +24980,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
24955
24980
 
24956
24981
  // Focused state
24957
24982
  &:focus,
24958
- &.k-state-focused ,
24983
+ &.k-state-focused,
24959
24984
  &.k-focus {
24960
24985
  @include fill(
24961
24986
  $breadcrumb-root-link-focused-text,
@@ -25104,7 +25129,7 @@ $pager-dropdown-width: 5em !default;
25104
25129
 
25105
25130
  // Focused state
25106
25131
  &:focus,
25107
- &.k-state-focus ,
25132
+ &.k-state-focus,
25108
25133
  &.k-focus {
25109
25134
  z-index: 3;
25110
25135
  }
@@ -25154,7 +25179,7 @@ $pager-dropdown-width: 5em !default;
25154
25179
  &:hover {
25155
25180
  z-index: 2;
25156
25181
  }
25157
- &.k-state-disabled ,
25182
+ &.k-state-disabled,
25158
25183
  &.k-disabled {
25159
25184
  color: inherit;
25160
25185
  }
@@ -25204,7 +25229,7 @@ $pager-dropdown-width: 5em !default;
25204
25229
  }
25205
25230
 
25206
25231
  // Selected state
25207
- .k-state-selected ,
25232
+ .k-state-selected,
25208
25233
  .k-selected {
25209
25234
  cursor: inherit;
25210
25235
  z-index: 2;
@@ -25353,7 +25378,7 @@ $pager-dropdown-width: 5em !default;
25353
25378
  &:focus,
25354
25379
  &.k-focus,
25355
25380
  &.k-state-focus,
25356
- &.k-state-focused ,
25381
+ &.k-state-focused,
25357
25382
  &.k-focus {
25358
25383
  @include fill( $bg: $pager-focus-bg );
25359
25384
  @include box-shadow( $pager-focus-shadow );
@@ -25369,7 +25394,7 @@ $pager-dropdown-width: 5em !default;
25369
25394
  );
25370
25395
 
25371
25396
  &:hover,
25372
- &.k-state-hover ,
25397
+ &.k-state-hover,
25373
25398
  &.k-hover {
25374
25399
  @include fill(
25375
25400
  $pager-item-hover-text,
@@ -25378,7 +25403,7 @@ $pager-dropdown-width: 5em !default;
25378
25403
  );
25379
25404
  }
25380
25405
 
25381
- &.k-state-selected ,
25406
+ &.k-state-selected,
25382
25407
  &.k-selected {
25383
25408
  @include fill(
25384
25409
  $pager-item-selected-text,
@@ -25388,7 +25413,7 @@ $pager-dropdown-width: 5em !default;
25388
25413
  }
25389
25414
 
25390
25415
  &:focus,
25391
- &.k-state-focus ,
25416
+ &.k-state-focus,
25392
25417
  &.k-focus {
25393
25418
  background-color: $pager-item-focus-bg;
25394
25419
  @include box-shadow( $pager-item-focus-shadow );
@@ -25412,7 +25437,7 @@ $pager-dropdown-width: 5em !default;
25412
25437
  );
25413
25438
 
25414
25439
  &:hover,
25415
- &.k-state-hover ,
25440
+ &.k-state-hover,
25416
25441
  &.k-hover {
25417
25442
  @include fill(
25418
25443
  $pager-number-hover-text,
@@ -25422,13 +25447,13 @@ $pager-dropdown-width: 5em !default;
25422
25447
  }
25423
25448
 
25424
25449
  &:focus,
25425
- &.k-state-focus ,
25450
+ &.k-state-focus,
25426
25451
  &.k-focus {
25427
25452
  background-color: $pager-number-focus-bg;
25428
25453
  @include box-shadow( $pager-number-focus-shadow );
25429
25454
  }
25430
25455
 
25431
- &.k-state-selected ,
25456
+ &.k-state-selected,
25432
25457
  &.k-selected {
25433
25458
  @include fill(
25434
25459
  $pager-number-selected-text,
@@ -25461,7 +25486,7 @@ $pager-dropdown-width: 5em !default;
25461
25486
  );
25462
25487
 
25463
25488
  &:hover,
25464
- &.k-state-hover ,
25489
+ &.k-state-hover,
25465
25490
  &.k-hover {
25466
25491
  @include fill(
25467
25492
  $dropdownlist-hovered-text,
@@ -25482,7 +25507,7 @@ $pager-dropdown-width: 5em !default;
25482
25507
  .k-link {
25483
25508
 
25484
25509
  &:hover,
25485
- &.k-state-hover ,
25510
+ &.k-state-hover,
25486
25511
  &.k-hover {
25487
25512
  @include fill(
25488
25513
  $kendo-list-item-hover-text,
@@ -25490,7 +25515,7 @@ $pager-dropdown-width: 5em !default;
25490
25515
  );
25491
25516
  }
25492
25517
 
25493
- &.k-state-selected ,
25518
+ &.k-state-selected,
25494
25519
  &.k-selected {
25495
25520
  @include fill(
25496
25521
  $kendo-list-item-selected-text,
@@ -25761,7 +25786,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
25761
25786
  opacity: $stepper-optional-label-opacity;
25762
25787
  }
25763
25788
  .k-step-disabled .k-step-label-optional,
25764
- &.k-state-disabled .k-step-label-optional ,
25789
+ &.k-state-disabled .k-step-label-optional,
25765
25790
  &.k-disabled .k-step-label-optional {
25766
25791
  color: inherit;
25767
25792
  }
@@ -26079,7 +26104,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
26079
26104
  $bg: $stepper-progressbar-bg
26080
26105
  );
26081
26106
 
26082
- .k-state-selected ,
26107
+ .k-state-selected,
26083
26108
  .k-selected {
26084
26109
  @include fill(
26085
26110
  $color: $stepper-progressbar-fill-text,
@@ -26330,13 +26355,13 @@ $tabstrip-content-border-focused: $component-text !default;
26330
26355
  position: relative;
26331
26356
  z-index: 1;
26332
26357
 
26333
- &.k-state-active ,
26358
+ &.k-state-active,
26334
26359
  &.k-active {
26335
26360
  display: block;
26336
26361
  }
26337
26362
 
26338
26363
  &:focus,
26339
- &.k-state-focused ,
26364
+ &.k-state-focused,
26340
26365
  &.k-focus {
26341
26366
  outline-width: 1px;
26342
26367
  outline-style: dotted;
@@ -26425,7 +26450,7 @@ $tabstrip-content-border-focused: $component-text !default;
26425
26450
  margin-left: $tabstrip-item-gap;
26426
26451
  }
26427
26452
 
26428
- .k-item.k-state-active ,
26453
+ .k-item.k-state-active,
26429
26454
  .k-item.k-active {
26430
26455
  border-bottom-color: transparent;
26431
26456
  }
@@ -26455,7 +26480,7 @@ $tabstrip-content-border-focused: $component-text !default;
26455
26480
  margin-left: $tabstrip-item-gap;
26456
26481
  }
26457
26482
 
26458
- .k-item.k-state-active ,
26483
+ .k-item.k-state-active,
26459
26484
  .k-item.k-active {
26460
26485
  border-top-color: transparent;
26461
26486
  }
@@ -26489,7 +26514,7 @@ $tabstrip-content-border-focused: $component-text !default;
26489
26514
  margin-top: $tabstrip-item-gap;
26490
26515
  }
26491
26516
 
26492
- .k-item.k-state-active ,
26517
+ .k-item.k-state-active,
26493
26518
  .k-item.k-active {
26494
26519
  border-right-color: transparent;
26495
26520
  }
@@ -26525,7 +26550,7 @@ $tabstrip-content-border-focused: $component-text !default;
26525
26550
  margin-top: $tabstrip-item-gap;
26526
26551
  }
26527
26552
 
26528
- .k-item.k-state-active ,
26553
+ .k-item.k-state-active,
26529
26554
  .k-item.k-active {
26530
26555
  border-left-color: transparent;
26531
26556
  }
@@ -26571,7 +26596,7 @@ $tabstrip-content-border-focused: $component-text !default;
26571
26596
  border-left-width: $tabstrip-indicator-size;
26572
26597
  }
26573
26598
  }
26574
- .k-item.k-state-active::after ,
26599
+ .k-item.k-state-active::after,
26575
26600
  .k-item.k-active::after {
26576
26601
  display: block;
26577
26602
  }
@@ -26645,7 +26670,7 @@ $tabstrip-content-border-focused: $component-text !default;
26645
26670
  );
26646
26671
 
26647
26672
  &:hover,
26648
- &.k-state-hover ,
26673
+ &.k-state-hover,
26649
26674
  &.k-hover {
26650
26675
  @include fill(
26651
26676
  $tabstrip-item-hovered-text,
@@ -26658,7 +26683,7 @@ $tabstrip-content-border-focused: $component-text !default;
26658
26683
  &:active,
26659
26684
  &.k-state-active,
26660
26685
  &.k-active,
26661
- &.k-state-selected ,
26686
+ &.k-state-selected,
26662
26687
  &.k-selected {
26663
26688
  @include fill(
26664
26689
  $tabstrip-item-selected-text,
@@ -26669,7 +26694,7 @@ $tabstrip-content-border-focused: $component-text !default;
26669
26694
  }
26670
26695
 
26671
26696
  &:focus,
26672
- &.k-state-focused ,
26697
+ &.k-state-focused,
26673
26698
  &.k-focus {
26674
26699
  @include box-shadow( $tabstrip-item-focused-shadow );
26675
26700
  }
@@ -26692,7 +26717,7 @@ $tabstrip-content-border-focused: $component-text !default;
26692
26717
  );
26693
26718
 
26694
26719
  &:focus,
26695
- &.k-state-focused ,
26720
+ &.k-state-focused,
26696
26721
  &.k-focus {
26697
26722
  outline-color: $tabstrip-content-border-focused;
26698
26723
  }
@@ -26703,7 +26728,7 @@ $tabstrip-content-border-focused: $component-text !default;
26703
26728
  @if ($tabstrip-indicator-size) {
26704
26729
 
26705
26730
  .k-tabstrip-items-wrapper {
26706
- .k-item.k-state-active::after ,
26731
+ .k-item.k-state-active::after,
26707
26732
  .k-item.k-active::after {
26708
26733
  border-color: $tabstrip-indicator-color;
26709
26734
  }
@@ -26797,7 +26822,7 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26797
26822
  justify-content: space-between;
26798
26823
 
26799
26824
  &:focus,
26800
- &.k-state-focused ,
26825
+ &.k-state-focused,
26801
26826
  &.k-focus {
26802
26827
  outline-width: 1px;
26803
26828
  outline-style: dotted;
@@ -26894,13 +26919,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
26894
26919
  @include exports("wizard/theme") {
26895
26920
  .k-wizard-step {
26896
26921
  &:focus,
26897
- &.k-state-focused ,
26922
+ &.k-state-focused,
26898
26923
  &.k-focus {
26899
26924
  outline-color: $wizard-step-border-focused;
26900
26925
  }
26901
26926
 
26902
26927
  .k-ie &:focus,
26903
- .k-ie &.k-state-focused ,
26928
+ .k-ie &.k-state-focused,
26904
26929
  .k-ie &.k-focus {
26905
26930
  @include box-shadow($wizard-focused-shadow);
26906
26931
  outline: none;
@@ -27071,7 +27096,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
27071
27096
  $expander-border
27072
27097
  );
27073
27098
 
27074
- &.k-state-focus ,
27099
+ &.k-state-focus,
27075
27100
  &.k-focus {
27076
27101
  box-shadow: $expander-focus-shadow;
27077
27102
  }
@@ -27086,13 +27111,13 @@ $expander-content-padding-y: $padding-y * 4 !default;
27086
27111
  outline: none;
27087
27112
 
27088
27113
  &:hover,
27089
- &.k-state-hover ,
27114
+ &.k-state-hover,
27090
27115
  &.k-hover {
27091
27116
  background-color: $expander-header-hover-bg;
27092
27117
  }
27093
27118
 
27094
27119
  // Should be removed
27095
- &.k-state-focused ,
27120
+ &.k-state-focused,
27096
27121
  &.k-focus {
27097
27122
  background-color: $expander-header-focused-bg;
27098
27123
  box-shadow: $expander-header-focused-shadow;
@@ -27466,7 +27491,7 @@ $panelbar-header-expanded-gradient: null !default;
27466
27491
 
27467
27492
  // Hover
27468
27493
  > .k-link:hover,
27469
- > .k-link.k-state-hover ,
27494
+ > .k-link.k-state-hover,
27470
27495
  > .k-link.k-hover {
27471
27496
  @include fill(
27472
27497
  $panelbar-header-hovered-text,
@@ -27480,7 +27505,7 @@ $panelbar-header-expanded-gradient: null !default;
27480
27505
  > .k-link:focus,
27481
27506
  > .k-link.k-state-focus,
27482
27507
  > .k-link.k-focus,
27483
- > .k-link.k-state-focused ,
27508
+ > .k-link.k-state-focused,
27484
27509
  > .k-link.k-focus {
27485
27510
  @include fill(
27486
27511
  $panelbar-header-focused-text,
@@ -27493,7 +27518,7 @@ $panelbar-header-expanded-gradient: null !default;
27493
27518
 
27494
27519
  // Focus & Hover
27495
27520
  > .k-link:focus:hover,
27496
- > .k-link.k-state-focus.k-state-hover ,
27521
+ > .k-link.k-state-focus.k-state-hover,
27497
27522
  > .k-link.k-focus.k-hover {
27498
27523
  @include fill(
27499
27524
  $panelbar-header-hovered-focused-text,
@@ -27504,7 +27529,7 @@ $panelbar-header-expanded-gradient: null !default;
27504
27529
  }
27505
27530
 
27506
27531
  // Selected
27507
- > .k-link.k-state-selected ,
27532
+ > .k-link.k-state-selected,
27508
27533
  > .k-link.k-selected {
27509
27534
  @include fill(
27510
27535
  $panelbar-header-selected-text,
@@ -27522,7 +27547,7 @@ $panelbar-header-expanded-gradient: null !default;
27522
27547
  // Selected Hover
27523
27548
  > .k-link.k-state-selected:hover,
27524
27549
  > .k-link.k-selected:hover,
27525
- > .k-link.k-state-selected.k-state-hover ,
27550
+ > .k-link.k-state-selected.k-state-hover,
27526
27551
  > .k-link.k-selected.k-hover {
27527
27552
  @include fill(
27528
27553
  $panelbar-header-selected-hovered-text,
@@ -27537,7 +27562,7 @@ $panelbar-header-expanded-gradient: null !default;
27537
27562
  > .k-link.k-selected:focus,
27538
27563
  > .k-link.k-state-selected.k-state-focus,
27539
27564
  > .k-link.k-selected.k-focus,
27540
- > .k-link.k-state-selected.k-state-focused ,
27565
+ > .k-link.k-state-selected.k-state-focused,
27541
27566
  > .k-link.k-selected.k-focused {
27542
27567
  @include fill(
27543
27568
  $panelbar-header-selected-focused-text,
@@ -27552,7 +27577,7 @@ $panelbar-header-expanded-gradient: null !default;
27552
27577
  > .k-link.k-selected:hover:focus,
27553
27578
  > .k-link.k-state-selected.k-state-hover.k-state-focus,
27554
27579
  > .k-link.k-selected.k-hover.k-state-focus,
27555
- > .k-link.k-state-selected.k-state-hover.k-state-focused ,
27580
+ > .k-link.k-state-selected.k-state-hover.k-state-focused,
27556
27581
  > .k-link.k-selected.k-hover.k-state-focused {
27557
27582
  @include fill(
27558
27583
  $panelbar-header-selected-hovered-focused-text,
@@ -27573,7 +27598,7 @@ $panelbar-header-expanded-gradient: null !default;
27573
27598
  > .k-item > .k-link.k-state-hover,
27574
27599
  > .k-item > .k-link.k-hover,
27575
27600
  > .k-panelbar-item > .k-link:hover,
27576
- > .k-panelbar-item > .k-link.k-state-hover ,
27601
+ > .k-panelbar-item > .k-link.k-state-hover,
27577
27602
  > .k-panelbar-item > .k-link.k-hover {
27578
27603
  @include fill(
27579
27604
  $panelbar-item-hovered-text,
@@ -27592,7 +27617,7 @@ $panelbar-header-expanded-gradient: null !default;
27592
27617
  > .k-panelbar-item > .k-link:focus,
27593
27618
  > .k-panelbar-item > .k-link.k-state-focus,
27594
27619
  > .k-panelbar-item > .k-link.k-focus,
27595
- > .k-panelbar-item > .k-link.k-state-focused ,
27620
+ > .k-panelbar-item > .k-link.k-state-focused,
27596
27621
  > .k-panelbar-item > .k-link.k-focus {
27597
27622
  @include fill(
27598
27623
  $panelbar-item-focused-text,
@@ -27608,7 +27633,7 @@ $panelbar-header-expanded-gradient: null !default;
27608
27633
  > .k-item > .k-link.k-state-focus.k-state-hover,
27609
27634
  > .k-item > .k-link.k-focus.k-hover,
27610
27635
  > .k-panelbar-item > .k-link:focus:hover,
27611
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
27636
+ > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
27612
27637
  > .k-panelbar-item > .k-link.k-focus.k-hover {
27613
27638
  @include fill(
27614
27639
  $panelbar-item-hovered-focused-text,
@@ -27621,7 +27646,7 @@ $panelbar-header-expanded-gradient: null !default;
27621
27646
  // Selected
27622
27647
  > .k-item > .k-link.k-state-selected,
27623
27648
  > .k-item > .k-link.k-selected,
27624
- > .k-panelbar-item > .k-link.k-state-selected ,
27649
+ > .k-panelbar-item > .k-link.k-state-selected,
27625
27650
  > .k-panelbar-item > .k-link.k-selected {
27626
27651
  @include fill(
27627
27652
  $panelbar-item-selected-text,
@@ -27638,7 +27663,7 @@ $panelbar-header-expanded-gradient: null !default;
27638
27663
  > .k-item > .k-link.k-selected.k-hover,
27639
27664
  > .k-panelbar-item > .k-link.k-state-selected:hover,
27640
27665
  > .k-panelbar-item > .k-link.k-selected:hover,
27641
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
27666
+ > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
27642
27667
  > .k-panelbar-item > .k-link.k-selected.k-hover {
27643
27668
  @include fill(
27644
27669
  $panelbar-item-selected-hovered-text,
@@ -27659,7 +27684,7 @@ $panelbar-header-expanded-gradient: null !default;
27659
27684
  > .k-panelbar-item > .k-link.k-selected:focus,
27660
27685
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
27661
27686
  > .k-panelbar-item > .k-link.k-selected.k-focus,
27662
- > .k-item > .k-link.k-state-selected.k-state-focused ,
27687
+ > .k-item > .k-link.k-state-selected.k-state-focused,
27663
27688
  > .k-item > .k-link.k-selected.k-focused {
27664
27689
  @include fill(
27665
27690
  $panelbar-item-selected-focused-text,
@@ -27680,7 +27705,7 @@ $panelbar-header-expanded-gradient: null !default;
27680
27705
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
27681
27706
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
27682
27707
  > .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 ,
27708
+ > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
27684
27709
  > .k-item > .k-link.k-selected.k-focused.k-state-hover {
27685
27710
  @include fill(
27686
27711
  $panelbar-item-selected-hovered-focused-text,
@@ -27974,7 +27999,7 @@ $splitbar-selected-text: $selected-text !default;
27974
27999
  .k-splitbar:focus,
27975
28000
  .k-splitbar.k-state-focus,
27976
28001
  .k-splitbar.k-focus,
27977
- .k-splitbar.k-state-focused ,
28002
+ .k-splitbar.k-state-focused,
27978
28003
  .k-splitbar.k-focus {
27979
28004
  color: $splitbar-selected-text;
27980
28005
  background: $splitbar-selected-bg;
@@ -28087,7 +28112,7 @@ $tilelayout-hint-border: $component-border !default;
28087
28112
  .k-tilelayout-item:focus,
28088
28113
  .k-tilelayout-item.k-focus,
28089
28114
  .k-tilelayout-item.k-state-focus,
28090
- .k-tilelayout-item.k-state-focused ,
28115
+ .k-tilelayout-item.k-state-focused,
28091
28116
  .k-tilelayout-item.k-focus {
28092
28117
  @include box-shadow($tilelayout-card-focus-shadow);
28093
28118
  }
@@ -28765,12 +28790,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
28765
28790
 
28766
28791
  .k-column-menu {
28767
28792
 
28768
- .k-listgroup-item.k-state-selected ,
28793
+ .k-listgroup-item.k-state-selected,
28769
28794
  .k-listgroup-item.k-selected {
28770
28795
  color: $adaptive-grid-sort-text;
28771
28796
  background: none;
28772
28797
  }
28773
- .k-listgroup-item.k-state-selected .k-link ,
28798
+ .k-listgroup-item.k-state-selected .k-link,
28774
28799
  .k-listgroup-item.k-selected .k-link {
28775
28800
  color: inherit;
28776
28801
  }
@@ -29515,7 +29540,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29515
29540
  &.k-i-sort-desc-sm,
29516
29541
  &.k-i-sort-asc-sm {
29517
29542
  vertical-align: text-top;
29518
- margin-left: $grid-sorted-icon-spacing;
29543
+ margin-inline-start: $grid-sorted-icon-spacing;
29519
29544
  }
29520
29545
  }
29521
29546
 
@@ -29525,7 +29550,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29525
29550
  height: $icon-size;
29526
29551
  font-size: $grid-sorting-index-font-size;
29527
29552
  margin-top: $grid-sorting-index-spacing-y;
29528
- margin-left: $grid-sorting-index-spacing-x;
29553
+ margin-inline-start: $grid-sorting-index-spacing-x;
29529
29554
  }
29530
29555
  }
29531
29556
 
@@ -29926,15 +29951,15 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29926
29951
  }
29927
29952
 
29928
29953
  .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);
29954
+ margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
29930
29955
  }
29931
29956
 
29932
29957
  .k-filterable {
29933
29958
  > .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);
29959
+ margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
29935
29960
 
29936
29961
  .k-link {
29937
- padding-right: 0;
29962
+ padding-inline-end: 0;
29938
29963
  }
29939
29964
  }
29940
29965
  }
@@ -29973,6 +29998,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
29973
29998
  .k-grid-filter,
29974
29999
  .k-header-column-menu {
29975
30000
  position: static;
30001
+ margin-inline-end: $grid-header-menu-icon-spacing;
29976
30002
  }
29977
30003
 
29978
30004
  .k-grid-filter,
@@ -30283,28 +30309,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30283
30309
  margin-left: $icon-spacing;
30284
30310
  margin-right: 0;
30285
30311
  }
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
30312
  }
30309
30313
  }
30310
30314
 
@@ -30410,9 +30414,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30410
30414
  }
30411
30415
 
30412
30416
  // 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 {
30417
+ tbody>tr:not(.k-detail-row):hover,
30418
+ tbody>tr:not(.k-detail-row).k-state-hover,
30419
+ tbody>tr:not(.k-detail-row).k-hover {
30416
30420
  color: $grid-hovered-text;
30417
30421
  background-color: $grid-hovered-bg;
30418
30422
  }
@@ -30420,7 +30424,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30420
30424
  // Selected state
30421
30425
  td.k-state-selected,
30422
30426
  td.k-selected,
30423
- tr.k-state-selected > td ,
30427
+ tr.k-state-selected > td,
30424
30428
  tr.k-selected > td {
30425
30429
  color: $grid-selected-text;
30426
30430
  background-color: $grid-selected-bg;
@@ -30436,7 +30440,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30436
30440
  .k-grouping-row > td:focus,
30437
30441
  .k-detail-row > td:focus,
30438
30442
  .k-group-footer > td:focus,
30439
- .k-grid-pager.k-state-focused ,
30443
+ .k-grid-pager.k-state-focused,
30440
30444
  .k-grid-pager.k-focus {
30441
30445
  box-shadow: $grid-focused-shadow;
30442
30446
  }
@@ -30479,12 +30483,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30479
30483
  }
30480
30484
 
30481
30485
  // Selected state
30482
- .k-state-selected td ,
30486
+ .k-state-selected td,
30483
30487
  .k-selected td {
30484
30488
  @include fill( $bg: $grid-sticky-selected-bg );
30485
30489
  }
30486
30490
 
30487
- .k-state-selected.k-alt td ,
30491
+ .k-state-selected.k-alt td,
30488
30492
  .k-selected.k-alt td {
30489
30493
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30490
30494
  }
@@ -30492,7 +30496,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30492
30496
  // Selected hover
30493
30497
  .k-state-selected:hover td,
30494
30498
  .k-selected:hover td,
30495
- .k-state-selected.k-state-hover td ,
30499
+ .k-state-selected.k-state-hover td,
30496
30500
  .k-selected.k-hover td {
30497
30501
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
30498
30502
  }
@@ -30538,7 +30542,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30538
30542
  &.k-state-border-down {
30539
30543
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
30540
30544
  }
30541
- &.k-state-active ,
30545
+ &.k-state-active,
30542
30546
  &.k-active {
30543
30547
  color: $selected-text;
30544
30548
  background-color: $selected-bg;
@@ -30598,7 +30602,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30598
30602
  &.k-selected .k-grid-content-sticky,
30599
30603
  &.k-state-selected .k-grid-row-sticky,
30600
30604
  &.k-selected .k-grid-row-sticky,
30601
- td.k-grid-content-sticky.k-state-selected ,
30605
+ td.k-grid-content-sticky.k-state-selected,
30602
30606
  td.k-grid-content-sticky.k-selected {
30603
30607
  @include fill( $bg: $grid-sticky-selected-bg );
30604
30608
  }
@@ -30607,7 +30611,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30607
30611
  &.k-selected.k-alt .k-grid-content-sticky,
30608
30612
  &.k-state-selected.k-alt .k-grid-row-sticky,
30609
30613
  &.k-selected.k-alt .k-grid-row-sticky,
30610
- &.k-alt td.k-grid-content-sticky.k-state-selected ,
30614
+ &.k-alt td.k-grid-content-sticky.k-state-selected,
30611
30615
  &.k-alt td.k-grid-content-sticky.k-selected {
30612
30616
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30613
30617
  }
@@ -30618,7 +30622,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30618
30622
  &:hover .k-grid-row-sticky,
30619
30623
  &.k-state-hover .k-grid-content-sticky,
30620
30624
  &.k-hover .k-grid-content-sticky,
30621
- &.k-state-hover .k-grid-row-sticky ,
30625
+ &.k-state-hover .k-grid-row-sticky,
30622
30626
  &.k-hover .k-grid-row-sticky {
30623
30627
  background-color: $grid-sticky-hovered-bg;
30624
30628
  }
@@ -30635,7 +30639,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30635
30639
  &.k-selected.k-hover .k-grid-row-sticky,
30636
30640
  &:hover td.k-grid-content-sticky.k-state-selected,
30637
30641
  &:hover td.k-grid-content-sticky.k-selected,
30638
- &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
30642
+ &.k-state-hover td.k-grid-content-sticky.k-state-selected,
30639
30643
  &.k-hover td.k-grid-content-sticky.k-selected {
30640
30644
  background-color: $grid-sticky-selected-hovered-bg;
30641
30645
  }
@@ -30649,7 +30653,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30649
30653
  background-color: $grid-sticky-bg;
30650
30654
 
30651
30655
  &:hover,
30652
- &.k-state-hover ,
30656
+ &.k-state-hover,
30653
30657
  &.k-hover {
30654
30658
  background-color: $grid-sticky-hovered-bg;
30655
30659
  }
@@ -30663,7 +30667,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30663
30667
  }
30664
30668
 
30665
30669
  &:hover td,
30666
- &.k-state-hover td ,
30670
+ &.k-state-hover td,
30667
30671
  &.k-hover td {
30668
30672
  background-color: $grid-sticky-hovered-bg;
30669
30673
  }
@@ -30681,7 +30685,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30681
30685
  .k-selected.k-grid-row-sticky td,
30682
30686
  .k-grid-row-sticky td.k-state-selected,
30683
30687
  .k-grid-row-sticky td.k-selected,
30684
- .k-state-selected.k-grid-content-sticky ,
30688
+ .k-state-selected.k-grid-content-sticky,
30685
30689
  .k-selected.k-grid-content-sticky {
30686
30690
  @include fill( $bg: $grid-sticky-selected-bg );
30687
30691
  }
@@ -30690,7 +30694,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30690
30694
  tr.k-selected.k-alt .k-grid-content-sticky,
30691
30695
  .k-state-selected.k-alt.k-grid-row-sticky td,
30692
30696
  .k-selected.k-alt.k-grid-row-sticky td,
30693
- .k-alt .k-state-selected.k-grid-content-sticky ,
30697
+ .k-alt .k-state-selected.k-grid-content-sticky,
30694
30698
  .k-alt .k-selected.k-grid-content-sticky {
30695
30699
  @include fill( $bg: $grid-sticky-selected-alt-bg );
30696
30700
  }
@@ -30706,7 +30710,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30706
30710
  .k-grid-row-sticky.k-alt.k-state-hover td,
30707
30711
  .k-grid-row-sticky.k-alt.k-hover td,
30708
30712
  .k-alt:hover .k-grid-content-sticky,
30709
- .k-alt.k-state-hover .k-grid-content-sticky ,
30713
+ .k-alt.k-state-hover .k-grid-content-sticky,
30710
30714
  .k-alt.k-hover .k-grid-content-sticky {
30711
30715
  background-color: $grid-sticky-hovered-bg;
30712
30716
  }
@@ -30734,7 +30738,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30734
30738
  .k-grid-row-sticky.k-hover td.k-selected,
30735
30739
  tr:hover .k-grid-content-sticky.k-state-selected,
30736
30740
  tr:hover .k-grid-content-sticky.k-selected,
30737
- tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
30741
+ tr.k-state-hover .k-grid-content-sticky.k-state-selected,
30738
30742
  tr.k-hover .k-grid-content-sticky.k-selected {
30739
30743
  background-color: $grid-sticky-selected-hovered-bg;
30740
30744
  }
@@ -30746,7 +30750,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30746
30750
  }
30747
30751
 
30748
30752
  &:hover .k-grid-content-sticky,
30749
- &.k-state-hover .k-grid-content-sticky ,
30753
+ &.k-state-hover .k-grid-content-sticky,
30750
30754
  &.k-hover .k-grid-content-sticky {
30751
30755
  @include fill( $bg: $grid-sticky-hovered-bg );
30752
30756
  }
@@ -30760,13 +30764,13 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30760
30764
  );
30761
30765
  }
30762
30766
  .k-columnmenu-item:focus,
30763
- .k-columnmenu-item.k-state-focus ,
30767
+ .k-columnmenu-item.k-state-focus,
30764
30768
  .k-columnmenu-item.k-focus {
30765
30769
  @include box-shadow( $kendo-list-item-focus-shadow );
30766
30770
  }
30767
30771
 
30768
30772
  .k-columnmenu-item {
30769
- &.k-state-selected ,
30773
+ &.k-state-selected,
30770
30774
  &.k-selected {
30771
30775
  @include fill(
30772
30776
  $kendo-list-item-selected-text,
@@ -30792,7 +30796,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30792
30796
  );
30793
30797
 
30794
30798
  &:hover,
30795
- &.k-state-hover ,
30799
+ &.k-state-hover,
30796
30800
  &.k-hover {
30797
30801
  @include fill(
30798
30802
  $kendo-list-item-hover-text,
@@ -30800,7 +30804,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30800
30804
  );
30801
30805
  }
30802
30806
 
30803
- &.k-state-selected ,
30807
+ &.k-state-selected,
30804
30808
  &.k-selected {
30805
30809
  @include fill(
30806
30810
  $kendo-list-item-selected-text,
@@ -30809,7 +30813,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30809
30813
  }
30810
30814
 
30811
30815
  &:focus,
30812
- &.k-state-focused ,
30816
+ &.k-state-focused,
30813
30817
  &.k-focus {
30814
30818
  @include box-shadow( $kendo-list-item-focus-shadow );
30815
30819
  }
@@ -31051,7 +31055,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31051
31055
  // Listview content
31052
31056
  .k-listview-content {
31053
31057
 
31054
- > .k-state-focused ,
31058
+ > .k-state-focused,
31055
31059
  > .k-focus {
31056
31060
  @include fill(
31057
31061
  $listview-item-focus-text,
@@ -31061,7 +31065,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
31061
31065
  @include box-shadow( $listview-item-focus-shadow );
31062
31066
  }
31063
31067
 
31064
- > .k-state-selected ,
31068
+ > .k-state-selected,
31065
31069
  > .k-selected {
31066
31070
  @include fill(
31067
31071
  $listview-item-selected-text,
@@ -31442,7 +31446,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
31442
31446
  overflow: hidden;
31443
31447
 
31444
31448
  // disabled cells in the Spreadsheet should allow navigation if link is used
31445
- .k-state-disabled ,
31449
+ .k-state-disabled,
31446
31450
  .k-disabled {
31447
31451
  pointer-events: auto;
31448
31452
  }
@@ -32004,7 +32008,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32004
32008
  background-position: 50% 50%;
32005
32009
 
32006
32010
  &:hover div,
32007
- &.k-state-hovered div ,
32011
+ &.k-state-hovered div,
32008
32012
  &.k-hover div {
32009
32013
  margin: 0;
32010
32014
  align-self: center;
@@ -32070,7 +32074,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32070
32074
  .k-spreadsheet-insert-image-dialog {
32071
32075
  .k-spreadsheet-has-image {
32072
32076
  &:hover,
32073
- &.k-state-hovered ,
32077
+ &.k-state-hovered,
32074
32078
  &.k-hover {
32075
32079
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
32076
32080
  }
@@ -32250,7 +32254,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32250
32254
  );
32251
32255
  }
32252
32256
 
32253
- &.k-state-active ,
32257
+ &.k-state-active,
32254
32258
  &.k-active {
32255
32259
  @include fill(
32256
32260
  $kendo-button-active-text,
@@ -32268,7 +32272,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32268
32272
  > .k-menu,
32269
32273
  > .k-menu:not(.k-context-menu) {
32270
32274
 
32271
- .k-item.k-state-hover ,
32275
+ .k-item.k-state-hover,
32272
32276
  .k-item.k-hover {
32273
32277
  @include fill(
32274
32278
  $kendo-list-item-hover-text,
@@ -32299,7 +32303,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32299
32303
  .k-button {}
32300
32304
 
32301
32305
  .k-button:hover,
32302
- .k-button.k-state-hover ,
32306
+ .k-button.k-state-hover,
32303
32307
  .k-button.k-hover {
32304
32308
  @include fill(
32305
32309
  $kendo-list-item-hover-text,
@@ -32309,7 +32313,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32309
32313
  .k-button:active,
32310
32314
  .k-button.k-state-active,
32311
32315
  .k-button.k-active,
32312
- .k-button.k-state-selected ,
32316
+ .k-button.k-state-selected,
32313
32317
  .k-button.k-selected {
32314
32318
  @include fill(
32315
32319
  $kendo-list-item-selected-text,
@@ -32331,13 +32335,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
32331
32335
 
32332
32336
  .k-spreadsheet-has-image {
32333
32337
  &:hover,
32334
- &.k-state-hovered ,
32338
+ &.k-state-hovered,
32335
32339
  &.k-hover {
32336
32340
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
32337
32341
  }
32338
32342
 
32339
32343
  &:hover div,
32340
- &.k-state-hovered div ,
32344
+ &.k-state-hovered div,
32341
32345
  &.k-hover div {
32342
32346
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
32343
32347
  }
@@ -33328,7 +33332,7 @@ $pivotgrid-remove-text: null !default;
33328
33332
  // Selected state
33329
33333
  .k-pivotgrid-cell.k-state-selected,
33330
33334
  .k-pivotgrid-cell.k-selected,
33331
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
33335
+ .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
33332
33336
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
33333
33337
  @include fill (
33334
33338
  $pivotgrid-selected-text,
@@ -33560,7 +33564,7 @@ $treelist-footer-row-border-width: 1px !default;
33560
33564
  }
33561
33565
 
33562
33566
  .k-treelist-dragging,
33563
- .k-treelist-dragging .k-state-hover ,
33567
+ .k-treelist-dragging .k-state-hover,
33564
33568
  .k-treelist-dragging .k-hover {
33565
33569
  cursor: default;
33566
33570
  }
@@ -34291,7 +34295,7 @@ $filemanager-preview-icon-border: null !default;
34291
34295
  );
34292
34296
  }
34293
34297
 
34294
- &.k-state-selected .k-file-icon ,
34298
+ &.k-state-selected .k-file-icon,
34295
34299
  &.k-selected .k-file-icon {
34296
34300
  @include fill(
34297
34301
  inherit,
@@ -34755,7 +34759,7 @@ $taskboard-drag-placeholder-border: $component-border !default;
34755
34759
  );
34756
34760
  }
34757
34761
  .k-taskboard-column:focus,
34758
- .k-taskboard-column.k-state-focus ,
34762
+ .k-taskboard-column.k-state-focus,
34759
34763
  .k-taskboard-column.k-focus {
34760
34764
  @include fill(
34761
34765
  $taskboard-column-focus-text,
@@ -34958,7 +34962,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
34958
34962
  pointer-events: auto;
34959
34963
  }
34960
34964
 
34961
- .k-editor-content.k-state-focused ,
34965
+ .k-editor-content.k-state-focused,
34962
34966
  .k-editor-content.k-focus {
34963
34967
  outline-width: 1px;
34964
34968
  outline-style: dashed;
@@ -35412,7 +35416,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35412
35416
  display: block;
35413
35417
  margin: auto;
35414
35418
 
35415
- &.k-state-selected ,
35419
+ &.k-state-selected,
35416
35420
  &.k-selected {
35417
35421
  color: inherit;
35418
35422
  border-width: 0;
@@ -35635,7 +35639,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35635
35639
 
35636
35640
  kendo-editor {
35637
35641
  &.k-readonly {
35638
- .k-editor-content.k-state-focused ,
35642
+ .k-editor-content.k-state-focused,
35639
35643
  .k-editor-content.k-focus {
35640
35644
  outline-color: $body-text;
35641
35645
  }
@@ -35673,7 +35677,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35673
35677
 
35674
35678
  // Hover & Actve state
35675
35679
  &:hover,
35676
- &.k-state-active ,
35680
+ &.k-state-active,
35677
35681
  &.k-active {
35678
35682
  border-color: $panel-border;
35679
35683
  }
@@ -35691,7 +35695,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
35691
35695
 
35692
35696
  // Insert table
35693
35697
  .k-ct-popup {
35694
- .k-state-selected ,
35698
+ .k-state-selected,
35695
35699
  .k-selected {
35696
35700
  @include fill( $selected-text, $selected-bg, $selected-border, none );
35697
35701
  }
@@ -36249,7 +36253,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36249
36253
  }
36250
36254
  }
36251
36255
 
36252
- tr.k-state-selected > td:last-child ,
36256
+ tr.k-state-selected > td:last-child,
36253
36257
  tr.k-selected > td:last-child {
36254
36258
  background: transparent;
36255
36259
  }
@@ -36519,7 +36523,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36519
36523
  border-color: currentColor;
36520
36524
  position: absolute;
36521
36525
  }
36522
- .k-gantt-line.k-state-selected ,
36526
+ .k-gantt-line.k-state-selected,
36523
36527
  .k-gantt-line.k-selected {
36524
36528
  z-index: 3;
36525
36529
  }
@@ -36593,7 +36597,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
36593
36597
  transform: translate(-50%, -50%);
36594
36598
  }
36595
36599
  .k-task-dot:hover::before,
36596
- .k-task-dot.k-state-hover::before ,
36600
+ .k-task-dot.k-state-hover::before,
36597
36601
  .k-task-dot.k-hover::before {
36598
36602
  border-width: 1px;
36599
36603
  }
@@ -37067,7 +37071,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37067
37071
  $border: $gantt-milestone-border
37068
37072
  );
37069
37073
  }
37070
- .k-task-milestone.k-state-selected .k-task-milestone-content ,
37074
+ .k-task-milestone.k-state-selected .k-task-milestone-content,
37071
37075
  .k-task-milestone.k-selected .k-task-milestone-content {
37072
37076
  @include fill(
37073
37077
  $bg: $gantt-milestone-selected-bg,
@@ -37082,7 +37086,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37082
37086
  stroke: $gantt-line-fill;
37083
37087
  }
37084
37088
 
37085
- polyline.k-state-selected ,
37089
+ polyline.k-state-selected,
37086
37090
  polyline.k-selected {
37087
37091
  stroke: $gantt-line-selected-fill;
37088
37092
  }
@@ -37136,7 +37140,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37136
37140
  );
37137
37141
  }
37138
37142
  .k-task-dot:hover::before,
37139
- .k-task-dot.k-state-hover::before ,
37143
+ .k-task-dot.k-state-hover::before,
37140
37144
  .k-task-dot.k-hover::before {
37141
37145
  @include fill(
37142
37146
  $bg: $gantt-dot-hover-bg,
@@ -37162,7 +37166,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37162
37166
  );
37163
37167
  }
37164
37168
  }
37165
- .k-task-milestone.k-state-selected ,
37169
+ .k-task-milestone.k-state-selected,
37166
37170
  .k-task-milestone.k-selected {
37167
37171
  background-image: none;
37168
37172
  @include fill(
@@ -37193,7 +37197,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37193
37197
  .k-task-advanced .k-task-summary-complete {
37194
37198
  color: $gantt-advanced-bg;
37195
37199
  }
37196
- .k-task-summary.k-state-selected ,
37200
+ .k-task-summary.k-state-selected,
37197
37201
  .k-task-summary.k-selected {
37198
37202
  color: $gantt-summary-selected-bg;
37199
37203
 
@@ -37237,7 +37241,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37237
37241
  $bg: $gantt-advanced-bg
37238
37242
  );
37239
37243
  }
37240
- .k-task-single.k-state-selected ,
37244
+ .k-task-single.k-state-selected,
37241
37245
  .k-task-single.k-selected {
37242
37246
  @include fill(
37243
37247
  $gantt-task-selected-text,
@@ -37254,7 +37258,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
37254
37258
  .k-gantt-line {
37255
37259
  color: $gantt-line-fill;
37256
37260
  }
37257
- .k-gantt-line.k-state-selected ,
37261
+ .k-gantt-line.k-state-selected,
37258
37262
  .k-gantt-line.k-selected {
37259
37263
  color: $gantt-line-selected-fill;
37260
37264
  }
@@ -37913,7 +37917,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37913
37917
  }
37914
37918
 
37915
37919
  &:hover,
37916
- &.k-state-hover ,
37920
+ &.k-state-hover,
37917
37921
  &.k-hover {
37918
37922
  .k-event-delete {
37919
37923
  opacity: 1;
@@ -37979,7 +37983,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
37979
37983
 
37980
37984
  // Hover
37981
37985
  &:hover,
37982
- &.k-state-hover ,
37986
+ &.k-state-hover,
37983
37987
  &.k-hover {
37984
37988
  .k-event-actions .k-event-delete,
37985
37989
  .k-resize-handle {
@@ -38241,7 +38245,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38241
38245
  .k-hover .k-task > .k-event-delete,
38242
38246
  .k-scheduler-content tr:hover .k-event-delete,
38243
38247
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
38244
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
38248
+ .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
38245
38249
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
38246
38250
  visibility: visible;
38247
38251
  }
@@ -38315,7 +38319,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38315
38319
  position: relative;
38316
38320
  }
38317
38321
 
38318
- td.k-state-selected ,
38322
+ td.k-state-selected,
38319
38323
  td.k-selected {
38320
38324
  background-color: inherit;
38321
38325
  }
@@ -38665,7 +38669,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38665
38669
 
38666
38670
  .k-scheduler-layout td.k-state-selected,
38667
38671
  .k-scheduler-layout td.k-selected,
38668
- .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
38672
+ .k-scheduler-layout .k-scheduler-cell.k-state-selected,
38669
38673
  .k-scheduler-layout .k-scheduler-cell.k-selected {
38670
38674
  background-color: rgba($selected-bg, .25);
38671
38675
  }
@@ -38688,7 +38692,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38688
38692
  );
38689
38693
  @include box-shadow( $scheduler-event-shadow );
38690
38694
 
38691
- &.k-state-hover ,
38695
+ &.k-state-hover,
38692
38696
  &.k-hover {
38693
38697
  @include fill(
38694
38698
  $scheduler-event-hover-text,
@@ -38699,7 +38703,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38699
38703
  @include box-shadow( $scheduler-event-hover-shadow );
38700
38704
  }
38701
38705
 
38702
- &.k-state-selected ,
38706
+ &.k-state-selected,
38703
38707
  &.k-selected {
38704
38708
  @include fill(
38705
38709
  $scheduler-event-selected-text,
@@ -38769,7 +38773,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38769
38773
  .k-scheduler-content tr.k-state-hover,
38770
38774
  .k-scheduler-content tr.k-hover,
38771
38775
  .k-scheduler-content .k-scheduler-row:hover,
38772
- .k-scheduler-content .k-scheduler-row.k-state-hover ,
38776
+ .k-scheduler-content .k-scheduler-row.k-state-hover,
38773
38777
  .k-scheduler-content .k-scheduler-row.k-hover {
38774
38778
  @include fill(
38775
38779
  $hovered-text,
@@ -38783,7 +38787,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38783
38787
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
38784
38788
  .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
38785
38789
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
38786
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
38790
+ .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
38787
38791
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
38788
38792
  @include fill(
38789
38793
  $scheduler-text,
@@ -38793,13 +38797,13 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38793
38797
  }
38794
38798
 
38795
38799
  // Selected
38796
- .k-scheduler-content tr.k-state-selected ,
38800
+ .k-scheduler-content tr.k-state-selected,
38797
38801
  .k-scheduler-content tr.k-selected {
38798
38802
  background-color: rgba($selected-bg, .25);
38799
38803
  }
38800
38804
  .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
38801
38805
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
38802
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
38806
+ .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
38803
38807
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
38804
38808
  background-color: $scheduler-bg;
38805
38809
  }
@@ -38817,7 +38821,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
38817
38821
  @include fill( $bg: $scheduler-yearview-indicator-bg );
38818
38822
  }
38819
38823
 
38820
- .k-state-selected .k-day-indicator ,
38824
+ .k-state-selected .k-day-indicator,
38821
38825
  .k-selected .k-day-indicator {
38822
38826
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
38823
38827
  }
@@ -39121,7 +39125,7 @@ $chat-quick-reply-hover-border: $primary !default;
39121
39125
 
39122
39126
 
39123
39127
  // Message states
39124
- .k-message.k-state-selected ,
39128
+ .k-message.k-state-selected,
39125
39129
  .k-message.k-selected {
39126
39130
  margin-bottom: $chat-item-spacing-y;
39127
39131
  border: 0;
@@ -39331,7 +39335,7 @@ $chat-quick-reply-hover-border: $primary !default;
39331
39335
  flex: 0 0 auto;
39332
39336
  }
39333
39337
 
39334
- &.k-state-selected ,
39338
+ &.k-state-selected,
39335
39339
  &.k-selected {
39336
39340
  background: none;
39337
39341
  }
@@ -39568,7 +39572,7 @@ $chat-quick-reply-hover-border: $primary !default;
39568
39572
  .k-bubble:hover {
39569
39573
  @include box-shadow( $chat-bubble-hover-shadow );
39570
39574
  }
39571
- .k-state-selected .k-bubble ,
39575
+ .k-state-selected .k-bubble,
39572
39576
  .k-selected .k-bubble {
39573
39577
  @include box-shadow( $chat-bubble-selected-shadow );
39574
39578
  }
@@ -39584,7 +39588,7 @@ $chat-quick-reply-hover-border: $primary !default;
39584
39588
  .k-alt .k-bubble:hover {
39585
39589
  @include box-shadow( $chat-alt-bubble-hover-shadow );
39586
39590
  }
39587
- .k-alt .k-state-selected .k-bubble ,
39591
+ .k-alt .k-state-selected .k-bubble,
39588
39592
  .k-alt .k-selected .k-bubble {
39589
39593
  @include box-shadow( $chat-alt-bubble-selected-shadow );
39590
39594
  }
@@ -40383,7 +40387,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40383
40387
  color: $body-text;
40384
40388
  }
40385
40389
 
40386
- .k-timeline-arrow.k-state-disabled ,
40390
+ .k-timeline-arrow.k-state-disabled,
40387
40391
  .k-timeline-arrow.k-disabled {
40388
40392
  opacity: 1; // The arrow button in disabled mode should have a solid background
40389
40393
  color: $timeline-track-arrow-disabled-text;
@@ -40404,7 +40408,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
40404
40408
  background-color: $timeline-flag-bg;
40405
40409
  }
40406
40410
 
40407
- .k-timeline-track-item.k-state-focus .k-timeline-circle ,
40411
+ .k-timeline-track-item.k-state-focus .k-timeline-circle,
40408
40412
  .k-timeline-track-item.k-focus .k-timeline-circle {
40409
40413
  @include box-shadow( $timeline-track-item-focus-shadow );
40410
40414
  }
@@ -41115,7 +41119,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
41115
41119
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
41116
41120
 
41117
41121
  &:focus,
41118
- &.k-state-focus ,
41122
+ &.k-state-focus,
41119
41123
  &.k-focus {
41120
41124
  color: $scrollview-navigation-color;
41121
41125
  opacity: $scrollview-navigation-hover-opacity;
@@ -41126,7 +41130,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
41126
41130
  }
41127
41131
 
41128
41132
  &:hover,
41129
- &.k-state-hover ,
41133
+ &.k-state-hover,
41130
41134
  &.k-hover {
41131
41135
  color: $scrollview-navigation-color;
41132
41136
  opacity: $scrollview-navigation-hover-opacity;
@@ -41146,14 +41150,14 @@ $scrollview-transition-timing-function: ease-in-out !default;
41146
41150
  }
41147
41151
 
41148
41152
  &:focus,
41149
- &.k-state-focused ,
41153
+ &.k-state-focused,
41150
41154
  &.k-focus {
41151
41155
  box-shadow: $scrollview-pagebutton-shadow;
41152
41156
  }
41153
41157
  }
41154
41158
 
41155
41159
  .k-scrollview-nav > .k-link:hover,
41156
- .k-scrollview-nav > .k-link.k-state-hover ,
41160
+ .k-scrollview-nav > .k-link.k-state-hover,
41157
41161
  .k-scrollview-nav > .k-link.k-hover {
41158
41162
  box-shadow: $scrollview-pagebutton-shadow;
41159
41163
  }
@@ -41974,7 +41978,7 @@ $treemap-line-height: $line-height !default;
41974
41978
  .k-leaf.k-inverse {
41975
41979
  color: $component-text;
41976
41980
  }
41977
- .k-leaf.k-state-hover ,
41981
+ .k-leaf.k-state-hover,
41978
41982
  .k-leaf.k-hover {
41979
41983
  box-shadow: inset 0 0 0 3px $component-border;
41980
41984
  }
@@ -42473,7 +42477,7 @@ $orgchart-line-v-height: 25px !default;
42473
42477
  .k-orgchart-node-group-container:focus,
42474
42478
  .k-orgchart-node-group-container.k-focus,
42475
42479
  .k-orgchart-node-group-container.k-state-focus,
42476
- .k-orgchart-node-group-container.k-state-focused ,
42480
+ .k-orgchart-node-group-container.k-state-focused,
42477
42481
  .k-orgchart-node-group-container.k-focus {
42478
42482
  @include box-shadow( $orgchart-node-group-focus-shadow );
42479
42483
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -42495,6 +42499,154 @@ $orgchart-line-v-height: 25px !default;
42495
42499
 
42496
42500
  // #endregion
42497
42501
 
42502
+ // #endregion
42503
+ // #region @import "signature/_index.scss"; -> packages/classic/scss/signature/_index.scss
42504
+ // #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
42505
+ // File already imported_once. Skipping output.
42506
+ // #endregion
42507
+
42508
+ // Dependencies
42509
+ // #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
42510
+ // File already imported_once. Skipping output.
42511
+ // #endregion
42512
+
42513
+ // Component
42514
+ // #region @import "_variables.scss"; -> packages/classic/scss/signature/_variables.scss
42515
+ $kendo-signature-width: 250px !default;
42516
+ $kendo-signature-height: 84px !default;
42517
+
42518
+ $kendo-signature-maximized-width: 750px !default;
42519
+ $kendo-signature-maximized-height: 252px !default;
42520
+
42521
+ $kendo-signature-padding: map-get( $spacing, 1 ) !default;
42522
+ $kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
42523
+ $kendo-signature-padding-md: $kendo-signature-padding !default;
42524
+ $kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
42525
+
42526
+ $kendo-signature-line-width: 1px !default;
42527
+ $kendo-signature-line-style: dashed !default;
42528
+ $kendo-signature-line-color: rgba( $info, .24 ) !default;
42529
+
42530
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
42531
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
42532
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
42533
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
42534
+
42535
+ $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
42536
+ $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
42537
+ $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
42538
+ $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
42539
+
42540
+ $kendo-signature-sizes: (
42541
+ sm: (
42542
+ padding: $kendo-signature-padding-sm,
42543
+ line-size: $kendo-signature-line-size-sm,
42544
+ line-offset: $kendo-signature-line-bottom-offset-sm
42545
+ ),
42546
+ md: (
42547
+ padding: $kendo-signature-padding-md,
42548
+ line-size: $kendo-signature-line-size-md,
42549
+ line-offset: $kendo-signature-line-bottom-offset-md
42550
+ ),
42551
+ lg: (
42552
+ padding: $kendo-signature-padding-lg,
42553
+ line-size: $kendo-signature-line-size-lg,
42554
+ line-offset: $kendo-signature-line-bottom-offset-lg
42555
+ )
42556
+ ) !default;
42557
+
42558
+ $kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
42559
+ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
42560
+
42561
+ // #endregion
42562
+ // #region @import "_layout.scss"; -> packages/classic/scss/signature/_layout.scss
42563
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/signature/_layout.scss
42564
+ @include exports("signature/layout") {
42565
+
42566
+ .k-signature {
42567
+ width: $kendo-signature-width;
42568
+ height: $kendo-signature-height;
42569
+ position: relative;
42570
+ box-sizing: border-box;
42571
+ display: flex;
42572
+ flex-direction: column;
42573
+ justify-content: space-between;
42574
+
42575
+ &.k-signature-maximized {
42576
+ width: $kendo-signature-maximized-width;
42577
+ height: $kendo-signature-maximized-height;
42578
+
42579
+ > .k-signature-line {
42580
+ border-bottom-width: $kendo-signature-maximized-line-width;
42581
+ }
42582
+ }
42583
+ }
42584
+
42585
+ .k-signature-actions {
42586
+ display: flex;
42587
+ width: min-content;
42588
+ margin-inline-start: auto;
42589
+ gap: $kendo-signature-actions-gap;
42590
+ z-index: 2;
42591
+ }
42592
+
42593
+ .k-signature-canvas {
42594
+ position: absolute;
42595
+ top: 0;
42596
+ left: 0;
42597
+ width: 100%;
42598
+ height: 100%;
42599
+ display: block;
42600
+ z-index: 1;
42601
+ }
42602
+
42603
+ .k-signature-line {
42604
+ position: absolute;
42605
+ z-index: 0;
42606
+ border-bottom-width: $kendo-signature-line-width;
42607
+ border-bottom-style: $kendo-signature-line-style;
42608
+ }
42609
+
42610
+ // Sizes
42611
+ @each $size, $size-props in $kendo-signature-sizes {
42612
+ $_padding: map-get($size-props, padding);
42613
+ $_line-size: map-get($size-props, line-size);
42614
+ $_line-offset: map-get($size-props, line-offset);
42615
+
42616
+ .k-signature-#{$size} {
42617
+ padding: $_padding;
42618
+
42619
+ .k-signature-line {
42620
+ width: $_line-size;
42621
+ bottom: $_line-offset;
42622
+ }
42623
+ }
42624
+
42625
+ }
42626
+ }
42627
+
42628
+ // #endregion
42629
+
42630
+ // #endregion
42631
+ // #region @import "_theme.scss"; -> packages/classic/scss/signature/_theme.scss
42632
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/signature/_theme.scss
42633
+ @include exports("signature/theme") {
42634
+
42635
+ // Solid signature
42636
+ .k-signature {
42637
+
42638
+ .k-signature-line {
42639
+ border-bottom-color: $kendo-signature-line-color;
42640
+ }
42641
+ }
42642
+
42643
+
42644
+ }
42645
+
42646
+ // #endregion
42647
+
42648
+ // #endregion
42649
+
42498
42650
  // #endregion
42499
42651
 
42500
42652
  // #endregion