@syncfusion/blazor-themes 25.1.39 → 25.1.40

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 (73) hide show
  1. package/SCSS-Themes/bds-dark.scss +331 -429
  2. package/SCSS-Themes/bds.scss +331 -429
  3. package/SCSS-Themes/bootstrap-dark.scss +331 -429
  4. package/SCSS-Themes/bootstrap.scss +331 -429
  5. package/SCSS-Themes/bootstrap4.scss +331 -429
  6. package/SCSS-Themes/bootstrap5-dark.scss +331 -429
  7. package/SCSS-Themes/bootstrap5.scss +331 -429
  8. package/SCSS-Themes/fabric-dark.scss +331 -429
  9. package/SCSS-Themes/fabric.scss +331 -429
  10. package/SCSS-Themes/fluent-dark.scss +331 -429
  11. package/SCSS-Themes/fluent.scss +331 -429
  12. package/SCSS-Themes/grids/grid/bds-dark.scss +10 -2
  13. package/SCSS-Themes/grids/grid/bds.scss +10 -2
  14. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +10 -2
  15. package/SCSS-Themes/grids/grid/bootstrap.scss +10 -2
  16. package/SCSS-Themes/grids/grid/bootstrap4.scss +10 -2
  17. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +10 -2
  18. package/SCSS-Themes/grids/grid/bootstrap5.scss +10 -2
  19. package/SCSS-Themes/grids/grid/fabric-dark.scss +10 -2
  20. package/SCSS-Themes/grids/grid/fabric.scss +10 -2
  21. package/SCSS-Themes/grids/grid/fluent-dark.scss +10 -2
  22. package/SCSS-Themes/grids/grid/fluent.scss +10 -2
  23. package/SCSS-Themes/grids/grid/highcontrast.scss +10 -2
  24. package/SCSS-Themes/grids/grid/material-dark.scss +10 -2
  25. package/SCSS-Themes/grids/grid/material.scss +10 -2
  26. package/SCSS-Themes/grids/grid/material3-dark.scss +10 -2
  27. package/SCSS-Themes/grids/grid/material3.scss +10 -2
  28. package/SCSS-Themes/grids/grid/tailwind-dark.scss +10 -2
  29. package/SCSS-Themes/grids/grid/tailwind.scss +10 -2
  30. package/SCSS-Themes/highcontrast.scss +331 -429
  31. package/SCSS-Themes/material-dark.scss +331 -429
  32. package/SCSS-Themes/material.scss +331 -429
  33. package/SCSS-Themes/material3-dark.scss +331 -429
  34. package/SCSS-Themes/material3.scss +331 -429
  35. package/SCSS-Themes/navigations/stepper/bds-dark.scss +323 -429
  36. package/SCSS-Themes/navigations/stepper/bds.scss +323 -429
  37. package/SCSS-Themes/navigations/stepper/bootstrap-dark.scss +323 -429
  38. package/SCSS-Themes/navigations/stepper/bootstrap.scss +323 -429
  39. package/SCSS-Themes/navigations/stepper/bootstrap4.scss +323 -429
  40. package/SCSS-Themes/navigations/stepper/bootstrap5-dark.scss +323 -429
  41. package/SCSS-Themes/navigations/stepper/bootstrap5.scss +323 -429
  42. package/SCSS-Themes/navigations/stepper/fabric-dark.scss +323 -429
  43. package/SCSS-Themes/navigations/stepper/fabric.scss +323 -429
  44. package/SCSS-Themes/navigations/stepper/fluent-dark.scss +323 -429
  45. package/SCSS-Themes/navigations/stepper/fluent.scss +323 -429
  46. package/SCSS-Themes/navigations/stepper/highcontrast.scss +323 -429
  47. package/SCSS-Themes/navigations/stepper/material-dark.scss +323 -429
  48. package/SCSS-Themes/navigations/stepper/material.scss +323 -429
  49. package/SCSS-Themes/navigations/stepper/material3-dark.scss +323 -429
  50. package/SCSS-Themes/navigations/stepper/material3.scss +323 -429
  51. package/SCSS-Themes/navigations/stepper/tailwind-dark.scss +323 -429
  52. package/SCSS-Themes/navigations/stepper/tailwind.scss +323 -429
  53. package/SCSS-Themes/splitbuttons/button-group/bds-dark.scss +1 -1
  54. package/SCSS-Themes/splitbuttons/button-group/bds.scss +1 -1
  55. package/SCSS-Themes/splitbuttons/button-group/bootstrap-dark.scss +1 -1
  56. package/SCSS-Themes/splitbuttons/button-group/bootstrap.scss +1 -1
  57. package/SCSS-Themes/splitbuttons/button-group/bootstrap4.scss +1 -1
  58. package/SCSS-Themes/splitbuttons/button-group/bootstrap5-dark.scss +1 -1
  59. package/SCSS-Themes/splitbuttons/button-group/bootstrap5.scss +1 -1
  60. package/SCSS-Themes/splitbuttons/button-group/fabric-dark.scss +1 -1
  61. package/SCSS-Themes/splitbuttons/button-group/fabric.scss +1 -1
  62. package/SCSS-Themes/splitbuttons/button-group/fluent-dark.scss +1 -1
  63. package/SCSS-Themes/splitbuttons/button-group/fluent.scss +1 -1
  64. package/SCSS-Themes/splitbuttons/button-group/highcontrast.scss +1 -1
  65. package/SCSS-Themes/splitbuttons/button-group/material-dark.scss +1 -1
  66. package/SCSS-Themes/splitbuttons/button-group/material.scss +1 -1
  67. package/SCSS-Themes/splitbuttons/button-group/material3-dark.scss +1 -1
  68. package/SCSS-Themes/splitbuttons/button-group/material3.scss +1 -1
  69. package/SCSS-Themes/splitbuttons/button-group/tailwind-dark.scss +1 -1
  70. package/SCSS-Themes/splitbuttons/button-group/tailwind.scss +1 -1
  71. package/SCSS-Themes/tailwind-dark.scss +331 -429
  72. package/SCSS-Themes/tailwind.scss +331 -429
  73. package/package.json +1 -1
