@syncfusion/blazor-themes 25.1.39 → 25.1.41

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
@@ -57617,12 +57617,11 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57617
57617
  .e-stepper {
57618
57618
  position: relative;
57619
57619
  &.e-stepper-readonly,
57620
- .e-stepper-steps .e-step-container.e-step-disabled {
57620
+ .e-step-disabled {
57621
57621
  cursor: default;
57622
57622
  pointer-events: none;
57623
57623
  }
57624
-
57625
- &.e-step-type-indicator .e-stepper-steps .e-step-container {
57624
+ &.e-step-type-indicator .e-step-container {
57626
57625
  &:not(.e-step-icon.e-step-label.e-step-text) {
57627
57626
  .e-icons.e-step-indicator {
57628
57627
  font-size: $stepper-step-width;
@@ -57635,12 +57634,12 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57635
57634
  }
57636
57635
 
57637
57636
  //For Blazor Stepper Tooltip
57638
- .e-stepper-steps .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
57639
- &.e-vertical.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
57640
- &.e-vertical.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
57637
+ .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
57638
+ &.e-vertical.e-label-after .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
57639
+ &.e-vertical.e-label-before .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
57641
57640
  position: relative;
57642
57641
  }
57643
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
57642
+ &.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
57644
57643
  position: unset;
57645
57644
  }
57646
57645
  .e-tooltip-wrap.e-stepper-tooltip {
@@ -57665,15 +57664,14 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57665
57664
  top: -6px;
57666
57665
  }
57667
57666
  }
57668
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
57667
+ .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
57669
57668
  left: unset;
57670
57669
  top: 0;
57671
57670
  transform: translate(0%, -135%);
57672
57671
  }
57673
- &.e-step-type-indicator .e-stepper-steps .e-step-container .e-tooltip-wrap.e-stepper-tooltip {
57672
+ &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
57674
57673
  transform: translate(-50%, -115%);
57675
57674
  }
57676
-
57677
57675
  .e-stepper-steps {
57678
57676
  display: flex;
57679
57677
  padding: 0;
@@ -57681,124 +57679,170 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57681
57679
  justify-content: space-between;
57682
57680
  position: relative;
57683
57681
  align-items: flex-start;
57684
- .e-step-container {
57685
- max-width: var(--max-width);
57686
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
57687
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator {
57688
- border: $step-border;
57689
- }
57690
- .e-step-label-container,
57691
- .e-step-text-container {
57692
- max-width: clamp(100%, 10em, 100%);
57693
- white-space: nowrap;
57694
- }
57695
- .e-step-label-optional {
57696
- font-size: $stepper-optional-size;
57697
- flex-basis: 100%;
57698
- }
57699
- .e-step-optional-container {
57700
- display: flex;
57701
- flex-direction: column;
57682
+ .e-step-container,
57683
+ .e-step,
57684
+ .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
57685
+ .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
57686
+ .e-step-label-container {
57687
+ display: flex;
57688
+ align-items: center;
57689
+ justify-content: center;
57690
+ }
57691
+ }
57692
+ .e-step-container {
57693
+ max-width: var(--max-width);
57694
+ list-style-type: none;
57695
+ cursor: pointer;
57696
+ text-align: center;
57697
+ .e-step-label-container,
57698
+ .e-step-text-container {
57699
+ max-width: clamp(100%, 10em, 100%);
57700
+ white-space: nowrap;
57701
+ }
57702
+ .e-step-label-optional {
57703
+ font-size: $stepper-optional-size;
57704
+ flex-basis: 100%;
57705
+ }
57706
+ .e-step-optional-container {
57707
+ display: flex;
57708
+ flex-direction: column;
57709
+ }
57710
+ .e-step-content {
57711
+ font-size: $stepper-icon-size;
57712
+ line-height: 0;
57713
+ }
57714
+ .e-indicator {
57715
+ font-size: $stepper-icon-size;
57716
+ }
57717
+ &:not(.e-step-text-only) > .e-step-text-container {
57718
+ padding: $stepper-icon-text-padding;
57719
+ }
57720
+ &.e-step-text-only .e-step-text-container,
57721
+ &.e-step-label-only .e-step-label-container {
57722
+ padding: $stepper-text-padding;
57723
+ padding-block: 5px;
57724
+ }
57725
+ &.e-step-text-only.e-step-error .e-step-text-container,
57726
+ &.e-step-text-only.e-step-valid .e-step-text-container,
57727
+ &.e-step-label-only.e-step-error .e-step-label-container,
57728
+ &.e-step-label-only.e-step-valid .e-step-label-container {
57729
+ flex-direction: column;
57730
+ .e-step-validation-icon {
57731
+ position: relative;
57732
+ top: $stepper-validation-position;
57702
57733
  }
57703
57734
  }
57735
+ .e-step-label-container,
57736
+ .e-step-text-container {
57737
+ font-size: $stepper-text-size;
57738
+ }
57739
+ .e-step,
57740
+ .e-indicator {
57741
+ border-radius: $stepper-step-radius;
57742
+ min-width: $stepper-step-width;
57743
+ min-height: $stepper-step-width;
57744
+ }
57745
+ }
57746
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
57747
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator {
57748
+ border: $step-border;
57704
57749
  }
57705
-
57706
57750
  &.e-horizontal {
57707
57751
  display: block;
57708
57752
  .e-stepper-steps {
57709
57753
  flex-direction: row;
57710
57754
  }
57711
-
57712
57755
  &.e-label-before,
57713
57756
  &.e-label-after {
57714
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
57757
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
57715
57758
  margin-left: var(--progress-left-position);
57716
57759
  top: var(--progress-top-position);
57717
57760
  width: var(--progress-bar-width);
57718
57761
  }
57719
57762
  }
57720
-
57721
57763
  &.e-label-before.e-rtl,
57722
57764
  &.e-label-after.e-rtl {
57723
- &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
57765
+ &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
57724
57766
  margin-right: var(--progress-left-position);
57725
57767
  margin-left: unset;
57726
57768
  }
57727
57769
  }
57728
- }
57729
-
57730
- &.e-horizontal .e-stepper-steps .e-step-container {
57731
- &.e-step-icon.e-step-label {
57770
+ .e-step-icon.e-step-label {
57732
57771
  gap: 1em;
57772
+ flex-direction: column;
57733
57773
  }
57734
-
57735
- &.e-step-icon.e-step-label .e-step-label-container {
57774
+ .e-step-icon.e-step-label .e-step-label-container {
57736
57775
  position: relative;
57737
57776
  &.e-label-before {
57738
57777
  order: -1;
57739
57778
  }
57740
57779
  }
57741
-
57742
- &.e-step-text.e-step-label,
57743
- &.e-step-icon.e-step-label {
57744
- flex-direction: column;
57780
+ &.e-label-start .e-step-text-container {
57781
+ order: $stepper-label-order;
57745
57782
  }
57746
- }
57747
-
57748
- &.e-horizontal.e-label-start .e-stepper-steps .e-step-container .e-step-text-container {
57749
- order: $stepper-label-order;
57750
- }
57751
-
57752
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57753
- position: absolute;
57754
- top: 2.5em;
57755
- margin-left: 2.5em;
57756
- }
57757
-
57758
- &.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,
57759
- &.e-horizontal.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57760
- margin-right: 2.5em;
57761
- margin-left: unset;
57762
- }
57763
-
57764
- &.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 {
57765
- margin-right: unset;
57766
- margin-left: 2.5em;
57767
- }
57768
-
57769
- &.e-horizontal.e-label-before .e-stepper-steps {
57770
- &:has(.e-step-label-optional) {
57771
- align-items: flex-end;
57783
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57784
+ position: absolute;
57785
+ top: 2.5em;
57786
+ margin-left: 2.5em;
57772
57787
  }
57773
- .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
57774
- flex-direction: column;
57775
- gap: .5em;
57788
+ &.e-label-start .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
57789
+ &.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57790
+ margin-right: 2.5em;
57791
+ margin-left: unset;
57792
+ }
57793
+ &.e-label-start.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57794
+ margin-right: unset;
57795
+ margin-left: 2.5em;
57796
+ }
57797
+ &.e-label-before .e-stepper-steps {
57798
+ &:has(.e-step-label-optional) {
57799
+ align-items: flex-end;
57800
+ }
57801
+ .e-step-label-container.e-label-before:has(.e-step-label-optional) {
57802
+ flex-direction: column;
57803
+ gap: .5em;
57804
+ }
57805
+ }
57806
+ .e-text,
57807
+ .e-label,
57808
+ .e-step-label-optional {
57809
+ text-overflow: ellipsis;
57810
+ overflow: hidden;
57811
+ }
57812
+ .e-step-text.e-step-text-only:has(.e-step-label-optional),
57813
+ .e-step-label.e-step-label-only:has(.e-step-label-optional),
57814
+ .e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
57815
+ .e-step-label-container.e-label-after:has(.e-step-label-optional) {
57816
+ flex-wrap: wrap;
57817
+ }
57818
+ &.e-step-type-indicator .e-step-container {
57819
+ flex-wrap: wrap;
57820
+ }
57821
+ .e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
57822
+ margin-top: .5em;
57823
+ }
57824
+ &.e-label-after .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
57825
+ margin-top: .2em;
57776
57826
  }
