@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
@@ -58023,12 +58023,11 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58023
58023
  .e-stepper {
58024
58024
  position: relative;
58025
58025
  &.e-stepper-readonly,
58026
- .e-stepper-steps .e-step-container.e-step-disabled {
58026
+ .e-step-disabled {
58027
58027
  cursor: default;
58028
58028
  pointer-events: none;
58029
58029
  }
58030
-
58031
- &.e-step-type-indicator .e-stepper-steps .e-step-container {
58030
+ &.e-step-type-indicator .e-step-container {
58032
58031
  &:not(.e-step-icon.e-step-label.e-step-text) {
58033
58032
  .e-icons.e-step-indicator {
58034
58033
  font-size: $stepper-step-width;
@@ -58041,12 +58040,12 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58041
58040
  }
58042
58041
 
58043
58042
  //For Blazor Stepper Tooltip
58044
- .e-stepper-steps .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
58045
- &.e-vertical.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
58046
- &.e-vertical.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58043
+ .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
58044
+ &.e-vertical.e-label-after .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
58045
+ &.e-vertical.e-label-before .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58047
58046
  position: relative;
58048
58047
  }
58049
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58048
+ &.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58050
58049
  position: unset;
58051
58050
  }
58052
58051
  .e-tooltip-wrap.e-stepper-tooltip {
@@ -58071,15 +58070,14 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58071
58070
  top: -6px;
58072
58071
  }
58073
58072
  }
58074
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
58073
+ .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
58075
58074
  left: unset;
58076
58075
  top: 0;
58077
58076
  transform: translate(0%, -135%);
58078
58077
  }
58079
- &.e-step-type-indicator .e-stepper-steps .e-step-container .e-tooltip-wrap.e-stepper-tooltip {
58078
+ &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
58080
58079
  transform: translate(-50%, -115%);
58081
58080
  }
58082
-
58083
58081
  .e-stepper-steps {
58084
58082
  display: flex;
58085
58083
  padding: 0;
@@ -58087,124 +58085,170 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58087
58085
  justify-content: space-between;
58088
58086
  position: relative;
58089
58087
  align-items: flex-start;
58090
- .e-step-container {
58091
- max-width: var(--max-width);
58092
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
58093
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator {
58094
- border: $step-border;
58095
- }
58096
- .e-step-label-container,
58097
- .e-step-text-container {
58098
- max-width: clamp(100%, 10em, 100%);
58099
- white-space: nowrap;
58100
- }
58101
- .e-step-label-optional {
58102
- font-size: $stepper-optional-size;
58103
- flex-basis: 100%;
58104
- }
58105
- .e-step-optional-container {
58106
- display: flex;
58107
- flex-direction: column;
58088
+ .e-step-container,
58089
+ .e-step,
58090
+ .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
58091
+ .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
58092
+ .e-step-label-container {
58093
+ display: flex;
58094
+ align-items: center;
58095
+ justify-content: center;
58096
+ }
58097
+ }
58098
+ .e-step-container {
58099
+ max-width: var(--max-width);
58100
+ list-style-type: none;
58101
+ cursor: pointer;
58102
+ text-align: center;
58103
+ .e-step-label-container,
58104
+ .e-step-text-container {
58105
+ max-width: clamp(100%, 10em, 100%);
58106
+ white-space: nowrap;
58107
+ }
58108
+ .e-step-label-optional {
58109
+ font-size: $stepper-optional-size;
58110
+ flex-basis: 100%;
58111
+ }
58112
+ .e-step-optional-container {
58113
+ display: flex;
58114
+ flex-direction: column;
58115
+ }
58116
+ .e-step-content {
58117
+ font-size: $stepper-icon-size;
58118
+ line-height: 0;
58119
+ }
58120
+ .e-indicator {
58121
+ font-size: $stepper-icon-size;
58122
+ }
58123
+ &:not(.e-step-text-only) > .e-step-text-container {
58124
+ padding: $stepper-icon-text-padding;
58125
+ }
58126
+ &.e-step-text-only .e-step-text-container,
58127
+ &.e-step-label-only .e-step-label-container {
58128
+ padding: $stepper-text-padding;
58129
+ padding-block: 5px;
58130
+ }
58131
+ &.e-step-text-only.e-step-error .e-step-text-container,
58132
+ &.e-step-text-only.e-step-valid .e-step-text-container,
58133
+ &.e-step-label-only.e-step-error .e-step-label-container,
58134
+ &.e-step-label-only.e-step-valid .e-step-label-container {
58135
+ flex-direction: column;
58136
+ .e-step-validation-icon {
58137
+ position: relative;
58138
+ top: $stepper-validation-position;
58108
58139
  }
58109
58140
  }
58141
+ .e-step-label-container,
58142
+ .e-step-text-container {
58143
+ font-size: $stepper-text-size;
58144
+ }
58145
+ .e-step,
58146
+ .e-indicator {
58147
+ border-radius: $stepper-step-radius;
58148
+ min-width: $stepper-step-width;
58149
+ min-height: $stepper-step-width;
58150
+ }
58151
+ }
58152
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
58153
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator {
58154
+ border: $step-border;
58110
58155
  }
58111
-
58112
58156
  &.e-horizontal {
58113
58157
  display: block;
58114
58158
  .e-stepper-steps {
58115
58159
  flex-direction: row;
58116
58160
  }
58117
-
58118
58161
  &.e-label-before,
58119
58162
  &.e-label-after {
58120
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
58163
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
58121
58164
  margin-left: var(--progress-left-position);
58122
58165
  top: var(--progress-top-position);
58123
58166
  width: var(--progress-bar-width);
58124
58167
  }
58125
58168
  }
58126
-
58127
58169
  &.e-label-before.e-rtl,
58128
58170
  &.e-label-after.e-rtl {
58129
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
58171
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
58130
58172
  margin-right: var(--progress-left-position);
58131
58173
  margin-left: unset;
58132
58174
  }
58133
58175
  }
58134
- }
58135
-
58136
- &.e-horizontal .e-stepper-steps .e-step-container {
58137
- &.e-step-icon.e-step-label {
58176
+ .e-step-icon.e-step-label {
58138
58177
  gap: 1em;
58178
+ flex-direction: column;
58139
58179
  }
58140
-
58141
- &.e-step-icon.e-step-label .e-step-label-container {
58180
+ .e-step-icon.e-step-label .e-step-label-container {
58142
58181
  position: relative;
58143
58182
  &.e-label-before {
58144
58183
  order: -1;
58145
58184
  }
58146
58185
  }
58147
-
58148
- &.e-step-text.e-step-label,
58149
- &.e-step-icon.e-step-label {
58150
- flex-direction: column;
58186
+ &.e-label-start .e-step-text-container {
58187
+ order: $stepper-label-order;
58151
58188
  }
58152
- }
58153
-
58154
- &.e-horizontal.e-label-start .e-stepper-steps .e-step-container .e-step-text-container {
58155
- order: $stepper-label-order;
58156
- }
58157
-
58158
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58159
- position: absolute;
58160
- top: 2.5em;
58161
- margin-left: 2.5em;
58162
- }
58163
-
58164
- &.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,
58165
- &.e-horizontal.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58166
- margin-right: 2.5em;
58167
- margin-left: unset;
58168
- }
58169
-
58170
- &.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 {
58171
- margin-right: unset;
58172
- margin-left: 2.5em;
58173
- }
58174
-
58175
- &.e-horizontal.e-label-before .e-stepper-steps {
58176
- &:has(.e-step-label-optional) {
58177
- align-items: flex-end;
58189
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58190
+ position: absolute;
58191
+ top: 2.5em;
58192
+ margin-left: 2.5em;
58178
58193
  }
58179
- .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
58180
- flex-direction: column;
58181
- gap: .5em;
58194
+ &.e-label-start .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
58195
+ &.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58196
+ margin-right: 2.5em;
58197
+ margin-left: unset;
58198
+ }
58199
+ &.e-label-start.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58200
+ margin-right: unset;
58201
+ margin-left: 2.5em;
58202
+ }
58203
+ &.e-label-before .e-stepper-steps {
58204
+ &:has(.e-step-label-optional) {
58205
+ align-items: flex-end;
58206
+ }
58207
+ .e-step-label-container.e-label-before:has(.e-step-label-optional) {
58208
+ flex-direction: column;
58209
+ gap: .5em;
58210
+ }
58211
+ }
58212
+ .e-text,
58213
+ .e-label,
58214
+ .e-step-label-optional {
58215
+ text-overflow: ellipsis;
58216
+ overflow: hidden;
58217
+ }
58218
+ .e-step-text.e-step-text-only:has(.e-step-label-optional),
58219
+ .e-step-label.e-step-label-only:has(.e-step-label-optional),
58220
+ .e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
58221
+ .e-step-label-container.e-label-after:has(.e-step-label-optional) {
58222
+ flex-wrap: wrap;
58223
+ }
58224
+ &.e-step-type-indicator .e-step-container {
58225
+ flex-wrap: wrap;
58226
+ }
58227
+ .e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
58228
+ margin-top: .5em;
58229
+ }
58230
+ &.e-label-after .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
58231
+ margin-top: .2em;
58182
58232
  }
