@syncfusion/blazor-themes 26.1.39 → 26.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 (173) hide show
  1. package/SCSS-Themes/base/fluent2-highcontrast.scss +1 -1
  2. package/SCSS-Themes/base/material3-dark.scss +546 -546
  3. package/SCSS-Themes/base/material3.scss +546 -546
  4. package/SCSS-Themes/bds-dark.scss +668 -650
  5. package/SCSS-Themes/bds.scss +668 -650
  6. package/SCSS-Themes/bootstrap-dark.scss +746 -728
  7. package/SCSS-Themes/bootstrap.scss +746 -728
  8. package/SCSS-Themes/bootstrap4.scss +746 -728
  9. package/SCSS-Themes/bootstrap5-dark.scss +747 -729
  10. package/SCSS-Themes/bootstrap5.scss +747 -729
  11. package/SCSS-Themes/calendars/calendar/bds-dark.scss +5 -0
  12. package/SCSS-Themes/calendars/calendar/bds.scss +5 -0
  13. package/SCSS-Themes/calendars/calendar/bootstrap-dark.scss +5 -0
  14. package/SCSS-Themes/calendars/calendar/bootstrap.scss +5 -0
  15. package/SCSS-Themes/calendars/calendar/bootstrap4.scss +5 -0
  16. package/SCSS-Themes/calendars/calendar/bootstrap5-dark.scss +5 -0
  17. package/SCSS-Themes/calendars/calendar/bootstrap5.scss +5 -0
  18. package/SCSS-Themes/calendars/calendar/fabric-dark.scss +5 -0
  19. package/SCSS-Themes/calendars/calendar/fabric.scss +5 -0
  20. package/SCSS-Themes/calendars/calendar/fluent-dark.scss +5 -0
  21. package/SCSS-Themes/calendars/calendar/fluent.scss +5 -0
  22. package/SCSS-Themes/calendars/calendar/fluent2-dark.scss +5 -0
  23. package/SCSS-Themes/calendars/calendar/fluent2.scss +5 -0
  24. package/SCSS-Themes/calendars/calendar/highcontrast.scss +5 -0
  25. package/SCSS-Themes/calendars/calendar/material-dark.scss +5 -0
  26. package/SCSS-Themes/calendars/calendar/material.scss +5 -0
  27. package/SCSS-Themes/calendars/calendar/material3-dark.scss +5 -0
  28. package/SCSS-Themes/calendars/calendar/material3.scss +5 -0
  29. package/SCSS-Themes/calendars/calendar/tailwind-dark.scss +5 -0
  30. package/SCSS-Themes/calendars/calendar/tailwind.scss +5 -0
  31. package/SCSS-Themes/calendars/daterangepicker/fluent2-dark.scss +3 -3
  32. package/SCSS-Themes/calendars/daterangepicker/fluent2.scss +3 -3
  33. package/SCSS-Themes/dropdowns/drop-down-tree/bds-dark.scss +1 -1
  34. package/SCSS-Themes/dropdowns/drop-down-tree/bds.scss +1 -1
  35. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +1 -1
  36. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +1 -1
  37. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +1 -1
  38. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +1 -1
  39. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +1 -1
  40. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +1 -1
  41. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +1 -1
  42. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +1 -1
  43. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +1 -1
  44. package/SCSS-Themes/dropdowns/drop-down-tree/fluent2-dark.scss +1 -1
  45. package/SCSS-Themes/dropdowns/drop-down-tree/fluent2.scss +1 -1
  46. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +1 -1
  47. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +1 -1
  48. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +1 -1
  49. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +1 -1
  50. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +1 -1
  51. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +1 -1
  52. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +1 -1
  53. package/SCSS-Themes/dropdowns/list-box/fluent2-dark.scss +4 -6
  54. package/SCSS-Themes/dropdowns/list-box/fluent2.scss +4 -6
  55. package/SCSS-Themes/dropdowns/multi-select/bds-dark.scss +3 -0
  56. package/SCSS-Themes/dropdowns/multi-select/bds.scss +3 -0
  57. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +3 -0
  58. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +3 -0
  59. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +3 -0
  60. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +3 -0
  61. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +3 -0
  62. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +3 -0
  63. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +3 -0
  64. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +3 -0
  65. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +3 -0
  66. package/SCSS-Themes/dropdowns/multi-select/fluent2-dark.scss +5 -1
  67. package/SCSS-Themes/dropdowns/multi-select/fluent2.scss +5 -1
  68. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +3 -0
  69. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +3 -0
  70. package/SCSS-Themes/dropdowns/multi-select/material.scss +3 -0
  71. package/SCSS-Themes/dropdowns/multi-select/material3-dark.scss +3 -0
  72. package/SCSS-Themes/dropdowns/multi-select/material3.scss +3 -0
  73. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +3 -0
  74. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +3 -0
  75. package/SCSS-Themes/fabric-dark.scss +746 -728
  76. package/SCSS-Themes/fabric.scss +746 -728
  77. package/SCSS-Themes/fluent-dark.scss +746 -728
  78. package/SCSS-Themes/fluent.scss +746 -728
  79. package/SCSS-Themes/fluent2-dark.scss +678 -661
  80. package/SCSS-Themes/fluent2-highcontrast.scss +1 -1
  81. package/SCSS-Themes/fluent2.scss +678 -661
  82. package/SCSS-Themes/gantt/gantt/fluent2-dark.scss +1 -1
  83. package/SCSS-Themes/gantt/gantt/fluent2.scss +1 -1
  84. package/SCSS-Themes/grids/grid/bds-dark.scss +4 -2
  85. package/SCSS-Themes/grids/grid/bds.scss +4 -2
  86. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +4 -2
  87. package/SCSS-Themes/grids/grid/bootstrap.scss +4 -2
  88. package/SCSS-Themes/grids/grid/bootstrap4.scss +4 -2
  89. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +4 -2
  90. package/SCSS-Themes/grids/grid/bootstrap5.scss +4 -2
  91. package/SCSS-Themes/grids/grid/fabric-dark.scss +4 -2
  92. package/SCSS-Themes/grids/grid/fabric.scss +4 -2
  93. package/SCSS-Themes/grids/grid/fluent-dark.scss +4 -2
  94. package/SCSS-Themes/grids/grid/fluent.scss +4 -2
  95. package/SCSS-Themes/grids/grid/fluent2-dark.scss +4 -2
  96. package/SCSS-Themes/grids/grid/fluent2.scss +4 -2
  97. package/SCSS-Themes/grids/grid/highcontrast.scss +4 -2
  98. package/SCSS-Themes/grids/grid/material-dark.scss +4 -2
  99. package/SCSS-Themes/grids/grid/material.scss +4 -2
  100. package/SCSS-Themes/grids/grid/material3-dark.scss +4 -2
  101. package/SCSS-Themes/grids/grid/material3.scss +4 -2
  102. package/SCSS-Themes/grids/grid/tailwind-dark.scss +4 -2
  103. package/SCSS-Themes/grids/grid/tailwind.scss +4 -2
  104. package/SCSS-Themes/highcontrast.scss +746 -728
  105. package/SCSS-Themes/image-editor/image-editor/bds-dark.scss +8 -0
  106. package/SCSS-Themes/image-editor/image-editor/bds.scss +8 -0
  107. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +8 -0
  108. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +8 -0
  109. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +8 -0
  110. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +8 -0
  111. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +8 -0
  112. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +8 -0
  113. package/SCSS-Themes/image-editor/image-editor/fabric.scss +8 -0
  114. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +8 -0
  115. package/SCSS-Themes/image-editor/image-editor/fluent.scss +8 -0
  116. package/SCSS-Themes/image-editor/image-editor/fluent2-dark.scss +8 -0
  117. package/SCSS-Themes/image-editor/image-editor/fluent2.scss +8 -0
  118. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +8 -0
  119. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +8 -0
  120. package/SCSS-Themes/image-editor/image-editor/material.scss +8 -0
  121. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +8 -0
  122. package/SCSS-Themes/image-editor/image-editor/material3.scss +8 -0
  123. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +8 -0
  124. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +8 -0
  125. package/SCSS-Themes/inputs/input/tailwind-dark.scss +1 -1
  126. package/SCSS-Themes/inputs/input/tailwind.scss +1 -1
  127. package/SCSS-Themes/material-dark.scss +746 -728
  128. package/SCSS-Themes/material.scss +746 -728
  129. package/SCSS-Themes/material3-dark.scss +1294 -1276
  130. package/SCSS-Themes/material3.scss +1294 -1276
  131. package/SCSS-Themes/navigations/stepper/bds-dark.scss +639 -639
  132. package/SCSS-Themes/navigations/stepper/bds.scss +639 -639
  133. package/SCSS-Themes/navigations/stepper/bootstrap-dark.scss +719 -719
  134. package/SCSS-Themes/navigations/stepper/bootstrap.scss +719 -719
  135. package/SCSS-Themes/navigations/stepper/bootstrap4.scss +719 -719
  136. package/SCSS-Themes/navigations/stepper/bootstrap5-dark.scss +720 -720
  137. package/SCSS-Themes/navigations/stepper/bootstrap5.scss +720 -720
  138. package/SCSS-Themes/navigations/stepper/fabric-dark.scss +719 -719
  139. package/SCSS-Themes/navigations/stepper/fabric.scss +719 -719
  140. package/SCSS-Themes/navigations/stepper/fluent-dark.scss +719 -719
  141. package/SCSS-Themes/navigations/stepper/fluent.scss +719 -719
  142. package/SCSS-Themes/navigations/stepper/fluent2-dark.scss +639 -639
  143. package/SCSS-Themes/navigations/stepper/fluent2.scss +639 -639
  144. package/SCSS-Themes/navigations/stepper/highcontrast.scss +719 -719
  145. package/SCSS-Themes/navigations/stepper/material-dark.scss +719 -719
  146. package/SCSS-Themes/navigations/stepper/material.scss +719 -719
  147. package/SCSS-Themes/navigations/stepper/material3-dark.scss +719 -719
  148. package/SCSS-Themes/navigations/stepper/material3.scss +719 -719
  149. package/SCSS-Themes/navigations/stepper/tailwind-dark.scss +719 -719
  150. package/SCSS-Themes/navigations/stepper/tailwind.scss +719 -719
  151. package/SCSS-Themes/richtexteditor/rich-text-editor/bds-dark.scss +8 -8
  152. package/SCSS-Themes/richtexteditor/rich-text-editor/bds.scss +8 -8
  153. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +8 -8
  154. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +8 -8
  155. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +8 -8
  156. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +8 -8
  157. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +8 -8
  158. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +8 -8
  159. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +8 -8
  160. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +8 -8
  161. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +8 -8
  162. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2-dark.scss +8 -8
  163. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2.scss +8 -8
  164. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +8 -8
  165. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +8 -8
  166. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +8 -8
  167. package/SCSS-Themes/richtexteditor/rich-text-editor/material3-dark.scss +10 -10
  168. package/SCSS-Themes/richtexteditor/rich-text-editor/material3.scss +10 -10
  169. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +8 -8
  170. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +8 -8
  171. package/SCSS-Themes/tailwind-dark.scss +747 -729
  172. package/SCSS-Themes/tailwind.scss +747 -729
  173. package/package.json +1 -1