57777
57827
  }
57778
-
57779
57828
  &.e-vertical {
57780
57829
  min-height: inherit;
57781
57830
  display: inline-block;
57782
-
57783
- .e-stepper-steps .e-step-container.e-step-label.e-step-label-only,
57784
- .e-stepper-steps .e-step-container.e-step-template {
57831
+ .e-step-label.e-step-label-only,
57832
+ .e-step-template {
57785
57833
  position: relative;
57786
57834
  }
57787
-
57788
- &:not(.e-label-top):not(.e-label-bottom) .e-stepper-steps .e-step-container .e-step-label-optional {
57835
+ &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
57789
57836
  position: absolute;
57790
57837
  }
57791
-
57792
- &: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 {
57838
+ &:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57793
57839
  margin-top: $stepper-label-optional;
57794
57840
  margin-left: 4em;
57795
57841
  }
57796
-
57797
- &.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 {
57842
+ &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
57798
57843
  margin-left: unset;
57799
57844
  margin-right: 4em;
57800
57845
  }
57801
-
57802
57846
  .e-stepper-steps {
57803
57847
  flex-direction: column;
57804
57848
  min-height: inherit;
@@ -57807,49 +57851,42 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57807
57851
  margin: $stepper-ol-padding;
57808
57852
  justify-content: space-between;
57809
57853
  }
57810
-
57811
57854
  &.e-rtl .e-stepper-steps {
57812
57855
  float: right;
57813
57856
  }
57814
-
57815
- .e-stepper-steps:has(.e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label)),
57816
- .e-stepper-steps:has(.e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label)),
57817
- .e-stepper-steps:has(.e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-text)),
57818
- &.e-label-after .e-stepper-steps:has(.e-step-container.e-step-label.e-step-text:not(.e-step-icon)),
57857
+ .e-stepper-steps:has(.e-step-icon:not(.e-step-text):not(.e-step-label)),
57858
+ .e-stepper-steps:has(.e-step-text.e-step-text-only),
57859
+ .e-stepper-steps:has(.e-step-label.e-step-label-only),
57860
+ &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-icon)),
57819
57861
  &.e-step-type-indicator .e-stepper-steps {
57820
57862
  align-items: center;
57821
57863
  }