@@ -59229,12 +59229,11 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59229
59229
  .e-stepper {
59230
59230
  position: relative;
59231
59231
  &.e-stepper-readonly,
59232
- .e-stepper-steps .e-step-container.e-step-disabled {
59232
+ .e-step-disabled {
59233
59233
  cursor: default;
59234
59234
  pointer-events: none;
59235
59235
  }
59236
-
59237
- &.e-step-type-indicator .e-stepper-steps .e-step-container {
59236
+ &.e-step-type-indicator .e-step-container {
59238
59237
  &:not(.e-step-icon.e-step-label.e-step-text) {
59239
59238
  .e-icons.e-step-indicator {
59240
59239
  font-size: $stepper-step-width;
@@ -59247,12 +59246,12 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59247
59246
  }
59248
59247
 
59249
59248
  //For Blazor Stepper Tooltip
59250
- .e-stepper-steps .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
59251
- &.e-vertical.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
59252
- &.e-vertical.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
59249
+ .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
59250
+ &.e-vertical.e-label-after .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
59251
+ &.e-vertical.e-label-before .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
59253
59252
  position: relative;
59254
59253
  }
59255
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
59254
+ &.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
59256
59255
  position: unset;
59257
59256
  }
59258
59257
  .e-tooltip-wrap.e-stepper-tooltip {
@@ -59277,15 +59276,14 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59277
59276
  top: -6px;
59278
59277
  }
59279
59278
  }
59280
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
59279
+ .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
59281
59280
  left: unset;
59282
59281
  top: 0;
59283
59282
  transform: translate(0%, -135%);
59284
59283
  }
59285
- &.e-step-type-indicator .e-stepper-steps .e-step-container .e-tooltip-wrap.e-stepper-tooltip {
59284
+ &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
59286
59285
  transform: translate(-50%, -115%);
59287
59286
  }
59288
-
59289
59287
  .e-stepper-steps {
59290
59288
  display: flex;
59291
59289
  padding: 0;
@@ -59293,124 +59291,170 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59293
59291
  justify-content: space-between;
59294
59292
  position: relative;
59295
59293
  align-items: flex-start;
59296
- .e-step-container {
59297
- max-width: var(--max-width);
59298
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
59299
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator {
59300
- border: $step-border;
59301
- }
59302
- .e-step-label-container,
59303
- .e-step-text-container {
59304
- max-width: clamp(100%, 10em, 100%);
59305
- white-space: nowrap;
59306
- }
59307
- .e-step-label-optional {
59308
- font-size: $stepper-optional-size;
59309
- flex-basis: 100%;
59310
- }
59311
- .e-step-optional-container {
59312
- display: flex;
59313
- flex-direction: column;
59294
+ .e-step-container,
59295
+ .e-step,
59296
+ .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
59297
+ .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
59298
+ .e-step-label-container {
59299
+ display: flex;
59300
+ align-items: center;
59301
+ justify-content: center;
59302
+ }
59303
+ }
59304
+ .e-step-container {
59305
+ max-width: var(--max-width);
59306
+ list-style-type: none;
59307
+ cursor: pointer;
59308
+ text-align: center;
59309
+ .e-step-label-container,
59310
+ .e-step-text-container {
59311
+ max-width: clamp(100%, 10em, 100%);
59312
+ white-space: nowrap;
59313
+ }
59314
+ .e-step-label-optional {
59315
+ font-size: $stepper-optional-size;
59316
+ flex-basis: 100%;
59317
+ }
59318
+ .e-step-optional-container {
59319
+ display: flex;
59320
+ flex-direction: column;
59321
+ }
59322
+ .e-step-content {
59323
+ font-size: $stepper-icon-size;
59324
+ line-height: 0;
59325
+ }
59326
+ .e-indicator {
59327
+ font-size: $stepper-icon-size;
59328
+ }
59329
+ &:not(.e-step-text-only) > .e-step-text-container {
59330
+ padding: $stepper-icon-text-padding;
59331
+ }
59332
+ &.e-step-text-only .e-step-text-container,
59333
+ &.e-step-label-only .e-step-label-container {
59334
+ padding: $stepper-text-padding;
59335
+ padding-block: 5px;
59336
+ }
59337
+ &.e-step-text-only.e-step-error .e-step-text-container,
59338
+ &.e-step-text-only.e-step-valid .e-step-text-container,
59339
+ &.e-step-label-only.e-step-error .e-step-label-container,
59340
+ &.e-step-label-only.e-step-valid .e-step-label-container {
59341
+ flex-direction: column;
59342
+ .e-step-validation-icon {
59343
+ position: relative;
59344
+ top: $stepper-validation-position;
59314
59345
  }
59315
59346
  }
59347
+ .e-step-label-container,
59348
+ .e-step-text-container {
59349
+ font-size: $stepper-text-size;
59350
+ }
59351
+ .e-step,
59352
+ .e-indicator {
59353
+ border-radius: $stepper-step-radius;
59354
+ min-width: $stepper-step-width;
59355
+ min-height: $stepper-step-width;
59356
+ }
59357
+ }
59358
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
59359
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator {
59360
+ border: $step-border;
59316
59361
  }
59317
-
59318
59362
  &.e-horizontal {
59319
59363
  display: block;
59320
59364
  .e-stepper-steps {
59321
59365
  flex-direction: row;
59322
59366
  }
59323
-
59324
59367
  &.e-label-before,
59325
59368
  &.e-label-after {
59326
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59369
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59327
59370
  margin-left: var(--progress-left-position);
59328
59371
  top: var(--progress-top-position);
59329
59372
  width: var(--progress-bar-width);
59330
59373
  }
59331
59374
  }
59332
-
59333
59375
  &.e-label-before.e-rtl,
59334
59376
  &.e-label-after.e-rtl {
59335
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59377
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59336
59378
  margin-right: var(--progress-left-position);
59337
59379
  margin-left: unset;
59338
59380
  }
59339
59381
  }
59340
- }
59341
-
59342
- &.e-horizontal .e-stepper-steps .e-step-container {
59343
- &.e-step-icon.e-step-label {
59382
+ .e-step-icon.e-step-label {
59344
59383
  gap: 1em;
59384
+ flex-direction: column;
59345
59385
  }
59346
-
59347
- &.e-step-icon.e-step-label .e-step-label-container {
59386
+ .e-step-icon.e-step-label .e-step-label-container {
59348
59387
  position: relative;
59349
59388
  &.e-label-before {
59350
59389
  order: -1;
59351
59390
  }
59352
59391
  }
59353
-
59354
- &.e-step-text.e-step-label,
59355
- &.e-step-icon.e-step-label {
59356
- flex-direction: column;
59392
+ &.e-label-start .e-step-text-container {
59393
+ order: $stepper-label-order;
59357
59394
  }
59358
- }
59359
-
59360
- &.e-horizontal.e-label-start .e-stepper-steps .e-step-container .e-step-text-container {
59361
- order: $stepper-label-order;
59362
- }
59363
-
59364
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59365
- position: absolute;
59366
- top: 2.5em;
59367
- margin-left: 2.5em;
59368
- }
59369
-
59370
- &.e-horizontal.e-label-start .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
59371
- &.e-horizontal.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59372
- margin-right: 2.5em;
59373
- margin-left: unset;
59374
- }
59375
-
59376
- &.e-horizontal.e-label-start.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59377
- margin-right: unset;
59378
- margin-left: 2.5em;
59379
- }
59380
-
59381
- &.e-horizontal.e-label-before .e-stepper-steps {
59382
- &:has(.e-step-label-optional) {
59383
- align-items: flex-end;
59395
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59396
+ position: absolute;
59397
+ top: 2.5em;
59398
+ margin-left: 2.5em;
59384
59399
  }
59385
- .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59386
- flex-direction: column;
59387
- gap: .5em;
59400
+ &.e-label-start .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
59401
+ &.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59402
+ margin-right: 2.5em;
59403
+ margin-left: unset;
59404
+ }
59405
+ &.e-label-start.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59406
+ margin-right: unset;
59407
+ margin-left: 2.5em;
59408
+ }
59409
+ &.e-label-before .e-stepper-steps {
59410
+ &:has(.e-step-label-optional) {
59411
+ align-items: flex-end;
59412
+ }
59413
+ .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59414
+ flex-direction: column;
59415
+ gap: .5em;
59416
+ }
59417
+ }
59418
+ .e-text,
59419
+ .e-label,
59420
+ .e-step-label-optional {
59421
+ text-overflow: ellipsis;
59422
+ overflow: hidden;
59423
+ }
59424
+ .e-step-text.e-step-text-only:has(.e-step-label-optional),
59425
+ .e-step-label.e-step-label-only:has(.e-step-label-optional),
59426
+ .e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59427
+ .e-step-label-container.e-label-after:has(.e-step-label-optional) {
59428
+ flex-wrap: wrap;
59429
+ }
59430
+ &.e-step-type-indicator .e-step-container {
59431
+ flex-wrap: wrap;
59432
+ }
59433
+ .e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
59434
+ margin-top: .5em;
59435
+ }
59436
+ &.e-label-after .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
59437
+ margin-top: .2em;
59388
59438
  }