@@ -27859,6 +27859,11 @@ $calendar-selected-month-bg-color: $primary-lighter !default;
27859
27859
  color: $calendar-today-focused-font-color;
27860
27860
  }
27861
27861
  }
27862
+ #{if(&, '&', '*')}.e-month td.e-disabled.e-today span.e-day {
27863
+ @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
27864
+ color: $calendar-today-disabled-color;
27865
+ }
27866
+ }
27862
27867
  #{if(&, '&', '*')}.e-year td.e-selected > span.e-day,
27863
27868
  #{if(&, '&', '*')}.e-decade td.e-selected > span.e-day,
27864
27869
  #{if(&, '&', '*')}.e-year td.e-selected:hover > span.e-day,
@@ -42737,7 +42742,7 @@ $range-indicator-label-width: 100% !default;
42737
42742
  $range-device-indicator-margin: 8px 0 0 !default;
42738
42743
  $range-device-indicator-height: 24px !default;
42739
42744
  $range-separator-height: 1px !default;
42740
- $range-border-value: 1px solid $content-bg-color-alt1 !default;
42745
+ $range-border-value: 1px solid $flyout-border !default;
42741
42746
  $range-container-border-value: none !default;
42742
42747
  $range-separator-margin: 0 !default;
42743
42748
  $range-footer-height: 47px !default;
@@ -42990,11 +42995,11 @@ $modal-range-tablet-font-size: 18px !default;
42990
42995
 
42991
42996
  $range-header-font-size: 16px !default;
42992
42997
 
42993
- $footer-top-border-color :1px solid $border-light !default;
42998
+ $footer-top-border-color :1px solid $flyout-border !default;
42994
42999
 
42995
43000
  /* stylelint-disable */
42996
43001
  .e-daterangepicker.e-popup .e-footer{
42997
- border-top: 1px solid $footer-top-border-color !important;
43002
+ border-top: $footer-top-border-color !important;
42998
43003
  }
42999
43004
 
43000
43005
  $range-icon-mouse-border-radius: 16px !default;
@@ -58854,645 +58859,645 @@ $step-active-color: $content-bg-color-pressed !default;
58854
58859
  $step-selected-hover-color: $primary-dark !default;
58855
58860
  $step-selected-active-color: $primary-dark !default;
58856
58861
 
