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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/all.css +710 -458
  2. package/dist/all.scss +846 -406
  3. package/lib/swatches/material-aqua-dark.json +1 -1
  4. package/lib/swatches/material-arctic.json +1 -1
  5. package/lib/swatches/material-burnt-teal.json +1 -1
  6. package/lib/swatches/material-dataviz-v4.json +1 -1
  7. package/lib/swatches/material-eggplant.json +1 -1
  8. package/lib/swatches/material-lime-dark.json +1 -1
  9. package/lib/swatches/material-lime.json +1 -1
  10. package/lib/swatches/material-main-dark.json +1 -1
  11. package/lib/swatches/material-main.json +1 -1
  12. package/lib/swatches/material-nova.json +1 -1
  13. package/lib/swatches/material-pacific-dark.json +1 -1
  14. package/lib/swatches/material-pacific.json +1 -1
  15. package/lib/swatches/material-sky-dark.json +1 -1
  16. package/lib/swatches/material-sky.json +1 -1
  17. package/lib/swatches/material-smoke.json +1 -1
  18. package/package.json +8 -11
  19. package/scss/button/_variables.scss +33 -13
  20. package/scss/calendar/_theme.scss +3 -3
  21. package/scss/calendar/_variables.scss +44 -1
  22. package/scss/chip/_variables.scss +1 -1
  23. package/scss/drawer/_theme.scss +2 -2
  24. package/scss/editor/_theme.scss +2 -2
  25. package/scss/grid/_theme.scss +13 -13
  26. package/scss/index.scss +1 -0
  27. package/scss/input/_variables.scss +19 -2
  28. package/scss/list/_variables.scss +7 -7
  29. package/scss/listview/_theme.scss +1 -1
  30. package/scss/progressbar/_theme.scss +5 -23
  31. package/scss/progressbar/_variables.scss +5 -0
  32. package/scss/scheduler/_layout.scss +1 -1
  33. package/scss/signature/_index.scss +10 -0
  34. package/scss/signature/_layout.scss +1 -0
  35. package/scss/signature/_theme.scss +1 -0
  36. package/scss/signature/_variables.scss +45 -0
  37. package/scss/slider/_theme.scss +1 -1
  38. package/scss/spreadsheet/_theme.scss +7 -7
  39. package/scss/timeline/_layout.scss +2 -2
  40. package/scss/timeselector/_variables.scss +38 -0
  41. package/scss/treeview/_variables.scss +6 -6
package/dist/all.scss CHANGED
@@ -6968,16 +6968,16 @@ $message-box-link-text-decoration: underline !default;
6968
6968
  /// Font size of the list component, if no size is set.
6969
6969
  /// @group list
6970
6970
  $kendo-list-font-size: null !default;
6971
- $kendo-list-font-size-sm: $font-size-lg !default;
6972
- $kendo-list-font-size-md: $font-size-lg !default;
6971
+ $kendo-list-font-size-sm: $font-size-md !default;
6972
+ $kendo-list-font-size-md: $font-size-md !default;
6973
6973
  $kendo-list-font-size-lg: $font-size-lg !default;
6974
6974
 
6975
6975
  /// Line height of the list component, if no size is set.
6976
6976
  /// @group list
6977
6977
  $kendo-list-line-height: null !default;
6978
- $kendo-list-line-height-sm: 1.25 !default;
6979
- $kendo-list-line-height-md: 1.25 !default;
6980
- $kendo-list-line-height-lg: 1.25 !default;
6978
+ $kendo-list-line-height-sm: (20 / 14) !default;
6979
+ $kendo-list-line-height-md: (20 / 14) !default;
6980
+ $kendo-list-line-height-lg: 1.5 !default;
6981
6981
 
6982
6982
  /// Horizontal padding of list header, if no size is set.
6983
6983
  /// @group list
@@ -6993,7 +6993,7 @@ $kendo-list-header-padding-y: null !default;
6993
6993
  $kendo-list-header-padding-y-base: map-get( $spacing, 2 ) !default;
6994
6994
  $kendo-list-header-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
6995
6995
  $kendo-list-header-padding-y-md: map-get( $spacing, 2 ) !default;
6996
- $kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
6996
+ $kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) !default;
6997
6997
 
6998
6998
  /// Border width of list header.
6999
6999
  /// @group list
@@ -7031,7 +7031,7 @@ $kendo-list-item-padding-y: null !default;
7031
7031
  $kendo-list-item-padding-y-base: map-get( $spacing, 2 ) !default;
7032
7032
  $kendo-list-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
7033
7033
  $kendo-list-item-padding-y-md: map-get( $spacing, 2 ) !default;
7034
- $kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
7034
+ $kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
7035
7035
 
7036
7036
  /// Font size of list items, if no size is set.
7037
7037
  /// @group list
@@ -8948,33 +8948,32 @@ $kendo-button-border-radius: null !default;
8948
8948
  /// Horizontal padding of the button.
8949
8949
  /// @group button
8950
8950
  $kendo-button-padding-x: map-get( $spacing, 4 ) !default;
8951
- $kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
8952
- $kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
8953
- $kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
8954
-
8955
8951
  /// Vertical padding of the button.
8956
8952
  /// @group button
8957
8953
  $kendo-button-padding-y: map-get( $spacing, 2 ) !default;
8958
- $kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
8959
- $kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
8960
- $kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
8961
-
8962
8954
  /// Font family of the button.
8963
8955
  /// @group button
8964
8956
  $kendo-button-font-family: $font-family !default;
8965
-
8966
8957
  /// Font sizes of the button.
8967
8958
  /// @group button
8968
8959
  $kendo-button-font-size: $font-size-md !default;
8969
- $kendo-button-font-size-sm: $font-size-md !default;
8970
- $kendo-button-font-size-md: $font-size-md !default;
8971
- $kendo-button-font-size-lg: $font-size-md !default;
8972
-
8973
8960
  /// Line heights used along with $font-size.
8974
8961
  /// @group button
8975
8962
  $kendo-button-line-height: ( 20 / 14 ) !default;
8963
+
8964
+ $kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
8965
+ $kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
8966
+ $kendo-button-font-size-sm: $font-size-md !default;
8976
8967
  $kendo-button-line-height-sm: ( 20 / 14 ) !default;
8968
+
8969
+ $kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
8970
+ $kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
8971
+ $kendo-button-font-size-md: $font-size-md !default;
8977
8972
  $kendo-button-line-height-md: ( 20 / 14 ) !default;
8973
+
8974
+ $kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
8975
+ $kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
8976
+ $kendo-button-font-size-lg: $font-size-md !default;
8978
8977
  $kendo-button-line-height-lg: ( 20 / 14 ) !default;
8979
8978
 
8980
8979
  /// Calculated height of the button.
@@ -8985,6 +8984,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
8985
8984
  /// @group button
8986
8985
  $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
8987
8986
 
8987
+ $kendo-button-sizes: (
8988
+ sm: (
8989
+ padding-x: $kendo-button-padding-x-sm,
8990
+ padding-y: $kendo-button-padding-y-sm,
8991
+ font-size: $kendo-button-font-size-sm,
8992
+ line-height: $kendo-button-line-height-sm
8993
+ ),
8994
+ md: (
8995
+ padding-x: $kendo-button-padding-x-md,
8996
+ padding-y: $kendo-button-padding-y-md,
8997
+ font-size: $kendo-button-font-size-md,
8998
+ line-height: $kendo-button-line-height-md
8999
+ ),
9000
+ lg: (
9001
+ padding-x: $kendo-button-padding-x-lg,
9002
+ padding-y: $kendo-button-padding-y-lg,
9003
+ font-size: $kendo-button-font-size-lg,
9004
+ line-height: $kendo-button-line-height-lg
9005
+ )
9006
+ ) !default;
9007
+
8988
9008
  /// Theme colors map for the button.
8989
9009
  /// @group button