59389
59439
  }
59390
-
59391
59440
  &.e-vertical {
59392
59441
  min-height: inherit;
59393
59442
  display: inline-block;
59394
-
59395
- .e-stepper-steps .e-step-container.e-step-label.e-step-label-only,
59396
- .e-stepper-steps .e-step-container.e-step-template {
59443
+ .e-step-label.e-step-label-only,
59444
+ .e-step-template {
59397
59445
  position: relative;
59398
59446
  }
59399
-
59400
- &:not(.e-label-top):not(.e-label-bottom) .e-stepper-steps .e-step-container .e-step-label-optional {
59447
+ &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
59401
59448
  position: absolute;
59402
59449
  }
59403
-
59404
- &:not(.e-label-bottom):not(.e-label-top) .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59450
+ &:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59405
59451
  margin-top: $stepper-label-optional;
59406
59452
  margin-left: 4em;
59407
59453
  }
59408
-
59409
- &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59454
+ &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
59410
59455
  margin-left: unset;
59411
59456
  margin-right: 4em;
59412
59457
  }
59413
-
59414
59458
  .e-stepper-steps {
59415
59459
  flex-direction: column;
59416
59460
  min-height: inherit;
@@ -59419,49 +59463,42 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59419
59463
  margin: $stepper-ol-padding;
59420
59464
  justify-content: space-between;
59421
59465
  }
59422
-
59423
59466
  &.e-rtl .e-stepper-steps {
59424
59467
  float: right;
59425
59468
  }
59426
-
59427
- .e-stepper-steps:has(.e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label)),
59428
- .e-stepper-steps:has(.e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label)),
59429
- .e-stepper-steps:has(.e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-text)),
59430
- &.e-label-after .e-stepper-steps:has(.e-step-container.e-step-label.e-step-text:not(.e-step-icon)),
59469
+ .e-stepper-steps:has(.e-step-icon:not(.e-step-text):not(.e-step-label)),
59470
+ .e-stepper-steps:has(.e-step-text.e-step-text-only),
59471
+ .e-stepper-steps:has(.e-step-label.e-step-label-only),
59472
+ &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-icon)),
59431
59473
  &.e-step-type-indicator .e-stepper-steps {
59432
59474
  align-items: center;
59433
59475
  }