58857
- @mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
58858
- &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
58859
- .e-icons.e-step-indicator {
58860
- font-size: $step-width;
58861
- }
58862
- &.e-step-notstarted .e-icons.e-step-indicator {
58863
- width: $step-width;
58864
- height: $step-width;
58865
- }
58866
- }
58867
-
58868
- .e-step-container {
58869
- .e-step,
58870
- .e-indicator {
58871
- min-width: $step-width;
58872
- min-height: $step-width;
58873
- }
58874
-
58875
- .e-indicator {
58876
- font-size: $icon-size;
58877
- }
58878
-
58879
- .e-step-text-container,
58880
- .e-step-label-container {
58881
- font-size: $text-size;
58882
- }
58883
-
58884
- .e-step-content {
58885
- font-size: $icon-size;
58886
- }
58887
-
58888
- .e-step-label-optional {
58889
- font-size: $optional-size;
58890
- }
58891
- }
58892
- &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58893
- font-size: $optional-size;
58894
- }
58895
- }
58896
-
58897
- @include export-module('stepper-layout') {
58898
- .e-stepper {
58899
- position: relative;
58900
- .e-step-selected {
58901
- .e-text,
58902
- .e-label {
58903
- font-weight: $stepper-font-weight;
58904
- }
58905
- }
58906
- &.e-linear {
58907
- .e-step-container {
58908
- pointer-events: none;
58909
- }
58910
- .e-previous:not(.e-step-disabled),
58911
- .e-next:not(.e-step-disabled),
58912
- .e-step-selected:not(.e-step-disabled) {
58913
- pointer-events: auto;
58914
- }
58915
- }
58916
- &.e-stepper-readonly,
58917
- .e-step-disabled {
58918
- cursor: default;
58919
- pointer-events: none;
58920
- }
58921
- &.e-step-type-indicator .e-step-container {
58922
- &:not(.e-step-item.e-step-label.e-step-text) {
58923
- .e-icons.e-step-indicator {
58924
- font-size: $stepper-step-width;
58925
- border-radius: $stepper-step-radius;
58926
- }
58927
- }
58928
- }
58929
-
58930
- &.e-step-type-indicator .e-step-content,
58931
- &.e-step-type-label .e-step-content {
58932
- padding: 0 8px;
58933
- }
58934
-
58935
- //For Blazor Stepper Tooltip
58936
- .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
58937
- &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
58938
- &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58939
- position: relative;
58940
- }
58941
- &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58942
- position: unset;
58943
- }
58944
- .e-tooltip-wrap.e-stepper-tooltip {
58945
- display: none;
58946
- justify-content: center;
58947
- left: 50%;
58948
- top: -$stepper-tooltip-tip-bottom-height;
58949
- transform: translate(-50%, -100%);
58950
-
58951
- &.e-show-tooltip {
58952
- display: inline-flex;
58953
- }
58954
- .e-tip-content {
58955
- width: max-content;
58956
- }
58957
- .e-arrow-tip.e-tip-bottom {
58958
- left: 50%;
58959
- top: 100%;
58960
- transform: translate(-50%, 0);
58961
- }
58962
- .e-arrow-tip-inner.e-tip-bottom {
58963
- top: -6px;
58964
- }
58965
- }
58966
- .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
58967
- left: unset;
58968
- top: 0;
58969
- transform: translate(0%, -135%);
58970
- }
58971
- &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
58972
- transform: translate(-50%, -115%);
58973
- }
58974
- .e-stepper-steps {
58975
- display: flex;
58976
- padding: 0;
58977
- margin: 0;
58978
- justify-content: space-between;
58979
- position: relative;
58980
- align-items: flex-start;
58981
- .e-step-container,
58982
- .e-step,
58983
- .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
58984
- .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
58985
- .e-step-label-container {
58986
- display: flex;
58987
- align-items: center;
58988
- justify-content: center;
58989
- }
58990
- }
58991
- .e-step-container {
58992
- max-width: var(--max-width);
58993
- list-style-type: none;
58994
- cursor: pointer;
58995
- text-align: center;
58996
- .e-step-label-container,
58997
- .e-step-text-container {
58998
- max-width: clamp(100%, 10em, 100%);
58999
- white-space: nowrap;
59000
- font-size: $stepper-text-size;
59001
- }
59002
- .e-step-label-optional {
59003
- font-size: $stepper-optional-size;
59004
- flex-basis: 100%;
59005
- }
59006
- .e-step-optional-container {
59007
- display: flex;
59008
- flex-direction: column;
59009
- }
59010
- .e-step-content {
59011
- font-size: $stepper-icon-size;
59012
- line-height: 0;
59013
- }
59014
- .e-indicator {
59015
- font-size: $stepper-icon-size;
59016
- }
59017
- &:not(.e-step-text-only) > .e-step-text-container {
59018
- padding: $stepper-icon-text-padding;
59019
- }
59020
- &.e-step-text-only .e-step-text-container,
59021
- &.e-step-label-only .e-step-label-container {
59022
- padding: $stepper-text-padding;
59023
- padding-block: 5px;
59024
- }
59025
- &.e-step-text-only.e-step-error .e-step-text-container,
59026
- &.e-step-text-only.e-step-valid .e-step-text-container,
59027
- &.e-step-label-only.e-step-error .e-step-label-container,
59028
- &.e-step-label-only.e-step-valid .e-step-label-container {
59029
- flex-direction: column;
59030
- .e-step-validation-icon {
59031
- position: relative;
59032
- top: $stepper-validation-position;
59033
- }
59034
- }
59035
- .e-step,
59036
- .e-indicator {
59037
- border-radius: $stepper-step-radius;
59038
- min-width: $stepper-step-width;
59039
- min-height: $stepper-step-width;
59040
- }
59041
- }
59042
- .e-step-notstarted:not(.e-step-disabled) .e-step,
59043
- .e-step-notstarted:not(.e-step-disabled) .e-indicator {
59044
- border: $step-border;
59045
- }
59046
- &.e-horizontal {
59047
- display: block;
59048
- .e-stepper-steps {
59049
- flex-direction: row;
59050
- }
59051
- &.e-label-before,
59052
- &.e-label-after {
59053
- &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59054
- margin-left: var(--progress-left-position);
59055
- top: var(--progress-top-position);
59056
- width: var(--progress-bar-width);
59057
- }
59058
- }
59059
- &.e-label-before.e-rtl,
59060
- &.e-label-after.e-rtl {
59061
- &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59062
- margin-right: var(--progress-left-position);
59063
- margin-left: unset;
59064
- }
59065
- }
59066
- .e-step-item.e-step-label {
59067
- gap: 1em;
59068
- flex-direction: column;
59069
- }
59070
- .e-step-item.e-step-label .e-step-label-container {
59071
- position: relative;
59072
- &.e-label-before {
59073
- order: -1;
59074
- }
59075
- }
59076
- &.e-label-start .e-step-text-container {
59077
- order: $stepper-label-order;
59078
- }
59079
- .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59080
- position: absolute;
59081
- top: 2.5em;
59082
- margin-left: 2.5em;
59083
- }
59084
- &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
59085
- &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59086
- margin-right: 2.5em;
59087
- margin-left: unset;
59088
- }
59089
- &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59090
- margin-right: unset;
59091
- margin-left: 2.5em;
59092
- }
59093
- &.e-label-before .e-stepper-steps {
59094
- &:has(.e-step-label-optional) {
59095
- align-items: flex-end;
59096
- }
59097
- .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59098
- flex-direction: column;
59099
- gap: .5em;
59100
- }
59101
- }
59102
- .e-text,
59103
- .e-label,
59104
- .e-step-label-optional {
59105
- text-overflow: ellipsis;
59106
- overflow: hidden;
59107
- }
59108
- .e-step-text.e-step-text-only:has(.e-step-label-optional),
59109
- .e-step-label.e-step-label-only:has(.e-step-label-optional),
59110
- .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59111
- .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59112
- .e-step-label-container.e-label-after:has(.e-step-label-optional),
59113
- &.e-step-type-indicator .e-step-container {
59114
- flex-wrap: wrap;
59115
- }
59116
- .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
59117
- margin-top: .5em;
59118
- }
59119
- &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
59120
- margin-top: .2em;
59121
- }
59122
- }
59123
- &.e-vertical {
59124
- min-height: inherit;
59125
- display: inline-block;
59126
- .e-step-label.e-step-label-only,
59127
- .e-step-template {
59128
- position: relative;
59129
- }
59130
- &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
59131
- position: absolute;
59132
- }
59133
- &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59134
- margin-top: $stepper-label-optional;
59135
- margin-left: 4em;
59136
- }
59137
- &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59138
- margin-left: unset;
59139
- margin-right: 4em;
59140
- }
59141
- .e-stepper-steps {
59142
- flex-direction: column;
59143
- min-height: inherit;
59144
- float: left;
59145
- align-items: start;
59146
- margin: $stepper-ol-padding;
59147
- justify-content: space-between;
59148
- }
59149
- &.e-rtl .e-stepper-steps {
59150
- float: right;
59151
- }
59152
- .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
59153
- .e-stepper-steps:has(.e-step-text.e-step-text-only),
59154
- .e-stepper-steps:has(.e-step-label.e-step-label-only),
59155
- &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
59156
- &.e-step-type-indicator .e-stepper-steps {
59157
- align-items: center;
59158
- }
59159
- .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
59160
- .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59161
- margin-left: $stepper-text-postion;
59162
- }
59163
- &.e-rtl {
59164
- .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
59165
- .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59166
- margin-left: unset;
59167
- margin-right: $stepper-text-postion;
59168
- }
59169
- }
59170
- .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59171
- &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
59172
- .e-step-text-only.e-step-text:has(.e-step-label-optional),
59173
- .e-step-label-only.e-step-label:has(.e-step-label-optional) {
59174
- flex-direction: column;
59175
- .e-step-label-optional {
59176
- position: unset;
59177
- }
59178
- }
59179
- .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59180
- &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59181
- gap: .5em;
59182
- }
59183
- &.e-label-before .e-step-item.e-step-label,
59184
- &.e-label-after .e-step-item.e-step-label {
59185
- .e-step-label-container.e-label-after:has(.e-step-label-optional) {
59186
- flex-direction: column;
59187
- .e-label {
59188
- line-height: 2em;
59189
- }
59190
- }
59191
- .e-step-label-optional {
59192
- position: unset;
59193
- }
59194
- }
59195
- .e-step-container {
59196
- &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
59197
- position: absolute;
59198
- .e-step-label-optional {
59199
- left: $stepper-ol-padding;
59200
- }
59201
- }
59202
- .e-step-label-container.e-label-after .e-step-label-optional {
59203
- font-size: $stepper-optional-size;
59204
- }
59205
- .e-step-label-container.e-label-before .e-label {
59206
- width: var(--label-width);
59207
- }
59208
- &:not(.e-step-text-only) .e-step-text-container {
59209
- border: none;
59210
- border-radius: unset;
59211
- padding: $stepper-text-vert-padding;
59212
- }
59213
- &.e-step-text-only .e-step-text-container,
59214
- &.e-step-label-only .e-step-label-container {
59215
- position: unset;
59216
- }
59217
- }
59218
- &.e-label-top .e-step-label-optional {
59219
- padding-bottom: 6px;
59220
- }
59221
- }
59222
- &.e-vertical.e-label-top,
59223
- &.e-vertical.e-label-bottom {
59224
- .e-stepper-steps {
59225
- align-items: center;
59226
- .e-step-container {
59227
- flex-direction: column;
59228
- .e-step-text-container {
59229
- margin-left: $stepper-ol-padding;
59230
- }
59231
- }
59232
- }
59233
- }
59234
- &.e-vertical.e-label-top .e-step-container {
59235
- .e-step-label-optional,
59236
- .e-step-text-container {
59237
- order: $stepper-label-order;
59238
- }
59239
- }
59240
- .e-stepper-progressbar {
59241
- height: $stepper-progress-bar-height;
59242
- position: absolute;
59243
- top: var(--progress-top-position);
59244
- width: $stepper-progress-value-height;
59245
-
59246
- >.e-progressbar-value {
59247
- height: $stepper-progress-value-height;
59248
- width: var(--progress-value);
59249
- transition-property: width;
59250
- transition-duration: var(--duration);
59251
- transition-delay: var(--delay);
59252
- }
59253
- }
59254
- &.e-vertical .e-stepper-progressbar {
59255
- min-height: inherit;
59256
- width: $stepper-progress-bar-height;
59257
- top: $stepper-ol-padding;
59258
- left: var(--progress-position);
59259
-
59260
- >.e-progressbar-value {
59261
- width: $stepper-progress-value-height;
59262
- height: var(--progress-value);
59263
- transition-property: height;
59264
- }
59265
- }
59266
- &.e-vertical.e-rtl .e-stepper-progressbar {
59267
- right: var(--progress-position);
59268
- left: unset;
59269
- }
59270
- &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
59271
- .e-step-focus .e-indicator {
59272
- z-index: 0;
59273
- }
59274
- .e-step-template.e-step-focus {
59275
- outline: $stepper-temp-outline-width;
59276
- }
59277
- }
59278
- .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
59279
- .e-arrow-tip.e-tip-bottom {
59280
- top: 90% !important; /* stylelint-disable-line declaration-no-important */
59281
- }
59282
- }
59283
- .e-small.e-stepper,
59284
- .e-small .e-stepper {
59285
- @include stepper-styles($stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
59286
- }
59287
- .e-bigger.e-stepper,
59288
- .e-bigger .e-stepper {
59289
- @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
59290
- }
59291
-
59292
- .e-bigger.e-small.e-stepper,
59293
- .e-bigger.e-small .e-stepper,
59294
- .e-bigger .e-small.e-stepper,
59295
- .e-small .e-bigger.e-stepper {
59296
- @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
59297
- }
59298
- }
59299
-
59300
-
59301
- @mixin stepper-text-label-colors($step-label-text-color) {
59302
- .e-text,
59303
- .e-label {
59304
- color: $step-label-text-color;
59305
- }
59306
- }
59307
-
59308
- @include export-module('stepper-theme') {
59309
- .e-stepper {
59310
- .e-step-notstarted:not(.e-step-disabled) .e-step,
59311
- .e-step-notstarted:not(.e-step-disabled) .e-indicator,
59312
- .e-step-notstarted .e-icons.e-step-indicator {
59313
- border-color: $step-border-color;
59314
- }
59315
- .e-step-label-optional {
59316
- color: $step-optional-color;
59317
- }
59318
- .e-step,
59319
- .e-indicator {
59320
- color: $step-color;
59321
- background: $step-bg-color;
59322
- }
59323
- .e-step-indicator {
59324
- color: transparent;
59325
- }
59326
- .e-step-completed .e-step,
59327
- .e-step-inprogress .e-step,
59328
- .e-step-completed .e-indicator,
59329
- .e-step-inprogress .e-indicator,
59330
- .e-step-completed .e-step-indicator,
59331
- .e-step-inprogress .e-step-indicator {
59332
- background: $step-completed-bg-color;
59333
- color: $step-completed-color;
59334
- }
59335
- .e-step-selected .e-indicator {
59336
- background: $step-completed-bg-color;
59337
- }
59338
- .e-step-valid .e-indicator {
59339
- background: $step-valid-completed-bg-color;
59340
- color: $step-valid-completed-color;
59341
- }
59342
- .e-step-error {
59343
- .e-indicator {
59344
- background: $step-error-completed-bg-color;
59345
- color: $step-error-icon-color;
59346
- }
59347
- @include stepper-text-label-colors($step-error-completed-color);
59348
- }
59349
- .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
59350
- .e-step-error .e-indicator:hover {
59351
- color: $step-color;
59352
- }
59353
- .e-step-valid.e-step-text-only,
59354
- .e-step-valid.e-step-label-only {
59355
- .e-step-validation-icon {
59356
- color: $step-valid-icon-only-color;
59357
- }
59358
- }
59359
- .e-step-error.e-step-text-only,
59360
- .e-step-error.e-step-label-only {
59361
- .e-step-validation-icon {
59362
- color: $step-error-icon-only-color;
59363
- }
59364
- }
59365
- @include stepper-text-label-colors($stepper-text-color);
59366
- .e-step-selected:not(.e-step-error),
59367
- .e-step-completed:not(.e-step-error) {
59368
- @include stepper-text-label-colors($step-completed-bg-color);
59369
- }
59370
- .e-step-label:not(.e-step-item) .e-step-label-container {
59371
- background-color: $stepper-outline-color;
59372
- }
59373
- .e-step-text-container {
59374
- background-color: $stepper-outline-color;
59375
- border-color: transparent;
59376
- }
59377
- .e-step-disabled .e-indicator {
59378
- background: $step-disabled-bg-color;
59379
- color: $step-disabled-color;
59380
- }
59381
- .e-step-disabled .e-text,
59382
- .e-step-disabled .e-label,
59383
- .e-step-disabled .e-step-validation-icon {
59384
- color: $step-disabled-font-color;
59385
- }
59386
- &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
59387
- &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
59388
- &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
59389
- &.e-vertical.e-label-top .e-step-label-optional,
59390
- &.e-vertical.e-label-bottom .e-step-label-optional {
59391
- background-color: $stepper-outline-color;
59392
- }
59393
- .e-stepper-progressbar {
59394
- background-color: $step-progress-bg-color;
59395
- >.e-progressbar-value {
59396
- background-color: $step-progress-value-bg-color;
59397
- }
59398
- }
59399
- &:not(.e-steps-focus) .e-step-selected .e-step {
59400
- box-shadow: $step-selected-li-shadow;
59401
- }
59402
- .e-step-focus .e-step,
59403
- .e-step-label-only.e-step-focus .e-label,
59404
- .e-step-text-only.e-step-focus .e-text,
59405
- .e-step-template.e-step-focus,
59406
- &:not(.e-steps-focus) :focus-visible .e-step,
59407
- &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
59408
- &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
59409
- box-shadow: $step-keyboard-selected-li-shadow;
59410
- }
59411
-
59412
- &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
59413
- .e-step-valid.e-step-focus .e-step,
59414
- .e-step-valid.e-step-label-only.e-step-focus .e-label,
59415
- .e-step-valid.e-step-text-only.e-step-focus .e-text,
59416
- .e-step-valid.e-step-template.e-step-focus {
59417
- box-shadow: $step-valid-li-shadow;
59418
- }
59419
-
59420
- &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
59421
- .e-step-error.e-step-focus .e-step,
59422
- .e-step-error.e-step-label-only.e-step-focus .e-label,
59423
- .e-step-error.e-step-text-only.e-step-focus .e-text,
59424
- .e-step-error.e-step-template.e-step-focus {
59425
- box-shadow: $step-error-li-shadow;
59426
- }
59427
-
59428
- .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
59429
- .e-step-container:not(.e-step-focus).e-step-completed .e-step,
59430
- &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
59431
- box-shadow: $step-li-shadow;
59432
- }
59433
-
59434
- .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
59435
- .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
59436
- border-color: $step-hover-border-color;
59437
- }
59438
-
59439
- .e-step-notstarted:not(.e-step-disabled) .e-step:active,
59440
- .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
59441
- border-color: $step-active-border-color;
59442
- }
59443
-
59444
- &:not(.e-step-type-label) {
59445
- .e-indicator:hover,
59446
- .e-step:hover {
59447
- color: $step-hover-text-color;
59448
- background: $step-selected-hover-color;
59449
- }
59450
- }
59451
-
59452
- &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59453
- &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59454
- color: $step-hover-not-text-color;
59455
- }
59456
-
59457
- &:not(.e-step-type-label) {
59458
- .e-step-selected .e-indicator:active,
59459
- .e-step-selected .e-step:active {
59460
- background: $step-selected-active-color;
59461
- }
59462
- .e-step-valid.e-step-selected .e-indicator:active,
59463
- .e-step-valid.e-step-selected .e-step:active {
59464
- background: $step-valid-completed-bg-color;
59465
- }
59466
- .e-step-error.e-step-selected .e-indicator:active,
59467
- .e-step-error.e-step-selected .e-step:active {
59468
- background: $step-error-completed-bg-color;
59469
- }
59470
- }
59471
-
59472
- &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59473
- &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59474
- background: $step-hover-color;
59475
- }
59476
-
59477
- &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
59478
- &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
59479
- background: $step-active-color;
59480
- }
59481
-
59482
- &:not(.e-step-type-label) {
59483
- .e-step-valid .e-indicator:hover,
59484
- .e-step-valid .e-step:hover {
59485
- color: $step-hover-text-color;
59486
- background: $step-valid-completed-bg-color;
59487
- }
59488
- .e-step-error .e-indicator:hover,
59489
- .e-step-error .e-step:hover {
59490
- color: $step-hover-text-color;
59491
- background: $step-error-completed-bg-color;
59492
- }
59493
- }
59494
- }
59495
- }
58862
+ @mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
58863
+ &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
58864
+ .e-icons.e-step-indicator {
58865
+ font-size: $step-width;
58866
+ }
58867
+ &.e-step-notstarted .e-icons.e-step-indicator {
58868
+ width: $step-width;
58869
+ height: $step-width;
58870
+ }
58871
+ }
58872
+
58873
+ .e-step-container {
58874
+ .e-step,
58875
+ .e-indicator {
58876
+ min-width: $step-width;
58877
+ min-height: $step-width;
58878
+ }
58879
+
58880
+ .e-indicator {
58881
+ font-size: $icon-size;
58882
+ }
58883
+
58884
+ .e-step-text-container,
58885
+ .e-step-label-container {
58886
+ font-size: $text-size;
58887
+ }
58888
+
58889
+ .e-step-content {
58890
+ font-size: $icon-size;
58891
+ }
58892
+
58893
+ .e-step-label-optional {
58894
+ font-size: $optional-size;
58895
+ }
58896
+ }
58897
+ &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
58898
+ font-size: $optional-size;
58899
+ }
58900
+ }
58901
+
58902
+ @include export-module('stepper-layout') {
58903
+ .e-stepper {
58904
+ position: relative;
58905
+ .e-step-selected {
58906
+ .e-text,
58907
+ .e-label {
58908
+ font-weight: $stepper-font-weight;
58909
+ }
58910
+ }
58911
+ &.e-linear {
58912
+ .e-step-container {
58913
+ pointer-events: none;
58914
+ }
58915
+ .e-previous:not(.e-step-disabled),
58916
+ .e-next:not(.e-step-disabled),
58917
+ .e-step-selected:not(.e-step-disabled) {
58918
+ pointer-events: auto;
58919
+ }
58920
+ }
58921
+ &.e-stepper-readonly,
58922
+ .e-step-disabled {
58923
+ cursor: default;
58924
+ pointer-events: none;
58925
+ }
58926
+ &.e-step-type-indicator .e-step-container {
58927
+ &:not(.e-step-item.e-step-label.e-step-text) {
58928
+ .e-icons.e-step-indicator {
58929
+ font-size: $stepper-step-width;
58930
+ border-radius: $stepper-step-radius;
58931
+ }
58932
+ }
58933
+ }
58934
+
58935
+ &.e-step-type-indicator .e-step-content,
58936
+ &.e-step-type-label .e-step-content {
58937
+ padding: 0 8px;
58938
+ }
58939
+
58940
+ //For Blazor Stepper Tooltip
58941
+ .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
58942
+ &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
58943
+ &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58944
+ position: relative;
58945
+ }
58946
+ &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
58947
+ position: unset;
58948
+ }
58949
+ .e-tooltip-wrap.e-stepper-tooltip {
58950
+ display: none;
58951
+ justify-content: center;
58952
+ left: 50%;
58953
+ top: -$stepper-tooltip-tip-bottom-height;
58954
+ transform: translate(-50%, -100%);
58955
+
58956
+ &.e-show-tooltip {
58957
+ display: inline-flex;
58958
+ }
58959
+ .e-tip-content {
58960
+ width: max-content;
58961
+ }
58962
+ .e-arrow-tip.e-tip-bottom {
58963
+ left: 50%;
58964
+ top: 100%;
58965
+ transform: translate(-50%, 0);
58966
+ }
58967
+ .e-arrow-tip-inner.e-tip-bottom {
58968
+ top: -6px;
58969
+ }
58970
+ }
58971
+ .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
58972
+ left: unset;
58973
+ top: 0;
58974
+ transform: translate(0%, -135%);
58975
+ }
58976
+ &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
58977
+ transform: translate(-50%, -115%);
58978
+ }
58979
+ .e-stepper-steps {
58980
+ display: flex;
58981
+ padding: 0;
58982
+ margin: 0;
58983
+ justify-content: space-between;
58984
+ position: relative;
58985
+ align-items: flex-start;
58986
+ .e-step-container,
58987
+ .e-step,
58988
+ .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
58989
+ .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
58990
+ .e-step-label-container {
58991
+ display: flex;
58992
+ align-items: center;
58993
+ justify-content: center;
58994
+ }
58995
+ }
58996
+ .e-step-container {
58997
+ max-width: var(--max-width);
58998
+ list-style-type: none;
58999
+ cursor: pointer;
59000
+ text-align: center;
59001
+ .e-step-label-container,
59002
+ .e-step-text-container {
59003
+ max-width: clamp(100%, 10em, 100%);
59004
+ white-space: nowrap;
59005
+ font-size: $stepper-text-size;
59006
+ }
59007
+ .e-step-label-optional {
59008
+ font-size: $stepper-optional-size;
59009
+ flex-basis: 100%;
59010
+ }
59011
+ .e-step-optional-container {
59012
+ display: flex;
59013
+ flex-direction: column;
59014
+ }
59015
+ .e-step-content {
59016
+ font-size: $stepper-icon-size;
59017
+ line-height: 0;
59018
+ }
59019
+ .e-indicator {
59020
+ font-size: $stepper-icon-size;
59021
+ }
59022
+ &:not(.e-step-text-only) > .e-step-text-container {
59023
+ padding: $stepper-icon-text-padding;
59024
+ }
59025
+ &.e-step-text-only .e-step-text-container,
59026
+ &.e-step-label-only .e-step-label-container {
59027
+ padding: $stepper-text-padding;
59028
+ padding-block: 5px;
59029
+ }
59030
+ &.e-step-text-only.e-step-error .e-step-text-container,
59031
+ &.e-step-text-only.e-step-valid .e-step-text-container,
59032
+ &.e-step-label-only.e-step-error .e-step-label-container,
59033
+ &.e-step-label-only.e-step-valid .e-step-label-container {
59034
+ flex-direction: column;
59035
+ .e-step-validation-icon {
59036
+ position: relative;
59037
+ top: $stepper-validation-position;
59038
+ }
59039
+ }
59040
+ .e-step,
59041
+ .e-indicator {
59042
+ border-radius: $stepper-step-radius;
59043
+ min-width: $stepper-step-width;
59044
+ min-height: $stepper-step-width;
59045
+ }
59046
+ }
59047
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
59048
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator {
59049
+ border: $step-border;
59050
+ }
59051
+ &.e-horizontal {
59052
+ display: block;
59053
+ .e-stepper-steps {
59054
+ flex-direction: row;
59055
+ }
59056
+ &.e-label-before,
59057
+ &.e-label-after {
59058
+ &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59059
+ margin-left: var(--progress-left-position);
59060
+ top: var(--progress-top-position);
59061
+ width: var(--progress-bar-width);
59062
+ }
59063
+ }
59064
+ &.e-label-before.e-rtl,
59065
+ &.e-label-after.e-rtl {
59066
+ &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
59067
+ margin-right: var(--progress-left-position);
59068
+ margin-left: unset;
59069
+ }
59070
+ }
59071
+ .e-step-item.e-step-label {
59072
+ gap: 1em;
59073
+ flex-direction: column;
59074
+ }
59075
+ .e-step-item.e-step-label .e-step-label-container {
59076
+ position: relative;
59077
+ &.e-label-before {
59078
+ order: -1;
59079
+ }
59080
+ }
59081
+ &.e-label-start .e-step-text-container {
59082
+ order: $stepper-label-order;
59083
+ }
59084
+ .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59085
+ position: absolute;
59086
+ top: 2.5em;
59087
+ margin-left: 2.5em;
59088
+ }
59089
+ &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
59090
+ &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59091
+ margin-right: 2.5em;
59092
+ margin-left: unset;
59093
+ }
59094
+ &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59095
+ margin-right: unset;
59096
+ margin-left: 2.5em;
59097
+ }
59098
+ &.e-label-before .e-stepper-steps {
59099
+ &:has(.e-step-label-optional) {
59100
+ align-items: flex-end;
59101
+ }
59102
+ .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59103
+ flex-direction: column;
59104
+ gap: .5em;
59105
+ }
59106
+ }
59107
+ .e-text,
59108
+ .e-label,
59109
+ .e-step-label-optional {
59110
+ text-overflow: ellipsis;
59111
+ overflow: hidden;
59112
+ }
59113
+ .e-step-text.e-step-text-only:has(.e-step-label-optional),
59114
+ .e-step-label.e-step-label-only:has(.e-step-label-optional),
59115
+ .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59116
+ .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
59117
+ .e-step-label-container.e-label-after:has(.e-step-label-optional),
59118
+ &.e-step-type-indicator .e-step-container {
59119
+ flex-wrap: wrap;
59120
+ }
59121
+ .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
59122
+ margin-top: .5em;
59123
+ }
59124
+ &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
59125
+ margin-top: .2em;
59126
+ }
59127
+ }
59128
+ &.e-vertical {
59129
+ min-height: inherit;
59130
+ display: inline-block;
59131
+ .e-step-label.e-step-label-only,
59132
+ .e-step-template {
59133
+ position: relative;
59134
+ }
59135
+ &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
59136
+ position: absolute;
59137
+ }
59138
+ &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59139
+ margin-top: $stepper-label-optional;
59140
+ margin-left: 4em;
59141
+ }
59142
+ &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
59143
+ margin-left: unset;
59144
+ margin-right: 4em;
59145
+ }
59146
+ .e-stepper-steps {
59147
+ flex-direction: column;
59148
+ min-height: inherit;
59149
+ float: left;
59150
+ align-items: start;
59151
+ margin: $stepper-ol-padding;
59152
+ justify-content: space-between;
59153
+ }
59154
+ &.e-rtl .e-stepper-steps {
59155
+ float: right;
59156
+ }
59157
+ .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
59158
+ .e-stepper-steps:has(.e-step-text.e-step-text-only),
59159
+ .e-stepper-steps:has(.e-step-label.e-step-label-only),
59160
+ &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
59161
+ &.e-step-type-indicator .e-stepper-steps {
59162
+ align-items: center;
59163
+ }
59164
+ .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
59165
+ .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59166
+ margin-left: $stepper-text-postion;
59167
+ }
59168
+ &.e-rtl {
59169
+ .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
59170
+ .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
59171
+ margin-left: unset;
59172
+ margin-right: $stepper-text-postion;
59173
+ }
59174
+ }
59175
+ .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59176
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
59177
+ .e-step-text-only.e-step-text:has(.e-step-label-optional),
59178
+ .e-step-label-only.e-step-label:has(.e-step-label-optional) {
59179
+ flex-direction: column;
59180
+ .e-step-label-optional {
59181
+ position: unset;
59182
+ }
59183
+ }
59184
+ .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
59185
+ &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
59186
+ gap: .5em;
59187
+ }
59188
+ &.e-label-before .e-step-item.e-step-label,
59189
+ &.e-label-after .e-step-item.e-step-label {
59190
+ .e-step-label-container.e-label-after:has(.e-step-label-optional) {
59191
+ flex-direction: column;
59192
+ .e-label {
59193
+ line-height: 2em;
59194
+ }
59195
+ }
59196
+ .e-step-label-optional {
59197
+ position: unset;
59198
+ }
59199
+ }
59200
+ .e-step-container {
59201
+ &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
59202
+ position: absolute;
59203
+ .e-step-label-optional {
59204
+ left: $stepper-ol-padding;
59205
+ }
59206
+ }
59207
+ .e-step-label-container.e-label-after .e-step-label-optional {
59208
+ font-size: $stepper-optional-size;
59209
+ }
59210
+ .e-step-label-container.e-label-before .e-label {
59211
+ width: var(--label-width);
59212
+ }
59213
+ &:not(.e-step-text-only) .e-step-text-container {
59214
+ border: none;
59215
+ border-radius: unset;
59216
+ padding: $stepper-text-vert-padding;
59217
+ }
59218
+ &.e-step-text-only .e-step-text-container,
59219
+ &.e-step-label-only .e-step-label-container {
59220
+ position: unset;
59221
+ }
59222
+ }
59223
+ &.e-label-top .e-step-label-optional {
59224
+ padding-bottom: 6px;
59225
+ }
59226
+ }
59227
+ &.e-vertical.e-label-top,
59228
+ &.e-vertical.e-label-bottom {
59229
+ .e-stepper-steps {
59230
+ align-items: center;
59231
+ .e-step-container {
59232
+ flex-direction: column;
59233
+ .e-step-text-container {
59234
+ margin-left: $stepper-ol-padding;
59235
+ }
59236
+ }
59237
+ }
59238
+ }
59239
+ &.e-vertical.e-label-top .e-step-container {
59240
+ .e-step-label-optional,
59241
+ .e-step-text-container {
59242
+ order: $stepper-label-order;
59243
+ }
59244
+ }
59245
+ .e-stepper-progressbar {
59246
+ height: $stepper-progress-bar-height;
59247
+ position: absolute;
59248
+ top: var(--progress-top-position);
59249
+ width: $stepper-progress-value-height;
59250
+
59251
+ >.e-progressbar-value {
59252
+ height: $stepper-progress-value-height;
59253
+ width: var(--progress-value);
59254
+ transition-property: width;
59255
+ transition-duration: var(--duration);
59256
+ transition-delay: var(--delay);
59257
+ }
59258
+ }
59259
+ &.e-vertical .e-stepper-progressbar {
59260
+ min-height: inherit;
59261
+ width: $stepper-progress-bar-height;
59262
+ top: $stepper-ol-padding;
59263
+ left: var(--progress-position);
59264
+
59265
+ >.e-progressbar-value {
59266
+ width: $stepper-progress-value-height;
59267
+ height: var(--progress-value);
59268
+ transition-property: height;
59269
+ }
59270
+ }
59271
+ &.e-vertical.e-rtl .e-stepper-progressbar {
59272
+ right: var(--progress-position);
59273
+ left: unset;
59274
+ }
59275
+ &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
59276
+ .e-step-focus .e-indicator {
59277
+ z-index: 0;
59278
+ }
59279
+ .e-step-template.e-step-focus {
59280
+ outline: $stepper-temp-outline-width;
59281
+ }
59282
+ }
59283
+ .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
59284
+ .e-arrow-tip.e-tip-bottom {
59285
+ top: 90% !important; /* stylelint-disable-line declaration-no-important */
59286
+ }
59287
+ }
59288
+ .e-small.e-stepper,
59289
+ .e-small .e-stepper {
59290
+ @include stepper-styles($stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
59291
+ }
59292
+ .e-bigger.e-stepper,
59293
+ .e-bigger .e-stepper {
59294
+ @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
59295
+ }
59296
+
59297
+ .e-bigger.e-small.e-stepper,
59298
+ .e-bigger.e-small .e-stepper,
59299
+ .e-bigger .e-small.e-stepper,
59300
+ .e-small .e-bigger.e-stepper {
59301
+ @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
59302
+ }
59303
+ }
59304
+
59305
+
59306
+ @mixin stepper-text-label-colors($step-label-text-color) {
59307
+ .e-text,
59308
+ .e-label {
59309
+ color: $step-label-text-color;
59310
+ }
59311
+ }
59312
+
59313
+ @include export-module('stepper-theme') {
59314
+ .e-stepper {
59315
+ .e-step-notstarted:not(.e-step-disabled) .e-step,
59316
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator,
59317
+ .e-step-notstarted .e-icons.e-step-indicator {
59318
+ border-color: $step-border-color;
59319
+ }
59320
+ .e-step-label-optional {
59321
+ color: $step-optional-color;
59322
+ }
59323
+ .e-step,
59324
+ .e-indicator {
59325
+ color: $step-color;
59326
+ background: $step-bg-color;
59327
+ }
59328
+ .e-step-indicator {
59329
+ color: transparent;
59330
+ }
59331
+ .e-step-completed .e-step,
59332
+ .e-step-inprogress .e-step,
59333
+ .e-step-completed .e-indicator,
59334
+ .e-step-inprogress .e-indicator,
59335
+ .e-step-completed .e-step-indicator,
59336
+ .e-step-inprogress .e-step-indicator {
59337
+ background: $step-completed-bg-color;
59338
+ color: $step-completed-color;
59339
+ }
59340
+ .e-step-selected .e-indicator {
59341
+ background: $step-completed-bg-color;
59342
+ }
59343
+ .e-step-valid .e-indicator {
59344
+ background: $step-valid-completed-bg-color;
59345
+ color: $step-valid-completed-color;
59346
+ }
59347
+ .e-step-error {
59348
+ .e-indicator {
59349
+ background: $step-error-completed-bg-color;
59350
+ color: $step-error-icon-color;
59351
+ }
59352
+ @include stepper-text-label-colors($step-error-completed-color);
59353
+ }
59354
+ .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
59355
+ .e-step-error .e-indicator:hover {
59356
+ color: $step-color;
59357
+ }
59358
+ .e-step-valid.e-step-text-only,
59359
+ .e-step-valid.e-step-label-only {
59360
+ .e-step-validation-icon {
59361
+ color: $step-valid-icon-only-color;
59362
+ }
59363
+ }
59364
+ .e-step-error.e-step-text-only,
59365
+ .e-step-error.e-step-label-only {
59366
+ .e-step-validation-icon {
59367
+ color: $step-error-icon-only-color;
59368
+ }
59369
+ }
59370
+ @include stepper-text-label-colors($stepper-text-color);
59371
+ .e-step-selected:not(.e-step-error),
59372
+ .e-step-completed:not(.e-step-error) {
59373
+ @include stepper-text-label-colors($step-completed-bg-color);
59374
+ }
59375
+ .e-step-label:not(.e-step-item) .e-step-label-container {
59376
+ background-color: $stepper-outline-color;
59377
+ }
59378
+ .e-step-text-container {
59379
+ background-color: $stepper-outline-color;
59380
+ border-color: transparent;
59381
+ }
59382
+ .e-step-disabled .e-indicator {
59383
+ background: $step-disabled-bg-color;
59384
+ color: $step-disabled-color;
59385
+ }
59386
+ .e-step-disabled .e-text,
59387
+ .e-step-disabled .e-label,
59388
+ .e-step-disabled .e-step-validation-icon {
59389
+ color: $step-disabled-font-color;
59390
+ }
59391
+ &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
59392
+ &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
59393
+ &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
59394
+ &.e-vertical.e-label-top .e-step-label-optional,
59395
+ &.e-vertical.e-label-bottom .e-step-label-optional {
59396
+ background-color: $stepper-outline-color;
59397
+ }
59398
+ .e-stepper-progressbar {
59399
+ background-color: $step-progress-bg-color;
59400
+ >.e-progressbar-value {
59401
+ background-color: $step-progress-value-bg-color;
59402
+ }
59403
+ }
59404
+ &:not(.e-steps-focus) .e-step-selected .e-step {
59405
+ box-shadow: $step-selected-li-shadow;
59406
+ }
59407
+ .e-step-focus .e-step,
59408
+ .e-step-label-only.e-step-focus .e-label,
59409
+ .e-step-text-only.e-step-focus .e-text,
59410
+ .e-step-template.e-step-focus,
59411
+ &:not(.e-steps-focus) :focus-visible .e-step,
59412
+ &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
59413
+ &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
59414
+ box-shadow: $step-keyboard-selected-li-shadow;
59415
+ }
59416
+
59417
+ &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
59418
+ .e-step-valid.e-step-focus .e-step,
59419
+ .e-step-valid.e-step-label-only.e-step-focus .e-label,
59420
+ .e-step-valid.e-step-text-only.e-step-focus .e-text,
59421
+ .e-step-valid.e-step-template.e-step-focus {
59422
+ box-shadow: $step-valid-li-shadow;
59423
+ }
59424
+
59425
+ &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
59426
+ .e-step-error.e-step-focus .e-step,
59427
+ .e-step-error.e-step-label-only.e-step-focus .e-label,
59428
+ .e-step-error.e-step-text-only.e-step-focus .e-text,
59429
+ .e-step-error.e-step-template.e-step-focus {
59430
+ box-shadow: $step-error-li-shadow;
59431
+ }
59432
+
59433
+ .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
59434
+ .e-step-container:not(.e-step-focus).e-step-completed .e-step,
59435
+ &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
59436
+ box-shadow: $step-li-shadow;
59437
+ }
59438
+
59439
+ .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
59440
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
59441
+ border-color: $step-hover-border-color;
59442
+ }
59443
+
59444
+ .e-step-notstarted:not(.e-step-disabled) .e-step:active,
59445
+ .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
59446
+ border-color: $step-active-border-color;
59447
+ }
59448
+
59449
+ &:not(.e-step-type-label) {
59450
+ .e-indicator:hover,
59451
+ .e-step:hover {
59452
+ color: $step-hover-text-color;
59453
+ background: $step-selected-hover-color;
59454
+ }
59455
+ }
59456
+
59457
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59458
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59459
+ color: $step-hover-not-text-color;
59460
+ }
59461
+
59462
+ &:not(.e-step-type-label) {
59463
+ .e-step-selected .e-indicator:active,
59464
+ .e-step-selected .e-step:active {
59465
+ background: $step-selected-active-color;
59466
+ }
59467
+ .e-step-valid.e-step-selected .e-indicator:active,
59468
+ .e-step-valid.e-step-selected .e-step:active {
59469
+ background: $step-valid-completed-bg-color;
59470
+ }
59471
+ .e-step-error.e-step-selected .e-indicator:active,
59472
+ .e-step-error.e-step-selected .e-step:active {
59473
+ background: $step-error-completed-bg-color;
59474
+ }
59475
+ }
59476
+
59477
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
59478
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
59479
+ background: $step-hover-color;
59480
+ }
59481
+
59482
+ &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
59483
+ &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
59484
+ background: $step-active-color;
59485
+ }
59486
+
59487
+ &:not(.e-step-type-label) {
59488
+ .e-step-valid .e-indicator:hover,
59489
+ .e-step-valid .e-step:hover {
59490
+ color: $step-hover-text-color;
59491
+ background: $step-valid-completed-bg-color;
59492
+ }
59493
+ .e-step-error .e-indicator:hover,
59494
+ .e-step-error .e-step:hover {
59495
+ color: $step-hover-text-color;
59496
+ background: $step-error-completed-bg-color;
59497
+ }
59498
+ }
59499
+ }
59500
+ }
59496
59501
 