58183
58233
  }
58184
-
58185
58234
  &.e-vertical {
58186
58235
  min-height: inherit;
58187
58236
  display: inline-block;
58188
-
58189
- .e-stepper-steps .e-step-container.e-step-label.e-step-label-only,
58190
- .e-stepper-steps .e-step-container.e-step-template {
58237
+ .e-step-label.e-step-label-only,
58238
+ .e-step-template {
58191
58239
  position: relative;
58192
58240
  }
58193
-
58194
- &:not(.e-label-top):not(.e-label-bottom) .e-stepper-steps .e-step-container .e-step-label-optional {
58241
+ &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
58195
58242
  position: absolute;
58196
58243
  }
58197
-
58198
- &: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 {
58244
+ &:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58199
58245
  margin-top: $stepper-label-optional;
58200
58246
  margin-left: 4em;
58201
58247
  }
58202
-
58203
- &.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 {
58248
+ &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
58204
58249
  margin-left: unset;
58205
58250
  margin-right: 4em;
58206
58251
  }
58207
-
58208
58252
  .e-stepper-steps {
58209
58253
  flex-direction: column;
58210
58254
  min-height: inherit;
@@ -58213,49 +58257,42 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58213
58257
  margin: $stepper-ol-padding;
58214
58258
  justify-content: space-between;
58215
58259
  }
58216
-
58217
58260
  &.e-rtl .e-stepper-steps {
58218
58261
  float: right;
58219
58262
  }
58220
-
58221
- .e-stepper-steps:has(.e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label)),
58222
- .e-stepper-steps:has(.e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label)),
58223
- .e-stepper-steps:has(.e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-text)),
58224
- &.e-label-after .e-stepper-steps:has(.e-step-container.e-step-label.e-step-text:not(.e-step-icon)),
58263
+ .e-stepper-steps:has(.e-step-icon:not(.e-step-text):not(.e-step-label)),
58264
+ .e-stepper-steps:has(.e-step-text.e-step-text-only),
58265
+ .e-stepper-steps:has(.e-step-label.e-step-label-only),
58266
+ &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-icon)),
58225
58267
  &.e-step-type-indicator .e-stepper-steps {
58226
58268
  align-items: center;
58227
58269
  }