59434
-
59435
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
59436
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59476
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
59477
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59437
59478
  margin-left: $stepper-text-postion;
59438
59479
  }
59439
-
59440
59480
  &.e-rtl {
59441
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
59442
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59481
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
59482
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59443
59483
  margin-left: unset;
59444
59484
  margin-right: $stepper-text-postion;
59445
59485
  }
59446
59486
  }
59447
-
59448
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59449
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional),
59450
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-text:has(.e-step-label-optional),
59451
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-label:has(.e-step-label-optional) {
59487
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59488
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
59489
+ .e-step-text-only.e-step-text:has(.e-step-label-optional),
59490
+ .e-step-label-only.e-step-label:has(.e-step-label-optional) {
59452
59491
  flex-direction: column;
59453
59492
  .e-step-label-optional {
59454
59493
  position: unset;
59455
59494
  }
59456
59495
  }
59457
-
59458
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59459
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59496
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59497
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59460
59498
  gap: .5em;
59461
59499
  }
59462
-
59463
- &.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label,
59464
- &.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label {
59500
+ &.e-label-before .e-step-icon.e-step-label,
59501
+ &.e-label-after .e-step-icon.e-step-label {
59465
59502
  .e-step-label-container.e-label-after:has(.e-step-label-optional) {
59466
59503
  flex-direction: column;
59467
59504
  .e-label {
@@ -59472,43 +59509,37 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59472
59509
  position: unset;
59473
59510
  }
59474
59511
  }
59475
-
59476
- .e-stepper-steps .e-step-container {
59512
+ .e-step-container {
59477
59513
  &.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after {
59478
59514
  position: absolute;
59479
59515
  .e-step-label-optional {
59480
59516
  left: $stepper-ol-padding;
59481
59517
  }
59482
59518
  }
59483
-
59484
59519
  .e-step-label-container.e-label-after {
59485
59520
  .e-step-label-optional {
59486
59521
  font-size: $stepper-optional-size;
59487
59522
  }
59488
59523
  }
59489
-
59490
59524
  .e-step-label-container.e-label-before .e-label {
59491
59525
  width: var(--label-width);
59492
59526
  }
59493
-
59494
59527
  &:not(.e-step-text-only) .e-step-text-container {
59495
59528
  border: none;
59496
59529
  border-radius: unset;
59497
59530
  padding: $stepper-text-vert-padding;
59498
59531
  }
59499
-
59500
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59501
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
59532
+ &.e-step-text-only .e-step-text-container,
59533
+ &.e-step-label-only .e-step-label-container {
59502
59534
  position: unset;
59503
59535
  }
59504
59536
  }
59505
59537
  &.e-label-top {
59506
- .e-stepper-steps .e-step-container .e-step-label-optional {
59538
+ .e-step-label-optional {
59507
59539
  padding-bottom: 6px;
59508
59540
  }
59509
59541
  }
59510
59542
  }
59511
-
59512
59543
  &.e-vertical.e-label-top,
59513
59544
  &.e-vertical.e-label-bottom {
59514
59545
  .e-stepper-steps {
@@ -59516,98 +59547,17 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59516
59547
  .e-step-container {
59517
59548
  flex-direction: column;
59518
59549
  .e-step-text-container {
59519
- margin-left: $stepper-ol-padding !important; /* stylelint-disable-line declaration-no-important */
59550
+ margin-left: $stepper-ol-padding;
59520
59551
  }
59521
59552
  }
59522
59553
  }
59523
59554
  }
59524
-
59525
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container {
59555
+ &.e-vertical.e-label-top .e-step-container {
59526
59556
  .e-step-label-optional,
59527
59557
  .e-step-text-container {
59528
59558
  order: $stepper-label-order;
59529
59559
  }
59530
59560
  }
59531
- .e-stepper-steps {
59532
- .e-step-container,
59533
- .e-step-container .e-step,
59534
- .e-step-container.e-step-valid.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59535
- .e-step-container.e-step-error.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59536
- .e-step-container .e-step-label-container {
59537
- display: flex;
59538
- align-items: center;
59539
- justify-content: center;
59540
- }
59541
- }
59542
-
59543
- &.e-horizontal {
59544
- .e-stepper-steps {
59545
- .e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
59546
- .e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
59547
- .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59548
- .e-step-container .e-step-label-container.e-label-after:has(.e-step-label-optional) {
59549
- flex-wrap: wrap;
59550
- }
59551
- }
59552
- &.e-step-type-indicator .e-step-container {
59553
- flex-wrap: wrap;
59554
- }
59555
- }
59556
-
59557
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
59558
- margin-top: .5em;
59559
- }
59560
-
59561
- &.e-horizontal.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
59562
- margin-top: .2em;
59563
- }
59564
-
59565
- .e-stepper-steps .e-step-container {
59566
- list-style-type: none;
59567
- cursor: pointer;
59568
- text-align: center;
59569
-
59570
- .e-step-content {
59571
- font-size: $stepper-icon-size;
59572
- line-height: 0;
59573
- }
59574
-
59575
- .e-indicator {
59576
- font-size: $stepper-icon-size;
59577
- }
59578
-
59579
- &:not(.e-step-text-only) > .e-step-text-container {
59580
- padding: $stepper-icon-text-padding;
59581
- }
59582
-
59583
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59584
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
59585
- padding: $stepper-text-padding;
59586
- padding-block: 5px;
59587
- }
59588
-
59589
- &.e-step-text-only.e-step-error:not(.e-step-icon.e-step-label) .e-step-text-container,
59590
- &.e-step-text-only.e-step-valid:not(.e-step-icon.e-step-label) .e-step-text-container,
59591
- &.e-step-label-only.e-step-error:not(.e-step-icon.e-step-text) .e-step-label-container,
59592
- &.e-step-label-only.e-step-valid:not(.e-step-icon.e-step-text) .e-step-label-container {
59593
- flex-direction: column;
59594
- .e-step-validation-icon {
59595
- position: relative;
59596
- top: $stepper-validation-position;
59597
- }
59598
- }
59599
- .e-step-label-container,
59600
- .e-step-text-container {
59601
- font-size: $stepper-text-size;
59602
- }
59603
- .e-step,
59604
- .e-indicator {
59605
- border-radius: $stepper-step-radius;
59606
- min-width: $stepper-step-width;
59607
- min-height: $stepper-step-width;
59608
- }
59609
- }
59610
-
59611
59561
  .e-stepper-progressbar {
59612
59562
  height: $stepper-progress-bar-height;
59613
59563
  position: absolute;
@@ -59622,7 +59572,6 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59622
59572
  transition-delay: var(--delay);
59623
59573
  }
59624
59574
  }