59497
59502
 
59498
59503
  @include export-module('stepper-fluent2-icons') {
@@ -60392,7 +60397,7 @@ $ddt-item-hover-bg: $content-bg-color-hover !default;
60392
60397
 
60393
60398
  &.e-chip-input {
60394
60399
  width: 0;
60395
- display: none;
60400
+ visibility: hidden;
60396
60401
  }
60397
60402
  }
60398
60403
 
@@ -61629,7 +61634,8 @@ $ddl-closer-margin-top-bigger-small: -1.64em !default;
61629
61634
  $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
61630
61635
  $ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
61631
61636
  $ddl-chip-mobile-font: $content-text-color !default;
61632
- $ddl-chip-bg-color: $content-bg-color-alt3 !default;
61637
+ $ddl-chip-bg-color: $chip-bg-color !default;
61638
+ $dd-chip-border: 1px solid $chip-border-color !default;
61633
61639
  $ddl-chip-hover-bg-color: $content-bg-color-alt4 !default;
61634
61640
  $ddl-chip-hover-font-color: $content-text-color-hover !default;
61635
61641
  $ddl-sel-hover-chip-bg-color: $content-bg-color-alt5 !default;
@@ -63938,6 +63944,9 @@ ejs-multiselect {
63938
63944
  @if $ddl-multiselect-skin-name != 'Material3' {
63939
63945
  background-color: $ddl-chip-bg-color;
63940
63946
  }
63947
+ @if $ddl-multiselect-skin-name == 'fluent2' {
63948
+ border: $dd-chip-border;
63949
+ }
63941
63950
  border-radius: $ddl-chip-radius;
63942
63951
  height: $ddl-chip-height;
63943
63952
  }
