@progress/kendo-theme-fluent 7.0.0-dev.0 → 7.0.1-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@
3
3
  "name": "All",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "7.0.0-dev.0",
6
+ "version": "7.0.1-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "7.0.0-dev.0",
6
+ "version": "7.0.1-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-fluent",
3
3
  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
4
- "version": "7.0.0-dev.0",
4
+ "version": "7.0.1-dev.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -51,9 +51,9 @@
51
51
  "postpublish": "echo 'no postpublish for the Fluent theme'"
52
52
  },
53
53
  "dependencies": {
54
- "@progress/kendo-font-icons": "1.9.0",
55
- "@progress/kendo-theme-core": "7.0.0-dev.0",
56
- "@progress/kendo-theme-utils": "7.0.0-dev.0"
54
+ "@progress/kendo-svg-icons": "2.0.0",
55
+ "@progress/kendo-theme-core": "7.0.1-dev.0",
56
+ "@progress/kendo-theme-utils": "7.0.1-dev.0"
57
57
  },
58
- "gitHead": "228be168555ed9f71c328cefd10924e3fd037023"
58
+ "gitHead": "4de7cb42982bac6acc43a0189fa3c267de7007ed"
59
59
  }
@@ -54,7 +54,7 @@
54
54
  max-height: 1em;
55
55
  font-size: inherit;
56
56
  }
57
- .k-badge-icon.k-svg-icon svg {
57
+ .k-badge-icon svg {
58
58
  fill: currentColor;
59
59
  }
60
60
 
@@ -94,8 +94,7 @@
94
94
  }
95
95
 
96
96
  .k-breadcrumb-link > .k-image,
97
- .k-breadcrumb-icontext-link .k-icon,
98
- .k-breadcrumb-icontext-link .k-svg-icon {
97
+ .k-breadcrumb-icontext-link .k-icon {
99
98
  margin-inline-end: var( --kendo-breadcrumb-link-icon-spacing, #{$kendo-breadcrumb-link-icon-spacing} );
100
99
  }
101
100
 
@@ -170,14 +170,12 @@
170
170
  align-items: center;
171
171
  gap: calc( var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} ) / 2 );
172
172
 
173
- .k-icon,
174
- .k-svg-icon {
173
+ .k-icon {
175
174
  vertical-align: middle;
176
175
  }
177
176
 
178
177
  // Needed for the double check icons
179
178
  .k-icon + .k-icon,
180
- .k-svg-icon + .k-svg-icon,
181
179
  .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
182
180
  margin-inline-start: -13px;
183
181
  }
@@ -183,7 +183,6 @@
183
183
  gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
184
184
  }
185
185
 