57822
-
57823
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
57824
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
57864
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
57865
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
57825
57866
  margin-left: $stepper-text-postion;
57826
57867
  }
57827
-
57828
57868
  &.e-rtl {
57829
- .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
57830
- .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
57869
+ .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
57870
+ .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
57831
57871
  margin-left: unset;
57832
57872
  margin-right: $stepper-text-postion;
57833
57873
  }
57834
57874
  }
57835
-
57836
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
57837
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional),
57838
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-text:has(.e-step-label-optional),
57839
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-label:has(.e-step-label-optional) {
57875
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
57876
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
57877
+ .e-step-text-only.e-step-text:has(.e-step-label-optional),
57878
+ .e-step-label-only.e-step-label:has(.e-step-label-optional) {
57840
57879
  flex-direction: column;
57841
57880
  .e-step-label-optional {
57842
57881
  position: unset;
57843
57882
  }
57844
57883
  }
57845
-
57846
- .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
57847
- &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
57884
+ .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
57885
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
57848
57886
  gap: .5em;
57849
57887
  }
57850
-
57851
- &.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label,
57852
- &.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label {
57888
+ &.e-label-before .e-step-icon.e-step-label,
57889
+ &.e-label-after .e-step-icon.e-step-label {
57853
57890
  .e-step-label-container.e-label-after:has(.e-step-label-optional) {
57854
57891
  flex-direction: column;
57855
57892
  .e-label {
@@ -57860,43 +57897,37 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57860
57897
  position: unset;
57861
57898
  }
57862
57899
  }
57863
-
57864
- .e-stepper-steps .e-step-container {
57900
+ .e-step-container {
57865
57901
  &.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after {
57866
57902
  position: absolute;
57867
57903
  .e-step-label-optional {
57868
57904
  left: $stepper-ol-padding;
57869
57905
  }
57870
57906
  }
57871
-
57872
57907
  .e-step-label-container.e-label-after {
57873
57908
  .e-step-label-optional {
57874
57909
  font-size: $stepper-optional-size;
57875
57910
  }
57876
57911
  }
57877
-
57878
57912
  .e-step-label-container.e-label-before .e-label {
57879
57913
  width: var(--label-width);
57880
57914
  }
57881
-
57882
57915
  &:not(.e-step-text-only) .e-step-text-container {
57883
57916
  border: none;
57884
57917
  border-radius: unset;
57885
57918
  padding: $stepper-text-vert-padding;
57886
57919
  }
57887
-
57888
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
57889
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
57920
+ &.e-step-text-only .e-step-text-container,
57921
+ &.e-step-label-only .e-step-label-container {
57890
57922
  position: unset;
57891
57923
  }
57892
57924
  }
57893
57925
  &.e-label-top {
57894
- .e-stepper-steps .e-step-container .e-step-label-optional {
57926
+ .e-step-label-optional {
57895
57927
  padding-bottom: 6px;
57896
57928
  }
57897
57929
  }
57898
57930
  }
57899
-
57900
57931
  &.e-vertical.e-label-top,
57901
57932
  &.e-vertical.e-label-bottom {
57902
57933
  .e-stepper-steps {
@@ -57904,98 +57935,17 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
57904
57935
  .e-step-container {
57905
57936
  flex-direction: column;
57906
57937
  .e-step-text-container {
57907
- margin-left: $stepper-ol-padding !important; /* stylelint-disable-line declaration-no-important */
57938
+ margin-left: $stepper-ol-padding;
57908
57939
  }
57909
57940
  }
57910
57941
  }
57911
57942
  }
57912
-
57913
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container {
57943
+ &.e-vertical.e-label-top .e-step-container {
57914
57944
  .e-step-label-optional,
57915
57945
  .e-step-text-container {
57916
57946
  order: $stepper-label-order;
57917
57947
  }
57918
57948
  }
57919
- .e-stepper-steps {
57920
- .e-step-container,
57921
- .e-step-container .e-step,
57922
- .e-step-container.e-step-valid.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
57923
- .e-step-container.e-step-error.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
57924
- .e-step-container .e-step-label-container {
57925
- display: flex;
57926
- align-items: center;
57927
- justify-content: center;
57928
- }
57929
- }
57930
-
57931
- &.e-horizontal {
57932
- .e-stepper-steps {
57933
- .e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
57934
- .e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
57935
- .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
57936
- .e-step-container .e-step-label-container.e-label-after:has(.e-step-label-optional) {
57937
- flex-wrap: wrap;
57938
- }
57939
- }
57940
- &.e-step-type-indicator .e-step-container {
57941
- flex-wrap: wrap;
57942
- }
57943
- }
57944
-
57945
- &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
57946
- margin-top: .5em;
57947
- }
57948
-
57949
- &.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 {
57950
- margin-top: .2em;
57951
- }
57952
-
57953
- .e-stepper-steps .e-step-container {
57954
- list-style-type: none;
57955
- cursor: pointer;
57956
- text-align: center;
57957
-
57958
- .e-step-content {
57959
- font-size: $stepper-icon-size;
57960
- line-height: 0;
57961
- }
57962
-
57963
- .e-indicator {
57964
- font-size: $stepper-icon-size;
57965
- }
57966
-
57967
- &:not(.e-step-text-only) > .e-step-text-container {
57968
- padding: $stepper-icon-text-padding;
57969
- }
57970
-
57971
- &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
57972
- &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
57973
- padding: $stepper-text-padding;
57974
- padding-block: 5px;
57975
- }
57976
-
57977
- &.e-step-text-only.e-step-error:not(.e-step-icon.e-step-label) .e-step-text-container,
57978
- &.e-step-text-only.e-step-valid:not(.e-step-icon.e-step-label) .e-step-text-container,
57979
- &.e-step-label-only.e-step-error:not(.e-step-icon.e-step-text) .e-step-label-container,
57980
- &.e-step-label-only.e-step-valid:not(.e-step-icon.e-step-text) .e-step-label-container {
57981
- flex-direction: column;
57982
- .e-step-validation-icon {
57983
- position: relative;
57984
- top: $stepper-validation-position;
57985
- }
57986
- }
57987
- .e-step-label-container,
57988
- .e-step-text-container {
57989
- font-size: $stepper-text-size;
57990
- }
57991
- .e-step,
57992
- .e-indicator {
57993
- border-radius: $stepper-step-radius;
57994
- min-width: $stepper-step-width;
57995
- min-height: $stepper-step-width;
57996
- }
57997
- }
57998
-
57999
57949
  .e-stepper-progressbar {
58000
57950
  height: $stepper-progress-bar-height;
58001
57951
  position: absolute;
@@ -58010,7 +57960,6 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58010
57960
  transition-delay: var(--delay);
58011
57961
  }
58012
57962
  }
58013
-
58014
57963
  &.e-vertical .e-stepper-progressbar {
58015
57964
  min-height: inherit;
58016
57965
  width: $stepper-progress-bar-height;
@@ -58023,40 +57972,26 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58023
57972
  transition-property: height;
58024
57973
  }
58025
57974
  }