58228
-
58229
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
58230
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
58270
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
58271
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
58231
58272
  margin-left: $stepper-text-postion;
58232
58273
  }
58233
-
58234
58274
  &.e-rtl {
58235
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
58236
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
58275
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
58276
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
58237
58277
  margin-left: unset;
58238
58278
  margin-right: $stepper-text-postion;
58239
58279
  }
58240
58280
  }
58241
-
58242
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
58243
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional),
58244
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-text:has(.e-step-label-optional),
58245
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-label:has(.e-step-label-optional) {
58281
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
58282
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
58283
+ .e-step-text-only.e-step-text:has(.e-step-label-optional),
58284
+ .e-step-label-only.e-step-label:has(.e-step-label-optional) {
58246
58285
  flex-direction: column;
58247
58286
  .e-step-label-optional {
58248
58287
  position: unset;
58249
58288
  }
58250
58289
  }
58251
-
58252
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
58253
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
58290
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
58291
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
58254
58292
  gap: .5em;
58255
58293
  }
58256
-
58257
- &.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label,
58258
- &.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label {
58294
+ &.e-label-before .e-step-icon.e-step-label,
58295
+ &.e-label-after .e-step-icon.e-step-label {
58259
58296
  .e-step-label-container.e-label-after:has(.e-step-label-optional) {
58260
58297
  flex-direction: column;
58261
58298
  .e-label {
@@ -58266,43 +58303,37 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58266
58303
  position: unset;
58267
58304
  }
58268
58305
  }
58269
-
58270
- .e-stepper-steps .e-step-container {
58306
+ .e-step-container {
58271
58307
  &.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after {
58272
58308
  position: absolute;
58273
58309
  .e-step-label-optional {
58274
58310
  left: $stepper-ol-padding;
58275
58311
  }
58276
58312
  }
58277
-
58278
58313
  .e-step-label-container.e-label-after {
58279
58314
  .e-step-label-optional {
58280
58315
  font-size: $stepper-optional-size;
58281
58316
  }
58282
58317
  }
58283
-
58284
58318
  .e-step-label-container.e-label-before .e-label {
58285
58319
  width: var(--label-width);
58286
58320
  }
58287
-
58288
58321
  &:not(.e-step-text-only) .e-step-text-container {
58289
58322
  border: none;
58290
58323
  border-radius: unset;
58291
58324
  padding: $stepper-text-vert-padding;
58292
58325
  }
58293
-
58294
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58295
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58326
+ &.e-step-text-only .e-step-text-container,
58327
+ &.e-step-label-only .e-step-label-container {
58296
58328
  position: unset;
58297
58329
  }
58298
58330
  }
58299
58331
  &.e-label-top {
58300
- .e-stepper-steps .e-step-container .e-step-label-optional {
58332
+ .e-step-label-optional {
58301
58333
  padding-bottom: 6px;
58302
58334
  }
58303
58335
  }
58304
58336
  }
58305
-
58306
58337
  &.e-vertical.e-label-top,
58307
58338
  &.e-vertical.e-label-bottom {
58308
58339
  .e-stepper-steps {
@@ -58310,98 +58341,17 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58310
58341
  .e-step-container {
58311
58342
  flex-direction: column;
58312
58343
  .e-step-text-container {
58313
- margin-left: $stepper-ol-padding !important; /* stylelint-disable-line declaration-no-important */
58344
+ margin-left: $stepper-ol-padding;
58314
58345
  }
58315
58346
  }
58316
58347
  }
58317
58348
  }
58318
-
58319
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container {
58349
+ &.e-vertical.e-label-top .e-step-container {
58320
58350
  .e-step-label-optional,
58321
58351
  .e-step-text-container {
58322
58352
  order: $stepper-label-order;
58323
58353
  }
58324
58354
  }
58325
- .e-stepper-steps {
58326
- .e-step-container,
58327
- .e-step-container .e-step,
58328
- .e-step-container.e-step-valid.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58329
- .e-step-container.e-step-error.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58330
- .e-step-container .e-step-label-container {
58331
- display: flex;
58332
- align-items: center;
58333
- justify-content: center;
58334
- }
58335
- }
58336
-
58337
- &.e-horizontal {
58338
- .e-stepper-steps {
58339
- .e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
58340
- .e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
58341
- .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
58342
- .e-step-container .e-step-label-container.e-label-after:has(.e-step-label-optional) {
58343
- flex-wrap: wrap;
58344
- }
58345
- }
58346
- &.e-step-type-indicator .e-step-container {
58347
- flex-wrap: wrap;
58348
- }
58349
- }
58350
-
58351
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
58352
- margin-top: .5em;
58353
- }
58354
-
58355
- &.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 {
58356
- margin-top: .2em;
58357
- }
58358
-
58359
- .e-stepper-steps .e-step-container {
58360
- list-style-type: none;
58361
- cursor: pointer;
58362
- text-align: center;
58363
-
58364
- .e-step-content {
58365
- font-size: $stepper-icon-size;
58366
- line-height: 0;
58367
- }
58368
-
58369
- .e-indicator {
58370
- font-size: $stepper-icon-size;
58371
- }
58372
-
58373
- &:not(.e-step-text-only) > .e-step-text-container {
58374
- padding: $stepper-icon-text-padding;
58375
- }
58376
-
58377
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58378
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58379
- padding: $stepper-text-padding;
58380
- padding-block: 5px;
58381
- }
58382
-
58383
- &.e-step-text-only.e-step-error:not(.e-step-icon.e-step-label) .e-step-text-container,
58384
- &.e-step-text-only.e-step-valid:not(.e-step-icon.e-step-label) .e-step-text-container,
58385
- &.e-step-label-only.e-step-error:not(.e-step-icon.e-step-text) .e-step-label-container,
58386
- &.e-step-label-only.e-step-valid:not(.e-step-icon.e-step-text) .e-step-label-container {
58387
- flex-direction: column;
58388
- .e-step-validation-icon {
58389
- position: relative;
58390
- top: $stepper-validation-position;
58391
- }
58392
- }
58393
- .e-step-label-container,
58394
- .e-step-text-container {
58395
- font-size: $stepper-text-size;
58396
- }
58397
- .e-step,
58398
- .e-indicator {
58399
- border-radius: $stepper-step-radius;
58400
- min-width: $stepper-step-width;
58401
- min-height: $stepper-step-width;
58402
- }
58403
- }
58404
-
58405
58355
  .e-stepper-progressbar {
58406
58356
  height: $stepper-progress-bar-height;
58407
58357
  position: absolute;
@@ -58416,7 +58366,6 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58416
58366
  transition-delay: var(--delay);
58417
58367
  }
58418
58368
  }
58419
-
58420
58369
  &.e-vertical .e-stepper-progressbar {
58421
58370
  min-height: inherit;
58422
58371
  width: $stepper-progress-bar-height;
@@ -58429,40 +58378,26 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58429
58378
  transition-property: height;
58430
58379
  }
58431
58380
  }