186
- .k-svg-icon,
187
186
  .k-icon {
188
187
  flex-shrink: 0;
189
188
  padding-inline: var( --kendo-drawer-icon-padding-x, #{$kendo-drawer-icon-padding-x} );
@@ -31,7 +31,6 @@
31
31
  var( --kendo-drawer-item-bg, #{$kendo-drawer-item-bg} )
32
32
  );
33
33
 
34
- .k-svg-icon,
35
34
  .k-icon {
36
35
  color: var( --kendo-drawer-item-icon-text, #{$kendo-drawer-item-icon-text} );
37
36
  }
@@ -43,7 +42,6 @@
43
42
  var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
44
43
  );
45
44
 
46
- .k-svg-icon,
47
45
  .k-icon {
48
46
  color: var( --kendo-drawer-item-hover-icon-text, #{$kendo-drawer-item-hover-icon-text} );
49
47
  }
@@ -57,7 +55,6 @@
57
55
  );
58
56
  box-shadow: var( --kendo-drawer-item-focus-shadow, #{$kendo-drawer-item-focus-shadow} );
59
57
 
60
- .k-svg-icon,
61
58
  .k-icon {
62
59
  color: var( --kendo-drawer-item-focus-icon-text, #{$kendo-drawer-item-focus-icon-text} );
63
60
  }
@@ -77,7 +74,6 @@
77
74
  var( --kendo-drawer-item-selected-bg, #{$kendo-drawer-item-selected-bg} )
78
75
  );
79
76
 
80
- .k-svg-icon,
81
77
  .k-icon {
82
78
  color: var( --kendo-drawer-item-selected-icon-text, #{$kendo-drawer-item-selected-icon-text} );
83
79
  }
@@ -12,7 +12,6 @@
12
12
  );
13
13
 
14
14
  .k-icon,
15
- .k-svg-icon,
16
15
  .k-dropzone-icon {
17
16
  color: var( --kendo-dropzone-icon-text, #{$kendo-dropzone-icon-text} );
18
17
  }
@@ -28,7 +27,6 @@
28
27
  // Hover
29
28
  .k-external-dropzone-hover {
30
29
  .k-icon,
31
- .k-svg-icon,
32
30
  .k-dropzone-icon {
33
31
  color: var( --kendo-dropzone-icon-hover-text, #{$kendo-dropzone-icon-hover-text} );
34
32
  }
@@ -150,13 +150,11 @@
150
150
  flex-shrink: 0;
151
151
 
152
152
  .k-editor-export {
153
- .k-icon,
154
- .k-svg-icon {
153
+ .k-icon {
155
154
  margin-inline-end: var( --kendo-editor-export-tool-icon-margin-x, #{$kendo-editor-export-tool-icon-margin-x} );
156
155
  }
157
156
 
158
157
  .k-icon,
159
- .k-svg-icon,
160
158
  .k-export-tool-text {
161
159
  vertical-align: middle;
162
160
  }
@@ -364,8 +362,7 @@
364
362
  flex: 1;
365
363
  width: 100px; // fix width for Edge
366
364
  }
367
- .k-icon,
368
- .k-svg-icon {
365
+ .k-icon {
369
366
  margin: 0;
370
367
  position: static;
371
368
  }
@@ -463,8 +460,7 @@
463
460
  inset-inline-start: $kendo-input-md-padding-x;
464
461
  inset-block-start: $kendo-input-md-padding-y;
465
462
 
466
- .k-icon,
467
- .k-svg-icon {
463
+ .k-icon {
468
464
  position: static;
469
465
  margin-block-start: 0;
470
466
  }
@@ -232,8 +232,7 @@
232
232
  align-items: center;
233
233
  }
234
234
 
235
- .k-filemanager-drag-hint .k-icon,
236
- .k-filemanager-drag-hint .k-svg-icon {
235
+ .k-filemanager-drag-hint .k-icon {
237
236
  margin-inline-end: var( --kendo-icon-spacing, .5rem );
238
237
 
239
238
  }
@@ -157,8 +157,7 @@
157
157
  text-overflow: clip;
158
158
  }
159
159
 
160
- .k-grouping-row .k-icon,
161
- .k-grouping-row .k-svg-icon {
160
+ .k-grouping-row .k-icon {
162
161
  margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --INTERNAL--kendo-grid-cell-padding-x, 0 ) );
163
162
  margin-inline-end: calc( var( --kendo-icon-size, 1rem ) / 2 );
164
163
  text-decoration: none;
@@ -182,15 +181,14 @@
182
181
  padding: 0;
183
182
  overflow: visible;
184
183
 
185
- > .k-icon,
186
- > .k-svg-icon {
184
+ > .k-icon {
187
185
  padding-inline: 0;
188
186
  padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
189
187
  display: inline-block;
190
188
  outline: 0;
191
189
  }
192
190
 
193
- > .k-icon {
191
+ > .k-font-icon {
194
192
  width: 100%;
195
193
  height: 100%;
196
194
  }
@@ -240,8 +238,7 @@
240
238
  .k-grid-filter,
241
239
  .k-header-column-menu,
242
240
  .k-grid-header-menu,
243
- .k-hierarchy-cell .k-icon,
244
- .k-hierarchy-cell .k-svg-icon {
241
+ .k-hierarchy-cell .k-icon {
245
242
  border-width: 0;
246
243
  }
247
244
 
@@ -416,8 +413,7 @@
416
413
  text-overflow: ellipsis;
417
414
  outline: 0;
418
415
 
419
- > .k-icon,
420
- > .k-svg-icon {
416
+ > .k-icon {
421
417
  margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
422
418
  }
423
419
  }
@@ -452,7 +448,6 @@
452
448
  }
453
449
 
454
450
  .k-cell-inner > .k-link > .k-icon,
455
- .k-cell-inner > .k-link > .k-svg-icon,
456
451
  .k-cell-inner > .k-link > .k-sort-icon {
457
452
  vertical-align: text-top;
458
453
  margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
@@ -960,8 +955,7 @@
960
955
  flex: 1;
961
956
  overflow: hidden;
962
957
 
963
- > .k-icon,
964
- > .k-svg-icon {
958
+ > .k-icon {
965
959
  margin-left: 0;
966
960
  display: inline-block;
967
961
  flex-shrink: 0;
@@ -984,8 +978,7 @@
984
978
  .k-grid-filter,
985
979
  .k-header-column-menu,
986
980
  .k-grid-header-menu,
987
- .k-hierarchy-cell .k-icon,
988
- .k-hierarchy-cell .k-svg-icon {
981
+ .k-hierarchy-cell .k-icon {
989
982
  text-align: center;
990
983
  display: inline-block;
991
984
  flex-shrink: 0;
@@ -1306,7 +1299,6 @@
1306
1299
  cursor: pointer;
1307
1300
 
1308
1301
  > .k-icon,
1309
- > .k-svg-icon,
1310
1302
  > .k-expander-indicator {
1311
1303
  margin-inline-end: var( --kendo-grid-column-menu-item-icon-spacing, #{$kendo-grid-column-menu-item-icon-spacing} );
1312
1304
  }
@@ -138,8 +138,7 @@
138
138
  .k-grid-filter,
139
139
  .k-header-column-menu,
140
140
  .k-grid-header-menu,
141
- .k-hierarchy-cell .k-icon,
142
- .k-hierarchy-cell .k-svg-icon {
141
+ .k-hierarchy-cell .k-icon {
143
142
  @include fill( $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} ) );
144
143
  }
145
144
 
@@ -148,8 +147,7 @@
148
147
  $bg: var( --kendo-grid-grouping-row-bg, #{$kendo-grid-grouping-row-bg} )
149
148
  );
150
149
 
151
- .k-icon,
152
- .k-svg-icon {
150
+ .k-icon {
153
151
  @include fill(
154
152
  $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} )
155
153
  );
@@ -230,8 +228,7 @@
230
228
  .k-grid-filter,
231
229
  .k-header-column-menu,
232
230
  .k-grid-header-menu,
233
- .k-hierarchy-cell .k-icon,
234
- .k-hierarchy-cell .k-svg-icon {
231
+ .k-hierarchy-cell .k-icon {
235
232
  &:hover {
236
233
  @include fill(
237
234
  $color: var( --kendo-hover-text, inherit ),
@@ -466,19 +463,12 @@
466
463
  var( --kendo-grid-column-menu-item-bg, #{$kendo-grid-column-menu-item-bg} )
467
464
  );
468
465
 
469
- .k-icon,
470
- .k-svg-icon {
466
+ .k-icon {
471
467
  @include fill(
472
468
  var( --kendo-grid-column-menu-item-icon-text, #{$kendo-grid-column-menu-item-icon-text} )
473
469
  );
474
470
  }
475
471
 
476
- .k-expander-indicator > .k-icon {
477
- @include fill(
478
- var( --kendo-grid-column-menu-item-text, #{$kendo-grid-column-menu-item-text} )
479
- );
480
- }
481
-
482
472
  &:hover,
483
473
  &.k-hover {
484
474
  @include fill(
@@ -500,8 +490,7 @@
500
490
  }
501
491
 
502
492
  &.k-disabled .k-link,
503
- &.k-disabled .k-icon,
504
- &.k-disabled .k-svg-icon {
493
+ &.k-disabled .k-icon {
505
494
  @include disabled-color(
506
495
  var( --kendo-disabled-text, inherit )
507
496
  );
@@ -1,13 +1,12 @@
1
1
  @use "./_variables.scss" as *;
2
2
 
3
- @use "@progress/kendo-font-icons/scss/index.scss" with (
4
- $ki-embed-font: true,
3
+ @use "@progress/kendo-svg-icons/scss/index.scss" with (
5
4
  $ki-icon-size: var( --kendo-icon-size, 1rem )
6
5
  );
7
6
 
8
7
  @mixin kendo-icon--layout() {
9
8
 
10
- @include index.kendo-icon-styles();
9
+ @include index.kendo-svg-icon-styles();
11
10
 
12
11
  // kendo-icon-wrapper component
13
12
  .k-icon-wrapper-host {
@@ -26,7 +25,7 @@
26
25
  right: 0;
27
26
  margin: 0 -.5em -.5em 0;
28
27
  }
29
- .k-svg-icon.k-icon-modifier {
28
+ .k-icon.k-icon-modifier {
30
29
  width: 1em;
31
30
  height: 1em;
32
31
  }
@@ -223,9 +223,7 @@
223
223
  .k-input-validation-icon,
224
224
  .k-input-loading-icon,
225
225
  .k-input-prefix > .k-icon,
226
- .k-input-prefix > .k-svg-icon,
227
- .k-input-suffix > .k-icon,
228
- .k-input-suffix > .k-svg-icon {
226
+ .k-input-suffix > .k-icon {
229
227
  padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
230
228
  padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
231
229
  flex: none;
@@ -237,6 +235,12 @@
237
235
  box-sizing: content-box;
238
236
  }
239
237
 
238
+ .k-input-loading-icon {
239
+ width: 1em;
240
+ height: 1em;
241
+ font-size: var( --kendo-icon-size-md, 1rem );
242
+ }
243
+
240
244
  // Input with SVG icon
241
245
  .k-input-icon,
242
246
  .k-input-validation-icon,
@@ -359,13 +363,11 @@
359
363
  min-height: auto !important; // stylelint-disable-line declaration-no-important
360
364
  }
361
365
  }
362
- .k-spinner-increase .k-icon,
363
- .k-spinner-increase .k-svg-icon {
366
+ .k-spinner-increase .k-icon {
364
367
  bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
365
368
  }
366
369
 
367
- .k-spinner-decrease .k-icon,
368
- .k-spinner-decrease .k-svg-icon {
370
+ .k-spinner-decrease .k-icon {
369
371
  top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
370
372
  }
371
373
  }
@@ -69,8 +69,7 @@
69
69
  }
70
70
 
71
71
  // Icon
72
- .k-list-item .k-icon,
73
- .k-list-item .k-svg-icon {
72
+ .k-list-item .k-icon {
74
73
  @include fill(
75
74
  $color: var( --kendo-list-item-icon-text, #{$kendo-list-item-icon-text} )
76
75
  );
@@ -88,8 +88,7 @@
88
88
  box-shadow: none;
89
89
  position: absolute;
90
90
 
91
- .k-icon,
92
- .k-svg-icon {
91
+ .k-icon {
93
92
  min-width: 0;
94
93
  min-height: 0;
95
94
  }
@@ -306,7 +306,7 @@
306
306
  height: var( --kendo-icon-size, 1rem );
307
307
  border-bottom-width: 1px;
308
308
 
309
- .k-icon::before {
309
+ .k-font-icon::before {
310
310
  content: "\e013";
311
311
  }
312
312
  }
@@ -318,7 +318,7 @@
318
318
  width: var( --kendo-icon-size, 1rem );
319
319
  border-left-width: 1px;
320
320
 
321
- .k-icon::before {
321
+ .k-font-icon::before {
322
322
  content: "\e014";
323
323
  }
324
324
  }
@@ -330,7 +330,7 @@
330
330
  height: var( --kendo-icon-size, 1rem );
331
331
  border-top-width: 1px;
332
332
 
333
- .k-icon::before {
333
+ .k-font-icon::before {
334
334
  content: "\e015";
335
335
  }
336
336
  }
@@ -342,7 +342,7 @@
342
342
  width: var( --kendo-icon-size, 1rem );
343
343
  border-right-width: 1px;
344
344
 
345
- .k-icon::before {
345
+ .k-font-icon::before {
346
346
  content: "\e016";
347
347
  }
348
348
  }
@@ -37,8 +37,7 @@
37
37
  }
38
38
  }
39
39
 
40
- .k-link > .k-icon,
41
- .k-link > .k-svg-icon {
40
+ .k-link > .k-icon {
42
41
  color: var( --kendo-menu-icon-color, $kendo-menu-icon-color );
43
42
  }
44
43
 
@@ -28,8 +28,7 @@
28
28
  --kendo-notification-bg: var( --kendo-notification-#{$theme-color}-bg, #{$_bg} );
29
29
  --kendo-notification-border: var( --kendo-notification-#{$theme-color}-border, #{$_border} );
30
30
 
31
- .k-notification-wrap > .k-icon,
32
- .k-notification-wrap > .k-svg-icon {
31
+ .k-notification-wrap > .k-icon {
33
32
  --kendo-notification-icon-text: var( --kendo-notification-#{$theme-color}-icon-text, #{$_icon} );
34
33
  }
35
34
  }
@@ -15,6 +15,7 @@
15
15
  line-height: var( --kendo-panelbar-line-height, #{$kendo-panelbar-line-height} );
16
16
  list-style: none;
17
17
  display: block;
18
+ position: relative;
18
19
  -webkit-touch-callout: none;
19
20
  -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
20
21
 
@@ -47,7 +47,6 @@
47
47
  );
48
48
 
49
49
  .k-icon,
50
- .k-svg-icon,
51
50
  .k-panelbar-item-icon {
52
51
  color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
53
52
  }
@@ -85,7 +84,6 @@
85
84
  --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
86
85
 
87
86
  .k-icon,
88
- .k-svg-icon,
89
87
  .k-panelbar-item-icon {
90
88
  color: inherit;
91
89
  }
@@ -124,7 +122,6 @@
124
122
  --INTERNAL--kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
125
123
 
126
124
  .k-icon,
127
- .k-svg-icon,
128
125
  .k-panelbar-item-icon {
129
126
  color: inherit;
130
127
  }
@@ -140,7 +137,6 @@
140
137
  }
141
138
 
142
139
  .k-icon,
143
- .k-svg-icon,
144
140
  .k-panelbar-item-icon {
145
141
  color: inherit;
146
142
  }
@@ -162,7 +158,6 @@
162
158
  );
163
159
 
164
160
  .k-icon,
165
- .k-svg-icon,
166
161
  .k-panelbar-item-icon {
167
162
  color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
168
163
  }
@@ -226,7 +221,6 @@
226
221
  --INTERNAL--kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
227
222
 
228
223
  .k-icon,
229
- .k-svg-icon,
230
224
  .k-panelbar-item-icon {
231
225
  color: inherit;
232
226
  }
@@ -242,7 +236,6 @@
242
236
  }
243
237
 
244
238
  .k-icon,
245
- .k-svg-icon,
246
239
  .k-panelbar-item-icon {
247
240
  color: inherit;
248
241
  }
@@ -33,8 +33,7 @@
33
33
  );
34
34
  }
35
35
 
36
- .k-blank-page > .k-icon,
37
- .k-blank-page > .k-svg-icon {
36
+ .k-blank-page > .k-icon {
38
37
  @include fill(
39
38
  $color: var( --kendo-pdf-viewer-icon-text, #{$kendo-pdf-viewer-icon-text} )
40
39
  );
@@ -140,8 +140,7 @@
140
140
  overflow: hidden;
141
141
  }
142
142
 
143
- .k-pivotgrid-cell .k-icon,
144
- .k-pivotgrid-cell .k-svg-icon {
143
+ .k-pivotgrid-cell .k-icon {
145
144
  cursor: pointer;
146
145
  padding-inline-end: var( --kendo-pivotgrid-icon-spacing, #{$kendo-pivotgrid-icon-spacing} );
147
146
  }
@@ -188,8 +187,7 @@
188
187
  cursor: pointer;
189
188
  user-select: none;
190
189
 
191
- .k-icon,
192
- .k-svg-icon {
190
+ .k-icon {
193
191
  margin-inline-start: var( --kendo-pivotgrid-configurator-button-icon-spacing, #{$kendo-pivotgrid-configurator-button-icon-spacing} );
194
192
  }
195
193
 
@@ -201,8 +199,7 @@
201
199
  span {
202
200
  writing-mode: vertical-rl;
203
201
  }
204
- .k-icon,
205
- .k-svg-icon {
202
+ .k-icon {
206
203
  vertical-align: baseline;
207
204
  }
208
205
  }
@@ -359,8 +356,7 @@
359
356
  flex-direction: row;
360
357
  align-items: center;
361
358
 
362
- .k-icon,
363
- .k-svg-icon {
359
+ .k-icon {
364
360
  margin-inline-end: map.get( $kendo-spacing, 2 );
365
361
  }
366
362
  .k-dropdown-list {
@@ -15,6 +15,7 @@
15
15
  line-height: var( --kendo-scheduler-line-height, #{$kendo-scheduler-line-height} );
16
16
  display: flex;
17
17
  flex-direction: column;
18
+ position: relative;
18
19
  -webkit-touch-callout: none;
19
20
  -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
20
21
 
@@ -83,8 +83,7 @@
83
83
  flex: 1;
84
84
  gap: var( --kendo-spreadsheet-formula-bar-gap, #{$kendo-spreadsheet-formula-bar-gap} );
85
85
 
86
- > .k-icon,
87
- > .k-svg-icon {
86
+ > .k-icon {
88
87
  padding-inline: var( --kendo-padding-y, #{$kendo-padding-md-y} );
89
88
  padding-block: 0;
90
89
  box-sizing: content-box;
@@ -557,8 +556,7 @@
557
556
  .k-link {
558
557
  padding-inline-start: var( --filter-menu-padding-left, #{$kendo-filter-menu-padding-left} );
559
558
  }
560
- .k-icon,
561
- .k-svg-icon {
559
+ .k-icon {
562
560
  margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-md-y} ) );
563
561
  margin-inline-end: $kendo-padding-md-y;
564
562
  }
@@ -599,7 +597,6 @@
599
597
  cursor: pointer;
600
598
 
601
599
  > .k-icon,
602
- > .k-svg-icon,
603
600
  > .k-expander-indicator {
604
601
  margin-inline-end: $kendo-padding-md-y;
605
602
  }
@@ -725,10 +722,6 @@
725
722
  inset-inline-end: 0;
726
723
  inset-block-start: map.get( $kendo-spacing, 2 );
727
724
 
728
- .k-icon {
729
- font-size: 6em;
730
- }
731
-
732
725
  .k-svg-icon {
733
726
  width: 6em;
734
727
  height: 6em;
@@ -125,8 +125,7 @@
125
125
  text-overflow: ellipsis;
126
126
  overflow: hidden;
127
127
  }
128
- .k-step-label .k-icon,
129
- .k-step-label .k-svg-icon {
128
+ .k-step-label .k-icon {
130
129
  margin-inline-start: var( --kendo-icon-spacing, .5rem );
131
130
  }
132
131
 
@@ -162,8 +162,7 @@
162
162
  .k-step-label {
163
163
  @include fill( $color: var( --kendo-stepper-label-text, #{$kendo-stepper-label-text} ) );
164
164
  }
165
- .k-step-success .k-step-label .k-icon,
166
- .k-step-success .k-step-label .k-svg-icon {
165
+ .k-step-success .k-step-label .k-icon {
167
166
  @include fill( $color: var( --kendo-stepper-label-success-text, #{$kendo-stepper-label-success-text} ) );
168
167
  }
169
168
  .k-step-error .k-step-label {
@@ -12,6 +12,7 @@
12
12
  border-style: solid;
13
13
  display: flex;
14
14
  flex-direction: column;
15
+ position: relative;
15
16
  }
16
17
 
17
18
 
@@ -9,6 +9,7 @@
9
9
  box-sizing: border-box;
10
10
  outline: 0;
11
11
  display: grid;
12
+ position: relative;
12
13
  padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
13
14
  padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
14
15
  -webkit-touch-callout: none;