59625
-
59626
59575
  &.e-vertical .e-stepper-progressbar {
59627
59576
  min-height: inherit;
59628
59577
  width: $stepper-progress-bar-height;
@@ -59635,40 +59584,26 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59635
59584
  transition-property: height;
59636
59585
  }
59637
59586
  }
59638
-
59639
59587
  &.e-vertical.e-rtl .e-stepper-progressbar {
59640
59588
  right: var(--progress-position);
59641
59589
  left: unset;
59642
59590
  }
59643
-
59644
- &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-stepper-steps .e-step-container:not(.e-step-text-only):not(.e-step-label-only) .e-indicator,
59645
- .e-stepper-steps .e-step-container.e-step-focus .e-indicator {
59591
+ &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
59592
+ .e-step-focus .e-indicator {
59646
59593
  z-index: 0;
59647
59594
  }
59648
-
59649
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
59595
+ .e-step-template.e-step-focus {
59650
59596
  outline: $stepper-temp-outline-width;
59651
59597
  }
59652
59598
  }
59653
-
59654
59599
  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
59655
59600
  .e-arrow-tip.e-tip-bottom {
59656
59601
  top: 90% !important; /* stylelint-disable-line declaration-no-important */
59657
59602
  }
59658
59603
  }
59659
-
59660
- .e-stepper.e-horizontal .e-stepper-steps .e-step-container {
59661
- .e-text,
59662
- .e-label,
59663
- .e-step-label-optional {
59664
- text-overflow: ellipsis;
59665
- overflow: hidden;
59666
- }
59667
- }
59668
-
59669
59604
  .e-small.e-stepper,
59670
59605
  .e-small .e-stepper {
59671
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59606
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59672
59607
  .e-icons.e-step-indicator {
59673
59608
  font-size: $stepper-small-step-width;
59674
59609
  }
@@ -59677,39 +59612,33 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59677
59612
  height: $stepper-small-step-width;
59678
59613
  }
59679
59614
  }
59680
-
59681
- .e-stepper-steps .e-step-container {
59615
+ .e-step-container {
59682
59616
  .e-step,
59683
59617
  .e-indicator {
59684
59618
  min-width: $stepper-small-step-width;
59685
59619
  min-height: $stepper-small-step-width;
59686
59620
  }
59687
-
59688
59621
  .e-indicator {
59689
59622
  font-size: $stepper-small-icon-size;
59690
59623
  }
59691
-
59692
59624
  .e-step-text-container,
59693
59625
  .e-step-label-container {
59694
59626
  font-size: $stepper-small-text-size;
59695
59627
  }
59696
-
59697
59628
  .e-step-content {
59698
59629
  font-size: $stepper-small-icon-size;
59699
59630
  }
59700
-
59701
59631
  .e-step-label-optional {
59702
59632
  font-size: $stepper-small-optional-size;
59703
59633
  }
59704
59634
  }
59705
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
59635
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
59706
59636
  font-size: $stepper-small-optional-size;
59707
59637
  }
59708
59638
  }
59709
-
59710
59639
  .e-bigger.e-stepper,
59711
59640
  .e-bigger .e-stepper {
59712
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59641
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59713
59642
  .e-icons.e-step-indicator {
59714
59643
  font-size: $stepper-bigger-step-width;
59715
59644
  }
@@ -59718,32 +59647,27 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59718
59647
  height: $stepper-bigger-step-width;
59719
59648
  }
59720
59649
  }
59721
-
59722
- .e-stepper-steps .e-step-container {
59650
+ .e-step-container {
59723
59651
  .e-step,
59724
59652
  .e-indicator {
59725
59653
  min-width: $stepper-bigger-step-width;
59726
59654
  min-height: $stepper-bigger-step-width;
59727
59655
  }
59728
-
59729
59656
  .e-indicator {
59730
59657
  font-size: $stepper-bigger-icon-size;
59731
59658
  }
59732
-
59733
59659
  .e-step-text-container,
59734
59660
  .e-step-label-container {
59735
59661
  font-size: $stepper-bigger-text-size;
59736
59662
  }
59737
-
59738
59663
  .e-step-content {
59739
59664
  font-size: $stepper-bigger-icon-size;
59740
59665
  }
59741
-
59742
59666
  .e-step-label-optional {
59743
59667
  font-size: $stepper-bigger-optional-size;
59744
59668
  }
59745
59669
  }
59746
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
59670
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
59747
59671
  font-size: $stepper-bigger-optional-size;
59748
59672
  }
59749
59673
  }
@@ -59752,7 +59676,7 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59752
59676
  .e-bigger.e-small .e-stepper,