58432
-
58433
58381
  &.e-vertical.e-rtl .e-stepper-progressbar {
58434
58382
  right: var(--progress-position);
58435
58383
  left: unset;
58436
58384
  }
58437
-
58438
- &: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,
58439
- .e-stepper-steps .e-step-container.e-step-focus .e-indicator {
58385
+ &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
58386
+ .e-step-focus .e-indicator {
58440
58387
  z-index: 0;
58441
58388
  }
58442
-
58443
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
58389
+ .e-step-template.e-step-focus {
58444
58390
  outline: $stepper-temp-outline-width;
58445
58391
  }
58446
58392
  }
58447
-
58448
58393
  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
58449
58394
  .e-arrow-tip.e-tip-bottom {
58450
58395
  top: 90% !important; /* stylelint-disable-line declaration-no-important */
58451
58396
  }
58452
58397
  }
58453
-
58454
- .e-stepper.e-horizontal .e-stepper-steps .e-step-container {
58455
- .e-text,
58456
- .e-label,
58457
- .e-step-label-optional {
58458
- text-overflow: ellipsis;
58459
- overflow: hidden;
58460
- }
58461
- }
58462
-
58463
58398
  .e-small.e-stepper,
58464
58399
  .e-small .e-stepper {
58465
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58400
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58466
58401
  .e-icons.e-step-indicator {
58467
58402
  font-size: $stepper-small-step-width;
58468
58403
  }
@@ -58471,39 +58406,33 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58471
58406
  height: $stepper-small-step-width;
58472
58407
  }