@@ -65241,10 +65250,10 @@ $listbox-template-multiline-header-font-size: $text-sm !default;
65241
65250
  $listbox-template-multiline-padding: 4px !default;
65242
65251
  $listbox-template-multiline-content-font-size: $text-sm !default;
65243
65252
  $listbox-template-multiline-avatar-top: 0 !default;
65244
- $listbox-filter-height: calc(100% - 47px) !default;
65245
- $listbox-filter-small-height: calc(100% - 45px) !default;
65246
- $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
65247
- $listbox-filter-bigger-height: calc(100% - 55px) !default;
65253
+ $listbox-filter-height: calc(100% - 52px) !default;
65254
+ $listbox-filter-small-height: calc(100% - 48px) !default;
65255
+ $listbox-filter-bigger-small-height: calc(100% - 58px) !default;
65256
+ $listbox-filter-bigger-height: calc(100% - 60px) !default;
65248
65257
 
65249
65258
  $listbox-border-color: $border-light;
65250
65259
  $badge-color: $primary-text-color !default;
@@ -65287,8 +65296,6 @@ $listbox-filterselect-height: calc(100% - 38px) !default;
65287
65296
  $listbox-filterselect-bigger-height: calc(100% - 47px) !default;
65288
65297
  $listbox-mat-filter-height: calc(100% - 50px) !default;