58026
-
58027
57975
  &.e-vertical.e-rtl .e-stepper-progressbar {
58028
57976
  right: var(--progress-position);
58029
57977
  left: unset;
58030
57978
  }
58031
-
58032
- &: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,
58033
- .e-stepper-steps .e-step-container.e-step-focus .e-indicator {
57979
+ &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
57980
+ .e-step-focus .e-indicator {
58034
57981
  z-index: 0;
58035
57982
  }
58036
-
58037
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
57983
+ .e-step-template.e-step-focus {
58038
57984
  outline: $stepper-temp-outline-width;
58039
57985
  }
58040
57986
  }
58041
-
58042
57987
  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
58043
57988
  .e-arrow-tip.e-tip-bottom {
58044
57989
  top: 90% !important; /* stylelint-disable-line declaration-no-important */
58045
57990
  }
58046
57991
  }
58047
-
58048
- .e-stepper.e-horizontal .e-stepper-steps .e-step-container {
58049
- .e-text,
58050
- .e-label,
58051
- .e-step-label-optional {
58052
- text-overflow: ellipsis;
58053
- overflow: hidden;
58054
- }
58055
- }
58056
-
58057
57992
  .e-small.e-stepper,
58058
57993
  .e-small .e-stepper {
58059
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
57994
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58060
57995
  .e-icons.e-step-indicator {
58061
57996
  font-size: $stepper-small-step-width;
58062
57997
  }
@@ -58065,39 +58000,33 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58065
58000
  height: $stepper-small-step-width;
58066
58001
  }
58067
58002
  }