58473
58408
  }
58474
-
58475
- .e-stepper-steps .e-step-container {
58409
+ .e-step-container {
58476
58410
  .e-step,
58477
58411
  .e-indicator {
58478
58412
  min-width: $stepper-small-step-width;
58479
58413
  min-height: $stepper-small-step-width;
58480
58414
  }
58481
-
58482
58415
  .e-indicator {
58483
58416
  font-size: $stepper-small-icon-size;
58484
58417
  }
58485
-
58486
58418
  .e-step-text-container,
58487
58419
  .e-step-label-container {
58488
58420
  font-size: $stepper-small-text-size;
58489
58421
  }
58490
-
58491
58422
  .e-step-content {
58492
58423
  font-size: $stepper-small-icon-size;
58493
58424
  }
58494
-
58495
58425
  .e-step-label-optional {
58496
58426
  font-size: $stepper-small-optional-size;
58497
58427
  }
58498
58428
  }
58499
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58429
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58500
58430
  font-size: $stepper-small-optional-size;
58501
58431
  }
58502
58432
  }
58503
-
58504
58433
  .e-bigger.e-stepper,
58505
58434
  .e-bigger .e-stepper {
58506
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58435
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58507
58436
  .e-icons.e-step-indicator {
58508
58437
  font-size: $stepper-bigger-step-width;
58509
58438
  }
@@ -58512,32 +58441,27 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58512
58441
  height: $stepper-bigger-step-width;
58513
58442
  }
58514
58443
  }
58515
-
58516
- .e-stepper-steps .e-step-container {
58444
+ .e-step-container {
58517
58445
  .e-step,
58518
58446
  .e-indicator {
58519
58447
  min-width: $stepper-bigger-step-width;
58520
58448
  min-height: $stepper-bigger-step-width;
58521
58449
  }
58522
-
58523
58450
  .e-indicator {
58524
58451
  font-size: $stepper-bigger-icon-size;
58525
58452
  }
58526
-
58527
58453
  .e-step-text-container,
58528
58454
  .e-step-label-container {
58529
58455
  font-size: $stepper-bigger-text-size;
58530
58456
  }
58531
-
58532
58457
  .e-step-content {
58533
58458
  font-size: $stepper-bigger-icon-size;
58534
58459
  }
58535
-
58536
58460
  .e-step-label-optional {
58537
58461
  font-size: $stepper-bigger-optional-size;
58538
58462
  }
58539
58463
  }
58540
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58464
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58541
58465
  font-size: $stepper-bigger-optional-size;
58542
58466
  }
58543
58467
  }
@@ -58546,7 +58470,7 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58546
58470
  .e-bigger.e-small .e-stepper,
58547
58471
  .e-bigger .e-small.e-stepper,
58548
58472
  .e-small .e-bigger.e-stepper {
58549
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58473
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58550
58474
  .e-icons.e-step-indicator {
58551
58475
  font-size: $stepper-bigger-small-step-width;
58552
58476
  }
@@ -58555,31 +58479,27 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58555
58479
  height: $stepper-bigger-small-step-width;
58556
58480
  }
58557
58481
  }
58558
-
58559
- .e-stepper-steps .e-step-container {
58482
+ .e-step-container {
58560
58483
  .e-step,
58561
58484
  .e-indicator {
58562
58485
  min-width: $stepper-bigger-small-step-width;
58563
58486
  min-height: $stepper-bigger-small-step-width;
58564
58487
  }
58565
-
58566
58488
  .e-indicator {
58567
58489
  font-size: $stepper-bigger-small-icon-size;
58568
58490
  }
58569
-
58570
58491
  .e-step-text-container,
58571
- .e-step-label-container{
58492
+ .e-step-label-container {
58572
58493
  font-size: $stepper-bigger-small-text-size;
58573
58494
  }
58574
58495
  .e-step-content {
58575
58496
  font-size: $stepper-bigger-small-icon-size;
58576
58497
  }
58577
-
58578
58498
  .e-step-label-optional {
58579
58499
  font-size: $stepper-bigger-small-optional-size;
58580
58500
  }
58581
58501
  }
58582
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58502
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58583
58503
  font-size: $stepper-bigger-small-optional-size;
58584
58504
  }
58585
58505
  }
@@ -58588,229 +58508,203 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
58588
58508
 
