@syncfusion/blazor-themes 24.1.41 → 24.1.44

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 (117) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +89 -9
  2. package/SCSS-Themes/bootstrap.scss +89 -9
  3. package/SCSS-Themes/bootstrap4.scss +89 -9
  4. package/SCSS-Themes/bootstrap5-dark.scss +89 -9
  5. package/SCSS-Themes/bootstrap5.scss +89 -9
  6. package/SCSS-Themes/buttons/button/bootstrap-dark.scss +52 -0
  7. package/SCSS-Themes/buttons/button/bootstrap.scss +52 -0
  8. package/SCSS-Themes/buttons/button/bootstrap4.scss +52 -0
  9. package/SCSS-Themes/buttons/button/bootstrap5-dark.scss +52 -0
  10. package/SCSS-Themes/buttons/button/bootstrap5.scss +52 -0
  11. package/SCSS-Themes/buttons/button/fabric-dark.scss +52 -0
  12. package/SCSS-Themes/buttons/button/fabric.scss +52 -0
  13. package/SCSS-Themes/buttons/button/fluent-dark.scss +52 -0
  14. package/SCSS-Themes/buttons/button/fluent.scss +52 -0
  15. package/SCSS-Themes/buttons/button/highcontrast.scss +52 -0
  16. package/SCSS-Themes/buttons/button/material-dark.scss +52 -0
  17. package/SCSS-Themes/buttons/button/material.scss +52 -0
  18. package/SCSS-Themes/buttons/button/material3-dark.scss +52 -0
  19. package/SCSS-Themes/buttons/button/material3.scss +52 -0
  20. package/SCSS-Themes/buttons/button/tailwind-dark.scss +52 -0
  21. package/SCSS-Themes/buttons/button/tailwind.scss +52 -0
  22. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap-dark.scss +0 -3
  23. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap.scss +0 -3
  24. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap4.scss +0 -3
  25. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5-dark.scss +0 -3
  26. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5.scss +0 -3
  27. package/SCSS-Themes/dropdowns/drop-down-base/fabric-dark.scss +0 -3
  28. package/SCSS-Themes/dropdowns/drop-down-base/fabric.scss +0 -3
  29. package/SCSS-Themes/dropdowns/drop-down-base/fluent-dark.scss +0 -3
  30. package/SCSS-Themes/dropdowns/drop-down-base/fluent.scss +0 -3
  31. package/SCSS-Themes/dropdowns/drop-down-base/highcontrast.scss +0 -3
  32. package/SCSS-Themes/dropdowns/drop-down-base/material-dark.scss +0 -3
  33. package/SCSS-Themes/dropdowns/drop-down-base/material.scss +0 -3
  34. package/SCSS-Themes/dropdowns/drop-down-base/material3-dark.scss +0 -3
  35. package/SCSS-Themes/dropdowns/drop-down-base/material3.scss +0 -3
  36. package/SCSS-Themes/dropdowns/drop-down-base/tailwind-dark.scss +0 -3
  37. package/SCSS-Themes/dropdowns/drop-down-base/tailwind.scss +0 -3
  38. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +5 -0
  39. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +5 -0
  40. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +5 -0
  41. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +5 -0
  42. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +5 -0
  43. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +5 -0
  44. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +5 -0
  45. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +5 -0
  46. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +5 -0
  47. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +5 -0
  48. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +5 -0
  49. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +5 -0
  50. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +5 -0
  51. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +5 -0
  52. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +5 -0
  53. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +5 -0
  54. package/SCSS-Themes/fabric-dark.scss +89 -9
  55. package/SCSS-Themes/fabric.scss +89 -9
  56. package/SCSS-Themes/fluent-dark.scss +90 -10
  57. package/SCSS-Themes/fluent.scss +90 -10
  58. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
  59. package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
  60. package/SCSS-Themes/grids/grid/bootstrap4.scss +9 -0
  61. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
  62. package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
  63. package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
  64. package/SCSS-Themes/grids/grid/fabric.scss +9 -0
  65. package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
  66. package/SCSS-Themes/grids/grid/fluent.scss +9 -0
  67. package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
  68. package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
  69. package/SCSS-Themes/grids/grid/material.scss +9 -0
  70. package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
  71. package/SCSS-Themes/grids/grid/material3.scss +9 -0
  72. package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
  73. package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
  74. package/SCSS-Themes/highcontrast.scss +89 -9
  75. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +9 -6
  76. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +9 -6
  77. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +9 -6
  78. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +9 -6
  79. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +9 -6
  80. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +9 -6
  81. package/SCSS-Themes/image-editor/image-editor/fabric.scss +9 -6
  82. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +9 -6
  83. package/SCSS-Themes/image-editor/image-editor/fluent.scss +9 -6
  84. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +9 -6
  85. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +9 -6
  86. package/SCSS-Themes/image-editor/image-editor/material.scss +9 -6
  87. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +9 -6
  88. package/SCSS-Themes/image-editor/image-editor/material3.scss +9 -6
  89. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +9 -6
  90. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +9 -6
  91. package/SCSS-Themes/inputs/data-form/material3-dark.scss +1 -1
  92. package/SCSS-Themes/inputs/data-form/material3.scss +1 -1
  93. package/SCSS-Themes/material-dark.scss +90 -10
  94. package/SCSS-Themes/material.scss +89 -9
  95. package/SCSS-Themes/material3-dark.scss +90 -10
  96. package/SCSS-Themes/material3.scss +90 -10
  97. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +1 -1
  98. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +1 -1
  99. package/SCSS-Themes/splitbuttons/progress-button/bootstrap-dark.scss +14 -0
  100. package/SCSS-Themes/splitbuttons/progress-button/bootstrap.scss +14 -0
  101. package/SCSS-Themes/splitbuttons/progress-button/bootstrap4.scss +14 -0
  102. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5-dark.scss +14 -0
  103. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5.scss +14 -0
  104. package/SCSS-Themes/splitbuttons/progress-button/fabric-dark.scss +14 -0
  105. package/SCSS-Themes/splitbuttons/progress-button/fabric.scss +14 -0
  106. package/SCSS-Themes/splitbuttons/progress-button/fluent-dark.scss +14 -0
  107. package/SCSS-Themes/splitbuttons/progress-button/fluent.scss +14 -0
  108. package/SCSS-Themes/splitbuttons/progress-button/highcontrast.scss +14 -0
  109. package/SCSS-Themes/splitbuttons/progress-button/material-dark.scss +14 -0
  110. package/SCSS-Themes/splitbuttons/progress-button/material.scss +14 -0
  111. package/SCSS-Themes/splitbuttons/progress-button/material3-dark.scss +14 -0
  112. package/SCSS-Themes/splitbuttons/progress-button/material3.scss +14 -0
  113. package/SCSS-Themes/splitbuttons/progress-button/tailwind-dark.scss +14 -0
  114. package/SCSS-Themes/splitbuttons/progress-button/tailwind.scss +14 -0
  115. package/SCSS-Themes/tailwind-dark.scss +89 -9
  116. package/SCSS-Themes/tailwind.scss +89 -9
  117. package/package.json +1 -1