58068
-
58069
- .e-stepper-steps .e-step-container {
58003
+ .e-step-container {
58070
58004
  .e-step,
58071
58005
  .e-indicator {
58072
58006
  min-width: $stepper-small-step-width;
58073
58007
  min-height: $stepper-small-step-width;
58074
58008
  }
58075
-
58076
58009
  .e-indicator {
58077
58010
  font-size: $stepper-small-icon-size;
58078
58011
  }
58079
-
58080
58012
  .e-step-text-container,
58081
58013
  .e-step-label-container {
58082
58014
  font-size: $stepper-small-text-size;
58083
58015
  }
58084
-
58085
58016
  .e-step-content {
58086
58017
  font-size: $stepper-small-icon-size;
58087
58018
  }
58088
-
58089
58019
  .e-step-label-optional {
58090
58020
  font-size: $stepper-small-optional-size;
58091
58021
  }
58092
58022
  }
58093
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58023
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58094
58024
  font-size: $stepper-small-optional-size;
58095
58025
  }
58096
58026
  }
58097
-
58098
58027
  .e-bigger.e-stepper,
58099
58028
  .e-bigger .e-stepper {
58100
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58029
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58101
58030
  .e-icons.e-step-indicator {
58102
58031
  font-size: $stepper-bigger-step-width;
58103
58032
  }
@@ -58106,32 +58035,27 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58106
58035
  height: $stepper-bigger-step-width;
58107
58036
  }
58108
58037
  }
58109
-
58110
- .e-stepper-steps .e-step-container {
58038
+ .e-step-container {
58111
58039
  .e-step,
58112
58040
  .e-indicator {
58113
58041
  min-width: $stepper-bigger-step-width;
58114
58042
  min-height: $stepper-bigger-step-width;
58115
58043
  }
58116
-
58117
58044
  .e-indicator {
58118
58045
  font-size: $stepper-bigger-icon-size;
58119
58046
  }
58120
-
58121
58047
  .e-step-text-container,
58122
58048
  .e-step-label-container {
58123
58049
  font-size: $stepper-bigger-text-size;
58124
58050
  }
58125
-
58126
58051
  .e-step-content {
58127
58052
  font-size: $stepper-bigger-icon-size;
58128
58053
  }
58129
-
58130
58054
  .e-step-label-optional {
58131
58055
  font-size: $stepper-bigger-optional-size;
58132
58056
  }
58133
58057
  }
58134
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58058
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58135
58059
  font-size: $stepper-bigger-optional-size;
58136
58060
  }
58137
58061
  }
@@ -58140,7 +58064,7 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58140
58064
  .e-bigger.e-small .e-stepper,
58141
58065
  .e-bigger .e-small.e-stepper,
58142
58066
  .e-small .e-bigger.e-stepper {
58143
- &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58067
+ &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
58144
58068
  .e-icons.e-step-indicator {
58145
58069
  font-size: $stepper-bigger-small-step-width;
58146
58070
  }
@@ -58149,31 +58073,27 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58149
58073
  height: $stepper-bigger-small-step-width;
58150
58074
  }
58151
58075
  }
58152
-
58153
- .e-stepper-steps .e-step-container {
58076
+ .e-step-container {
58154
58077
  .e-step,
58155
58078
  .e-indicator {
58156
58079
  min-width: $stepper-bigger-small-step-width;
58157
58080
  min-height: $stepper-bigger-small-step-width;
58158
58081
  }
58159
-
58160
58082
  .e-indicator {
58161
58083
  font-size: $stepper-bigger-small-icon-size;
58162
58084
  }
58163
-
58164
58085
  .e-step-text-container,
58165
- .e-step-label-container{
58086
+ .e-step-label-container {
58166
58087
  font-size: $stepper-bigger-small-text-size;
58167
58088
  }
58168
58089
  .e-step-content {
58169
58090
  font-size: $stepper-bigger-small-icon-size;
58170
58091
  }
58171
-
58172
58092
  .e-step-label-optional {
58173
58093
  font-size: $stepper-bigger-small-optional-size;
58174
58094
  }
58175
58095
  }
58176
- &.e-vertical .e-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
58096
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58177
58097
  font-size: $stepper-bigger-small-optional-size;
58178
58098
  }
58179
58099
  }
@@ -58182,229 +58102,203 @@ $step-selected-active-color: $brand-primary-darken-15 !default;
58182
58102
 