58589
58509
  @include export-module('stepper-theme') {
58590
58510
  .e-stepper {
58591
- .e-stepper-steps {
58592
- .e-step-container {
58593
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
58594
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator,
58595
- &.e-step-notstarted .e-icons.e-step-indicator {
58596
- border-color: $step-border-color;
58597
- }
58598
-
58599
- .e-step-label-optional {
58600
- color: $step-optional-color;
58601
- }
58602
-
58603
- .e-step,
58604
- .e-indicator {
58605
- color: $step-color;
58606
- background: $step-bg-color;
58607
- }
58608
-
58609
- .e-step-indicator {
58610
- color: transparent;
58611
- }
58612
-
58613
- &.e-step-completed .e-step,
58614
- &.e-step-inprogress .e-step,
58615
- &.e-step-completed .e-indicator,
58616
- &.e-step-inprogress .e-indicator,
58617
- &.e-step-completed .e-step-indicator,
58618
- &.e-step-inprogress .e-step-indicator {
58619
- background: $step-completed-bg-color;
58620
- color: $step-completed-color;
58621
- }
58622
-
58623
- &.e-step-valid {
58624
- .e-indicator {
58625
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58626
- color: $step-valid-completed-color;
58627
- }
58628
- }
58629
-
58630
- &.e-step-error {
58631
- .e-indicator {
58632
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58633
- color: $step-error-icon-color;
58634
- }
58635
-
58636
- .e-text,
58637
- .e-label {
58638
- color: $step-error-completed-color;
58639
- }
58640
- }
58641
-
58642
- &.e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
58643
- &.e-step-error .e-indicator:hover {
58644
- color: $step-color;
58645
- }
58646
-
58647
- &.e-step-selected {
58648
- .e-text,
58649
- .e-label {
58650
- font-weight: $stepper-font-weight;
58651
- }
58652
- }
58653
-
58654
- &.e-step-valid.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58655
- &.e-step-valid.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58656
- .e-step-validation-icon {
58657
- color: $step-valid-icon-only-color;
58658
- }
58659
- }
58660
-
58661
- &.e-step-error.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58662
- &.e-step-error.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58663
- .e-step-validation-icon {
58664
- color: $step-error-icon-only-color;
58665
- }
58666
- }
58667
-
58668
- .e-text,
58669
- .e-label {
58670
- color: $stepper-text-color;
58671
- }
58672
-
58673
- &.e-step-selected:not(.e-step-error),
58674
- &.e-step-completed:not(.e-step-error) {
58675
- .e-text,
58676
- .e-label {
58677
- color: $step-completed-bg-color;
58678
- }
58679
- }
58680
-
58681
- &.e-step-label:not(.e-step-icon) .e-step-label-container {
58682
- background-color: $stepper-outline-color;
58683
- }
58684
-
58685
- .e-step-text-container {
58686
- background-color: $stepper-outline-color;
58687
- border-color: transparent;
58688
- }
58689
-
58690
- &.e-step-selected .e-indicator {
58691
- background: $step-completed-bg-color;
58692
- }
58693
-
58694
- &.e-step-disabled .e-indicator {
58695
- background: $step-disabled-bg-color !important; /* stylelint-disable-line declaration-no-important */
58696
- color: $step-disabled-color !important; /* stylelint-disable-line declaration-no-important */
58697
- }
58698
-
58699
- &.e-step-disabled .e-text,
58700
- &.e-step-disabled .e-label,
58701
- &.e-step-disabled .e-step-validation-icon {
58702
- color: $step-disabled-font-color !important; /* stylelint-disable-line declaration-no-important */
58703
- }
58511
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
58512
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator,
58513
+ .e-step-notstarted .e-icons.e-step-indicator {
58514
+ border-color: $step-border-color;
58515
+ }
58516
+ .e-step-label-optional {
58517
+ color: $step-optional-color;
58518
+ }
58519
+ .e-step,
58520
+ .e-indicator {
58521
+ color: $step-color;
58522
+ background: $step-bg-color;
58523
+ }
58524
+ .e-step-indicator {
58525
+ color: transparent;
58526
+ }
58527
+ .e-step-completed .e-step,
58528
+ .e-step-inprogress .e-step,
58529
+ .e-step-completed .e-indicator,
58530
+ .e-step-inprogress .e-indicator,
58531
+ .e-step-completed .e-step-indicator,
58532
+ .e-step-inprogress .e-step-indicator {
58533
+ background: $step-completed-bg-color;
58534
+ color: $step-completed-color;
58535
+ }
58536
+ .e-step-selected .e-indicator {
58537
+ background: $step-completed-bg-color;
58538
+ }
58539
+ .e-step-valid .e-indicator {
58540
+ background: $step-valid-completed-bg-color;
58541
+ color: $step-valid-completed-color;
58542
+ }
58543
+ .e-step-error {
58544
+ .e-indicator {
58545
+ background: $step-error-completed-bg-color;
58546
+ color: $step-error-icon-color;
58547
+ }
58548
+ .e-text,
58549
+ .e-label {
58550
+ color: $step-error-completed-color;
58704
58551
  }
58705
58552
  }
58706
-
58707
- &.e-vertical .e-stepper-steps .e-step-container.e-step-text-only.e-step-text .e-step-label-optional,
58708
- &.e-vertical .e-stepper-steps .e-step-container.e-step-label-only.e-step-label .e-step-label-optional,
58709
- &.e-vertical .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
58710
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-label-optional,
58711
- &.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-label-optional {
58553
+ .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
58554
+ .e-step-error .e-indicator:hover {
58555
+ color: $step-color;
58556
+ }
58557
+ .e-step-selected {
58558
+ .e-text,
58559
+ .e-label {
58560
+ font-weight: $stepper-font-weight;
58561
+ }
58562
+ }
58563
+ .e-step-valid.e-step-text-only,
58564
+ .e-step-valid.e-step-label-only {
58565
+ .e-step-validation-icon {
58566
+ color: $step-valid-icon-only-color;
58567
+ }
58568
+ }
58569
+ .e-step-error.e-step-text-only,
58570
+ .e-step-error.e-step-label-only {
58571
+ .e-step-validation-icon {
58572
+ color: $step-error-icon-only-color;
58573
+ }
58574
+ }
58575
+ .e-text,
58576
+ .e-label {
58577
+ color: $stepper-text-color;
58578
+ }
58579
+ .e-step-selected:not(.e-step-error),
58580
+ .e-step-completed:not(.e-step-error) {
58581
+ .e-text,
58582
+ .e-label {
58583
+ color: $step-completed-bg-color;
58584
+ }
58585
+ }
58586
+ .e-step-label:not(.e-step-icon) .e-step-label-container {
58587
+ background-color: $stepper-outline-color;
58588
+ }
58589
+ .e-step-text-container {
58590
+ background-color: $stepper-outline-color;
58591
+ border-color: transparent;
58592
+ }
58593
+ .e-step-disabled .e-indicator {
58594
+ background: $step-disabled-bg-color;
58595
+ color: $step-disabled-color;
58596
+ }
58597
+ .e-step-disabled .e-text,
58598
+ .e-step-disabled .e-label,
58599
+ .e-step-disabled .e-step-validation-icon {
58600
+ color: $step-disabled-font-color;
58601
+ }
58602
+ &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
58603
+ &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
58604
+ &.e-vertical .e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
58605
+ &.e-vertical.e-label-top .e-step-label-optional,
58606
+ &.e-vertical.e-label-bottom .e-step-label-optional {
58712
58607
  background-color: $stepper-outline-color;
58713
58608
  }
58714
-
58715
58609
  .e-stepper-progressbar {
58716
58610
  background-color: $step-progress-bg-color;
58717
-
58718
58611
  >.e-progressbar-value {
58719
58612
  background-color: $step-progress-value-bg-color;
58720
58613
  }
58721
58614
  }
58722
-
58723
- &: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 {
58615
+ &:not(.e-steps-focus) .e-step-selected .e-step {
58724
58616
  box-shadow: $step-selected-li-shadow;
58725
58617
  }
58726
-
58727
- .e-stepper-steps .e-step-container.e-step-focus .e-step,
58728
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
58729
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
58730
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
58731
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
58732
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
58733
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
58734
- box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
58618
+ .e-step-focus .e-step,
58619
+ .e-step-label-only.e-step-focus .e-label,
58620
+ .e-step-text-only.e-step-focus .e-text,
58621
+ .e-step-template.e-step-focus,
58622
+ &:not(.e-steps-focus) :focus-visible .e-step,
58623
+ &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
58624
+ &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
58625
+ box-shadow: $step-keyboard-selected-li-shadow;
58735
58626
  }
58736
58627
 
58737
- &: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,
58738
- .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
58739
- .e-stepper-steps .e-step-container.e-step-valid.e-step-label-only.e-step-focus .e-label,
58740
- .e-stepper-steps .e-step-container.e-step-valid.e-step-text-only.e-step-focus .e-text,
58741
- .e-stepper-steps .e-step-container.e-step-valid.e-step-template.e-step-focus {
58628
+ &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
58629
+ .e-step-valid.e-step-focus .e-step,
58630
+ .e-step-valid.e-step-label-only.e-step-focus .e-label,
58631
+ .e-step-valid.e-step-text-only.e-step-focus .e-text,
58632
+ .e-step-valid.e-step-template.e-step-focus {
58742
58633
  box-shadow: $step-valid-li-shadow;
58743
58634
  }
58744
58635
 
58745
- &: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,
58746
- .e-stepper-steps .e-step-container.e-step-error.e-step-focus .e-step,
58747
- .e-stepper-steps .e-step-container.e-step-error.e-step-label-only.e-step-focus .e-label,
58748
- .e-stepper-steps .e-step-container.e-step-error.e-step-text-only.e-step-focus .e-text,
58749
- .e-stepper-steps .e-step-container.e-step-error.e-step-template.e-step-focus {
58636
+ &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
58637
+ .e-step-error.e-step-focus .e-step,
58638
+ .e-step-error.e-step-label-only.e-step-focus .e-label,
58639
+ .e-step-error.e-step-text-only.e-step-focus .e-text,
58640
+ .e-step-error.e-step-template.e-step-focus {
58750
58641
  box-shadow: $step-error-li-shadow;
58751
58642
  }
58752
58643
 
58753
- .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,
58754
- .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,
58755
- &.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 {
58644
+ .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
58645
+ .e-step-container:not(.e-step-focus).e-step-completed .e-step,
58646
+ &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
58756
58647
  box-shadow: $step-li-shadow;
58757
58648
  }
58758
58649
 
58759
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:hover,
58760
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
58761
- border-color: $step-hover-border-color !important; /* stylelint-disable-line declaration-no-important */
58650
+ .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
58651
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
58652
+ border-color: $step-hover-border-color;
58762
58653
  }
58763
58654
 
58764
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:active,
58765
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
58766
- border-color: $step-active-border-color !important; /* stylelint-disable-line declaration-no-important */
58655
+ .e-step-notstarted:not(.e-step-disabled) .e-step:active,
58656
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
58657
+ border-color: $step-active-border-color;
58767
58658
  }
58768
58659
 
58769
- &: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,
58770
- &: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 {
58771
- background: $step-hover-color !important; /* stylelint-disable-line declaration-no-important */
58660
+ &:not(.e-step-type-label) {
58661
+ .e-indicator:hover,
58662
+ .e-step:hover {
58663
+ color: $step-hover-text-color;
58664
+ background: $step-selected-hover-color;
58665
+ }
58772
58666
  }
58773
58667
 
58774
- &: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,
58775
- &: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 {
58776
- background: $step-active-color !important; /* stylelint-disable-line declaration-no-important */
58668
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
58669
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
58670
+ color: $step-hover-not-text-color;
58777
58671
  }
58778
58672
 
58779
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
58780
- &:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58781
- &:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58782
- color: $step-hover-text-color;
58783
- background: $step-selected-hover-color !important; /* stylelint-disable-line declaration-no-important */
58673
+ &:not(.e-step-type-label) {
58674
+ .e-step-selected .e-indicator:active,
58675
+ .e-step-selected .e-step:active {
58676
+ background: $step-selected-active-color;
58784
58677
  }
58785
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58786
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58787
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
58788
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58678
+ .e-step-valid.e-step-selected .e-indicator:active,
58679
+ .e-step-valid.e-step-selected .e-step:active {
58680
+ background: $step-valid-completed-bg-color;
58789
58681
  }
58790
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58791
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58792
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
58793
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58682
+ .e-step-error.e-step-selected .e-indicator:active,
58683
+ .e-step-error.e-step-selected .e-step:active {
58684
+ background: $step-error-completed-bg-color;
58794
58685
  }
58795
58686
  }
58796
58687
 
58797
- &: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,
58798
- &: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 {
58799
- color: $step-hover-not-text-color;
58688
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
58689
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
58690
+ background: $step-hover-color;
58800
58691
  }
58801
58692
 
58802
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
58803
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58804
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58805
- background: $step-selected-active-color !important; /* stylelint-disable-line declaration-no-important */
58806
- }
58807
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58808
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58809
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58693
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
58694
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
58695
+ background: $step-active-color;
58696
+ }
58697
+
58698
+ &:not(.e-step-type-label) {
58699
+ .e-step-valid .e-indicator:hover,
58700
+ .e-step-valid .e-step:hover {
58701
+ color: $step-hover-text-color;
58702
+ background: $step-valid-completed-bg-color;
58810
58703
  }
58811
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58812
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58813
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58704
+ .e-step-error .e-indicator:hover,
58705
+ .e-step-error .e-step:hover {
58706
+ color: $step-hover-text-color;
58707
+ background: $step-error-completed-bg-color;
58814
58708
  }
58815
58709
  }
58816
58710
  }
@@ -81689,7 +81583,7 @@ margin: $grid-group-animator-cell-margin;
81689
81583
  text-align: left;
81690
81584
  }