@@ -19938,9 +19938,6 @@ $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
19938
19938
  #{if(&, '&', '*')} .e-fixed-head {
19939
19939
  position: absolute;
19940
19940
  top: 0;
19941
- .e-rtl #{if(&, '&', '*')} {
19942
- left: 33px;
19943
- }
19944
19941
  }
19945
19942
  }
19946
19943
  }
@@ -24568,12 +24565,22 @@ $btn-focus-box-shadow: none !default;
24568
24565
  @if $skin-name == 'FluentUI' {
24569
24566
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24570
24567
  }
24568
+
24569
+ @if $skin-name == 'bootstrap5' {
24570
+ background: $btn-outline-active-bgcolor;
24571
+ color: $btn-outline-active-color;
24572
+ }
24571
24573
  }
24572
24574
 
24573
24575
  &:focus-visible { // only for keybord
24574
24576
  @if $skin-name == 'FluentUI' {
24575
24577
  background: $btn-outline-bgcolor;
24576
24578
  }
24579
+
24580
+ @if $skin-name == 'bootstrap5' {
24581
+ box-shadow: $btn-focus-box-shadow;
24582
+ }
24583
+
24577
24584
  @if $skin-name == 'Material3' {
24578
24585
  background: $btn-active-bgcolor;
24579
24586
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24624,12 +24631,22 @@ $btn-focus-box-shadow: none !default;
24624
24631
  @if $skin-name == 'FluentUI' {
24625
24632
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24626
24633
  }
24634
+
24635
+ @if $skin-name == 'bootstrap5' {
24636
+ background: $btn-outline-primary-focus-bgcolor;
24637
+ color: $btn-outline-active-color;
24638
+ }
24627
24639
  }
24628
24640
 
24629
24641
  &:focus-visible { // only for keybord
24630
24642
  @if $skin-name == 'FluentUI' {
24631
24643
  background: $btn-outline-bgcolor;
24632
24644
  }
24645
+
24646
+ @if $skin-name == 'bootstrap5' {
24647
+ box-shadow: $btn-primary-focus-box-shadow;
24648
+ }
24649
+
24633
24650
  @if $skin-name == 'Material3' {
24634
24651
  background: $btn-primary-active-bgcolor;
24635
24652
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24687,12 +24704,20 @@ $btn-focus-box-shadow: none !default;
24687
24704
  @if $skin-name == 'FluentUI' {
24688
24705
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24689
24706
  }
24707
+
24708
+ @if $skin-name == 'bootstrap5' {
24709
+ background: $btn-success-bgcolor;
24710
+ color: $btn-success-color;
24711
+ }
24690
24712
  }
24691
24713
 
24692
24714
  &:focus-visible { // only for keybord
24693
24715
  @if $skin-name == 'FluentUI' {
24694
24716
  background: $btn-outline-bgcolor;
24695
24717
  }
24718
+ @if $skin-name == 'bootstrap5' {
24719
+ box-shadow: $btn-success-focus-box-shadow;
24720
+ }
24696
24721
  @if $skin-name == 'Material3' {
24697
24722
  background: $btn-success-active-bgcolor;
24698
24723
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24750,12 +24775,20 @@ $btn-focus-box-shadow: none !default;
24750
24775
  @if $skin-name == 'FluentUI' {
24751
24776
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24752
24777
  }
24778
+
24779
+ @if $skin-name == 'bootstrap5' {
24780
+ background: $btn-info-bgcolor;
24781
+ color: $btn-info-color;
24782
+ }
24753
24783
  }
24754
24784
 
24755
24785
  &:focus-visible { // only for keybord
24756
24786
  @if $skin-name == 'FluentUI' {
24757
24787
  background: $btn-outline-bgcolor;
24758
24788
  }
24789
+ @if $skin-name == 'bootstrap5' {
24790
+ box-shadow: $btn-info-focus-box-shadow;
24791
+ }
24759
24792
  @if $skin-name == 'Material3' {
24760
24793
  background: $btn-info-active-bgcolor;
24761
24794
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24813,12 +24846,20 @@ $btn-focus-box-shadow: none !default;
24813
24846
  @if $skin-name == 'FluentUI' {
24814
24847
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24815
24848
  }
24849
+
24850
+ @if $skin-name == 'bootstrap5' {
24851
+ background: $btn-warning-bgcolor;
24852
+ color: $btn-warning-color;
24853
+ }
24816
24854
  }
24817
24855
 
24818
24856
  &:focus-visible { // only for keybord
24819
24857
  @if $skin-name == 'FluentUI' {
24820
24858
  background: $btn-outline-bgcolor;
24821
24859
  }
24860
+ @if $skin-name == 'bootstrap5' {
24861
+ box-shadow: $btn-warning-focus-box-shadow;
24862
+ }
24822
24863
  @if $skin-name == 'Material3' {
24823
24864
  background: $btn-warning-active-bgcolor;
24824
24865
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24876,12 +24917,20 @@ $btn-focus-box-shadow: none !default;
24876
24917
  @if $skin-name == 'FluentUI' {
24877
24918
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24878
24919
  }
24920
+
24921
+ @if $skin-name == 'bootstrap5' {
24922
+ background: $btn-danger-bgcolor;
24923
+ color: $btn-danger-color;
24924
+ }
24879
24925
  }
24880
24926
 
24881
24927
  &:focus-visible { // only for keybord
24882
24928
  @if $skin-name == 'FluentUI' {
24883
24929
  background: $btn-outline-bgcolor;
24884
24930
  }
24931
+ @if $skin-name == 'bootstrap5' {
24932
+ box-shadow: $btn-danger-focus-box-shadow;
24933
+ }
24885
24934
  @if $skin-name == 'Material3' {
24886
24935
  background: $btn-danger-active-bgcolor;
24887
24936
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59271,6 +59320,11 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
59271
59320
  }
59272
59321
  }
59273
59322
 
59323
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59324
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59325
+ display: flex;
59326
+ }
59327
+
59274
59328
  .e-chips-wrapper {
59275
59329
  width: 100%;
59276
59330
  }
@@ -83650,6 +83704,15 @@ margin: $grid-group-animator-cell-margin;
83650
83704
  color: $grid-cell-selection-color;
83651
83705
  }
83652
83706
 
83707
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
83708
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
83709
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
83710
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
83711
+ @if $grid-skin == 'material3' {
83712
+ background-color: rgba($primary-container, 1);
83713
+ }
83714
+ }
83715
+
83653
83716
  .e-filterbarcell,
83654
83717
  .e-filterbarcelldisabled {
83655
83718
  background-color: $grid-header-bg-color;
@@ -90001,6 +90064,20 @@ $btn-flat-primary-path-arc: none;
90001
90064
  }
90002
90065
  }
90003
90066
 
90067
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
90068
+ fill: $btn-outline-color;
90069
+ stroke: $btn-outline-color;
90070
+ }
90071
+
90072
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
90073
+ fill: $btn-color;
90074
+ stroke: $btn-color;
90075
+ }
90076
+
90077
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
90078
+ stroke: $btn-outline-color;
90079
+ }
90080
+
90004
90081
 