59753
59677
  .e-bigger .e-small.e-stepper,
59754
59678
  .e-small .e-bigger.e-stepper {
59755
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59679
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
59756
59680
  .e-icons.e-step-indicator {
59757
59681
  font-size: $stepper-bigger-small-step-width;
59758
59682
  }
@@ -59761,31 +59685,27 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59761
59685
  height: $stepper-bigger-small-step-width;
59762
59686
  }
59763
59687
  }
59764
-
59765
- .e-stepper-steps .e-step-container {
59688
+ .e-step-container {
59766
59689
  .e-step,
59767
59690
  .e-indicator {
59768
59691
  min-width: $stepper-bigger-small-step-width;
59769
59692
  min-height: $stepper-bigger-small-step-width;
59770
59693
  }
59771
-
59772
59694
  .e-indicator {
59773
59695
  font-size: $stepper-bigger-small-icon-size;
59774
59696
  }
59775
-
59776
59697
  .e-step-text-container,
59777
- .e-step-label-container{
59698
+ .e-step-label-container {
59778
59699
  font-size: $stepper-bigger-small-text-size;
59779
59700
  }
59780
59701
  .e-step-content {
59781
59702
  font-size: $stepper-bigger-small-icon-size;
59782
59703
  }
59783
-
59784
59704
  .e-step-label-optional {
59785
59705
  font-size: $stepper-bigger-small-optional-size;
59786
59706
  }
59787
59707
  }
59788
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
59708
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
59789
59709
  font-size: $stepper-bigger-small-optional-size;
59790
59710
  }
59791
59711
  }
@@ -59794,229 +59714,203 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
59794
59714
 