81691
81585
 
81692
- &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
81586
+ &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
81693
81587
  border-width: $grid-headercell-both-border-width;
81694
81588
  }
81695
81589
 
@@ -81715,7 +81609,7 @@ margin: $grid-group-animator-cell-margin;
81715
81609
  border-right-width: 1px;
81716
81610
  }
81717
81611
 
81718
- &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
81612
+ &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
81719
81613
  border-width: $grid-rtl-headercell-both-border-width;
81720
81614
  }
81721
81615
 
@@ -83600,6 +83494,14 @@ margin: $grid-group-animator-cell-margin;
83600
83494
  border-top: 1px solid $grid-header-border-color;
83601
83495
  }
83602
83496
 
83497
+ .e-gridcontent table tbody tr:first-child .e-normaledit .e-dragindentcell {
83498
+ border-top: 0 solid $grid-header-border-color;
83499
+ }
83500
+
83501
+ .e-detailrow .e-grid.e-default .e-normaledit .e-lastrowcell {
83502
+ border-bottom: 0;
83503
+ }
83504
+
83603
83505
  .e-ccdlg {
83604
83506
  .e-footer-content {
83605
83507
  border-color: $grid-columnchooser-footer-border-color;
@@ -88292,7 +88194,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
88292
88194
 
88293
88195
  //Focus state for Normal and Outline GroupButton
88294
88196
  .e-btn:focus,
88295
- input:focus+label.e-btn {
88197
+ input:focus-visible+label.e-btn {
88296
88198
  @include button-focus;
88297
88199
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
88298
88200
  box-shadow: none;