90005
90082
 
90006
90083
 
@@ -122378,18 +122455,17 @@ $image-editor-device-slider-handler: calc(50% - 5px) !default;
122378
122455
  }
122379
122456
  }
122380
122457
  .e-ie-straighten-value-span,
122381
- .e-ie-straighten-span {
122382
- font-size: 14px;
122458
+ .e-ie-straighten-span,
122459
+ .e-ie-toolbar-straighten {
122460
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
122383
122461
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
122384
122462
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
122385
122463
  }
122386
122464
 
122387
122465
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
122388
122466
  height: auto;
122389
- @if $skin-name == 'Material3' {
122390
- margin-left: 8px;
122391
- padding-right: 2px;
122392
- }
122467
+ margin-left: 8px;
122468
+ padding-right: 2px;
122393
122469
  }
122394
122470
 
122395
122471
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -122409,6 +122485,10 @@ $image-editor-device-slider-handler: calc(50% - 5px) !default;
122409
122485
  }
122410
122486
  }
122411
122487
 
122488
+ .e-ie-finetune-value-span {
122489
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
122490
+ }
122491
+
122412
122492
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
122413
122493
  @if $skin-name == 'Material3' {
122414
122494
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -20147,9 +20147,6 @@ $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
20147
20147
  #{if(&, '&', '*')} .e-fixed-head {
20148
20148
  position: absolute;
20149
20149
  top: 0;
20150
- .e-rtl #{if(&, '&', '*')} {
20151
- left: 33px;
20152
- }
20153
20150
  }