65289
65298
  $listbox-mat-filter-bigger-height: calc(100% - 58px) !default;
65290
- $listbox-filter-height: calc(100% - 50px) !default;
65291
- $listbox-filter-bigger-height: calc(100% - 58px) !default;
65292
65299
  $listbox-ej2-filterselect-height: calc(100% - 87.5px) !default;
65293
65300
  $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
65294
65301
 
@@ -80455,7 +80462,9 @@ $grid-checkmark-color: $primary-text-color !default;
80455
80462
  padding: $grid-group-caption-header-padding $grid-content-right-padding;
80456
80463
  }
80457
80464
  white-space: normal;
80458
- word-wrap: break-word;
80465
+ text-wrap: nowrap;
80466
+ text-overflow: ellipsis;
80467
+ overflow: hidden;
80459
80468
  &.e-lastrowcell {
80460
80469
  border-bottom-width: 1px;
80461
80470
  }
@@ -82379,7 +82388,7 @@ $grid-checkmark-color: $primary-text-color !default;
82379
82388
 
82380
82389
  &.e-default {
82381
82390
  & tr td:last-child:not(.e-xlsel-left-border, .e-addfreezefirstchildborder),
82382
- & .e-gridheader table tr th:last-child {
82391
+ & .e-gridheader table tr th:last-child:not(.e-firstcell) {
82383
82392
  border-left: 0;
82384
82393
  }
82385
82394
  }
@@ -93784,7 +93793,7 @@ $rte-big-img-upload-abort-icon-btn-padding: 18px;
93784
93793
  .e-rte-dropdown-btn-text,
93785
93794
  .e-background-color,
93786
93795
  .e-rte-font-color {
93787
- font-size: 14px;
93796
+ font-size: 16px;
93788
93797
  }
93789
93798
  }