58183
58103
  @include export-module('stepper-theme') {
58184
58104
  .e-stepper {
58185
- .e-stepper-steps {
58186
- .e-step-container {
58187
- &.e-step-notstarted:not(.e-step-disabled) .e-step,
58188
- &.e-step-notstarted:not(.e-step-disabled) .e-indicator,
58189
- &.e-step-notstarted .e-icons.e-step-indicator {
58190
- border-color: $step-border-color;
58191
- }
58192
-
58193
- .e-step-label-optional {
58194
- color: $step-optional-color;
58195
- }
58196
-
58197
- .e-step,
58198
- .e-indicator {
58199
- color: $step-color;
58200
- background: $step-bg-color;
58201
- }
58202
-
58203
- .e-step-indicator {
58204
- color: transparent;
58205
- }
58206
-
58207
- &.e-step-completed .e-step,
58208
- &.e-step-inprogress .e-step,
58209
- &.e-step-completed .e-indicator,
58210
- &.e-step-inprogress .e-indicator,
58211
- &.e-step-completed .e-step-indicator,
58212
- &.e-step-inprogress .e-step-indicator {
58213
- background: $step-completed-bg-color;
58214
- color: $step-completed-color;
58215
- }
58216
-
58217
- &.e-step-valid {
58218
- .e-indicator {
58219
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58220
- color: $step-valid-completed-color;
58221
- }
58222
- }
58223
-
58224
- &.e-step-error {
58225
- .e-indicator {
58226
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58227
- color: $step-error-icon-color;
58228
- }
58229
-
58230
- .e-text,
58231
- .e-label {
58232
- color: $step-error-completed-color;
58233
- }
58234
- }
58235
-
58236
- &.e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
58237
- &.e-step-error .e-indicator:hover {
58238
- color: $step-color;
58239
- }
58240
-
58241
- &.e-step-selected {
58242
- .e-text,
58243
- .e-label {
58244
- font-weight: $stepper-font-weight;
58245
- }
58246
- }
58247
-
58248
- &.e-step-valid.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58249
- &.e-step-valid.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58250
- .e-step-validation-icon {
58251
- color: $step-valid-icon-only-color;
58252
- }
58253
- }
58254
-
58255
- &.e-step-error.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
58256
- &.e-step-error.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
58257
- .e-step-validation-icon {
58258
- color: $step-error-icon-only-color;
58259
- }
58260
- }
58261
-
58262
- .e-text,
58263
- .e-label {
58264
- color: $stepper-text-color;
58265
- }
58266
-
58267
- &.e-step-selected:not(.e-step-error),
58268
- &.e-step-completed:not(.e-step-error) {
58269
- .e-text,
58270
- .e-label {
58271
- color: $step-completed-bg-color;
58272
- }
58273
- }
58274
-
58275
- &.e-step-label:not(.e-step-icon) .e-step-label-container {
58276
- background-color: $stepper-outline-color;
58277
- }
58278
-
58279
- .e-step-text-container {
58280
- background-color: $stepper-outline-color;
58281
- border-color: transparent;
58282
- }
58283
-
58284
- &.e-step-selected .e-indicator {
58285
- background: $step-completed-bg-color;
58286
- }
58287
-
58288
- &.e-step-disabled .e-indicator {
58289
- background: $step-disabled-bg-color !important; /* stylelint-disable-line declaration-no-important */
58290
- color: $step-disabled-color !important; /* stylelint-disable-line declaration-no-important */
58291
- }
58292
-
58293
- &.e-step-disabled .e-text,
58294
- &.e-step-disabled .e-label,
58295
- &.e-step-disabled .e-step-validation-icon {
58296
- color: $step-disabled-font-color !important; /* stylelint-disable-line declaration-no-important */
58297
- }
58105
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
58106
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator,
58107
+ .e-step-notstarted .e-icons.e-step-indicator {
58108
+ border-color: $step-border-color;
58109
+ }
58110
+ .e-step-label-optional {
58111
+ color: $step-optional-color;
58112
+ }
58113
+ .e-step,
58114
+ .e-indicator {
58115
+ color: $step-color;
58116
+ background: $step-bg-color;
58117
+ }
58118
+ .e-step-indicator {
58119
+ color: transparent;
58120
+ }
58121
+ .e-step-completed .e-step,
58122
+ .e-step-inprogress .e-step,
58123
+ .e-step-completed .e-indicator,
58124
+ .e-step-inprogress .e-indicator,
58125
+ .e-step-completed .e-step-indicator,
58126
+ .e-step-inprogress .e-step-indicator {
58127
+ background: $step-completed-bg-color;
58128
+ color: $step-completed-color;
58129
+ }
58130
+ .e-step-selected .e-indicator {
58131
+ background: $step-completed-bg-color;
58132
+ }
58133
+ .e-step-valid .e-indicator {
58134
+ background: $step-valid-completed-bg-color;
58135
+ color: $step-valid-completed-color;
58136
+ }
58137
+ .e-step-error {
58138
+ .e-indicator {
58139
+ background: $step-error-completed-bg-color;
58140
+ color: $step-error-icon-color;
58141
+ }
58142
+ .e-text,
58143
+ .e-label {
58144
+ color: $step-error-completed-color;
58298
58145
  }
58299
58146
  }
58300
-
58301
- &.e-vertical .e-stepper-steps .e-step-container.e-step-text-only.e-step-text .e-step-label-optional,
58302
- &.e-vertical .e-stepper-steps .e-step-container.e-step-label-only.e-step-label .e-step-label-optional,
58303
- &.e-vertical .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
58304
- &.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-label-optional,
58305
- &.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-label-optional {
58147
+ .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
58148
+ .e-step-error .e-indicator:hover {
58149
+ color: $step-color;
58150
+ }
58151
+ .e-step-selected {
58152
+ .e-text,
58153
+ .e-label {
58154
+ font-weight: $stepper-font-weight;
58155
+ }
58156
+ }
58157
+ .e-step-valid.e-step-text-only,
58158
+ .e-step-valid.e-step-label-only {
58159
+ .e-step-validation-icon {
58160
+ color: $step-valid-icon-only-color;
58161
+ }
58162
+ }
58163
+ .e-step-error.e-step-text-only,
58164
+ .e-step-error.e-step-label-only {
58165
+ .e-step-validation-icon {
58166
+ color: $step-error-icon-only-color;
58167
+ }
58168
+ }
58169
+ .e-text,
58170
+ .e-label {
58171
+ color: $stepper-text-color;
58172
+ }
58173
+ .e-step-selected:not(.e-step-error),
58174
+ .e-step-completed:not(.e-step-error) {
58175
+ .e-text,
58176
+ .e-label {
58177
+ color: $step-completed-bg-color;
58178
+ }
58179
+ }
58180
+ .e-step-label:not(.e-step-icon) .e-step-label-container {
58181
+ background-color: $stepper-outline-color;
58182
+ }
58183
+ .e-step-text-container {
58184
+ background-color: $stepper-outline-color;
58185
+ border-color: transparent;
58186
+ }
58187
+ .e-step-disabled .e-indicator {
58188
+ background: $step-disabled-bg-color;
58189
+ color: $step-disabled-color;
58190
+ }
58191
+ .e-step-disabled .e-text,
58192
+ .e-step-disabled .e-label,
58193
+ .e-step-disabled .e-step-validation-icon {
58194
+ color: $step-disabled-font-color;
58195
+ }
58196
+ &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
58197
+ &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
58198
+ &.e-vertical .e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
58199
+ &.e-vertical.e-label-top .e-step-label-optional,
58200
+ &.e-vertical.e-label-bottom .e-step-label-optional {
58306
58201
  background-color: $stepper-outline-color;
58307
58202
  }
58308
-
58309
58203
  .e-stepper-progressbar {
58310
58204
  background-color: $step-progress-bg-color;
58311
-
58312
58205
  >.e-progressbar-value {
58313
58206
  background-color: $step-progress-value-bg-color;
58314
58207
  }
58315
58208
  }
58316
-
58317
- &: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 {
58209
+ &:not(.e-steps-focus) .e-step-selected .e-step {
58318
58210
  box-shadow: $step-selected-li-shadow;
58319
58211
  }
58320
-
58321
- .e-stepper-steps .e-step-container.e-step-focus .e-step,
58322
- .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
58323
- .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
58324
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
58325
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
58326
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
58327
- &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
58328
- box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
58212
+ .e-step-focus .e-step,
58213
+ .e-step-label-only.e-step-focus .e-label,
58214
+ .e-step-text-only.e-step-focus .e-text,
58215
+ .e-step-template.e-step-focus,
58216
+ &:not(.e-steps-focus) :focus-visible .e-step,
58217
+ &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
58218
+ &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
58219
+ box-shadow: $step-keyboard-selected-li-shadow;
58329
58220
  }
58330
58221
 
58331
- &: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,
58332
- .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
58333
- .e-stepper-steps .e-step-container.e-step-valid.e-step-label-only.e-step-focus .e-label,
58334
- .e-stepper-steps .e-step-container.e-step-valid.e-step-text-only.e-step-focus .e-text,
58335
- .e-stepper-steps .e-step-container.e-step-valid.e-step-template.e-step-focus {
58222
+ &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
58223
+ .e-step-valid.e-step-focus .e-step,
58224
+ .e-step-valid.e-step-label-only.e-step-focus .e-label,
58225
+ .e-step-valid.e-step-text-only.e-step-focus .e-text,
58226
+ .e-step-valid.e-step-template.e-step-focus {
58336
58227
  box-shadow: $step-valid-li-shadow;
58337
58228
  }
58338
58229
 
58339
- &: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,
58340
- .e-stepper-steps .e-step-container.e-step-error.e-step-focus .e-step,
58341
- .e-stepper-steps .e-step-container.e-step-error.e-step-label-only.e-step-focus .e-label,
58342
- .e-stepper-steps .e-step-container.e-step-error.e-step-text-only.e-step-focus .e-text,
58343
- .e-stepper-steps .e-step-container.e-step-error.e-step-template.e-step-focus {
58230
+ &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
58231
+ .e-step-error.e-step-focus .e-step,
58232
+ .e-step-error.e-step-label-only.e-step-focus .e-label,
58233
+ .e-step-error.e-step-text-only.e-step-focus .e-text,
58234
+ .e-step-error.e-step-template.e-step-focus {
58344
58235
  box-shadow: $step-error-li-shadow;
58345
58236
  }
58346
58237
 
58347
- .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,
58348
- .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,
58349
- &.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 {
58238
+ .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
58239
+ .e-step-container:not(.e-step-focus).e-step-completed .e-step,
58240
+ &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
58350
58241
  box-shadow: $step-li-shadow;
58351
58242
  }
58352
58243
 
58353
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:hover,
58354
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
58355
- border-color: $step-hover-border-color !important; /* stylelint-disable-line declaration-no-important */
58244
+ .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
58245
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
58246
+ border-color: $step-hover-border-color;
58356
58247
  }
58357
58248
 
58358
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:active,
58359
- .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
58360
- border-color: $step-active-border-color !important; /* stylelint-disable-line declaration-no-important */
58249
+ .e-step-notstarted:not(.e-step-disabled) .e-step:active,
58250
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
58251
+ border-color: $step-active-border-color;
58361
58252
  }
58362
58253
 
58363
- &: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,
58364
- &: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 {
58365
- background: $step-hover-color !important; /* stylelint-disable-line declaration-no-important */
58254
+ &:not(.e-step-type-label) {
58255
+ .e-indicator:hover,
58256
+ .e-step:hover {
58257
+ color: $step-hover-text-color;
58258
+ background: $step-selected-hover-color;
58259
+ }
58366
58260
  }
58367
58261
 
58368
- &: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,
58369
- &: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 {
58370
- background: $step-active-color !important; /* stylelint-disable-line declaration-no-important */
58262
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
58263
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
58264
+ color: $step-hover-not-text-color;
58371
58265
  }
58372
58266
 
58373
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
58374
- &:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58375
- &:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58376
- color: $step-hover-text-color;
58377
- background: $step-selected-hover-color !important; /* stylelint-disable-line declaration-no-important */
58267
+ &:not(.e-step-type-label) {
58268
+ .e-step-selected .e-indicator:active,
58269
+ .e-step-selected .e-step:active {
58270
+ background: $step-selected-active-color;
58378
58271
  }
58379
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58380
- &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58381
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
58382
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58272
+ .e-step-valid.e-step-selected .e-indicator:active,
58273
+ .e-step-valid.e-step-selected .e-step:active {
58274
+ background: $step-valid-completed-bg-color;
58383
58275
  }
58384
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
58385
- &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
58386
- color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
58387
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58276
+ .e-step-error.e-step-selected .e-indicator:active,
58277
+ .e-step-error.e-step-selected .e-step:active {
58278
+ background: $step-error-completed-bg-color;
58388
58279
  }
58389
58280
  }
58390
58281
 
58391
- &: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,
58392
- &: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 {
58393
- color: $step-hover-not-text-color;
58282
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
58283
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
58284
+ background: $step-hover-color;
58394
58285
  }
58395
58286
 
58396
- &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
58397
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58398
- &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58399
- background: $step-selected-active-color !important; /* stylelint-disable-line declaration-no-important */
58400
- }
58401
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58402
- &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58403
- background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58287
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
58288
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
58289
+ background: $step-active-color;
58290
+ }
58291
+
58292
+ &:not(.e-step-type-label) {
58293
+ .e-step-valid .e-indicator:hover,
58294
+ .e-step-valid .e-step:hover {
58295
+ color: $step-hover-text-color;
58296
+ background: $step-valid-completed-bg-color;
58404
58297
  }
58405
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
58406
- &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
58407
- background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
58298
+ .e-step-error .e-indicator:hover,
58299
+ .e-step-error .e-step:hover {
58300
+ color: $step-hover-text-color;
58301
+ background: $step-error-completed-bg-color;
58408
58302
  }
58409
58303
  }
58410
58304
  }
@@ -81139,7 +81033,7 @@ margin: $grid-group-animator-cell-margin;
81139
81033
  text-align: left;
81140
81034
  }