20154
20151
  }
20155
20152
  }
@@ -24914,12 +24911,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24914
24911
  @if $skin-name == 'FluentUI' {
24915
24912
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24916
24913
  }
24914
+
24915
+ @if $skin-name == 'bootstrap5' {
24916
+ background: $btn-outline-active-bgcolor;
24917
+ color: $btn-outline-active-color;
24918
+ }
24917
24919
  }
24918
24920
 
24919
24921
  &:focus-visible { // only for keybord
24920
24922
  @if $skin-name == 'FluentUI' {
24921
24923
  background: $btn-outline-bgcolor;
24922
24924
  }
24925
+
24926
+ @if $skin-name == 'bootstrap5' {
24927
+ box-shadow: $btn-focus-box-shadow;
24928
+ }
24929
+
24923
24930
  @if $skin-name == 'Material3' {
24924
24931
  background: $btn-active-bgcolor;
24925
24932
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24970,12 +24977,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24970
24977
  @if $skin-name == 'FluentUI' {
24971
24978
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24972
24979
  }
24980
+
24981
+ @if $skin-name == 'bootstrap5' {
24982
+ background: $btn-outline-primary-focus-bgcolor;
24983
+ color: $btn-outline-active-color;
24984
+ }
24973
24985
  }
24974
24986
 
24975
24987
  &:focus-visible { // only for keybord
24976
24988
  @if $skin-name == 'FluentUI' {
24977
24989
  background: $btn-outline-bgcolor;
24978
24990
  }
24991
+
24992
+ @if $skin-name == 'bootstrap5' {
24993
+ box-shadow: $btn-primary-focus-box-shadow;
24994
+ }
24995
+
24979
24996
  @if $skin-name == 'Material3' {
24980
24997
  background: $btn-primary-active-bgcolor;
24981
24998
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25033,12 +25050,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25033
25050
  @if $skin-name == 'FluentUI' {
25034
25051
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25035
25052
  }
25053
+
25054
+ @if $skin-name == 'bootstrap5' {
25055
+ background: $btn-success-bgcolor;
25056
+ color: $btn-success-color;
25057
+ }
25036
25058
  }
25037
25059
 
25038
25060
  &:focus-visible { // only for keybord
25039
25061
  @if $skin-name == 'FluentUI' {
25040
25062
  background: $btn-outline-bgcolor;
25041
25063
  }
25064
+ @if $skin-name == 'bootstrap5' {
25065
+ box-shadow: $btn-success-focus-box-shadow;
25066
+ }
25042
25067
  @if $skin-name == 'Material3' {
25043
25068
  background: $btn-success-active-bgcolor;
25044
25069
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25096,12 +25121,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25096
25121
  @if $skin-name == 'FluentUI' {
25097
25122
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25098
25123
  }
25124
+
25125
+ @if $skin-name == 'bootstrap5' {
25126
+ background: $btn-info-bgcolor;
25127
+ color: $btn-info-color;
25128
+ }
25099
25129
  }
25100
25130
 
25101
25131
  &:focus-visible { // only for keybord
25102
25132
  @if $skin-name == 'FluentUI' {
25103
25133
  background: $btn-outline-bgcolor;
25104
25134
  }
25135
+ @if $skin-name == 'bootstrap5' {
25136
+ box-shadow: $btn-info-focus-box-shadow;
25137
+ }
25105
25138
  @if $skin-name == 'Material3' {
25106
25139
  background: $btn-info-active-bgcolor;
25107
25140
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25159,12 +25192,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25159
25192
  @if $skin-name == 'FluentUI' {
25160
25193
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25161
25194
  }
25195
+
25196
+ @if $skin-name == 'bootstrap5' {
25197
+ background: $btn-warning-bgcolor;
25198
+ color: $btn-warning-color;
25199
+ }
25162
25200
  }
25163
25201
 
25164
25202
  &:focus-visible { // only for keybord
25165
25203
  @if $skin-name == 'FluentUI' {
25166
25204
  background: $btn-outline-bgcolor;
25167
25205
  }
25206
+ @if $skin-name == 'bootstrap5' {
25207
+ box-shadow: $btn-warning-focus-box-shadow;
25208
+ }
25168
25209
  @if $skin-name == 'Material3' {
25169
25210
  background: $btn-warning-active-bgcolor;
25170
25211
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25222,12 +25263,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25222
25263
  @if $skin-name == 'FluentUI' {
25223
25264
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25224
25265
  }
25266
+
25267
+ @if $skin-name == 'bootstrap5' {
25268
+ background: $btn-danger-bgcolor;
25269
+ color: $btn-danger-color;
25270
+ }
25225
25271
  }
25226
25272
 
25227
25273
  &:focus-visible { // only for keybord
25228
25274
  @if $skin-name == 'FluentUI' {
25229
25275
  background: $btn-outline-bgcolor;
25230
25276
  }
25277
+ @if $skin-name == 'bootstrap5' {
25278
+ box-shadow: $btn-danger-focus-box-shadow;
25279
+ }
25231
25280
  @if $skin-name == 'Material3' {
25232
25281
  background: $btn-danger-active-bgcolor;
25233
25282
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59629,6 +59678,11 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
59629
59678
  }
59630
59679
  }
59631
59680
 
59681
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59682
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59683
+ display: flex;
59684
+ }
59685
+
59632
59686
  .e-chips-wrapper {
59633
59687
  width: 100%;
59634
59688
  }
@@ -84151,6 +84205,15 @@ margin: $grid-group-animator-cell-margin;
84151
84205
  color: $grid-cell-selection-color;
84152
84206
  }
84153
84207
 
84208
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
84209
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
84210
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
84211
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
84212
+ @if $grid-skin == 'material3' {
84213
+ background-color: rgba($primary-container, 1);
84214
+ }
84215
+ }
84216
+
84154
84217
  .e-filterbarcell,
84155
84218
  .e-filterbarcelldisabled {
84156
84219
  background-color: $grid-header-bg-color;
@@ -87801,7 +87864,7 @@ $form-group-title-border-height: 1px !default;
87801
87864
  $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
87802
87865
 
87803
87866
  //tooltip styles
87804
- $form-tooltip-background-color: $danger-light !default;
87867
+ $form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
87805
87868
  $form-tooltip-color: var(--danger, #b3261e) !default;
87806
87869
  $form-validation-message-font-size: 12px;
87807
87870
 
@@ -90545,6 +90608,20 @@ $btn-flat-primary-path-arc: rgba($white);
90545
90608
  }
90546
90609
  }
90547
90610
 
90611
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
90612
+ fill: $btn-outline-color;
90613
+ stroke: $btn-outline-color;
90614
+ }
90615
+
90616
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
90617
+ fill: $btn-color;
90618
+ stroke: $btn-color;
90619
+ }
90620
+
90621
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
90622
+ stroke: $btn-outline-color;
90623
+ }
90624
+
90548
90625
 