93790
93799
  .e-bigger {
@@ -93793,27 +93802,27 @@ $rte-big-img-upload-abort-icon-btn-padding: 18px;
93793
93802
  .e-rte-dropdown-btn-text,
93794
93803
  .e-background-color,
93795
93804
  .e-rte-font-color {
93796
- font-size: 16px;
93805
+ font-size: 18px;
93797
93806
  }
93798
93807
  }
93799
93808
  }
93800
93809
  .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
93801
93810
  .e-background-color,
93802
- .e-rte-font-color{
93803
- font-size: 14px;
93811
+ .e-rte-font-color {
93812
+ font-size: 16px;
93804
93813
  }
93805
93814
  }
93806
93815
  .e-bigger {
93807
93816
  .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
93808
93817
  .e-background-color,
93809
- .e-rte-font-color{
93810
- font-size: 16px;
93818
+ .e-rte-font-color {
93819
+ font-size: 18px;
93811
93820
  }
93812
93821
  }
93813
- .e-rte-container{
93822
+ .e-rte-container {
93814
93823
  border-radius: 4px;
93815
93824
  }
93816
- .e-richtexteditor{
93825
+ .e-richtexteditor {
93817
93826
  border-radius: 4px;
93818
93827
  .e-toolbar {
93819
93828
  border-radius: 4px 4px 0 0;
@@ -95282,7 +95291,7 @@ $gantt-dialog-bigger-border-radius: 6px !important;
95282
95291
  $gantt-bigger-dialog-tab-padding-left: 12px !important;
95283
95292
  $gantt-bigger-dialog-border-radius: 6px 6px 0px 0px !default;
95284
95293
  $gantt-bigger-dialog-edit-form-scroll-padding: 16px 18px 0 9px !default;
95285
- $gantt-dialog-close-button-top: 3px !important;
95294
+ $gantt-dialog-close-button-top: 0 !important;
95286
95295
  $gantt-dialog-dependent-height: 157px !default;
95287
95296
  $gantt-dialog-resource-height: 200px !default;
95288
95297
  $gantt-dialog-rte-height: 259px !default;
@@ -124250,6 +124259,7 @@ $image-editor-save-dlg-big-btn-pad: 8px !default;
124250
124259
  $image-editor-save-dlg-grp-btn-padding: 5.2px 10.5px !default;
124251
124260
  $image-editor-save-dlg-dev-grp-btn-padding: 5.2px 10.5px !default;
124252
124261
  $image-editor-icon-button: 5px !default;
124262
+ $image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
124253
124263
 
124254
124264
  @include export-module('image-editor-layout') {
124255
124265
  .e-ie-toolbar-upload-div.e-hide,
@@ -125290,6 +125300,13 @@ $image-editor-icon-button: 5px !default;
125290
125300
  }
125291
125301
  }
125292
125302
 
125303
+ .e-ie-filter-canvas:focus,
125304
+ .filter-wrapper:focus .e-ie-filter-canvas,
125305
+ .filter-wrapper:focus canvas,
125306
+ .filter-wrapper canvas:focus {
125307
+ border: $image-editor-filter-canvas-focus;
125308
+ }
125309
+
125293
125310
 
125294
125311
  @include export-module('image-editor-fluent2-icons') {
125295
125312
  .e-image-editor {