81141
81035
 
81142
- &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
81036
+ &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
81143
81037
  border-width: $grid-headercell-both-border-width;
81144
81038
  }
81145
81039
 
@@ -81165,7 +81059,7 @@ margin: $grid-group-animator-cell-margin;
81165
81059
  border-right-width: 1px;
81166
81060
  }
81167
81061
 
81168
- &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell) {
81062
+ &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader) {
81169
81063
  border-width: $grid-rtl-headercell-both-border-width;
81170
81064
  }
81171
81065
 
@@ -83050,6 +82944,14 @@ margin: $grid-group-animator-cell-margin;
83050
82944
  border-top: 1px solid $grid-header-border-color;
83051
82945
  }
83052
82946
 
82947
+ .e-gridcontent table tbody tr:first-child .e-normaledit .e-dragindentcell {
82948
+ border-top: 0 solid $grid-header-border-color;
82949
+ }
82950
+
82951
+ .e-detailrow .e-grid.e-default .e-normaledit .e-lastrowcell {
82952
+ border-bottom: 0;
82953
+ }
82954
+
83053
82955
  .e-ccdlg {
83054
82956
  .e-footer-content {
83055
82957
  border-color: $grid-columnchooser-footer-border-color;
@@ -87730,7 +87632,7 @@ $btn-grp-outline-focus-danger-color: inherit !default;
87730
87632
 
87731
87633
  //Focus state for Normal and Outline GroupButton
87732
87634
  .e-btn:focus,
87733
- input:focus+label.e-btn {
87635
+ input:focus-visible+label.e-btn {
87734
87636
  @include button-focus;
87735
87637
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
87736
87638
  box-shadow: none;