90549
90626
 
90550
90627
 
@@ -122964,18 +123041,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
122964
123041
  }
122965
123042
  }
122966
123043
  .e-ie-straighten-value-span,
122967
- .e-ie-straighten-span {
122968
- font-size: 14px;
123044
+ .e-ie-straighten-span,
123045
+ .e-ie-toolbar-straighten {
123046
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
122969
123047
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
122970
123048
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
122971
123049
  }
122972
123050
 
122973
123051
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
122974
123052
  height: auto;
122975
- @if $skin-name == 'Material3' {
122976
- margin-left: 8px;
122977
- padding-right: 2px;
122978
- }
123053
+ margin-left: 8px;
123054
+ padding-right: 2px;
122979
123055
  }
122980
123056
 
122981
123057
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -122995,6 +123071,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
122995
123071
  }
122996
123072
  }
122997
123073
 
123074
+ .e-ie-finetune-value-span {
123075
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
123076
+ }
123077
+
122998
123078
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
122999
123079
  @if $skin-name == 'Material3' {
123000
123080
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -20230,9 +20230,6 @@ $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
20230
20230
  #{if(&, '&', '*')} .e-fixed-head {
20231
20231
  position: absolute;
20232
20232
  top: 0;
20233
- .e-rtl #{if(&, '&', '*')} {
20234
- left: 33px;
20235
- }
20236
20233
  }