8990
9010
  $kendo-button-theme-colors: map-merge(
@@ -9210,45 +9230,27 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
9210
9230
 
9211
9231
  .k-button-text {}
9212
9232
 
9213
- // Sizes
9214
- .k-button-sm {
9215
- padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
9216
- font-size: $kendo-button-font-size-sm;
9217
- line-height: $kendo-button-line-height-sm;
9218
- }
9219
- .k-button-md {
9220
- padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
9221
- font-size: $kendo-button-font-size-md;
9222
- line-height: $kendo-button-line-height-md;
9223
- }
9224
- .k-button-lg {
9225
- padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
9226
- font-size: $kendo-button-font-size-lg;
9227
- line-height: $kendo-button-line-height-lg;
9228
- }
9229
9233
 
9230
- .k-icon-button.k-button-sm {
9231
- padding: $kendo-button-padding-y-sm;
9234
+ // Sizes
9235
+ @each $size, $size-props in $kendo-button-sizes {
9236
+ $_padding-x: map-get( $size-props, padding-x );
9237
+ $_padding-y: map-get( $size-props, padding-y );
9238
+ $_font-size: map-get( $size-props, font-size );
9239
+ $_line-height: map-get( $size-props, line-height );
9232
9240
 
9233
- > .k-button-icon {
9234
- min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
9235
- min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
9241
+ .k-button-#{$size} {
9242
+ padding: $_padding-y $_padding-x;
9243
+ font-size: $_font-size;
9244
+ line-height: $_line-height;
9236
9245
  }
9237
- }
9238
- .k-icon-button.k-button-md {
9239
- padding: $kendo-button-padding-y-md;
9240
9246
 
9241
- > .k-button-icon {
9242
- min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
9243
- min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
9244
- }
9245
- }
9246
- .k-icon-button.k-button-lg {
9247
- padding: $kendo-button-padding-y-lg;
9247
+ .k-button-#{$size}.k-icon-button {
9248
+ padding: $_padding-y;
9248
9249
 
9249
- > .k-button-icon {
9250
- min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
9251
- min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
9250
+ > .k-button-icon {
9251
+ min-width: calc( #{$_font-size} * #{$_line-height} );
9252
+ min-height: calc( #{$_font-size} * #{$_line-height} );
9253
+ }
9252
9254
  }
9253
9255
  }
9254
9256
 
@@ -9969,16 +9971,33 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
9969
9971
  // Component
9970
9972
  // #region @import "_variables.scss"; -> packages/material/scss/input/_variables.scss
9971
9973
  // Input
9974
+
9975
+ /// Default width of input components.
9976
+ /// @group input
9972
9977
  $kendo-input-default-width: 100% !default;
9973
9978
 
9979
+ /// Border width of input components.
9980
+ /// @group input
9974
9981
  $kendo-input-border-width: 1px !default;
9975
9982
  $kendo-input-border-height: 1px !default;
9983
+ /// Border radius of input components.
9984
+ /// @group input
9976
9985
  $kendo-input-border-radius: null !default;
9977
9986
 
9987
+ /// Horizontal padding of input components.
9988
+ /// @group input
9978
9989
  $kendo-input-padding-x: map-get( $spacing, 4 ) !default;
9990
+ /// Vertical padding of input components.
9991
+ /// @group input
9979
9992
  $kendo-input-padding-y: map-get( $spacing, 2 ) !default;
9993
+ ///Font family of input components.
9994
+ /// @group input
9980
9995
  $kendo-input-font-family: $font-family !default;
9996
+ /// Font size of input components.
9997
+ /// @group input
9981
9998
  $kendo-input-font-size: $font-size-lg !default;
9999
+ /// Line height of input components.
10000
+ /// @group input
9982
10001
  $kendo-input-line-height: 1.25 !default;
9983
10002
 
9984
10003
  $kendo-input-padding-x-sm: map-get( $spacing, 4 ) !default;
@@ -9992,9 +10011,9 @@ $kendo-input-font-size-md: $font-size-lg !default;
9992
10011
  $kendo-input-line-height-md: 1.25 !default;
9993
10012
 
9994
10013
  $kendo-input-padding-x-lg: map-get( $spacing, 4 ) !default;
9995
- $kendo-input-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
10014
+ $kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
9996
10015
  $kendo-input-font-size-lg: $font-size-lg !default;
9997
- $kendo-input-line-height-lg: 1.25 !default;
10016
+ $kendo-input-line-height-lg: 1.5 !default;
9998
10017
 
9999
10018
  $kendo-input-sizes: (
10000
10019
  sm: (
@@ -12642,7 +12661,7 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
12642
12661
  $kendo-chip-border-width: 1px !default;
12643
12662
  /// The spacing between the text and the icons of the chip.
12644
12663
  /// @group chip
12645
- $kendo-chip-spacing: map-get( $spacing, 1 );
12664
+ $kendo-chip-spacing: map-get( $spacing, 1 ) !default;
12646
12665
 
12647
12666
  /// Horizontal padding of the chip.
12648
12667
  /// @group chip
@@ -15538,7 +15557,8 @@ $fieldset-legend-border: null !default;
15538
15557
 
15539
15558
  .k-multiselect,
15540
15559
  .k-floating-label-container,
15541
- .k-daterangepicker .k-dateinput {
15560
+ .k-daterangepicker .k-dateinput,
15561
+ .k-signature {
15542
15562
  display: inline-flex;
15543
15563
  width: 100%;
15544
15564
  }
@@ -16662,6 +16682,7 @@ $listbox-drop-hint-width: 2px !default;
16662
16682
  // #region @import "_variables.scss"; -> packages/material/scss/progressbar/_variables.scss
16663
16683
  // Progressbar
16664
16684
  $progressbar-height: 5px !default;
16685
+ $progressbar-horizontal-width: 100% !default;
16665
16686
  $progressbar-animation-timing: null !default;
16666
16687
  $progressbar-border-width: 0px !default;
16667
16688
  $progressbar-font-family: $font-family !default;
@@ -16685,6 +16706,10 @@ $progressbar-indeterminate-gradient: null !default;
16685
16706
 
16686
16707
  $progressbar-chunk-border: $component-bg !default;
16687
16708
 
16709
+ // Circular Progressbar
16710
+ $kendo-circular-progressbar-arc-stroke: $primary !default;
16711
+ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
16712
+
16688
16713
  // #endregion
16689
16714
  // #region @import "_layout.scss"; -> packages/material/scss/progressbar/_layout.scss
16690
16715
  // #region @import "~@progress/kendo-theme-default/scss/progressbar/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/progressbar/_layout.scss
@@ -16716,7 +16741,7 @@ $progressbar-chunk-border: $component-bg !default;
16716
16741
 
16717
16742
 
16718
16743
  // Selection
16719
- > .k-state-selected ,
16744
+ > .k-state-selected,
16720
16745
  > .k-selected {
16721
16746
  border-width: 0;
16722
16747
  border-style: solid;
@@ -16777,7 +16802,7 @@ $progressbar-chunk-border: $component-bg !default;
16777
16802
 
16778
16803
  // Horizontal
16779
16804
  .k-progressbar-horizontal {
16780
- width: 27em;
16805
+ width: $progressbar-horizontal-width;
16781
16806
  height: $progressbar-height;
16782
16807
  grid-template-columns: 1fr;
16783
16808
  grid-template-rows: 100%;
@@ -16787,7 +16812,7 @@ $progressbar-chunk-border: $component-bg !default;
16787
16812
  flex-direction: row;
16788
16813
  }
16789
16814
 
16790
- > .k-state-selected ,
16815
+ > .k-state-selected,
16791
16816
  > .k-selected {
16792
16817
  width: 0;
16793
16818
  width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16814,7 +16839,7 @@ $progressbar-chunk-border: $component-bg !default;
16814
16839
  // Horizontal reverse
16815
16840
  &.k-progressbar-reverse {
16816
16841
 
16817
- > .k-state-selected ,
16842
+ > .k-state-selected,
16818
16843
  > .k-selected {
16819
16844
  flex-direction: row-reverse;
16820
16845
  justify-self: flex-end;
@@ -16839,7 +16864,7 @@ $progressbar-chunk-border: $component-bg !default;
16839
16864
  writing-mode: vertical-lr;
16840
16865
  }
16841
16866
 
16842
- > .k-state-selected ,
16867
+ > .k-state-selected,
16843
16868
  > .k-selected {
16844
16869
  height: 0;
16845
16870
  height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16869,7 +16894,7 @@ $progressbar-chunk-border: $component-bg !default;
16869
16894
  &.k-progressbar-reverse {
16870
16895
  flex-direction: column;
16871
16896
 
16872
- > .k-state-selected ,
16897
+ > .k-state-selected,
16873
16898
  > .k-selected {
16874
16899
  flex-direction: column;
16875
16900
  align-self: flex-start;
@@ -16894,7 +16919,7 @@ $progressbar-chunk-border: $component-bg !default;
16894
16919
 
16895
16920
  > .k-state-selected,
16896
16921
  > .k-selected,
16897
- > .k-state-selected > .k-progress-status-wrap ,
16922
+ > .k-state-selected > .k-progress-status-wrap,
16898
16923
  > .k-selected > .k-progress-status-wrap {
16899
16924
  transition: width .1s ease-in-out;
16900
16925
  }
@@ -16923,7 +16948,7 @@ $progressbar-chunk-border: $component-bg !default;
16923
16948
  display: -ms-inline-grid;
16924
16949
 
16925
16950
  > .k-progress-status-wrap,
16926
- > .k-state-selected ,
16951
+ > .k-state-selected,
16927
16952
  > .k-selected {
16928
16953
  -ms-grid-column: 1;
16929
16954
  -ms-grid-row: 1;
@@ -16933,7 +16958,7 @@ $progressbar-chunk-border: $component-bg !default;
16933
16958
  -ms-grid-columns: 1fr;
16934
16959
  -ms-grid-rows: $progressbar-height;
16935
16960
 
16936
- &.k-progressbar-reverse > .k-state-selected ,
16961
+ &.k-progressbar-reverse > .k-state-selected,
16937
16962
  &.k-progressbar-reverse > .k-selected {
16938
16963
  -ms-grid-column-align: end;
16939
16964
  }
@@ -16942,12 +16967,12 @@ $progressbar-chunk-border: $component-bg !default;
16942
16967
  -ms-grid-columns: $progressbar-height;
16943
16968
  -ms-grid-rows: 1fr;
16944
16969
 
16945
- > .k-state-selected ,
16970
+ > .k-state-selected,
16946
16971
  > .k-selected {
16947
16972
  -ms-grid-row-align: end;
16948
16973
  }
16949
16974
 
16950
- &.k-progressbar-reverse > .k-state-selected ,
16975
+ &.k-progressbar-reverse > .k-state-selected,
16951
16976
  &.k-progressbar-reverse > .k-selected {
16952
16977
  -ms-grid-row-align: start;
16953
16978
  }
@@ -16955,6 +16980,49 @@ $progressbar-chunk-border: $component-bg !default;
16955
16980
 
16956
16981
  }
16957
16982
 
16983
+ @include exports("circular-progressbar/layout") {
16984
+
16985
+ .k-circular-progressbar {
16986
+ display: inline-block;
16987
+ text-align: left;
16988
+ position: relative;
16989
+ }
16990
+
16991
+ .k-circular-progressbar-surface {
16992
+ height: 100%;
16993
+
16994
+ & > div {
16995
+ width: 100%;
16996
+ height: 100%;
16997
+ }
16998
+
16999
+ svg {
17000
+ width: 100%;
17001
+ height: 100%;
17002
+ }
17003
+ }
17004
+
17005
+ .k-circular-progressbar-scale {
17006
+ fill: none;
17007
+ }
17008
+
17009
+ .k-circular-progressbar-arc {
17010
+ transform-box: fill-box;
17011
+ transform-origin: center center;
17012
+ transform: rotate(-90deg);
17013
+ stroke-linecap: round;
17014
+ fill: none;
17015
+ }
17016
+
17017
+ .k-circular-progressbar-label {
17018
+ position: absolute;
17019
+ text-align: center;
17020
+ padding: 0;
17021
+ margin: 0;
17022
+ }
17023
+
17024
+ }
17025
+
16958
17026
  // #endregion
16959
17027
 
16960
17028
  @include exports("progressbar/layout/material") {
@@ -17032,6 +17100,51 @@ $progressbar-chunk-border: $component-bg !default;
17032
17100
 
17033
17101
  // #endregion
17034
17102
  // #region @import "_theme.scss"; -> packages/material/scss/progressbar/_theme.scss
17103
+ // #region @import "~@progress/kendo-theme-default/scss/progressbar/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/progressbar/_theme.scss
17104
+ @include exports("progressbar/theme") {
17105
+
17106
+ @keyframes progressbar-indeterminate-animation {
17107
+ from { background-position: 0 0; }
17108
+ to { background-position: $progressbar-height 0; }
17109
+ }
17110
+
17111
+ .k-progressbar {
17112
+ @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
17113
+
17114
+ .k-state-selected,
17115
+ .k-selected {
17116
+ @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
17117
+ }
17118
+
17119
+ .k-item {
17120
+ border-color: $progressbar-chunk-border;
17121
+ }
17122
+ }
17123
+
17124
+ .k-progressbar-indeterminate {
17125
+ @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
17126
+ @include striped-gradient( shade($progressbar-indeterminate-bg) );
17127
+ background-size: $progressbar-height $progressbar-height;
17128
+ animation: progressbar-indeterminate-animation $progressbar-animation-timing;
17129
+ }
17130
+
17131
+ }
17132
+
17133
+ @include exports("circular-progressbar/theme") {
17134
+
17135
+ .k-circular-progressbar-scale {
17136
+ stroke: $kendo-circular-progressbar-scale-stroke;
17137
+ }
17138
+
17139
+ .k-circular-progressbar-arc {
17140
+ stroke: $kendo-circular-progressbar-arc-stroke;
17141
+ transition: stroke .5s ease;
17142
+ }
17143
+
17144
+ }
17145
+
17146
+ // #endregion
17147
+
17035
17148
  @function _translate($direction, $value) {
17036
17149
  @return if($direction == horizontal, translateX($value), translateY($value));
17037
17150
  }
@@ -17079,32 +17192,12 @@ $progressbar-chunk-border: $component-bg !default;
17079
17192
  }
17080
17193
  }
17081
17194
 
17082
- @include exports("progressbar/theme") {
17195
+ @include exports("progressbar/theme/material") {
17083
17196
  @include progressbar-indeterminate-animation(horizontal);
17084
17197
  @include progressbar-indeterminate-animation(vertical);
17085
17198
 
17086
- // Theme
17087
- .k-progressbar {
17088
- @include fill(
17089
- $progressbar-text,
17090
- $progressbar-bg,
17091
- $progressbar-border,
17092
- $progressbar-gradient
17093
- );
17094
-
17095
- .k-state-selected ,
17096
- .k-selected {
17097
- @include fill(
17098
- $progressbar-fill-text,
17099
- $progressbar-fill-bg,
17100
- $progressbar-fill-border,
17101
- $progressbar-fill-gradient
17102
- );
17103
- }
17104
-
17105
- .k-item {
17106
- border-color: $progressbar-chunk-border;
17107
- }
17199
+ .k-progressbar-indeterminate {
17200
+ background-image: none;
17108
17201
  }
17109
17202
  }
17110
17203
 
@@ -17457,7 +17550,7 @@ $kendo-radio-ripple-opacity: .2 !default;
17457
17550
  }
17458
17551
 
17459
17552
  .k-radio:focus,
17460
- .k-radio.k-state-focus ,
17553
+ .k-radio.k-state-focus,
17461
17554
  .k-radio.k-focus {
17462
17555
  box-shadow: none !important; // sass-lint:disable-line no-important
17463
17556
 
@@ -17530,7 +17623,7 @@ $kendo-radio-ripple-opacity: .2 !default;
17530
17623
 
17531
17624
  // Hover state
17532
17625
  .k-radio:hover,
17533
- .k-radio.k-state-hover ,
17626
+ .k-radio.k-state-hover,
17534
17627
  .k-radio.k-hover {
17535
17628
  @include fill(
17536
17629
  $kendo-radio-hover-text,
@@ -17542,7 +17635,7 @@ $kendo-radio-ripple-opacity: .2 !default;
17542
17635
 
17543
17636
  // Focus state
17544
17637
  .k-radio:focus,
17545
- .k-radio.k-state-focus ,
17638
+ .k-radio.k-state-focus,
17546
17639
  .k-radio.k-focus {
17547
17640
  @include fill( $border: $kendo-radio-focus-border );
17548
17641
  @include box-shadow( $kendo-radio-focus-shadow );
@@ -17574,7 +17667,7 @@ $kendo-radio-ripple-opacity: .2 !default;
17574
17667
  );
17575
17668
  }
17576
17669
  .k-radio:checked:focus,
17577
- .k-radio.k-checked.k-state-focus ,
17670
+ .k-radio.k-checked.k-state-focus,
17578
17671
  .k-radio.k-checked.k-focus {
17579
17672
  @include fill( $border: $kendo-radio-focus-checked-border );
17580
17673
  @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -17748,7 +17841,7 @@ $slider-disabled-opacity: .65 !default;
17748
17841
  }
17749
17842
 
17750
17843
 
17751
- &.k-state-disabled ,
17844
+ &.k-state-disabled,
17752
17845
  &.k-disabled {
17753
17846
  .k-tick,
17754
17847
  .k-slider-track,
@@ -18254,20 +18347,20 @@ $slider-disabled-opacity: .65 !default;
18254
18347
  }
18255
18348
 
18256
18349
  &:focus,
18257
- &.k-state-focused ,
18350
+ &.k-state-focused,
18258
18351
  &.k-focus {
18259
18352
  @include box-shadow( $slider-draghandle-focused-shadow );
18260
18353
  }
18261
18354
  }
18262
18355
 
18263
- &.k-state-focused ,
18356
+ &.k-state-focused,
18264
18357
  &.k-focus {
18265
18358
  .k-draghandle {
18266
18359
  @include box-shadow( $slider-draghandle-focused-shadow );
18267
18360
  }
18268
18361
  }
18269
18362
 
18270
- &.k-state-disabled ,
18363
+ &.k-state-disabled,
18271
18364
  &.k-disabled {
18272
18365
  opacity: $slider-disabled-opacity;
18273
18366
  }
@@ -18306,7 +18399,7 @@ $slider-disabled-opacity: .65 !default;
18306
18399
  }
18307
18400
  }
18308
18401
 
18309
- &.k-state-disabled ,
18402
+ &.k-state-disabled,
18310
18403
  &.k-disabled {
18311
18404
  opacity: 1;
18312
18405
 
@@ -18367,7 +18460,6 @@ $calendar-border: $component-border !default;
18367
18460
  $calendar-header-padding-x: map-get( $spacing, 1 ) !default;
18368
18461
  $calendar-header-padding-y: map-get( $spacing, 1 ) !default;
18369
18462
  $calendar-header-border-width: 0px !default;
18370
- $calendar-header-min-width: ($calendar-cell-size * 8) !default;
18371
18463
 
18372
18464
  $calendar-header-bg: null !default;
18373
18465
  $calendar-header-text: $header-text !default;
@@ -18465,6 +18557,50 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18465
18557
 
18466
18558
  // Multiview calendar
18467
18559
 
18560
+
18561
+ // Calendar sizes
18562
+ $kendo-calendar-sm-font-size: $font-size-md !default;
18563
+ $kendo-calendar-sm-line-height: $line-height-md !default;
18564
+ $kendo-calendar-sm-cell-size: 32px !default;
18565
+ $kendo-calendar-sm-cell-padding-x: .125rem !default;
18566
+ $kendo-calendar-sm-cell-padding-y: .125rem !default;
18567
+
18568
+ $kendo-calendar-md-font-size: $font-size-md !default;
18569
+ $kendo-calendar-md-line-height: $line-height-md !default;
18570
+ $kendo-calendar-md-cell-size: 36px !default;
18571
+ $kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
18572
+ $kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
18573
+
18574
+ $kendo-calendar-lg-font-size: $font-size-lg !default;
18575
+ $kendo-calendar-lg-line-height: $line-height-lg !default;
18576
+ $kendo-calendar-lg-cell-size: 40px !default;
18577
+ $kendo-calendar-lg-cell-padding-x: map-get( $spacing, 1 ) !default;
18578
+ $kendo-calendar-lg-cell-padding-y: map-get( $spacing, 1 ) !default;
18579
+
18580
+ $kendo-calendar-sizes: (
18581
+ sm: (
18582
+ font-size: $kendo-calendar-sm-font-size,
18583
+ line-height: $kendo-calendar-sm-line-height,
18584
+ cell-size: $kendo-calendar-sm-cell-size,
18585
+ cell-padding-x: $kendo-calendar-sm-cell-padding-y,
18586
+ cell-padding-y: $kendo-calendar-sm-cell-padding-x
18587
+ ),
18588
+ md: (
18589
+ font-size: $kendo-calendar-md-font-size,
18590
+ line-height: $kendo-calendar-md-line-height,
18591
+ cell-size: $kendo-calendar-md-cell-size,
18592
+ cell-padding-x: $kendo-calendar-md-cell-padding-y,
18593
+ cell-padding-y: $kendo-calendar-md-cell-padding-x
18594
+ ),
18595
+ lg: (
18596
+ font-size: $kendo-calendar-lg-font-size,
18597
+ line-height: $kendo-calendar-lg-line-height,
18598
+ cell-size: $kendo-calendar-lg-cell-size,
18599
+ cell-padding-x: $kendo-calendar-lg-cell-padding-y,
18600
+ cell-padding-y: $kendo-calendar-lg-cell-padding-x
18601
+ )
18602
+ ) !default;
18603
+
18468
18604
  // #endregion
18469
18605
  // #region @import "_layout.scss"; -> packages/material/scss/calendar/_layout.scss
18470
18606
  // #region @import "~@progress/kendo-theme-default/scss/calendar/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/calendar/_layout.scss
@@ -18472,6 +18608,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18472
18608
 
18473
18609
  // Base
18474
18610
  .k-calendar {
18611
+ inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
18612
+ block-size: var( --INTERNAL--kendo-calendar-height, min-content );
18475
18613
  border-width: $calendar-border-width;
18476
18614
  border-style: solid;
18477
18615
  box-sizing: border-box;
@@ -18492,19 +18630,12 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18492
18630
  > .k-calendar {
18493
18631
  border: 0;
18494
18632
  }
18495
-
18496
- // Common
18497
- .k-link {
18498
- white-space: normal;
18499
- position: relative;
18500
- overflow: hidden;
18501
- }
18502
18633
  }
18503
18634
 
18504
18635
 
18505
18636
  // Calendar table
18506
18637
  .k-calendar-table {
18507
- margin: 0;
18638
+ margin: 0 auto;
18508
18639
  border-width: 0;
18509
18640
  border-color: inherit;
18510
18641
  border-spacing: 0;
@@ -18512,8 +18643,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18512
18643
  table-layout: fixed;
18513
18644
  text-align: center;
18514
18645
  outline: 0;
18515
- display: inline-table;
18516
- vertical-align: top;
18646
+ display: table;
18517
18647
  position: relative;
18518
18648
  z-index: 1;
18519
18649
  }
@@ -18531,6 +18661,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18531
18661
  font-weight: $calendar-caption-font-weight;
18532
18662
  cursor: default;
18533
18663
  }
18664
+
18665
+
18666
+ // Calendar cell
18534
18667
  .k-calendar-th,
18535
18668
  .k-calendar-td {
18536
18669
  border-width: 0;
@@ -18552,10 +18685,32 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18552
18685
  }
18553
18686
  .k-calendar-td {
18554
18687
  @include border-radius( $calendar-cell-border-radius );
18688
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
18689
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
18555
18690
  border-color: transparent;
18556
18691
  }
18557
18692
 
18558
18693
 
18694
+ // Calendar cell inner
18695
+ // Remove .k-calendar once we remove k-link
18696
+ .k-calendar .k-calendar-cell-inner {
18697
+ @include border-radius( $calendar-cell-border-radius );
18698
+ padding: $calendar-cell-padding-y $calendar-cell-padding-x;
18699
+ padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$calendar-cell-padding-x} );
18700
+ padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$calendar-cell-padding-y} );
18701
+ width: 100%;
18702
+ height: 100%;
18703
+ box-sizing: border-box;
18704
+ display: flex;
18705
+ flex-direction: row;
18706
+ align-items: center;
18707
+ justify-content: center;
18708
+ white-space: normal;
18709
+ position: relative;
18710
+ overflow: hidden;
18711
+ }
18712
+
18713
+
18559
18714
  // Calendar header
18560
18715
  .k-calendar .k-header {
18561
18716
  padding: $calendar-header-padding-y $calendar-header-padding-x;
@@ -18573,7 +18728,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18573
18728
  // Calendar header
18574
18729
  .k-calendar-header {
18575
18730
  padding: $calendar-header-padding-y $calendar-header-padding-x;
18576
- min-width: $calendar-header-min-width;
18731
+ min-width: ($calendar-cell-size * 8);
18577
18732
  box-sizing: border-box;
18578
18733
  display: flex;
18579
18734
  align-items: center;
@@ -18615,22 +18770,13 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18615
18770
  padding: 0 $calendar-header-padding-x;
18616
18771
  // setting width / height prevents layout changes in meta views
18617
18772
  width: $calendar-view-width;
18773
+ inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$calendar-view-width});
18618
18774
  min-height: $calendar-view-height;
18619
18775
  box-sizing: content-box;
18620
18776
  gap: $calendar-view-gap;
18621
18777
  position: relative;
18622
18778
  z-index: 1;
18623
18779
  overflow: hidden;
18624
-
18625
- .k-link {
18626
- @include border-radius( $calendar-cell-border-radius );
18627
- padding: $calendar-cell-padding-y $calendar-cell-padding-x;
18628
- box-sizing: border-box;
18629
- display: flex;
18630
- flex-direction: row;
18631
- align-items: center;
18632
- justify-content: center;
18633
- }
18634
18780
  }
18635
18781
  .k-week-number .k-calendar-view {
18636
18782
  width: (8 * $calendar-cell-size);
@@ -18638,61 +18784,59 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18638
18784
 
18639
18785
 
18640
18786
  // Month view
18787
+ .k-month-calendar,
18641
18788
  .k-calendar-monthview {
18642
18789
  $_month-cell-size: $calendar-cell-size;
18643
18790
 
18644
18791
  .k-calendar-td {
18645
18792
  width: $_month-cell-size;
18646
18793
  height: $_month-cell-size;
18647
- }
18648
- .k-link {
18649
- width: $_month-cell-size;
18650
- height: $_month-cell-size;
18794
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
18795
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
18651
18796
  }
18652
18797
  }
18653
18798
 
18654
18799
 
18655
18800
  // Year view
18801
+ .k-year-calendar,
18656
18802
  .k-calendar-yearview {
18657
- $_year-cell-size: ( (7 / 4) * $calendar-cell-size);
18803
+ $_year-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
18658
18804
 
18659
18805
  .k-calendar-td {
18660
- width: auto;
18661
- height: auto;
18662
- }
18663
- .k-link {
18664
18806
  width: $_year-cell-size;
18665
18807
  height: $_year-cell-size;
18808
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
18809
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
18666
18810
  }
18667
18811
  }
18668
18812
 
18669
18813
 
18670
18814
  // Decade view
18815
+ .k-decade-calendar,
18671
18816
  .k-calendar-decadeview {
18672
- $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);
18817
+ $_decade-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
18673
18818
 
18674
18819
  .k-calendar-td {
18675
- width: auto;
18676
- height: auto;
18677
- }
18678
- .k-link {
18679
18820
  width: $_decade-cell-size;
18680
18821
  height: $_decade-cell-size;
18822
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
18823
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
18681
18824
  }
18682
18825
  }
18683
18826
 
18684
18827
 
18685
18828
  // Century view
18829
+ .k-century-calendar,
18686
18830
  .k-calendar-centuryview {
18687
- $_century-cell-size: ( (7 / 4) * $calendar-cell-size);
18831
+ $_century-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
18688
18832
 
18689
18833
  .k-calendar-td {
18690
- width: auto;
18691
- height: auto;
18692
- }
18693
- .k-link {
18694
18834
  width: $_century-cell-size;
18695
18835
  height: $_century-cell-size;
18836
+ inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
18837
+ block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
18838
+ }
18839
+ .k-calendar-cell-inner {
18696
18840
  text-align: left;
18697
18841
  }
18698
18842
  }
@@ -18732,6 +18876,56 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18732
18876
  top: 0;
18733
18877
  right: 0;
18734
18878
  }
18879
+
18880
+
18881
+
18882
+
18883
+ // Calendar sizes
18884
+ @each $size, $size-props in $kendo-calendar-sizes {
18885
+ $_font-size: map-get( $size-props, font-size );
18886
+ $_line-height: map-get( $size-props, line-height );
18887
+ $_cell-size: map-get( $size-props, cell-size );
18888
+ $_cell-padding-x: map-get( $size-props, cell-padding-x );
18889
+ $_cell-padding-y: map-get( $size-props, cell-padding-y );
18890
+
18891
+ $_month-cell-size: $_cell-size;
18892
+ $_year-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
18893
+ $_decade-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
18894
+ $_century-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
18895
+
18896
+ .k-calendar-#{$size} {
18897
+ --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
18898
+ --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
18899
+ --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
18900
+ font-size: $_font-size;
18901
+ line-height: $_line-height;
18902
+
18903
+ &.k-month-calendar,
18904
+ .k-calendar-monthview {
18905
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
18906
+ }
18907
+ &.k-year-calendar,
18908
+ .k-calendar-yearview {
18909
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
18910
+ }
18911
+ &.k-decade-calendar,
18912
+ .k-calendar-decadeview {
18913
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
18914
+ }
18915
+ &.k-century-calendar,
18916
+ .k-calendar-centuryview {
18917
+ --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
18918
+ }
18919
+ }
18920
+ }
18921
+
18922
+
18923
+
18924
+
18925
+ // Alias
18926
+ .k-link {
18927
+ @extend .k-calendar-cell-inner;
18928
+ }
18735
18929
  }
18736
18930
 
18737
18931
 
@@ -18856,7 +19050,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18856
19050
  }
18857
19051
 
18858
19052
  // // styles are applied to the k-link element inside
18859
- // .k-state-selected ,
19053
+ // .k-state-selected,
18860
19054
  // .k-selected {
18861
19055
  // color: inherit;
18862
19056
  // background: transparent;
@@ -18882,6 +19076,10 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
18882
19076
  &::after {
18883
19077
  display: none;
18884
19078
  }
19079
+
19080
+ &:focus {
19081
+ outline: 0;
19082
+ }
18885
19083
  }
18886
19084
 
18887
19085
  .k-range-start {
@@ -19005,8 +19203,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19005
19203
  &.k-hover,
19006
19204
  &.k-state-hover,
19007
19205
  &:focus,
19008
- &.k-state-focus,
19009
- &.k-focus {
19206
+ &.k-focus,
19207
+ &.k-state-focus {
19010
19208
  color: $calendar-today-nav-hover-text;
19011
19209
  }
19012
19210
  }
@@ -19024,11 +19222,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19024
19222
  // Special days
19025
19223
  .k-calendar-view .k-today {
19026
19224
  @if $calendar-today-style == box {
19027
- .k-link {
19225
+ .k-calendar-cell-inner {
19028
19226
  box-shadow: inset 0 0 0 1px $calendar-today-color;
19029
19227
  }
19030
- &.k-state-focused .k-link,
19031
- &.k-focus .k-link {
19228
+ &.k-focus .k-calendar-cell-inner,
19229
+ &.k-state-focused .k-calendar-cell-inner {
19032
19230
  box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
19033
19231
  }
19034
19232
  } @else if $calendar-today-style == color {
@@ -19062,9 +19260,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19062
19260
 
19063
19261
 
19064
19262
  // Interactive states
19065
- .k-calendar-td:hover .k-link,
19066
- .k-calendar-td.k-state-hover .k-link,
19067
- .k-calendar-td.k-hover .k-link {
19263
+ .k-calendar-td:hover .k-calendar-cell-inner,
19264
+ .k-calendar-td.k-hover .k-calendar-cell-inner,
19265
+ .k-calendar-td.k-state-hover .k-calendar-cell-inner {
19068
19266
  @include fill(
19069
19267
  $calendar-cell-hover-text,
19070
19268
  $calendar-cell-hover-bg,
@@ -19072,8 +19270,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19072
19270
  $calendar-cell-hover-gradient
19073
19271
  );
19074
19272
  }
19075
- .k-calendar-td.k-state-selected .k-link,
19076
- .k-calendar-td.k-selected .k-link {
19273
+ .k-calendar-td.k-selected .k-calendar-cell-inner,
19274
+ .k-calendar-td.k-state-selected .k-calendar-cell-inner {
19077
19275
  @include fill(
19078
19276
  $calendar-cell-selected-text,
19079
19277
  $calendar-cell-selected-bg,
@@ -19081,12 +19279,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19081
19279
  $calendar-cell-selected-gradient
19082
19280
  );
19083
19281
  }
19084
- .k-calendar-td.k-state-selected:hover .k-link,
19085
- .k-calendar-td.k-selected:hover .k-link,
19086
- .k-calendar-td.k-state-selected.k-state-hover .k-link,
19087
- .k-calendar-td.k-selected.k-hover .k-link,
19088
- .k-calendar-td.k-selected:hover .k-link,
19089
- .k-calendar-td.k-selected.k-hover .k-link {
19282
+ .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
19283
+ .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
19284
+ .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
19090
19285
  @include fill(
19091
19286
  $calendar-cell-selected-hover-text,
19092
19287
  $calendar-cell-selected-hover-bg,
@@ -19094,18 +19289,15 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19094
19289
  $calendar-cell-selected-hover-gradient
19095
19290
  );
19096
19291
  }
19097
- .k-calendar-td.k-state-focused .k-link,
19098
- .k-calendar-td.k-focus .k-link,
19099
- .k-calendar-td.k-state-focus .k-link,
19100
- .k-calendar-td.k-focus .k-link {
19292
+ .k-calendar-td:focus .k-calendar-cell-inner,
19293
+ .k-calendar-td.k-focus .k-calendar-cell-inner,
19294
+ .k-calendar-td.k-state-focus .k-calendar-cell-inner,
19295
+ .k-calendar-td.k-state-focused .k-calendar-cell-inner {
19101
19296
  box-shadow: $calendar-cell-focused-shadow;
19102
19297
  }
19103
- .k-calendar-td.k-state-selected.k-state-focused .k-link,
19104
- .k-calendar-td.k-selected.k-focused .k-link,
19105
- .k-calendar-td.k-state-selected.k-state-focus .k-link,
19106
- .k-calendar-td.k-selected.k-focus .k-link,
19107
- .k-calendar-td.k-selected:focus .k-link,
19108
- .k-calendar-td.k-selected.k-focus .k-link {
19298
+ .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
19299
+ .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
19300
+ .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
19109
19301
  box-shadow: $calendar-cell-selected-focus-shadow;
19110
19302
  }
19111
19303
 
@@ -19119,8 +19311,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19119
19311
  box-shadow: inset -1px 0 $calendar-navigation-border;
19120
19312
 
19121
19313
  li:hover,
19122
- li.k-state-hover,
19123
- li.k-hover {
19314
+ li.k-hover,
19315
+ li.k-state-hover {
19124
19316
  color: $calendar-today-nav-hover-text;
19125
19317
  }
19126
19318
  }
@@ -19175,19 +19367,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19175
19367
  .k-range-start,
19176
19368
  .k-range-end,
19177
19369
  .k-range-mid {
19178
- // sass-lint:disable-block indentation
19179
- background-image:
19180
- linear-gradient(
19181
- transparent $calendar-range-gap,
19182
- $calendar-range-bg $calendar-range-gap,
19183
- $calendar-range-bg calc(100% - #{$calendar-range-gap}),
19184
- transparent calc(100% - #{$calendar-range-gap})
19185
- );
19186
-
19187
- .k-ie & {
19188
- background-image: none;
19189
- background-color: $calendar-range-bg;
19190
- }
19370
+ background-color: $calendar-range-bg;
19191
19371
  }
19192
19372
 
19193
19373
  .k-range-start.k-range-end {
@@ -19197,16 +19377,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19197
19377
 
19198
19378
  .k-range-start,
19199
19379
  .k-range-end {
19200
- .k-link {
19380
+ .k-calendar-cell-inner {
19201
19381
  background-color: $calendar-cell-selected-bg;
19202
19382
  }
19203
19383
  }
19204
19384
 
19205
- .k-range-start.k-state-active,
19206
19385
  .k-range-start.k-active,
19207
- .k-range-end.k-state-active,
19208
- .k-range-end.k-active {
19209
- .k-link {
19386
+ .k-range-start.k-state-active,
19387
+ .k-range-end.k-active,
19388
+ .k-range-end.k-state-active {
19389
+ .k-calendar-cell-inner {
19210
19390
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
19211
19391
  }
19212
19392
  }
@@ -19219,8 +19399,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19219
19399
  content: "";
19220
19400
  display: block;
19221
19401
  position: absolute;
19222
- top: $calendar-range-gap;
19223
- bottom: $calendar-range-gap;
19402
+ top: 0;
19403
+ bottom: 0;
19224
19404
  width: $calendar-range-split-size;
19225
19405
  }
19226
19406
  }
@@ -19246,7 +19426,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19246
19426
 
19247
19427
  .k-calendar {
19248
19428
 
19249
- .k-state-focused .k-link ,
19429
+ .k-state-focused .k-link,
19250
19430
  .k-focus .k-link {
19251
19431
  @include fill(
19252
19432
  $calendar-cell-hover-text,
@@ -19254,8 +19434,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
19254
19434
  $calendar-cell-hover-border
19255
19435
  );
19256
19436
  }
19257
- .k-state-selected.k-state-focused .k-link ,
19258
- .k-selected.k-focused .k-link {
19437
+ .k-state-selected.k-state-focused .k-link,
19438
+ .k-selected.k-focus .k-link {
19259
19439
  @include fill(
19260
19440
  $calendar-cell-selected-text,
19261
19441
  try-tint($calendar-cell-selected-bg),
@@ -19322,6 +19502,44 @@ $time-list-highlight-border: $component-border !default;
19322
19502
 
19323
19503
  $time-list-focused-bg: null !default;
19324
19504
 
19505
+
19506
+ // Time selector sizes
19507
+ $kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
19508
+ $kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
19509
+ $kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
19510
+ $kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
19511
+
19512
+ $kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
19513
+ $kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
19514
+ $kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
19515
+ $kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
19516
+
19517
+ $kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
19518
+ $kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
19519
+ $kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
19520
+ $kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
19521
+
19522
+ $kendo-time-selector-sizes: (
19523
+ sm: (
19524
+ font-size: $kendo-time-selector-sm-font-size,
19525
+ line-height: $kendo-time-selector-sm-line-height,
19526
+ list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
19527
+ list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
19528
+ ),
19529
+ md: (
19530
+ font-size: $kendo-time-selector-md-font-size,
19531
+ line-height: $kendo-time-selector-md-line-height,
19532
+ list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
19533
+ list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
19534
+ ),
19535
+ lg: (
19536
+ font-size: $kendo-time-selector-lg-font-size,
19537
+ line-height: $kendo-time-selector-lg-line-height,
19538
+ list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
19539
+ list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
19540
+ )
19541
+ ) !default;
19542
+
19325
19543
  // #endregion
19326
19544
  // #region @import "_layout.scss"; -> packages/material/scss/timeselector/_layout.scss
19327
19545
  // #region @import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss
@@ -19427,7 +19645,7 @@ $time-list-focused-bg: null !default;
19427
19645
  display: block;
19428
19646
  }
19429
19647
 
19430
- &.k-state-focused ,
19648
+ &.k-state-focused,
19431
19649
  &.k-focus {
19432
19650
  &::before,
19433
19651
  &::after {
@@ -19533,6 +19751,36 @@ $time-list-focused-bg: null !default;
19533
19751
  top: calc( #{$time-list-title-height / 2} );
19534
19752
  }
19535
19753
 
19754
+
19755
+ // Time selector sizes
19756
+ @each $size, $size-props in $kendo-time-selector-sizes {
19757
+ $_font-size: map-get( $size-props, font-size );
19758
+ $_line-height: map-get( $size-props, line-height );
19759
+ $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
19760
+ $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
19761
+ $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
19762
+
19763
+
19764
+ .k-timeselector-#{$size} {
19765
+ font-size: $_font-size;
19766
+ line-height: $_line-height;
19767
+
19768
+ .k-time-highlight,
19769
+ .k-time-list-highlight {
19770
+ height: $_highlight-height;
19771
+ }
19772
+
19773
+ .k-time-separator {
19774
+ height: $_highlight-height;
19775
+ }
19776
+
19777
+ .k-time-list-item,
19778
+ .k-time-list .k-item {
19779
+ padding: $_list-item-padding-y $_list-item-padding-x;
19780
+ }
19781
+ }
19782
+ }
19783
+
19536
19784
  }
19537
19785
 
19538
19786
  // #endregion
@@ -19572,7 +19820,7 @@ $time-list-focused-bg: null !default;
19572
19820
  color: $time-list-title-text;
19573
19821
  }
19574
19822
 
19575
- &.k-state-focused ,
19823
+ &.k-state-focused,
19576
19824
  &.k-focus {
19577
19825
  .k-title {
19578
19826
  color: $time-list-title-focus-text;
@@ -19919,7 +20167,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
19919
20167
  &.k-focus,
19920
20168
  &.k-state-selected,
19921
20169
  &.k-selected,
19922
- &.k-state-selected:hover ,
20170
+ &.k-state-selected:hover,
19923
20171
  &.k-selected:hover {
19924
20172
  position: relative;
19925
20173
  z-index: 100;
@@ -21272,15 +21520,15 @@ $kendo-treeview-font-family: $font-family !default;
21272
21520
  /// Font size of the treeview component.
21273
21521
  /// @group treeview
21274
21522
  $kendo-treeview-font-size: $font-size-lg !default;
21275
- $kendo-treeview-font-size-sm: $font-size-lg !default;
21276
- $kendo-treeview-font-size-md: $font-size-lg !default;
21523
+ $kendo-treeview-font-size-sm: $font-size-md !default;
21524
+ $kendo-treeview-font-size-md: $font-size-md !default;
21277
21525
  $kendo-treeview-font-size-lg: $font-size-lg !default;
21278
21526
  /// Line height of the treeview component.
21279
21527
  /// @group treeview
21280
21528
  $kendo-treeview-line-height: 1.25 !default;
21281
- $kendo-treeview-line-height-sm: 1.25 !default;
21282
- $kendo-treeview-line-height-md: 1.25 !default;
21283
- $kendo-treeview-line-height-lg: 1.25 !default;
21529
+ $kendo-treeview-line-height-sm: ( 20 / 14 ) !default;
21530
+ $kendo-treeview-line-height-md: ( 20 / 14 ) !default;
21531
+ $kendo-treeview-line-height-lg: 1.5 !default;
21284
21532
  /// Indentation of child groups in treeview component.
21285
21533
  /// @group treeview
21286
21534
  $kendo-treeview-indent: 16px !default;
@@ -21296,7 +21544,7 @@ $kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
21296
21544
  $kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
21297
21545
  $kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
21298
21546
  $kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
21299
- $kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
21547
+ $kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
21300
21548
  /// Border width of treeview items.
21301
21549
  /// @group treeview
21302
21550
  $kendo-treeview-item-border-width: 0px !default;
@@ -21983,7 +22231,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
21983
22231
  color: $component-text;
21984
22232
 
21985
22233
  &:focus,
21986
- &.k-state-focused ,
22234
+ &.k-state-focused,
21987
22235
  &.k-focus {
21988
22236
 
21989
22237
  .k-rating-item {
@@ -21991,7 +22239,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
21991
22239
  text-shadow: $rating-icon-focused-shadow;
21992
22240
  }
21993
22241
 
21994
- &.k-state-selected > .k-icon ,
22242
+ &.k-state-selected > .k-icon,
21995
22243
  &.k-selected > .k-icon {
21996
22244
  text-shadow: $rating-icon-focused-selected-shadow;
21997
22245
  }
@@ -22002,19 +22250,19 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
22002
22250
  .k-rating-item {
22003
22251
  color: $rating-icon-text;
22004
22252
 
22005
- &.k-state-selected ,
22253
+ &.k-state-selected,
22006
22254
  &.k-selected {
22007
22255
  color: $rating-icon-selected-text;
22008
22256
 
22009
22257
  &:focus,
22010
- &.k-state-focused ,
22258
+ &.k-state-focused,
22011
22259
  &.k-focus {
22012
22260
  color: $rating-icon-focused-text;
22013
22261
  }
22014
22262
  }
22015
22263
 
22016
22264
  &:hover,
22017
- &.k-state-hover ,
22265
+ &.k-state-hover,
22018
22266
  &.k-hover {
22019
22267
  color: $rating-icon-hover-text;
22020
22268
  cursor: pointer;
@@ -23308,7 +23556,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23308
23556
  z-index: 1;
23309
23557
  }
23310
23558
  input[disabled],
23311
- input.k-state-disabled ,
23559
+ input.k-state-disabled,
23312
23560
  input.k-disabled {
23313
23561
  visibility: hidden;
23314
23562
  }
@@ -23356,12 +23604,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
23356
23604
 
23357
23605
  .k-file {
23358
23606
 
23359
- &.k-state-focused ,
23607
+ &.k-state-focused,
23360
23608
  &.k-focus {
23361
23609
  box-shadow: inset $upload-focused-shadow;
23362
23610
  }
23363
23611
 
23364
- .k-upload-action.k-state-focused ,
23612
+ .k-upload-action.k-state-focused,
23365
23613
  .k-upload-action.k-focus {
23366
23614
  box-shadow: $upload-focused-shadow;
23367
23615
  }
@@ -24278,6 +24526,10 @@ $actionsheet-item-disabled-opacity: .42 !default;
24278
24526
  box-sizing: border-box;
24279
24527
  }
24280
24528
  }
24529
+ .k-actionsheet-fullscreen {
24530
+ max-height: 100%;
24531
+ height: 100%;
24532
+ }
24281
24533
 
24282
24534
 
24283
24535
  // Actionsheet header
@@ -24291,6 +24543,35 @@ $actionsheet-item-disabled-opacity: .42 !default;
24291
24543
  font-size: $actionsheet-header-font-size;
24292
24544
  font-family: $actionsheet-header-font-family;
24293
24545
  line-height: $actionsheet-header-line-height;
24546
+ flex: none;
24547
+ }
24548
+
24549
+
24550
+ // Actionsheet titlebar
24551
+ .k-actionsheet-titlebar {
24552
+ @extend .k-actionsheet-header !optional;
24553
+ display: flex;
24554
+ flex-flow: row nowrap;
24555
+ align-items: center;
24556
+ }
24557
+ .k-actionsheet-title {
24558
+ flex: 1;
24559
+ }
24560
+ .k-actionsheet-actions {
24561
+ flex: none;
24562
+ }
24563
+
24564
+
24565
+ // Actionsheet content
24566
+ .k-actionsheet-content {
24567
+ flex: 1;
24568
+ overflow: auto;
24569
+ }
24570
+
24571
+
24572
+ // Actionsheet footer
24573
+ .k-actionsheet-footer {
24574
+ flex: none;
24294
24575
  }
24295
24576
 
24296
24577
 
@@ -24387,6 +24668,37 @@ $actionsheet-item-disabled-opacity: .42 !default;
24387
24668
  transform: none;
24388
24669
  }
24389
24670
 
24671
+
24672
+ // Adaptive action sheet
24673
+ .k-adaptive-actionsheet {
24674
+ max-width: 100%;
24675
+ width: 100%;
24676
+
24677
+ // TMP: this should be moved to action sheet
24678
+ display: flex;
24679
+ flex-flow: column nowrap;
24680
+
24681
+ .k-calendar {
24682
+ margin-inline: auto;
24683
+ border-width: 0;
24684
+ display: flex;
24685
+ }
24686
+
24687
+ .k-timeselector {
24688
+ height: 100%;
24689
+ border-width: 0;
24690
+ overflow: hidden;
24691
+
24692
+ .k-time-part {
24693
+ display: contents;
24694
+ }
24695
+
24696
+ .k-time-list-wrapper {
24697
+ height: 100%;
24698
+ }
24699
+ }
24700
+ }
24701
+
24390
24702
  }
24391
24703
 
24392
24704
  // #endregion
@@ -24439,7 +24751,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
24439
24751
 
24440
24752
  // Hover state
24441
24753
  &:hover,
24442
- &.k-state-hover ,
24754
+ &.k-state-hover,
24443
24755
  &.k-hover {
24444
24756
  @include fill(
24445
24757
  $actionsheet-item-hover-text,
@@ -24453,7 +24765,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
24453
24765
 
24454
24766
  // Focus state
24455
24767
  &:focus,
24456
- &.k-state-focus ,
24768
+ &.k-state-focus,
24457
24769
  &.k-focus {
24458
24770
  @include fill(
24459
24771
  $actionsheet-item-focus-text,
@@ -24467,7 +24779,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
24467
24779
 
24468
24780
  // Disabed state
24469
24781
  &:disabled,
24470
- &.k-state-disabled ,
24782
+ &.k-state-disabled,
24471
24783
  &.k-disabled {
24472
24784
  @include fill(
24473
24785
  $actionsheet-item-disabled-text,
@@ -24721,7 +25033,7 @@ $actionsheet-item-disabled-opacity: .42 !default;
24721
25033
 
24722
25034
  .k-window {
24723
25035
  &:focus,
24724
- &.k-state-focused ,
25036
+ &.k-state-focused,
24725
25037
  &.k-focus {
24726
25038
  @include box-shadow( $window-focused-shadow );
24727
25039
  }
@@ -25261,33 +25573,33 @@ $drawer-selected-hover-text: $secondary !default;
25261
25573
  .k-drawer-item {
25262
25574
 
25263
25575
  &:hover,
25264
- &.k-state-hover ,
25576
+ &.k-state-hover,
25265
25577
  &.k-hover {
25266
25578
  color: $drawer-hovered-text;
25267
25579
  background-color: $drawer-hovered-bg;
25268
25580
  }
25269
25581
 
25270
25582
  &:focus,
25271
- &.k-state-focused ,
25583
+ &.k-state-focused,
25272
25584
  &.k-focus {
25273
25585
  background-color: $drawer-focused-bg;
25274
25586
  box-shadow: $drawer-focused-shadow;
25275
25587
 
25276
25588
  &:hover,
25277
- &.k-state-hover ,
25589
+ &.k-state-hover,
25278
25590
  &.k-hover {
25279
25591
  color: $drawer-hovered-text;
25280
25592
  background-color: $drawer-hovered-bg;
25281
25593
  }
25282
25594
  }
25283
25595
 
25284
- &.k-state-selected ,
25596
+ &.k-state-selected,
25285
25597
  &.k-selected {
25286
25598
  color: $drawer-selected-text;
25287
25599
  background-color: $drawer-selected-bg;
25288
25600
 
25289
25601
  &:hover,
25290
- &.k-state-hover ,
25602
+ &.k-state-hover,
25291
25603
  &.k-hover {
25292
25604
  color: $drawer-selected-hover-text;
25293
25605
  background-color: $drawer-selected-hover-bg;
@@ -25304,11 +25616,11 @@ $drawer-selected-hover-text: $secondary !default;
25304
25616
 
25305
25617
  @include exports( "drawer/theme/material" ) {
25306
25618
  .k-drawer-item {
25307
- &.k-state-selected ,
25619
+ &.k-state-selected,
25308
25620
  &.k-selected {
25309
25621
 
25310
25622
  &:focus,
25311
- &.k-state-focused ,
25623
+ &.k-state-focused,
25312
25624
  &.k-focus {
25313
25625
  background-color: $drawer-focused-bg;
25314
25626
  box-shadow: $drawer-focused-shadow;
@@ -26561,7 +26873,7 @@ $bottom-nav-flat-border: $component-border !default;
26561
26873
  outline: 0;
26562
26874
  }
26563
26875
  }
26564
- .k-bottom-nav-item.k-state-disabled ,
26876
+ .k-bottom-nav-item.k-state-disabled,
26565
26877
  .k-bottom-nav-item.k-disabled {
26566
26878
  background-color: initial;
26567
26879
  }
@@ -26616,7 +26928,7 @@ $bottom-nav-flat-border: $component-border !default;
26616
26928
  @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
26617
26929
  }
26618
26930
 
26619
- .k-bottom-nav-item.k-state-selected ,
26931
+ .k-bottom-nav-item.k-state-selected,
26620
26932
  .k-bottom-nav-item.k-selected {
26621
26933
  @include fill( $color: contrast-wcag( $color ) );
26622
26934
  }
@@ -26640,7 +26952,7 @@ $bottom-nav-flat-border: $component-border !default;
26640
26952
  }
26641
26953
 
26642
26954
  @each $name, $color in $kendo-theme-colors {
26643
- &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected ,
26955
+ &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
26644
26956
  &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
26645
26957
  @if $name == "secondary" or $name == "light" {
26646
26958
  @include fill( $color: try-shade($color, 3) );
@@ -26901,7 +27213,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26901
27213
  );
26902
27214
 
26903
27215
  &:focus,
26904
- &.k-state-focused ,
27216
+ &.k-state-focused,
26905
27217
  &.k-focus {
26906
27218
  @include box-shadow( $breadcrumb-focused-shadow );
26907
27219
  }
@@ -26918,7 +27230,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26918
27230
 
26919
27231
  // Hovered state
26920
27232
  &:hover,
26921
- &.k-state-hover ,
27233
+ &.k-state-hover,
26922
27234
  &.k-hover {
26923
27235
  @include fill(
26924
27236
  $breadcrumb-link-hovered-text,
@@ -26929,7 +27241,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26929
27241
 
26930
27242
  // Focused state
26931
27243
  &:focus,
26932
- &.k-state-focused ,
27244
+ &.k-state-focused,
26933
27245
  &.k-focus {
26934
27246
  @include fill(
26935
27247
  $breadcrumb-link-focused-text,
@@ -26951,7 +27263,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26951
27263
 
26952
27264
  // Hovered state
26953
27265
  &:hover,
26954
- &.k-state-hover ,
27266
+ &.k-state-hover,
26955
27267
  &.k-hover {
26956
27268
  @include fill(
26957
27269
  $breadcrumb-root-link-hovered-text,
@@ -26962,7 +27274,7 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26962
27274
 
26963
27275
  // Focused state
26964
27276
  &:focus,
26965
- &.k-state-focused ,
27277
+ &.k-state-focused,
26966
27278
  &.k-focus {
26967
27279
  @include fill(
26968
27280
  $breadcrumb-root-link-focused-text,
@@ -27111,7 +27423,7 @@ $pager-dropdown-width: 5em !default;
27111
27423
 
27112
27424
  // Focused state
27113
27425
  &:focus,
27114
- &.k-state-focus ,
27426
+ &.k-state-focus,
27115
27427
  &.k-focus {
27116
27428
  z-index: 3;
27117
27429
  }
@@ -27161,7 +27473,7 @@ $pager-dropdown-width: 5em !default;
27161
27473
  &:hover {
27162
27474
  z-index: 2;
27163
27475
  }
27164
- &.k-state-disabled ,
27476
+ &.k-state-disabled,
27165
27477
  &.k-disabled {
27166
27478
  color: inherit;
27167
27479
  }
@@ -27211,7 +27523,7 @@ $pager-dropdown-width: 5em !default;
27211
27523
  }
27212
27524
 
27213
27525
  // Selected state
27214
- .k-state-selected ,
27526
+ .k-state-selected,
27215
27527
  .k-selected {
27216
27528
  cursor: inherit;
27217
27529
  z-index: 2;
@@ -27378,7 +27690,7 @@ $pager-dropdown-width: 5em !default;
27378
27690
  &:focus,
27379
27691
  &.k-focus,
27380
27692
  &.k-state-focus,
27381
- &.k-state-focused ,
27693
+ &.k-state-focused,
27382
27694
  &.k-focus {
27383
27695
  @include fill( $bg: $pager-focus-bg );
27384
27696
  @include box-shadow( $pager-focus-shadow );
@@ -27394,7 +27706,7 @@ $pager-dropdown-width: 5em !default;
27394
27706
  );
27395
27707
 
27396
27708
  &:hover,
27397
- &.k-state-hover ,
27709
+ &.k-state-hover,
27398
27710
  &.k-hover {
27399
27711
  @include fill(
27400
27712
  $pager-item-hover-text,
@@ -27403,7 +27715,7 @@ $pager-dropdown-width: 5em !default;
27403
27715
  );
27404
27716
  }
27405
27717
 
27406
- &.k-state-selected ,
27718
+ &.k-state-selected,
27407
27719
  &.k-selected {
27408
27720
  @include fill(
27409
27721
  $pager-item-selected-text,
@@ -27413,7 +27725,7 @@ $pager-dropdown-width: 5em !default;
27413
27725
  }
27414
27726
 
27415
27727
  &:focus,
27416
- &.k-state-focus ,
27728
+ &.k-state-focus,
27417
27729
  &.k-focus {
27418
27730
  background-color: $pager-item-focus-bg;
27419
27731
  @include box-shadow( $pager-item-focus-shadow );
@@ -27437,7 +27749,7 @@ $pager-dropdown-width: 5em !default;
27437
27749
  );
27438
27750
 
27439
27751
  &:hover,
27440
- &.k-state-hover ,
27752
+ &.k-state-hover,
27441
27753
  &.k-hover {
27442
27754
  @include fill(
27443
27755
  $pager-number-hover-text,
@@ -27447,13 +27759,13 @@ $pager-dropdown-width: 5em !default;
27447
27759
  }
27448
27760
 
27449
27761
  &:focus,
27450
- &.k-state-focus ,
27762
+ &.k-state-focus,
27451
27763
  &.k-focus {
27452
27764
  background-color: $pager-number-focus-bg;
27453
27765
  @include box-shadow( $pager-number-focus-shadow );
27454
27766
  }
27455
27767
 
27456
- &.k-state-selected ,
27768
+ &.k-state-selected,
27457
27769
  &.k-selected {
27458
27770
  @include fill(
27459
27771
  $pager-number-selected-text,
@@ -27486,7 +27798,7 @@ $pager-dropdown-width: 5em !default;
27486
27798
  );
27487
27799
 
27488
27800
  &:hover,
27489
- &.k-state-hover ,
27801
+ &.k-state-hover,
27490
27802
  &.k-hover {
27491
27803
  @include fill(
27492
27804
  $dropdownlist-hovered-text,
@@ -27507,7 +27819,7 @@ $pager-dropdown-width: 5em !default;
27507
27819
  .k-link {
27508
27820
 
27509
27821
  &:hover,
27510
- &.k-state-hover ,
27822
+ &.k-state-hover,
27511
27823
  &.k-hover {
27512
27824
  @include fill(
27513
27825
  $kendo-list-item-hover-text,
@@ -27515,7 +27827,7 @@ $pager-dropdown-width: 5em !default;
27515
27827
  );
27516
27828
  }
27517
27829
 
27518
- &.k-state-selected ,
27830
+ &.k-state-selected,
27519
27831
  &.k-selected {
27520
27832
  @include fill(
27521
27833
  $kendo-list-item-selected-text,
@@ -27802,7 +28114,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
27802
28114
  opacity: $stepper-optional-label-opacity;
27803
28115
  }
27804
28116
  .k-step-disabled .k-step-label-optional,
27805
- &.k-state-disabled .k-step-label-optional ,
28117
+ &.k-state-disabled .k-step-label-optional,
27806
28118
  &.k-disabled .k-step-label-optional {
27807
28119
  color: inherit;
27808
28120
  }
@@ -28135,7 +28447,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
28135
28447
  $bg: $stepper-progressbar-bg
28136
28448
  );
28137
28449
 
28138
- .k-state-selected ,
28450
+ .k-state-selected,
28139
28451
  .k-selected {
28140
28452
  @include fill(
28141
28453
  $color: $stepper-progressbar-fill-text,
@@ -28386,13 +28698,13 @@ $tabstrip-content-border-focused: $component-text !default;
28386
28698
  position: relative;
28387
28699
  z-index: 1;
28388
28700
 
28389
- &.k-state-active ,
28701
+ &.k-state-active,
28390
28702
  &.k-active {
28391
28703
  display: block;
28392
28704
  }
28393
28705
 
28394
28706
  &:focus,
28395
- &.k-state-focused ,
28707
+ &.k-state-focused,
28396
28708
  &.k-focus {
28397
28709
  outline-width: 1px;
28398
28710
  outline-style: dotted;
@@ -28481,7 +28793,7 @@ $tabstrip-content-border-focused: $component-text !default;
28481
28793
  margin-left: $tabstrip-item-gap;
28482
28794
  }
28483
28795
 
28484
- .k-item.k-state-active ,
28796
+ .k-item.k-state-active,
28485
28797
  .k-item.k-active {
28486
28798
  border-bottom-color: transparent;
28487
28799
  }
@@ -28511,7 +28823,7 @@ $tabstrip-content-border-focused: $component-text !default;
28511
28823
  margin-left: $tabstrip-item-gap;
28512
28824
  }
28513
28825
 
28514
- .k-item.k-state-active ,
28826
+ .k-item.k-state-active,
28515
28827
  .k-item.k-active {
28516
28828
  border-top-color: transparent;
28517
28829
  }
@@ -28545,7 +28857,7 @@ $tabstrip-content-border-focused: $component-text !default;
28545
28857
  margin-top: $tabstrip-item-gap;
28546
28858
  }
28547
28859
 
28548
- .k-item.k-state-active ,
28860
+ .k-item.k-state-active,
28549
28861
  .k-item.k-active {
28550
28862
  border-right-color: transparent;
28551
28863
  }
@@ -28581,7 +28893,7 @@ $tabstrip-content-border-focused: $component-text !default;
28581
28893
  margin-top: $tabstrip-item-gap;
28582
28894
  }
28583
28895
 
28584
- .k-item.k-state-active ,
28896
+ .k-item.k-state-active,
28585
28897
  .k-item.k-active {
28586
28898
  border-left-color: transparent;
28587
28899
  }
@@ -28627,7 +28939,7 @@ $tabstrip-content-border-focused: $component-text !default;
28627
28939
  border-left-width: $tabstrip-indicator-size;
28628
28940
  }
28629
28941
  }
28630
- .k-item.k-state-active::after ,
28942
+ .k-item.k-state-active::after,
28631
28943
  .k-item.k-active::after {
28632
28944
  display: block;
28633
28945
  }
@@ -28722,7 +29034,7 @@ $tabstrip-content-border-focused: $component-text !default;
28722
29034
  );
28723
29035
 
28724
29036
  &:hover,
28725
- &.k-state-hover ,
29037
+ &.k-state-hover,
28726
29038
  &.k-hover {
28727
29039
  @include fill(
28728
29040
  $tabstrip-item-hovered-text,
@@ -28735,7 +29047,7 @@ $tabstrip-content-border-focused: $component-text !default;
28735
29047
  &:active,
28736
29048
  &.k-state-active,
28737
29049
  &.k-active,
28738
- &.k-state-selected ,
29050
+ &.k-state-selected,
28739
29051
  &.k-selected {
28740
29052
  @include fill(
28741
29053
  $tabstrip-item-selected-text,
@@ -28746,7 +29058,7 @@ $tabstrip-content-border-focused: $component-text !default;
28746
29058
  }
28747
29059
 
28748
29060
  &:focus,
28749
- &.k-state-focused ,
29061
+ &.k-state-focused,
28750
29062
  &.k-focus {
28751
29063
  @include box-shadow( $tabstrip-item-focused-shadow );
28752
29064
  }
@@ -28769,7 +29081,7 @@ $tabstrip-content-border-focused: $component-text !default;
28769
29081
  );
28770
29082
 
28771
29083
  &:focus,
28772
- &.k-state-focused ,
29084
+ &.k-state-focused,
28773
29085
  &.k-focus {
28774
29086
  outline-color: $tabstrip-content-border-focused;
28775
29087
  }
@@ -28780,7 +29092,7 @@ $tabstrip-content-border-focused: $component-text !default;
28780
29092
  @if ($tabstrip-indicator-size) {
28781
29093
 
28782
29094
  .k-tabstrip-items-wrapper {
28783
- .k-item.k-state-active::after ,
29095
+ .k-item.k-state-active::after,
28784
29096
  .k-item.k-active::after {
28785
29097
  border-color: $tabstrip-indicator-color;
28786
29098
  }
@@ -28886,7 +29198,7 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
28886
29198
  justify-content: space-between;
28887
29199
 
28888
29200
  &:focus,
28889
- &.k-state-focused ,
29201
+ &.k-state-focused,
28890
29202
  &.k-focus {
28891
29203
  outline-width: 1px;
28892
29204
  outline-style: dotted;
@@ -28983,13 +29295,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
28983
29295
  @include exports("wizard/theme") {
28984
29296
  .k-wizard-step {
28985
29297
  &:focus,
28986
- &.k-state-focused ,
29298
+ &.k-state-focused,
28987
29299
  &.k-focus {
28988
29300
  outline-color: $wizard-step-border-focused;
28989
29301
  }
28990
29302
 
28991
29303
  .k-ie &:focus,
28992
- .k-ie &.k-state-focused ,
29304
+ .k-ie &.k-state-focused,
28993
29305
  .k-ie &.k-focus {
28994
29306
  @include box-shadow($wizard-focused-shadow);
28995
29307
  outline: none;
@@ -29160,7 +29472,7 @@ $expander-content-padding-y: $padding-y * 6 !default;
29160
29472
  $expander-border
29161
29473
  );
29162
29474
 
29163
- &.k-state-focus ,
29475
+ &.k-state-focus,
29164
29476
  &.k-focus {
29165
29477
  box-shadow: $expander-focus-shadow;
29166
29478
  }
@@ -29175,13 +29487,13 @@ $expander-content-padding-y: $padding-y * 6 !default;
29175
29487
  outline: none;
29176
29488
 
29177
29489
  &:hover,
29178
- &.k-state-hover ,
29490
+ &.k-state-hover,
29179
29491
  &.k-hover {
29180
29492
  background-color: $expander-header-hover-bg;
29181
29493
  }
29182
29494
 
29183
29495
  // Should be removed
29184
- &.k-state-focused ,
29496
+ &.k-state-focused,
29185
29497
  &.k-focus {
29186
29498
  background-color: $expander-header-focused-bg;
29187
29499
  box-shadow: $expander-header-focused-shadow;
@@ -29555,7 +29867,7 @@ $panelbar-header-expanded-gradient: null !default;
29555
29867
 
29556
29868
  // Hover
29557
29869
  > .k-link:hover,
29558
- > .k-link.k-state-hover ,
29870
+ > .k-link.k-state-hover,
29559
29871
  > .k-link.k-hover {
29560
29872
  @include fill(
29561
29873
  $panelbar-header-hovered-text,
@@ -29569,7 +29881,7 @@ $panelbar-header-expanded-gradient: null !default;
29569
29881
  > .k-link:focus,
29570
29882
  > .k-link.k-state-focus,
29571
29883
  > .k-link.k-focus,
29572
- > .k-link.k-state-focused ,
29884
+ > .k-link.k-state-focused,
29573
29885
  > .k-link.k-focus {
29574
29886
  @include fill(
29575
29887
  $panelbar-header-focused-text,
@@ -29582,7 +29894,7 @@ $panelbar-header-expanded-gradient: null !default;
29582
29894
 
29583
29895
  // Focus & Hover
29584
29896
  > .k-link:focus:hover,
29585
- > .k-link.k-state-focus.k-state-hover ,
29897
+ > .k-link.k-state-focus.k-state-hover,
29586
29898
  > .k-link.k-focus.k-hover {
29587
29899
  @include fill(
29588
29900
  $panelbar-header-hovered-focused-text,
@@ -29593,7 +29905,7 @@ $panelbar-header-expanded-gradient: null !default;
29593
29905
  }
29594
29906
 
29595
29907
  // Selected
29596
- > .k-link.k-state-selected ,
29908
+ > .k-link.k-state-selected,
29597
29909
  > .k-link.k-selected {
29598
29910
  @include fill(
29599
29911
  $panelbar-header-selected-text,
@@ -29611,7 +29923,7 @@ $panelbar-header-expanded-gradient: null !default;
29611
29923
  // Selected Hover
29612
29924
  > .k-link.k-state-selected:hover,
29613
29925
  > .k-link.k-selected:hover,
29614
- > .k-link.k-state-selected.k-state-hover ,
29926
+ > .k-link.k-state-selected.k-state-hover,
29615
29927
  > .k-link.k-selected.k-hover {
29616
29928
  @include fill(
29617
29929
  $panelbar-header-selected-hovered-text,
@@ -29626,7 +29938,7 @@ $panelbar-header-expanded-gradient: null !default;
29626
29938
  > .k-link.k-selected:focus,
29627
29939
  > .k-link.k-state-selected.k-state-focus,
29628
29940
  > .k-link.k-selected.k-focus,
29629
- > .k-link.k-state-selected.k-state-focused ,
29941
+ > .k-link.k-state-selected.k-state-focused,
29630
29942
  > .k-link.k-selected.k-focused {
29631
29943
  @include fill(
29632
29944
  $panelbar-header-selected-focused-text,
@@ -29641,7 +29953,7 @@ $panelbar-header-expanded-gradient: null !default;
29641
29953
  > .k-link.k-selected:hover:focus,
29642
29954
  > .k-link.k-state-selected.k-state-hover.k-state-focus,
29643
29955
  > .k-link.k-selected.k-hover.k-state-focus,
29644
- > .k-link.k-state-selected.k-state-hover.k-state-focused ,
29956
+ > .k-link.k-state-selected.k-state-hover.k-state-focused,
29645
29957
  > .k-link.k-selected.k-hover.k-state-focused {
29646
29958
  @include fill(
29647
29959
  $panelbar-header-selected-hovered-focused-text,
@@ -29662,7 +29974,7 @@ $panelbar-header-expanded-gradient: null !default;
29662
29974
  > .k-item > .k-link.k-state-hover,
29663
29975
  > .k-item > .k-link.k-hover,
29664
29976
  > .k-panelbar-item > .k-link:hover,
29665
- > .k-panelbar-item > .k-link.k-state-hover ,
29977
+ > .k-panelbar-item > .k-link.k-state-hover,
29666
29978
  > .k-panelbar-item > .k-link.k-hover {
29667
29979
  @include fill(
29668
29980
  $panelbar-item-hovered-text,
@@ -29681,7 +29993,7 @@ $panelbar-header-expanded-gradient: null !default;
29681
29993
  > .k-panelbar-item > .k-link:focus,
29682
29994
  > .k-panelbar-item > .k-link.k-state-focus,
29683
29995
  > .k-panelbar-item > .k-link.k-focus,
29684
- > .k-panelbar-item > .k-link.k-state-focused ,
29996
+ > .k-panelbar-item > .k-link.k-state-focused,
29685
29997
  > .k-panelbar-item > .k-link.k-focus {
29686
29998
  @include fill(
29687
29999
  $panelbar-item-focused-text,
@@ -29697,7 +30009,7 @@ $panelbar-header-expanded-gradient: null !default;
29697
30009
  > .k-item > .k-link.k-state-focus.k-state-hover,
29698
30010
  > .k-item > .k-link.k-focus.k-hover,
29699
30011
  > .k-panelbar-item > .k-link:focus:hover,
29700
- > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
30012
+ > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
29701
30013
  > .k-panelbar-item > .k-link.k-focus.k-hover {
29702
30014
  @include fill(
29703
30015
  $panelbar-item-hovered-focused-text,
@@ -29710,7 +30022,7 @@ $panelbar-header-expanded-gradient: null !default;
29710
30022
  // Selected
29711
30023
  > .k-item > .k-link.k-state-selected,
29712
30024
  > .k-item > .k-link.k-selected,
29713
- > .k-panelbar-item > .k-link.k-state-selected ,
30025
+ > .k-panelbar-item > .k-link.k-state-selected,
29714
30026
  > .k-panelbar-item > .k-link.k-selected {
29715
30027
  @include fill(
29716
30028
  $panelbar-item-selected-text,
@@ -29727,7 +30039,7 @@ $panelbar-header-expanded-gradient: null !default;
29727
30039
  > .k-item > .k-link.k-selected.k-hover,
29728
30040
  > .k-panelbar-item > .k-link.k-state-selected:hover,
29729
30041
  > .k-panelbar-item > .k-link.k-selected:hover,
29730
- > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
30042
+ > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
29731
30043
  > .k-panelbar-item > .k-link.k-selected.k-hover {
29732
30044
  @include fill(
29733
30045
  $panelbar-item-selected-hovered-text,
@@ -29748,7 +30060,7 @@ $panelbar-header-expanded-gradient: null !default;
29748
30060
  > .k-panelbar-item > .k-link.k-selected:focus,
29749
30061
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
29750
30062
  > .k-panelbar-item > .k-link.k-selected.k-focus,
29751
- > .k-item > .k-link.k-state-selected.k-state-focused ,
30063
+ > .k-item > .k-link.k-state-selected.k-state-focused,
29752
30064
  > .k-item > .k-link.k-selected.k-focused {
29753
30065
  @include fill(
29754
30066
  $panelbar-item-selected-focused-text,
@@ -29769,7 +30081,7 @@ $panelbar-header-expanded-gradient: null !default;
29769
30081
  > .k-panelbar-item > .k-link.k-selected:focus:hover,
29770
30082
  > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
29771
30083
  > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
29772
- > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover ,
30084
+ > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
29773
30085
  > .k-item > .k-link.k-selected.k-focused.k-state-hover {
29774
30086
  @include fill(
29775
30087
  $panelbar-item-selected-hovered-focused-text,
@@ -30063,7 +30375,7 @@ $splitbar-selected-text: $primary-contrast !default;
30063
30375
  .k-splitbar:focus,
30064
30376
  .k-splitbar.k-state-focus,
30065
30377
  .k-splitbar.k-focus,
30066
- .k-splitbar.k-state-focused ,
30378
+ .k-splitbar.k-state-focused,
30067
30379
  .k-splitbar.k-focus {
30068
30380
  color: $splitbar-selected-text;
30069
30381
  background: $splitbar-selected-bg;
@@ -30176,7 +30488,7 @@ $tilelayout-hint-border: $component-border !default;
30176
30488
  .k-tilelayout-item:focus,
30177
30489
  .k-tilelayout-item.k-focus,
30178
30490
  .k-tilelayout-item.k-state-focus,
30179
- .k-tilelayout-item.k-state-focused ,
30491
+ .k-tilelayout-item.k-state-focused,
30180
30492
  .k-tilelayout-item.k-focus {
30181
30493
  @include box-shadow($tilelayout-card-focus-shadow);
30182
30494
  }
@@ -30852,12 +31164,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
30852
31164
 
30853
31165
  .k-column-menu {
30854
31166
 
30855
- .k-listgroup-item.k-state-selected ,
31167
+ .k-listgroup-item.k-state-selected,
30856
31168
  .k-listgroup-item.k-selected {
30857
31169
  color: $adaptive-grid-sort-text;
30858
31170
  background: none;
30859
31171
  }
30860
- .k-listgroup-item.k-state-selected .k-link ,
31172
+ .k-listgroup-item.k-state-selected .k-link,
30861
31173
  .k-listgroup-item.k-selected .k-link {
30862
31174
  color: inherit;
30863
31175
  }
@@ -31616,7 +31928,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
31616
31928
  &.k-i-sort-desc-sm,
31617
31929
  &.k-i-sort-asc-sm {
31618
31930
  vertical-align: text-top;
31619
- margin-left: $grid-sorted-icon-spacing;
31931
+ margin-inline-start: $grid-sorted-icon-spacing;
31620
31932
  }
31621
31933
  }
31622
31934
 
@@ -31626,7 +31938,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
31626
31938
  height: $icon-size;
31627
31939
  font-size: $grid-sorting-index-font-size;
31628
31940
  margin-top: $grid-sorting-index-spacing-y;
31629
- margin-left: $grid-sorting-index-spacing-x;
31941
+ margin-inline-start: $grid-sorting-index-spacing-x;
31630
31942
  }
31631
31943
  }
31632
31944
 
@@ -32027,15 +32339,15 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32027
32339
  }
32028
32340
 
32029
32341
  .k-header > .k-cell-inner {
32030
- 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);
32342
+ margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
32031
32343
  }
32032
32344
 
32033
32345
  .k-filterable {
32034
32346
  > .k-cell-inner {
32035
- margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
32347
+ margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
32036
32348
 
32037
32349
  .k-link {
32038
- padding-right: 0;
32350
+ padding-inline-end: 0;
32039
32351
  }
32040
32352
  }
32041
32353
  }
@@ -32074,6 +32386,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32074
32386
  .k-grid-filter,
32075
32387
  .k-header-column-menu {
32076
32388
  position: static;
32389
+ margin-inline-end: $grid-header-menu-icon-spacing;
32077
32390
  }
32078
32391
 
32079
32392
  .k-grid-filter,
@@ -32384,28 +32697,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32384
32697
  margin-left: $icon-spacing;
32385
32698
  margin-right: 0;
32386
32699
  }
32387
-
32388
- .k-header > .k-cell-inner {
32389
- margin-right: (-1 * $grid-cell-padding-x);
32390
- margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
32391
-
32392
- .k-sort-order {
32393
- margin-right: $grid-sorting-index-spacing-x;
32394
- margin-left: 0;
32395
- }
32396
- }
32397
-
32398
- .k-filterable {
32399
- > .k-cell-inner {
32400
- margin-right: (-1 * $grid-cell-padding-x);
32401
- margin-left: calc(-1 * #{$kendo-button-calc-size});
32402
-
32403
- .k-link {
32404
- padding-right: $grid-header-padding-x;
32405
- padding-left: 0;
32406
- }
32407
- }
32408
- }
32409
32700
  }
32410
32701
  }
32411
32702
 
@@ -32627,9 +32918,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32627
32918
  }
32628
32919
 
32629
32920
  // Hover state
32630
- tbody tr:not(.k-detail-row):hover,
32631
- tbody tr:not(.k-detail-row).k-state-hover ,
32632
- tbody tr:not(.k-detail-row).k-hover {
32921
+ tbody>tr:not(.k-detail-row):hover,
32922
+ tbody>tr:not(.k-detail-row).k-state-hover,
32923
+ tbody>tr:not(.k-detail-row).k-hover {
32633
32924
  color: $grid-hovered-text;
32634
32925
  background-color: $grid-hovered-bg;
32635
32926
  }
@@ -32637,7 +32928,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32637
32928
  // Selected state
32638
32929
  td.k-state-selected,
32639
32930
  td.k-selected,
32640
- tr.k-state-selected > td ,
32931
+ tr.k-state-selected > td,
32641
32932
  tr.k-selected > td {
32642
32933
  color: $grid-selected-text;
32643
32934
  background-color: $grid-selected-bg;
@@ -32653,7 +32944,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32653
32944
  .k-grouping-row > td:focus,
32654
32945
  .k-detail-row > td:focus,
32655
32946
  .k-group-footer > td:focus,
32656
- .k-grid-pager.k-state-focused ,
32947
+ .k-grid-pager.k-state-focused,
32657
32948
  .k-grid-pager.k-focus {
32658
32949
  box-shadow: $grid-focused-shadow;
32659
32950
  }
@@ -32696,12 +32987,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32696
32987
  }
32697
32988
 
32698
32989
  // Selected state
32699
- .k-state-selected td ,
32990
+ .k-state-selected td,
32700
32991
  .k-selected td {
32701
32992
  @include fill( $bg: $grid-sticky-selected-bg );
32702
32993
  }
32703
32994
 
32704
- .k-state-selected.k-alt td ,
32995
+ .k-state-selected.k-alt td,
32705
32996
  .k-selected.k-alt td {
32706
32997
  @include fill( $bg: $grid-sticky-selected-alt-bg );
32707
32998
  }
@@ -32709,7 +33000,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32709
33000
  // Selected hover
32710
33001
  .k-state-selected:hover td,
32711
33002
  .k-selected:hover td,
32712
- .k-state-selected.k-state-hover td ,
33003
+ .k-state-selected.k-state-hover td,
32713
33004
  .k-selected.k-hover td {
32714
33005
  @include fill( $bg: $grid-sticky-selected-hovered-bg );
32715
33006
  }
@@ -32755,7 +33046,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32755
33046
  &.k-state-border-down {
32756
33047
  box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
32757
33048
  }
32758
- &.k-state-active ,
33049
+ &.k-state-active,
32759
33050
  &.k-active {
32760
33051
  color: $selected-text;
32761
33052
  background-color: $selected-bg;
@@ -32815,7 +33106,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32815
33106
  &.k-selected .k-grid-content-sticky,
32816
33107
  &.k-state-selected .k-grid-row-sticky,
32817
33108
  &.k-selected .k-grid-row-sticky,
32818
- td.k-grid-content-sticky.k-state-selected ,
33109
+ td.k-grid-content-sticky.k-state-selected,
32819
33110
  td.k-grid-content-sticky.k-selected {
32820
33111
  @include fill( $bg: $grid-sticky-selected-bg );
32821
33112
  }
@@ -32824,7 +33115,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32824
33115
  &.k-selected.k-alt .k-grid-content-sticky,
32825
33116
  &.k-state-selected.k-alt .k-grid-row-sticky,
32826
33117
  &.k-selected.k-alt .k-grid-row-sticky,
32827
- &.k-alt td.k-grid-content-sticky.k-state-selected ,
33118
+ &.k-alt td.k-grid-content-sticky.k-state-selected,
32828
33119
  &.k-alt td.k-grid-content-sticky.k-selected {
32829
33120
  @include fill( $bg: $grid-sticky-selected-alt-bg );
32830
33121
  }
@@ -32835,7 +33126,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32835
33126
  &:hover .k-grid-row-sticky,
32836
33127
  &.k-state-hover .k-grid-content-sticky,
32837
33128
  &.k-hover .k-grid-content-sticky,
32838
- &.k-state-hover .k-grid-row-sticky ,
33129
+ &.k-state-hover .k-grid-row-sticky,
32839
33130
  &.k-hover .k-grid-row-sticky {
32840
33131
  background-color: $grid-sticky-hovered-bg;
32841
33132
  }
@@ -32852,7 +33143,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32852
33143
  &.k-selected.k-hover .k-grid-row-sticky,
32853
33144
  &:hover td.k-grid-content-sticky.k-state-selected,
32854
33145
  &:hover td.k-grid-content-sticky.k-selected,
32855
- &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
33146
+ &.k-state-hover td.k-grid-content-sticky.k-state-selected,
32856
33147
  &.k-hover td.k-grid-content-sticky.k-selected {
32857
33148
  background-color: $grid-sticky-selected-hovered-bg;
32858
33149
  }
@@ -32866,7 +33157,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32866
33157
  background-color: $grid-sticky-bg;
32867
33158
 
32868
33159
  &:hover,
32869
- &.k-state-hover ,
33160
+ &.k-state-hover,
32870
33161
  &.k-hover {
32871
33162
  background-color: $grid-sticky-hovered-bg;
32872
33163
  }
@@ -32880,7 +33171,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32880
33171
  }
32881
33172
 
32882
33173
  &:hover td,
32883
- &.k-state-hover td ,
33174
+ &.k-state-hover td,
32884
33175
  &.k-hover td {
32885
33176
  background-color: $grid-sticky-hovered-bg;
32886
33177
  }
@@ -32898,7 +33189,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32898
33189
  .k-selected.k-grid-row-sticky td,
32899
33190
  .k-grid-row-sticky td.k-state-selected,
32900
33191
  .k-grid-row-sticky td.k-selected,
32901
- .k-state-selected.k-grid-content-sticky ,
33192
+ .k-state-selected.k-grid-content-sticky,
32902
33193
  .k-selected.k-grid-content-sticky {
32903
33194
  @include fill( $bg: $grid-sticky-selected-bg );
32904
33195
  }
@@ -32907,7 +33198,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32907
33198
  tr.k-selected.k-alt .k-grid-content-sticky,
32908
33199
  .k-state-selected.k-alt.k-grid-row-sticky td,
32909
33200
  .k-selected.k-alt.k-grid-row-sticky td,
32910
- .k-alt .k-state-selected.k-grid-content-sticky ,
33201
+ .k-alt .k-state-selected.k-grid-content-sticky,
32911
33202
  .k-alt .k-selected.k-grid-content-sticky {
32912
33203
  @include fill( $bg: $grid-sticky-selected-alt-bg );
32913
33204
  }
@@ -32923,7 +33214,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32923
33214
  .k-grid-row-sticky.k-alt.k-state-hover td,
32924
33215
  .k-grid-row-sticky.k-alt.k-hover td,
32925
33216
  .k-alt:hover .k-grid-content-sticky,
32926
- .k-alt.k-state-hover .k-grid-content-sticky ,
33217
+ .k-alt.k-state-hover .k-grid-content-sticky,
32927
33218
  .k-alt.k-hover .k-grid-content-sticky {
32928
33219
  background-color: $grid-sticky-hovered-bg;
32929
33220
  }
@@ -32951,7 +33242,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32951
33242
  .k-grid-row-sticky.k-hover td.k-selected,
32952
33243
  tr:hover .k-grid-content-sticky.k-state-selected,
32953
33244
  tr:hover .k-grid-content-sticky.k-selected,
32954
- tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
33245
+ tr.k-state-hover .k-grid-content-sticky.k-state-selected,
32955
33246
  tr.k-hover .k-grid-content-sticky.k-selected {
32956
33247
  background-color: $grid-sticky-selected-hovered-bg;
32957
33248
  }
@@ -32963,7 +33254,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32963
33254
  }
32964
33255
 
32965
33256
  &:hover .k-grid-content-sticky,
32966
- &.k-state-hover .k-grid-content-sticky ,
33257
+ &.k-state-hover .k-grid-content-sticky,
32967
33258
  &.k-hover .k-grid-content-sticky {
32968
33259
  @include fill( $bg: $grid-sticky-hovered-bg );
32969
33260
  }
@@ -32977,13 +33268,13 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
32977
33268
  );
32978
33269
  }
32979
33270
  .k-columnmenu-item:focus,
32980
- .k-columnmenu-item.k-state-focus ,
33271
+ .k-columnmenu-item.k-state-focus,
32981
33272
  .k-columnmenu-item.k-focus {
32982
33273
  @include box-shadow( $kendo-list-item-focus-shadow );
32983
33274
  }
32984
33275
 
32985
33276
  .k-columnmenu-item {
32986
- &.k-state-selected ,
33277
+ &.k-state-selected,
32987
33278
  &.k-selected {
32988
33279
  @include fill(
32989
33280
  $kendo-list-item-selected-text,
@@ -33009,7 +33300,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33009
33300
  );
33010
33301
 
33011
33302
  &:hover,
33012
- &.k-state-hover ,
33303
+ &.k-state-hover,
33013
33304
  &.k-hover {
33014
33305
  @include fill(
33015
33306
  $kendo-list-item-hover-text,
@@ -33017,7 +33308,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33017
33308
  );
33018
33309
  }
33019
33310
 
33020
- &.k-state-selected ,
33311
+ &.k-state-selected,
33021
33312
  &.k-selected {
33022
33313
  @include fill(
33023
33314
  $kendo-list-item-selected-text,
@@ -33026,7 +33317,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33026
33317
  }
33027
33318
 
33028
33319
  &:focus,
33029
- &.k-state-focused ,
33320
+ &.k-state-focused,
33030
33321
  &.k-focus {
33031
33322
  @include box-shadow( $kendo-list-item-focus-shadow );
33032
33323
  }
@@ -33063,12 +33354,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33063
33354
  // Selected state
33064
33355
  td.k-state-selected,
33065
33356
  td.k-selected,
33066
- tr.k-state-selected ,
33357
+ tr.k-state-selected,
33067
33358
  tr.k-selected {
33068
33359
  color: $grid-selected-text;
33069
33360
  background-color: $grid-selected-bg;
33070
33361
  }
33071
- tr.k-state-selected > td ,
33362
+ tr.k-state-selected > td,
33072
33363
  tr.k-selected > td {
33073
33364
  color: inherit;
33074
33365
  background-color: transparent;
@@ -33076,9 +33367,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33076
33367
 
33077
33368
  // Hover, Focused state
33078
33369
  table {
33079
- tr:not(.k-detail-row):hover,
33080
- tr:not(.k-detail-row).k-state-hover,
33081
- tr:not(.k-detail-row).k-hover,
33370
+ >tr:not(.k-detail-row):hover,
33371
+ >tr:not(.k-detail-row).k-state-hover,
33372
+ >tr:not(.k-detail-row).k-hover,
33082
33373
  td.k-state-focused,
33083
33374
  td.k-focus,
33084
33375
  th.k-state-focused,
@@ -33093,7 +33384,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33093
33384
  }
33094
33385
 
33095
33386
  tr:hover,
33096
- tr.k-state-hover ,
33387
+ tr.k-state-hover,
33097
33388
  tr.k-hover {
33098
33389
  .k-grid-header-sticky,
33099
33390
  .k-grid-footer-sticky {
@@ -33121,7 +33412,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33121
33412
 
33122
33413
  }
33123
33414
  .k-grid-pager:focus,
33124
- .k-grid-pager.k-state-focused ,
33415
+ .k-grid-pager.k-state-focused,
33125
33416
  .k-grid-pager.k-focus {
33126
33417
  color: inherit;
33127
33418
  }
@@ -33175,7 +33466,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33175
33466
 
33176
33467
  .k-group-footer {
33177
33468
  &:hover td,
33178
- &.k-state-hover td ,
33469
+ &.k-state-hover td,
33179
33470
  &.k-hover td {
33180
33471
  color: inherit;
33181
33472
  @include fill( $bg: $grid-sticky-footer-hovered-bg );
@@ -33233,7 +33524,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33233
33524
  box-shadow: none;
33234
33525
  }
33235
33526
 
33236
- &.k-state-active ,
33527
+ &.k-state-active,
33237
33528
  &.k-active {
33238
33529
  color: $primary-contrast;
33239
33530
  background-color: $primary;
@@ -33274,7 +33565,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33274
33565
  }
33275
33566
 
33276
33567
  &:hover td,
33277
- &.k-state-hover td ,
33568
+ &.k-state-hover td,
33278
33569
  &.k-hover td {
33279
33570
  @include fill( $bg: $grid-sticky-footer-hovered-bg );
33280
33571
  }
@@ -33307,7 +33598,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33307
33598
  }
33308
33599
 
33309
33600
  .k-columnmenu-item {
33310
- &.k-state-selected ,
33601
+ &.k-state-selected,
33311
33602
  &.k-selected {
33312
33603
  @include fill(
33313
33604
  $kendo-list-item-selected-text,
@@ -33316,7 +33607,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33316
33607
  }
33317
33608
  }
33318
33609
  .k-columnmenu-item:focus,
33319
- .k-columnmenu-item.k-state-focus ,
33610
+ .k-columnmenu-item.k-state-focus,
33320
33611
  .k-columnmenu-item.k-focus {
33321
33612
  background: $kendo-list-item-hover-bg;
33322
33613
  }
@@ -33325,7 +33616,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
33325
33616
 
33326
33617
  .k-item {
33327
33618
  // Selected state
33328
- &.k-state-selected ,
33619
+ &.k-state-selected,
33329
33620
  &.k-selected {
33330
33621
  background: $kendo-list-item-hover-bg;
33331
33622
  }
@@ -33546,7 +33837,7 @@ $listview-item-focus-shadow: null !default;
33546
33837
  // Listview content
33547
33838
  .k-listview-content {
33548
33839
 
33549
- > .k-state-focused ,
33840
+ > .k-state-focused,
33550
33841
  > .k-focus {
33551
33842
  @include fill(
33552
33843
  $listview-item-focus-text,
@@ -33556,7 +33847,7 @@ $listview-item-focus-shadow: null !default;
33556
33847
  @include box-shadow( $listview-item-focus-shadow );
33557
33848
  }
33558
33849
 
33559
- > .k-state-selected ,
33850
+ > .k-state-selected,
33560
33851
  > .k-selected {
33561
33852
  @include fill(
33562
33853
  $listview-item-selected-text,
@@ -33579,7 +33870,7 @@ $listview-item-focus-shadow: null !default;
33579
33870
 
33580
33871
  // Listview content
33581
33872
  .k-listview-content {}
33582
- .k-listview-content > .k-state-selected.k-state-focused ,
33873
+ .k-listview-content > .k-state-selected.k-state-focused,
33583
33874
  .k-listview-content > .k-selected.k-focused {
33584
33875
  background-color: rgba( contrast-wcag( $listview-bg ), .12 );
33585
33876
  }
@@ -33952,7 +34243,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
33952
34243
  overflow: hidden;
33953
34244
 
33954
34245
  // disabled cells in the Spreadsheet should allow navigation if link is used
33955
- .k-state-disabled ,
34246
+ .k-state-disabled,
33956
34247
  .k-disabled {
33957
34248
  pointer-events: auto;
33958
34249
  }
@@ -34514,7 +34805,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34514
34805
  background-position: 50% 50%;
34515
34806
 
34516
34807
  &:hover div,
34517
- &.k-state-hovered div ,
34808
+ &.k-state-hovered div,
34518
34809
  &.k-hover div {
34519
34810
  margin: 0;
34520
34811
  align-self: center;
@@ -34580,7 +34871,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34580
34871
  .k-spreadsheet-insert-image-dialog {
34581
34872
  .k-spreadsheet-has-image {
34582
34873
  &:hover,
34583
- &.k-state-hovered ,
34874
+ &.k-state-hovered,
34584
34875
  &.k-hover {
34585
34876
  border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
34586
34877
  }
@@ -34701,7 +34992,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34701
34992
  .k-tabstrip-items .k-item {
34702
34993
  color: inherit;
34703
34994
  }
34704
- .k-tabstrip-items .k-item.k-state-active::after ,
34995
+ .k-tabstrip-items .k-item.k-state-active::after,
34705
34996
  .k-tabstrip-items .k-item.k-active::after {
34706
34997
  border-color: $primary-contrast;
34707
34998
  }
@@ -34724,7 +35015,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34724
35015
  $toolbar-gradient
34725
35016
  );
34726
35017
 
34727
- .k-tabstrip-items .k-item.k-state-active ,
35018
+ .k-tabstrip-items .k-item.k-state-active,
34728
35019
  .k-tabstrip-items .k-item.k-active {
34729
35020
  border-color: $secondary;
34730
35021
  }
@@ -34846,7 +35137,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34846
35137
  );
34847
35138
  box-shadow: inset 0 0 0 1px $kendo-button-border;
34848
35139
 
34849
- &.k-state-active ,
35140
+ &.k-state-active,
34850
35141
  &.k-active {
34851
35142
  @include fill(
34852
35143
  $kendo-button-active-text,
@@ -34892,13 +35183,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34892
35183
 
34893
35184
  .k-spreadsheet-has-image {
34894
35185
  &:hover,
34895
- &.k-state-hovered ,
35186
+ &.k-state-hovered,
34896
35187
  &.k-hover {
34897
35188
  box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
34898
35189
  }
34899
35190
 
34900
35191
  &:hover div,
34901
- &.k-state-hovered div ,
35192
+ &.k-state-hovered div,
34902
35193
  &.k-hover div {
34903
35194
  color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
34904
35195
  }
@@ -34933,7 +35224,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34933
35224
  .k-button {}
34934
35225
 
34935
35226
  .k-button:hover,
34936
- .k-button.k-state-hover ,
35227
+ .k-button.k-state-hover,
34937
35228
  .k-button.k-hover {
34938
35229
  @include fill(
34939
35230
  $kendo-list-item-hover-text,
@@ -34943,7 +35234,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34943
35234
  .k-button:active,
34944
35235
  .k-button.k-state-active,
34945
35236
  .k-button.k-active,
34946
- .k-button.k-state-selected ,
35237
+ .k-button.k-state-selected,
34947
35238
  .k-button.k-selected {
34948
35239
  @include fill(
34949
35240
  $kendo-list-item-selected-text,
@@ -35932,7 +36223,7 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
35932
36223
  // Selected state
35933
36224
  .k-pivotgrid-cell.k-state-selected,
35934
36225
  .k-pivotgrid-cell.k-selected,
35935
- .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
36226
+ .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
35936
36227
  .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
35937
36228
  @include fill (
35938
36229
  $pivotgrid-selected-text,
@@ -36179,7 +36470,7 @@ $treelist-footer-row-border-width: 1px !default;
36179
36470
  }
36180
36471
 
36181
36472
  .k-treelist-dragging,
36182
- .k-treelist-dragging .k-state-hover ,
36473
+ .k-treelist-dragging .k-state-hover,
36183
36474
  .k-treelist-dragging .k-hover {
36184
36475
  cursor: default;
36185
36476
  }
@@ -36955,7 +37246,7 @@ $filemanager-preview-icon-border: null !default;
36955
37246
  );
36956
37247
  }
36957
37248
 
36958
- &.k-state-selected .k-file-icon ,
37249
+ &.k-state-selected .k-file-icon,
36959
37250
  &.k-selected .k-file-icon {
36960
37251
  @include fill(
36961
37252
  inherit,
@@ -37420,7 +37711,7 @@ $taskboard-drag-placeholder-border: $component-border !default;
37420
37711
  );
37421
37712
  }
37422
37713
  .k-taskboard-column:focus,
37423
- .k-taskboard-column.k-state-focus ,
37714
+ .k-taskboard-column.k-state-focus,
37424
37715
  .k-taskboard-column.k-focus {
37425
37716
  @include fill(
37426
37717
  $taskboard-column-focus-text,
@@ -37623,7 +37914,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
37623
37914
  pointer-events: auto;
37624
37915
  }
37625
37916
 
37626
- .k-editor-content.k-state-focused ,
37917
+ .k-editor-content.k-state-focused,
37627
37918
  .k-editor-content.k-focus {
37628
37919
  outline-width: 1px;
37629
37920
  outline-style: dashed;
@@ -38077,7 +38368,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38077
38368
  display: block;
38078
38369
  margin: auto;
38079
38370
 
38080
- &.k-state-selected ,
38371
+ &.k-state-selected,
38081
38372
  &.k-selected {
38082
38373
  color: inherit;
38083
38374
  border-width: 0;
@@ -38388,7 +38679,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38388
38679
 
38389
38680
  // Hover & Actve state
38390
38681
  &:hover,
38391
- &.k-state-active ,
38682
+ &.k-state-active,
38392
38683
  &.k-active {
38393
38684
  border-color: $panel-border;
38394
38685
  }
@@ -38406,7 +38697,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38406
38697
 
38407
38698
  // Insert table
38408
38699
  .k-ct-popup {
38409
- .k-state-selected ,
38700
+ .k-state-selected,
38410
38701
  .k-selected {
38411
38702
  @include fill( $selected-text, $selected-bg, $selected-border, none );
38412
38703
  }
@@ -38962,7 +39253,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
38962
39253
  }
38963
39254
  }
38964
39255
 
38965
- tr.k-state-selected > td:last-child ,
39256
+ tr.k-state-selected > td:last-child,
38966
39257
  tr.k-selected > td:last-child {
38967
39258
  background: transparent;
38968
39259
  }
@@ -39232,7 +39523,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39232
39523
  border-color: currentColor;
39233
39524
  position: absolute;
39234
39525
  }
39235
- .k-gantt-line.k-state-selected ,
39526
+ .k-gantt-line.k-state-selected,
39236
39527
  .k-gantt-line.k-selected {
39237
39528
  z-index: 3;
39238
39529
  }
@@ -39306,7 +39597,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39306
39597
  transform: translate(-50%, -50%);
39307
39598
  }
39308
39599
  .k-task-dot:hover::before,
39309
- .k-task-dot.k-state-hover::before ,
39600
+ .k-task-dot.k-state-hover::before,
39310
39601
  .k-task-dot.k-hover::before {
39311
39602
  border-width: 1px;
39312
39603
  }
@@ -39794,7 +40085,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39794
40085
  $border: $gantt-milestone-border
39795
40086
  );
39796
40087
  }
39797
- .k-task-milestone.k-state-selected .k-task-milestone-content ,
40088
+ .k-task-milestone.k-state-selected .k-task-milestone-content,
39798
40089
  .k-task-milestone.k-selected .k-task-milestone-content {
39799
40090
  @include fill(
39800
40091
  $bg: $gantt-milestone-selected-bg,
@@ -39809,7 +40100,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39809
40100
  stroke: $gantt-line-fill;
39810
40101
  }
39811
40102
 
39812
- polyline.k-state-selected ,
40103
+ polyline.k-state-selected,
39813
40104
  polyline.k-selected {
39814
40105
  stroke: $gantt-line-selected-fill;
39815
40106
  }
@@ -39863,7 +40154,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39863
40154
  );
39864
40155
  }
39865
40156
  .k-task-dot:hover::before,
39866
- .k-task-dot.k-state-hover::before ,
40157
+ .k-task-dot.k-state-hover::before,
39867
40158
  .k-task-dot.k-hover::before {
39868
40159
  @include fill(
39869
40160
  $bg: $gantt-dot-hover-bg,
@@ -39889,7 +40180,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39889
40180
  );
39890
40181
  }
39891
40182
  }
39892
- .k-task-milestone.k-state-selected ,
40183
+ .k-task-milestone.k-state-selected,
39893
40184
  .k-task-milestone.k-selected {
39894
40185
  background-image: none;
39895
40186
  @include fill(
@@ -39920,7 +40211,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39920
40211
  .k-task-advanced .k-task-summary-complete {
39921
40212
  color: $gantt-advanced-bg;
39922
40213
  }
39923
- .k-task-summary.k-state-selected ,
40214
+ .k-task-summary.k-state-selected,
39924
40215
  .k-task-summary.k-selected {
39925
40216
  color: $gantt-summary-selected-bg;
39926
40217
 
@@ -39964,7 +40255,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39964
40255
  $bg: $gantt-advanced-bg
39965
40256
  );
39966
40257
  }
39967
- .k-task-single.k-state-selected ,
40258
+ .k-task-single.k-state-selected,
39968
40259
  .k-task-single.k-selected {
39969
40260
  @include fill(
39970
40261
  $gantt-task-selected-text,
@@ -39981,7 +40272,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
39981
40272
  .k-gantt-line {
39982
40273
  color: $gantt-line-fill;
39983
40274
  }
39984
- .k-gantt-line.k-state-selected ,
40275
+ .k-gantt-line.k-state-selected,
39985
40276
  .k-gantt-line.k-selected {
39986
40277
  color: $gantt-line-selected-fill;
39987
40278
  }
@@ -40662,7 +40953,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40662
40953
  }
40663
40954
 
40664
40955
  &:hover,
40665
- &.k-state-hover ,
40956
+ &.k-state-hover,
40666
40957
  &.k-hover {
40667
40958
  .k-event-delete {
40668
40959
  opacity: 1;
@@ -40728,7 +41019,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40728
41019
 
40729
41020
  // Hover
40730
41021
  &:hover,
40731
- &.k-state-hover ,
41022
+ &.k-state-hover,
40732
41023
  &.k-hover {
40733
41024
  .k-event-actions .k-event-delete,
40734
41025
  .k-resize-handle {
@@ -40990,7 +41281,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
40990
41281
  .k-hover .k-task > .k-event-delete,
40991
41282
  .k-scheduler-content tr:hover .k-event-delete,
40992
41283
  .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
40993
- .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
41284
+ .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
40994
41285
  .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
40995
41286
  visibility: visible;
40996
41287
  }
@@ -41064,7 +41355,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41064
41355
  position: relative;
41065
41356
  }
41066
41357
 
41067
- td.k-state-selected ,
41358
+ td.k-state-selected,
41068
41359
  td.k-selected {
41069
41360
  background-color: inherit;
41070
41361
  }
@@ -41362,7 +41653,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41362
41653
  kendo-scheduler .k-event,
41363
41654
  .k-event {
41364
41655
 
41365
- &.k-state-selected ,
41656
+ &.k-state-selected,
41366
41657
  &.k-selected {
41367
41658
  &::before {
41368
41659
  display: block;
@@ -41580,7 +41871,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41580
41871
 
41581
41872
  .k-scheduler-layout td.k-state-selected,
41582
41873
  .k-scheduler-layout td.k-selected,
41583
- .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
41874
+ .k-scheduler-layout .k-scheduler-cell.k-state-selected,
41584
41875
  .k-scheduler-layout .k-scheduler-cell.k-selected {
41585
41876
  background-color: rgba($selected-bg, .25);
41586
41877
  }
@@ -41603,7 +41894,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41603
41894
  );
41604
41895
  @include box-shadow( $scheduler-event-shadow );
41605
41896
 
41606
- &.k-state-hover ,
41897
+ &.k-state-hover,
41607
41898
  &.k-hover {
41608
41899
  @include fill(
41609
41900
  $scheduler-event-hover-text,
@@ -41614,7 +41905,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41614
41905
  @include box-shadow( $scheduler-event-hover-shadow );
41615
41906
  }
41616
41907
 
41617
- &.k-state-selected ,
41908
+ &.k-state-selected,
41618
41909
  &.k-selected {
41619
41910
  @include fill(
41620
41911
  $scheduler-event-selected-text,
@@ -41684,7 +41975,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41684
41975
  .k-scheduler-content tr.k-state-hover,
41685
41976
  .k-scheduler-content tr.k-hover,
41686
41977
  .k-scheduler-content .k-scheduler-row:hover,
41687
- .k-scheduler-content .k-scheduler-row.k-state-hover ,
41978
+ .k-scheduler-content .k-scheduler-row.k-state-hover,
41688
41979
  .k-scheduler-content .k-scheduler-row.k-hover {
41689
41980
  @include fill(
41690
41981
  $hovered-text,
@@ -41698,7 +41989,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41698
41989
  .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
41699
41990
  .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
41700
41991
  .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
41701
- .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
41992
+ .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
41702
41993
  .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
41703
41994
  @include fill(
41704
41995
  $scheduler-text,
@@ -41708,13 +41999,13 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41708
41999
  }
41709
42000
 
41710
42001
  // Selected
41711
- .k-scheduler-content tr.k-state-selected ,
42002
+ .k-scheduler-content tr.k-state-selected,
41712
42003
  .k-scheduler-content tr.k-selected {
41713
42004
  background-color: rgba($selected-bg, .25);
41714
42005
  }
41715
42006
  .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
41716
42007
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
41717
- .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
42008
+ .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
41718
42009
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
41719
42010
  background-color: $scheduler-bg;
41720
42011
  }
@@ -41732,7 +42023,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
41732
42023
  @include fill( $bg: $scheduler-yearview-indicator-bg );
41733
42024
  }
41734
42025
 
41735
- .k-state-selected .k-day-indicator ,
42026
+ .k-state-selected .k-day-indicator,
41736
42027
  .k-selected .k-day-indicator {
41737
42028
  @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
41738
42029
  }
@@ -42070,7 +42361,7 @@ $chat-quick-reply-hover-border: $primary !default;
42070
42361
 
42071
42362
 
42072
42363
  // Message states
42073
- .k-message.k-state-selected ,
42364
+ .k-message.k-state-selected,
42074
42365
  .k-message.k-selected {
42075
42366
  margin-bottom: $chat-item-spacing-y;
42076
42367
  border: 0;
@@ -42280,7 +42571,7 @@ $chat-quick-reply-hover-border: $primary !default;
42280
42571
  flex: 0 0 auto;
42281
42572
  }
42282
42573
 
42283
- &.k-state-selected ,
42574
+ &.k-state-selected,
42284
42575
  &.k-selected {
42285
42576
  background: none;
42286
42577
  }
@@ -42517,7 +42808,7 @@ $chat-quick-reply-hover-border: $primary !default;
42517
42808
  .k-bubble:hover {
42518
42809
  @include box-shadow( $chat-bubble-hover-shadow );
42519
42810
  }
42520
- .k-state-selected .k-bubble ,
42811
+ .k-state-selected .k-bubble,
42521
42812
  .k-selected .k-bubble {
42522
42813
  @include box-shadow( $chat-bubble-selected-shadow );
42523
42814
  }
@@ -42533,7 +42824,7 @@ $chat-quick-reply-hover-border: $primary !default;
42533
42824
  .k-alt .k-bubble:hover {
42534
42825
  @include box-shadow( $chat-alt-bubble-hover-shadow );
42535
42826
  }
42536
- .k-alt .k-state-selected .k-bubble ,
42827
+ .k-alt .k-state-selected .k-bubble,
42537
42828
  .k-alt .k-selected .k-bubble {
42538
42829
  @include box-shadow( $chat-alt-bubble-selected-shadow );
42539
42830
  }
@@ -43296,12 +43587,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43296
43587
  }
43297
43588
 
43298
43589
  .k-timeline-track-item:hover .k-timeline-circle::before,
43299
- .k-timeline-track-item.k-state-hover .k-timeline-circle::before ,
43590
+ .k-timeline-track-item.k-state-hover .k-timeline-circle::before,
43300
43591
  .k-timeline-track-item.k-hover .k-timeline-circle::before {
43301
43592
  opacity: $kendo-flat-button-hover-opacity;
43302
43593
  }
43303
43594
 
43304
- .k-timeline-track-item.k-state-focus .k-timeline-circle::before ,
43595
+ .k-timeline-track-item.k-state-focus .k-timeline-circle::before,
43305
43596
  .k-timeline-track-item.k-focus .k-timeline-circle::before {
43306
43597
  opacity: $kendo-flat-button-focus-opacity;
43307
43598
  }
@@ -43353,7 +43644,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43353
43644
  color: $body-text;
43354
43645
  }
43355
43646
 
43356
- .k-timeline-arrow.k-state-disabled ,
43647
+ .k-timeline-arrow.k-state-disabled,
43357
43648
  .k-timeline-arrow.k-disabled {
43358
43649
  opacity: 1; // The arrow button in disabled mode should have a solid background
43359
43650
  color: $timeline-track-arrow-disabled-text;
@@ -43374,7 +43665,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
43374
43665
  background-color: $timeline-flag-bg;
43375
43666
  }
43376
43667
 
43377
- .k-timeline-track-item.k-state-focus .k-timeline-circle ,
43668
+ .k-timeline-track-item.k-state-focus .k-timeline-circle,
43378
43669
  .k-timeline-track-item.k-focus .k-timeline-circle {
43379
43670
  @include box-shadow( $timeline-track-item-focus-shadow );
43380
43671
  }
@@ -44086,7 +44377,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
44086
44377
  -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
44087
44378
 
44088
44379
  &:focus,
44089
- &.k-state-focus ,
44380
+ &.k-state-focus,
44090
44381
  &.k-focus {
44091
44382
  color: $scrollview-navigation-color;
44092
44383
  opacity: $scrollview-navigation-hover-opacity;
@@ -44097,7 +44388,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
44097
44388
  }
44098
44389
 
44099
44390
  &:hover,
44100
- &.k-state-hover ,
44391
+ &.k-state-hover,
44101
44392
  &.k-hover {
44102
44393
  color: $scrollview-navigation-color;
44103
44394
  opacity: $scrollview-navigation-hover-opacity;
@@ -44117,14 +44408,14 @@ $scrollview-transition-timing-function: ease-in-out !default;
44117
44408
  }
44118
44409
 
44119
44410
  &:focus,
44120
- &.k-state-focused ,
44411
+ &.k-state-focused,
44121
44412
  &.k-focus {
44122
44413
  box-shadow: $scrollview-pagebutton-shadow;
44123
44414
  }
44124
44415
  }
44125
44416
 
44126
44417
  .k-scrollview-nav > .k-link:hover,
44127
- .k-scrollview-nav > .k-link.k-state-hover ,
44418
+ .k-scrollview-nav > .k-link.k-state-hover,
44128
44419
  .k-scrollview-nav > .k-link.k-hover {
44129
44420
  box-shadow: $scrollview-pagebutton-shadow;
44130
44421
  }
@@ -44916,8 +45207,6 @@ $treemap-line-height: $line-height !default;
44916
45207
  }
44917
45208
 
44918
45209
 
44919
-
44920
-
44921
45210
  @include exports("dataviz/treemap/theme") {
44922
45211
 
44923
45212
  // Treemap
@@ -44945,7 +45234,7 @@ $treemap-line-height: $line-height !default;
44945
45234
  .k-leaf.k-inverse {
44946
45235
  color: $component-text;
44947
45236
  }
44948
- .k-leaf.k-state-hover ,
45237
+ .k-leaf.k-state-hover,
44949
45238
  .k-leaf.k-hover {
44950
45239
  box-shadow: inset 0 0 0 3px $component-border;
44951
45240
  }
@@ -45444,7 +45733,7 @@ $orgchart-line-v-height: 25px !default;
45444
45733
  .k-orgchart-node-group-container:focus,
45445
45734
  .k-orgchart-node-group-container.k-focus,
45446
45735
  .k-orgchart-node-group-container.k-state-focus,
45447
- .k-orgchart-node-group-container.k-state-focused ,
45736
+ .k-orgchart-node-group-container.k-state-focused,
45448
45737
  .k-orgchart-node-group-container.k-focus {
45449
45738
  @include box-shadow( $orgchart-node-group-focus-shadow );
45450
45739
  @include fill ( $border: $orgchart-node-group-focus-border );
@@ -45466,6 +45755,157 @@ $orgchart-line-v-height: 25px !default;
45466
45755
 
45467
45756
  // #endregion
45468
45757
 
45758
+ // #endregion
45759
+ // #region @import "signature/_index.scss"; -> packages/material/scss/signature/_index.scss
45760
+ // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
45761
+ // File already imported_once. Skipping output.
45762
+ // #endregion
45763
+
45764
+ // Dependencies
45765
+ // #region @import "../button/_index.scss"; -> packages/material/scss/button/_index.scss
45766
+ // File already imported_once. Skipping output.
45767
+ // #endregion
45768
+ // #region @import "../input/_index.scss"; -> packages/material/scss/input/_index.scss
45769
+ // File already imported_once. Skipping output.
45770
+ // #endregion
45771
+
45772
+ // Component
45773
+ // #region @import "_variables.scss"; -> packages/material/scss/signature/_variables.scss
45774
+ $kendo-signature-width: 246px !default;
45775
+ $kendo-signature-height: 108px !default;
45776
+
45777
+ $kendo-signature-maximized-width: 750px !default;
45778
+ $kendo-signature-maximized-height: 252px !default;
45779
+
45780
+ $kendo-signature-padding: map-get( $spacing, 2 ) !default;
45781
+ $kendo-signature-padding-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
45782
+ $kendo-signature-padding-md: $kendo-signature-padding !default;
45783
+ $kendo-signature-padding-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
45784
+
45785
+ $kendo-signature-line-width: 1px !default;
45786
+ $kendo-signature-line-style: dashed !default;
45787
+ $kendo-signature-line-color: rgba( $info, .24 ) !default;
45788
+
45789
+ $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
45790
+ $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
45791
+ $kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
45792
+ $kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
45793
+
45794
+ $kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
45795
+ $kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
45796
+ $kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
45797
+ $kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
45798
+
45799
+ $kendo-signature-sizes: (
45800
+ sm: (
45801
+ padding: $kendo-signature-padding-sm,
45802
+ line-size: $kendo-signature-line-size-sm,
45803
+ line-offset: $kendo-signature-line-bottom-offset-sm
45804
+ ),
45805
+ md: (
45806
+ padding: $kendo-signature-padding-md,
45807
+ line-size: $kendo-signature-line-size-md,
45808
+ line-offset: $kendo-signature-line-bottom-offset-md
45809
+ ),
45810
+ lg: (
45811
+ padding: $kendo-signature-padding-lg,
45812
+ line-size: $kendo-signature-line-size-lg,
45813
+ line-offset: $kendo-signature-line-bottom-offset-lg
45814
+ )
45815
+ ) !default;
45816
+
45817
+ $kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
45818
+ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
45819
+
45820
+ // #endregion
45821
+ // #region @import "_layout.scss"; -> packages/material/scss/signature/_layout.scss
45822
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/signature/_layout.scss
45823
+ @include exports("signature/layout") {
45824
+
45825
+ .k-signature {
45826
+ width: $kendo-signature-width;
45827
+ height: $kendo-signature-height;
45828
+ position: relative;
45829
+ box-sizing: border-box;
45830
+ display: flex;
45831
+ flex-direction: column;
45832
+ justify-content: space-between;
45833
+
45834
+ &.k-signature-maximized {
45835
+ width: $kendo-signature-maximized-width;
45836
+ height: $kendo-signature-maximized-height;
45837
+
45838
+ > .k-signature-line {
45839
+ border-bottom-width: $kendo-signature-maximized-line-width;
45840
+ }
45841
+ }
45842
+ }
45843
+
45844
+ .k-signature-actions {
45845
+ display: flex;
45846
+ width: min-content;
45847
+ margin-inline-start: auto;
45848
+ gap: $kendo-signature-actions-gap;
45849
+ z-index: 2;
45850
+ }
45851
+
45852
+ .k-signature-canvas {
45853
+ position: absolute;
45854
+ top: 0;
45855
+ left: 0;
45856
+ width: 100%;
45857
+ height: 100%;
45858
+ display: block;
45859
+ z-index: 1;
45860
+ }
45861
+
45862
+ .k-signature-line {
45863
+ position: absolute;
45864
+ z-index: 0;
45865
+ border-bottom-width: $kendo-signature-line-width;
45866
+ border-bottom-style: $kendo-signature-line-style;
45867
+ }
45868
+
45869
+ // Sizes
45870
+ @each $size, $size-props in $kendo-signature-sizes {
45871
+ $_padding: map-get($size-props, padding);
45872
+ $_line-size: map-get($size-props, line-size);
45873
+ $_line-offset: map-get($size-props, line-offset);
45874
+
45875
+ .k-signature-#{$size} {
45876
+ padding: $_padding;
45877
+
45878
+ .k-signature-line {
45879
+ width: $_line-size;
45880
+ bottom: $_line-offset;
45881
+ }
45882
+ }
45883
+
45884
+ }
45885
+ }
45886
+
45887
+ // #endregion
45888
+
45889
+ // #endregion
45890
+ // #region @import "_theme.scss"; -> packages/material/scss/signature/_theme.scss
45891
+ // #region @import "~@progress/kendo-theme-default/scss/signature/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/signature/_theme.scss
45892
+ @include exports("signature/theme") {
45893
+
45894
+ // Solid signature
45895
+ .k-signature {
45896
+
45897
+ .k-signature-line {
45898
+ border-bottom-color: $kendo-signature-line-color;
45899
+ }
45900
+ }
45901
+
45902
+
45903
+ }
45904
+
45905
+ // #endregion
45906
+
45907
+ // #endregion
45908
+
45469
45909
  // #endregion
45470
45910
 
45471
45911
  // #endregion