59795
59715
  @include export-module('stepper-theme') {
59796
59716
  .e-stepper {
59797
- .e-stepper-steps {
59798
- .e-step-container {
59799
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
59800
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator,
59801
- &.e-step-notstarted .e-icons.e-step-indicator {
59802
- border-color: $step-border-color;
59803
- }
59804
-
59805
- .e-step-label-optional {
59806
- color: $step-optional-color;
59807
- }
59808
-
59809
- .e-step,
59810
- .e-indicator {
59811
- color: $step-color;
59812
- background: $step-bg-color;
59813
- }
59814
-
59815
- .e-step-indicator {
59816
- color: transparent;
59817
- }
59818
-
59819
- &.e-step-completed .e-step,
59820
- &.e-step-inprogress .e-step,
59821
- &.e-step-completed .e-indicator,
59822
- &.e-step-inprogress .e-indicator,
59823
- &.e-step-completed .e-step-indicator,
59824
- &.e-step-inprogress .e-step-indicator {
59825
- background: $step-completed-bg-color;
59826
- color: $step-completed-color;
59827
- }
59828
-
59829
- &.e-step-valid {
59830
- .e-indicator {
59831
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59832
- color: $step-valid-completed-color;
59833
- }
59834
- }
59835
-
59836
- &.e-step-error {
59837
- .e-indicator {
59838
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59839
- color: $step-error-icon-color;
59840
- }
59841
-
59842
- .e-text,
59843
- .e-label {
59844
- color: $step-error-completed-color;
59845
- }
59846
- }
59847
-
59848
- &.e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
59849
- &.e-step-error .e-indicator:hover {
59850
- color: $step-color;
59851
- }
59852
-
59853
- &.e-step-selected {
59854
- .e-text,
59855
- .e-label {
59856
- font-weight: $stepper-font-weight;
59857
- }
59858
- }
59859
-
59860
- &.e-step-valid.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59861
- &.e-step-valid.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
59862
- .e-step-validation-icon {
59863
- color: $step-valid-icon-only-color;
59864
- }
59865
- }
59866
-
59867
- &.e-step-error.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
59868
- &.e-step-error.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
59869
- .e-step-validation-icon {
59870
- color: $step-error-icon-only-color;
59871
- }
59872
- }
59873
-
59874
- .e-text,
59875
- .e-label {
59876
- color: $stepper-text-color;
59877
- }
59878
-
59879
- &.e-step-selected:not(.e-step-error),
59880
- &.e-step-completed:not(.e-step-error) {
59881
- .e-text,
59882
- .e-label {
59883
- color: $step-completed-bg-color;
59884
- }
59885
- }
59886
-
59887
- &.e-step-label:not(.e-step-icon) .e-step-label-container {
59888
- background-color: $stepper-outline-color;
59889
- }
59890
-
59891
- .e-step-text-container {
59892
- background-color: $stepper-outline-color;
59893
- border-color: transparent;
59894
- }
59895
-
59896
- &.e-step-selected .e-indicator {
59897
- background: $step-completed-bg-color;
59898
- }
59899
-
59900
- &.e-step-disabled .e-indicator {
59901
- background: $step-disabled-bg-color !important; /* stylelint-disable-line declaration-no-important */
59902
- color: $step-disabled-color !important; /* stylelint-disable-line declaration-no-important */
59903
- }
59904
-
59905
- &.e-step-disabled .e-text,
59906
- &.e-step-disabled .e-label,
59907
- &.e-step-disabled .e-step-validation-icon {
59908
- color: $step-disabled-font-color !important; /* stylelint-disable-line declaration-no-important */
59909
- }
59717
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
59718
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator,
59719
+ .e-step-notstarted .e-icons.e-step-indicator {
59720
+ border-color: $step-border-color;
59721
+ }
59722
+ .e-step-label-optional {
59723
+ color: $step-optional-color;
59724
+ }
59725
+ .e-step,
59726
+ .e-indicator {
59727
+ color: $step-color;
59728
+ background: $step-bg-color;
59729
+ }
59730
+ .e-step-indicator {
59731
+ color: transparent;
59732
+ }
59733
+ .e-step-completed .e-step,
59734
+ .e-step-inprogress .e-step,
59735
+ .e-step-completed .e-indicator,
59736
+ .e-step-inprogress .e-indicator,
59737
+ .e-step-completed .e-step-indicator,
59738
+ .e-step-inprogress .e-step-indicator {
59739
+ background: $step-completed-bg-color;
59740
+ color: $step-completed-color;
59741
+ }
59742
+ .e-step-selected .e-indicator {
59743
+ background: $step-completed-bg-color;
59744
+ }
59745
+ .e-step-valid .e-indicator {
59746
+ background: $step-valid-completed-bg-color;
59747
+ color: $step-valid-completed-color;
59748
+ }
59749
+ .e-step-error {
59750
+ .e-indicator {
59751
+ background: $step-error-completed-bg-color;
59752
+ color: $step-error-icon-color;
59753
+ }
59754
+ .e-text,
59755
+ .e-label {
59756
+ color: $step-error-completed-color;
59910
59757
  }
59911
59758
  }
59912
-
59913
- &.e-vertical .e-stepper-steps .e-step-container.e-step-text-only.e-step-text .e-step-label-optional,
59914
- &.e-vertical .e-stepper-steps .e-step-container.e-step-label-only.e-step-label .e-step-label-optional,
59915
- &.e-vertical .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
59916
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-label-optional,
59917
- &.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-label-optional {
59759
+ .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
59760
+ .e-step-error .e-indicator:hover {
59761
+ color: $step-color;
59762
+ }
59763
+ .e-step-selected {
59764
+ .e-text,
59765
+ .e-label {
59766
+ font-weight: $stepper-font-weight;
59767
+ }
59768
+ }
59769
+ .e-step-valid.e-step-text-only,
59770
+ .e-step-valid.e-step-label-only {
59771
+ .e-step-validation-icon {
59772
+ color: $step-valid-icon-only-color;
59773
+ }
59774
+ }
59775
+ .e-step-error.e-step-text-only,
59776
+ .e-step-error.e-step-label-only {
59777
+ .e-step-validation-icon {
59778
+ color: $step-error-icon-only-color;
59779
+ }
59780
+ }
59781
+ .e-text,
59782
+ .e-label {
59783
+ color: $stepper-text-color;
59784
+ }
59785
+ .e-step-selected:not(.e-step-error),
59786
+ .e-step-completed:not(.e-step-error) {
59787
+ .e-text,
59788
+ .e-label {
59789
+ color: $step-completed-bg-color;
59790
+ }
59791
+ }
59792
+ .e-step-label:not(.e-step-icon) .e-step-label-container {
59793
+ background-color: $stepper-outline-color;
59794
+ }
59795
+ .e-step-text-container {
59796
+ background-color: $stepper-outline-color;
59797
+ border-color: transparent;
59798
+ }
59799
+ .e-step-disabled .e-indicator {
59800
+ background: $step-disabled-bg-color;
59801
+ color: $step-disabled-color;
59802
+ }
59803
+ .e-step-disabled .e-text,
59804
+ .e-step-disabled .e-label,
59805
+ .e-step-disabled .e-step-validation-icon {
59806
+ color: $step-disabled-font-color;
59807
+ }
59808
+ &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
59809
+ &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
59810
+ &.e-vertical .e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
59811
+ &.e-vertical.e-label-top .e-step-label-optional,
59812
+ &.e-vertical.e-label-bottom .e-step-label-optional {
59918
59813
  background-color: $stepper-outline-color;
59919
59814
  }
59920
-
59921
59815
  .e-stepper-progressbar {
59922
59816
  background-color: $step-progress-bg-color;
59923
-
59924
59817
  >.e-progressbar-value {
59925
59818
  background-color: $step-progress-value-bg-color;
59926
59819
  }
59927
59820
  }
59928
-
59929
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
59821
+ &:not(.e-steps-focus) .e-step-selected .e-step {
59930
59822
  box-shadow: $step-selected-li-shadow;
59931
59823
  }
59932
-
59933
- .e-stepper-steps .e-step-container.e-step-focus .e-step,
59934
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
59935
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
59936
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
59937
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
59938
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
59939
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
59940
- box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
59824
+ .e-step-focus .e-step,
59825
+ .e-step-label-only.e-step-focus .e-label,
59826
+ .e-step-text-only.e-step-focus .e-text,
59827
+ .e-step-template.e-step-focus,
59828
+ &:not(.e-steps-focus) :focus-visible .e-step,
59829
+ &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
59830
+ &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
59831
+ box-shadow: $step-keyboard-selected-li-shadow;
59941
59832
  }
59942
59833
 
59943
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
59944
- .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
59945
- .e-stepper-steps .e-step-container.e-step-valid.e-step-label-only.e-step-focus .e-label,
59946
- .e-stepper-steps .e-step-container.e-step-valid.e-step-text-only.e-step-focus .e-text,
59947
- .e-stepper-steps .e-step-container.e-step-valid.e-step-template.e-step-focus {
59834
+ &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
59835
+ .e-step-valid.e-step-focus .e-step,
59836
+ .e-step-valid.e-step-label-only.e-step-focus .e-label,
59837
+ .e-step-valid.e-step-text-only.e-step-focus .e-text,
59838
+ .e-step-valid.e-step-template.e-step-focus {
59948
59839
  box-shadow: $step-valid-li-shadow;
59949
59840
  }
59950
59841
 
59951
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
59952
- .e-stepper-steps .e-step-container.e-step-error.e-step-focus .e-step,
59953
- .e-stepper-steps .e-step-container.e-step-error.e-step-label-only.e-step-focus .e-label,
59954
- .e-stepper-steps .e-step-container.e-step-error.e-step-text-only.e-step-focus .e-text,
59955
- .e-stepper-steps .e-step-container.e-step-error.e-step-template.e-step-focus {
59842
+ &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
59843
+ .e-step-error.e-step-focus .e-step,
59844
+ .e-step-error.e-step-label-only.e-step-focus .e-label,
59845
+ .e-step-error.e-step-text-only.e-step-focus .e-text,
59846
+ .e-step-error.e-step-template.e-step-focus {
59956
59847
  box-shadow: $step-error-li-shadow;
59957
59848
  }
59958
59849
 
59959
- .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step,
59960
- .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-completed:not(.e-step-text-only):not(.e-step-label-only) .e-step,
59961
- &.e-steps-focus .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
59850
+ .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
59851
+ .e-step-container:not(.e-step-focus).e-step-completed .e-step,
59852
+ &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
59962
59853
  box-shadow: $step-li-shadow;
59963
59854
  }
59964
59855
 
59965
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:hover,
59966
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
59967
- border-color: $step-hover-border-color !important; /* stylelint-disable-line declaration-no-important */
59856
+ .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
59857
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
59858
+ border-color: $step-hover-border-color;
59968
59859
  }
59969
59860
 
59970
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:active,
59971
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
59972
- border-color: $step-active-border-color !important; /* stylelint-disable-line declaration-no-important */
59861
+ .e-step-notstarted:not(.e-step-disabled) .e-step:active,
59862
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
59863
+ border-color: $step-active-border-color;
59973
59864
  }
59974
59865
 
59975
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
59976
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
59977
- background: $step-hover-color !important; /* stylelint-disable-line declaration-no-important */
59866
+ &:not(.e-step-type-label) {
59867
+ .e-indicator:hover,
59868
+ .e-step:hover {
59869
+ color: $step-hover-text-color;
59870
+ background: $step-selected-hover-color;
59871
+ }
59978
59872
  }
59979
59873
 
59980
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
59981
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
59982
- background: $step-active-color !important; /* stylelint-disable-line declaration-no-important */
59874
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59875
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59876
+ color: $step-hover-not-text-color;
59983
59877
  }