20237
20234
  }
20238
20235
  }
@@ -24997,12 +24994,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24997
24994
  @if $skin-name == 'FluentUI' {
24998
24995
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24999
24996
  }
24997
+
24998
+ @if $skin-name == 'bootstrap5' {
24999
+ background: $btn-outline-active-bgcolor;
25000
+ color: $btn-outline-active-color;
25001
+ }
25000
25002
  }
25001
25003
 
25002
25004
  &:focus-visible { // only for keybord
25003
25005
  @if $skin-name == 'FluentUI' {
25004
25006
  background: $btn-outline-bgcolor;
25005
25007
  }
25008
+
25009
+ @if $skin-name == 'bootstrap5' {
25010
+ box-shadow: $btn-focus-box-shadow;
25011
+ }
25012
+
25006
25013
  @if $skin-name == 'Material3' {
25007
25014
  background: $btn-active-bgcolor;
25008
25015
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25053,12 +25060,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25053
25060
  @if $skin-name == 'FluentUI' {
25054
25061
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25055
25062
  }
25063
+
25064
+ @if $skin-name == 'bootstrap5' {
25065
+ background: $btn-outline-primary-focus-bgcolor;
25066
+ color: $btn-outline-active-color;
25067
+ }
25056
25068
  }
25057
25069
 
25058
25070
  &:focus-visible { // only for keybord
25059
25071
  @if $skin-name == 'FluentUI' {
25060
25072
  background: $btn-outline-bgcolor;
25061
25073
  }
25074
+
25075
+ @if $skin-name == 'bootstrap5' {
25076
+ box-shadow: $btn-primary-focus-box-shadow;
25077
+ }
25078
+
25062
25079
  @if $skin-name == 'Material3' {
25063
25080
  background: $btn-primary-active-bgcolor;
25064
25081
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25116,12 +25133,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25116
25133
  @if $skin-name == 'FluentUI' {
25117
25134
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25118
25135
  }
25136
+
25137
+ @if $skin-name == 'bootstrap5' {
25138
+ background: $btn-success-bgcolor;
25139
+ color: $btn-success-color;
25140
+ }
25119
25141
  }
25120
25142
 
25121
25143
  &:focus-visible { // only for keybord
25122
25144
  @if $skin-name == 'FluentUI' {
25123
25145
  background: $btn-outline-bgcolor;
25124
25146
  }
25147
+ @if $skin-name == 'bootstrap5' {
25148
+ box-shadow: $btn-success-focus-box-shadow;
25149
+ }
25125
25150
  @if $skin-name == 'Material3' {
25126
25151
  background: $btn-success-active-bgcolor;
25127
25152
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25179,12 +25204,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25179
25204
  @if $skin-name == 'FluentUI' {
25180
25205
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25181
25206
  }
25207
+
25208
+ @if $skin-name == 'bootstrap5' {
25209
+ background: $btn-info-bgcolor;
25210
+ color: $btn-info-color;
25211
+ }
25182
25212
  }
25183
25213
 
25184
25214
  &:focus-visible { // only for keybord
25185
25215
  @if $skin-name == 'FluentUI' {
25186
25216
  background: $btn-outline-bgcolor;
25187
25217
  }
25218
+ @if $skin-name == 'bootstrap5' {
25219
+ box-shadow: $btn-info-focus-box-shadow;
25220
+ }
25188
25221
  @if $skin-name == 'Material3' {
25189
25222
  background: $btn-info-active-bgcolor;
25190
25223
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25242,12 +25275,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25242
25275
  @if $skin-name == 'FluentUI' {
25243
25276
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25244
25277
  }
25278
+
25279
+ @if $skin-name == 'bootstrap5' {
25280
+ background: $btn-warning-bgcolor;
25281
+ color: $btn-warning-color;
25282
+ }
25245
25283
  }
25246
25284
 
25247
25285
  &:focus-visible { // only for keybord
25248
25286
  @if $skin-name == 'FluentUI' {
25249
25287
  background: $btn-outline-bgcolor;
25250
25288
  }
25289
+ @if $skin-name == 'bootstrap5' {
25290
+ box-shadow: $btn-warning-focus-box-shadow;
25291
+ }
25251
25292
  @if $skin-name == 'Material3' {
25252
25293
  background: $btn-warning-active-bgcolor;
25253
25294
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25305,12 +25346,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25305
25346
  @if $skin-name == 'FluentUI' {
25306
25347
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25307
25348
  }
25349
+
25350
+ @if $skin-name == 'bootstrap5' {
25351
+ background: $btn-danger-bgcolor;
25352
+ color: $btn-danger-color;
25353
+ }
25308
25354
  }
25309
25355
 
25310
25356
  &:focus-visible { // only for keybord
25311
25357
  @if $skin-name == 'FluentUI' {
25312
25358
  background: $btn-outline-bgcolor;
25313
25359
  }
25360
+ @if $skin-name == 'bootstrap5' {
25361
+ box-shadow: $btn-danger-focus-box-shadow;
25362
+ }
25314
25363
  @if $skin-name == 'Material3' {
25315
25364
  background: $btn-danger-active-bgcolor;
25316
25365
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59712,6 +59761,11 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
59712
59761
  }
59713
59762
  }
59714
59763
 
59764
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59765
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59766
+ display: flex;
59767
+ }
59768
+
59715
59769
  .e-chips-wrapper {
59716
59770
  width: 100%;
59717
59771
  }
@@ -84234,6 +84288,15 @@ margin: $grid-group-animator-cell-margin;
84234
84288
  color: $grid-cell-selection-color;
84235
84289
  }
84236
84290
 
84291
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
84292
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
84293
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
84294
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
84295
+ @if $grid-skin == 'material3' {
84296
+ background-color: rgba($primary-container, 1);
84297
+ }
84298
+ }
84299
+
84237
84300
  .e-filterbarcell,
84238
84301
  .e-filterbarcelldisabled {
84239
84302
  background-color: $grid-header-bg-color;
@@ -87884,7 +87947,7 @@ $form-group-title-border-height: 1px !default;
87884
87947
  $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
87885
87948
 
87886
87949
  //tooltip styles
87887
- $form-tooltip-background-color: $danger-light !default;
87950
+ $form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
87888
87951
  $form-tooltip-color: var(--danger, #b3261e) !default;
87889
87952
  $form-validation-message-font-size: 12px;
87890
87953
 
@@ -90628,6 +90691,20 @@ $btn-flat-primary-path-arc: rgba($white);
90628
90691
  }
90629
90692
  }
90630
90693
 
90694
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
90695
+ fill: $btn-outline-color;
90696
+ stroke: $btn-outline-color;
90697
+ }
90698
+
90699
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
90700
+ fill: $btn-color;
90701
+ stroke: $btn-color;
90702
+ }
90703
+
90704
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
90705
+ stroke: $btn-outline-color;
90706
+ }
90707
+
90631
90708
 
90632
90709
 
90633
90710
 
@@ -123047,18 +123124,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
123047
123124
  }
123048
123125
  }
123049
123126
  .e-ie-straighten-value-span,
123050
- .e-ie-straighten-span {
123051
- font-size: 14px;
123127
+ .e-ie-straighten-span,
123128
+ .e-ie-toolbar-straighten {
123129
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
123052
123130
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
123053
123131
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
123054
123132
  }
123055
123133
 
123056
123134
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
123057
123135
  height: auto;
123058
- @if $skin-name == 'Material3' {
123059
- margin-left: 8px;
123060
- padding-right: 2px;
123061
- }
123136
+ margin-left: 8px;
123137
+ padding-right: 2px;
123062
123138
  }
123063
123139
 
123064
123140
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -123078,6 +123154,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
123078
123154
  }
123079
123155
  }
123080
123156
 
123157
+ .e-ie-finetune-value-span {
123158
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
123159
+ }
123160
+
123081
123161
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
123082
123162
  @if $skin-name == 'Material3' {
123083
123163
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -5800,7 +5800,7 @@ $pv-comment-text-cursor-color: $black !default;
5800
5800
  }
5801
5801
 
5802
5802
  .e-pv-search-close::before {
5803
- content: '\e754';
5803
+ content: '\e7e7';
5804
5804
  font-family: 'e-icons';
5805
5805
  }
5806
5806