59984
59878
 
59985
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
59986
- &:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
59987
- &:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
59988
- color: $step-hover-text-color;
59989
- background: $step-selected-hover-color !important; /* stylelint-disable-line declaration-no-important */
59879
+ &:not(.e-step-type-label) {
59880
+ .e-step-selected .e-indicator:active,
59881
+ .e-step-selected .e-step:active {
59882
+ background: $step-selected-active-color;
59990
59883
  }
59991
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
59992
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
59993
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
59994
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59884
+ .e-step-valid.e-step-selected .e-indicator:active,
59885
+ .e-step-valid.e-step-selected .e-step:active {
59886
+ background: $step-valid-completed-bg-color;
59995
59887
  }
59996
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
59997
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
59998
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
59999
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59888
+ .e-step-error.e-step-selected .e-indicator:active,
59889
+ .e-step-error.e-step-selected .e-step:active {
59890
+ background: $step-error-completed-bg-color;
60000
59891
  }
60001
59892
  }
60002
59893
 
60003
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
60004
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
60005
- color: $step-hover-not-text-color;
59894
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59895
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59896
+ background: $step-hover-color;
60006
59897
  }
60007
59898
 
60008
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
60009
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
60010
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
60011
- background: $step-selected-active-color !important; /* stylelint-disable-line declaration-no-important */
60012
- }
60013
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
60014
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
60015
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59899
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
59900
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
59901
+ background: $step-active-color;
59902
+ }
59903
+
59904
+ &:not(.e-step-type-label) {
59905
+ .e-step-valid .e-indicator:hover,
59906
+ .e-step-valid .e-step:hover {
59907
+ color: $step-hover-text-color;
59908
+ background: $step-valid-completed-bg-color;
60016
59909
  }
60017
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
60018
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
60019
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
59910
+ .e-step-error .e-indicator:hover,
59911
+ .e-step-error .e-step:hover {
59912
+ color: $step-hover-text-color;
59913
+ background: $step-error-completed-bg-color;
60020
59914
  }
60021
59915
  }
60022
59916
  }
@@ -82906,7 +82800,7 @@ margin: $grid-group-animator-cell-margin;
82906
82800
  text-align: left;
82907
82801
  }
82908
82802
 
82909
- &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
82803
+ &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
82910
82804
  border-width: $grid-headercell-both-border-width;
82911
82805
  }
82912
82806
 
@@ -82932,7 +82826,7 @@ margin: $grid-group-animator-cell-margin;
82932
82826
  border-right-width: 1px;
82933
82827
  }
82934
82828
 
82935
- &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
82829
+ &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
82936
82830
  border-width: $grid-rtl-headercell-both-border-width;
82937
82831
  }
82938
82832
 
@@ -84817,6 +84711,14 @@ margin: $grid-group-animator-cell-margin;
84817
84711
  border-top: 1px solid $grid-header-border-color;
84818
84712
  }
84819
84713
 
84714
+ .e-gridcontent table tbody tr:first-child .e-normaledit .e-dragindentcell {
84715
+ border-top: 0 solid $grid-header-border-color;
84716
+ }
84717
+
84718
+ .e-detailrow .e-grid.e-default .e-normaledit .e-lastrowcell {
84719
+ border-bottom: 0;
84720
+ }
84721
+
84820
84722
  .e-ccdlg {
84821
84723
  .e-footer-content {
84822
84724
  border-color: $grid-columnchooser-footer-border-color;
@@ -89507,7 +89409,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
89507
89409
 
89508
89410
  //Focus state for Normal and Outline GroupButton
89509
89411
  .e-btn:focus,
89510
- input:focus+label.e-btn {
89412
+ input:focus-visible+label.e-btn {
89511
89413
  @include button-focus;
89512
89414
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
89513
89415
  box-shadow: none;