@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
@@ -19616,9 +19616,6 @@ $ddl-bigger-small-list-header-font-size: 14px !default;
19616
19616
  #{if(&, '&', '*')} .e-fixed-head {
19617
19617
  position: absolute;
19618
19618
  top: 0;
19619
- .e-rtl #{if(&, '&', '*')} {
19620
- left: 33px;
19621
- }
19622
19619
  }
19623
19620
  }
19624
19621
  }
@@ -24242,12 +24239,22 @@ $btn-focus-box-shadow: none !default;
24242
24239
  @if $skin-name == 'FluentUI' {
24243
24240
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24244
24241
  }
24242
+
24243
+ @if $skin-name == 'bootstrap5' {
24244
+ background: $btn-outline-active-bgcolor;
24245
+ color: $btn-outline-active-color;
24246
+ }
24245
24247
  }
24246
24248
 
24247
24249
  &:focus-visible { // only for keybord
24248
24250
  @if $skin-name == 'FluentUI' {
24249
24251
  background: $btn-outline-bgcolor;
24250
24252
  }
24253
+
24254
+ @if $skin-name == 'bootstrap5' {
24255
+ box-shadow: $btn-focus-box-shadow;
24256
+ }
24257
+
24251
24258
  @if $skin-name == 'Material3' {
24252
24259
  background: $btn-active-bgcolor;
24253
24260
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24298,12 +24305,22 @@ $btn-focus-box-shadow: none !default;
24298
24305
  @if $skin-name == 'FluentUI' {
24299
24306
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24300
24307
  }
24308
+
24309
+ @if $skin-name == 'bootstrap5' {
24310
+ background: $btn-outline-primary-focus-bgcolor;
24311
+ color: $btn-outline-active-color;
24312
+ }
24301
24313
  }
24302
24314
 
24303
24315
  &:focus-visible { // only for keybord
24304
24316
  @if $skin-name == 'FluentUI' {
24305
24317
  background: $btn-outline-bgcolor;
24306
24318
  }
24319
+
24320
+ @if $skin-name == 'bootstrap5' {
24321
+ box-shadow: $btn-primary-focus-box-shadow;
24322
+ }
24323
+
24307
24324
  @if $skin-name == 'Material3' {
24308
24325
  background: $btn-primary-active-bgcolor;
24309
24326
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24361,12 +24378,20 @@ $btn-focus-box-shadow: none !default;
24361
24378
  @if $skin-name == 'FluentUI' {
24362
24379
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24363
24380
  }
24381
+
24382
+ @if $skin-name == 'bootstrap5' {
24383
+ background: $btn-success-bgcolor;
24384
+ color: $btn-success-color;
24385
+ }
24364
24386
  }
24365
24387
 
24366
24388
  &:focus-visible { // only for keybord
24367
24389
  @if $skin-name == 'FluentUI' {
24368
24390
  background: $btn-outline-bgcolor;
24369
24391
  }
24392
+ @if $skin-name == 'bootstrap5' {
24393
+ box-shadow: $btn-success-focus-box-shadow;
24394
+ }
24370
24395
  @if $skin-name == 'Material3' {
24371
24396
  background: $btn-success-active-bgcolor;
24372
24397
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24424,12 +24449,20 @@ $btn-focus-box-shadow: none !default;
24424
24449
  @if $skin-name == 'FluentUI' {
24425
24450
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24426
24451
  }
24452
+
24453
+ @if $skin-name == 'bootstrap5' {
24454
+ background: $btn-info-bgcolor;
24455
+ color: $btn-info-color;
24456
+ }
24427
24457
  }
24428
24458
 
24429
24459
  &:focus-visible { // only for keybord
24430
24460
  @if $skin-name == 'FluentUI' {
24431
24461
  background: $btn-outline-bgcolor;
24432
24462
  }
24463
+ @if $skin-name == 'bootstrap5' {
24464
+ box-shadow: $btn-info-focus-box-shadow;
24465
+ }
24433
24466
  @if $skin-name == 'Material3' {
24434
24467
  background: $btn-info-active-bgcolor;
24435
24468
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24487,12 +24520,20 @@ $btn-focus-box-shadow: none !default;
24487
24520
  @if $skin-name == 'FluentUI' {
24488
24521
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24489
24522
  }
24523
+
24524
+ @if $skin-name == 'bootstrap5' {
24525
+ background: $btn-warning-bgcolor;
24526
+ color: $btn-warning-color;
24527
+ }
24490
24528
  }
24491
24529
 
24492
24530
  &:focus-visible { // only for keybord
24493
24531
  @if $skin-name == 'FluentUI' {
24494
24532
  background: $btn-outline-bgcolor;
24495
24533
  }
24534
+ @if $skin-name == 'bootstrap5' {
24535
+ box-shadow: $btn-warning-focus-box-shadow;
24536
+ }
24496
24537
  @if $skin-name == 'Material3' {
24497
24538
  background: $btn-warning-active-bgcolor;
24498
24539
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24550,12 +24591,20 @@ $btn-focus-box-shadow: none !default;
24550
24591
  @if $skin-name == 'FluentUI' {
24551
24592
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24552
24593
  }
24594
+
24595
+ @if $skin-name == 'bootstrap5' {
24596
+ background: $btn-danger-bgcolor;
24597
+ color: $btn-danger-color;
24598
+ }
24553
24599
  }
24554
24600
 
24555
24601
  &:focus-visible { // only for keybord
24556
24602
  @if $skin-name == 'FluentUI' {
24557
24603
  background: $btn-outline-bgcolor;
24558
24604
  }
24605
+ @if $skin-name == 'bootstrap5' {
24606
+ box-shadow: $btn-danger-focus-box-shadow;
24607
+ }
24559
24608
  @if $skin-name == 'Material3' {
24560
24609
  background: $btn-danger-active-bgcolor;
24561
24610
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -58720,6 +58769,11 @@ $ddt-remains-count-padding-top: 6px !default;
58720
58769
  }
58721
58770
  }
58722
58771
 
58772
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
58773
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
58774
+ display: flex;
58775
+ }
58776
+
58723
58777
  .e-chips-wrapper {
58724
58778
  width: 100%;
58725
58779
  }
@@ -82384,6 +82438,15 @@ margin: $grid-group-animator-cell-margin;
82384
82438
  color: $grid-cell-selection-color;
82385
82439
  }
82386
82440
 
82441
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
82442
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
82443
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
82444
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
82445
+ @if $grid-skin == 'material3' {
82446
+ background-color: rgba($primary-container, 1);
82447
+ }
82448
+ }
82449
+
82387
82450
  .e-filterbarcell,
82388
82451
  .e-filterbarcelldisabled {
82389
82452
  background-color: $grid-header-bg-color;
@@ -88728,6 +88791,20 @@ $btn-flat-primary-path-arc: none;
88728
88791
  }
88729
88792
  }
88730
88793
 
88794
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
88795
+ fill: $btn-outline-color;
88796
+ stroke: $btn-outline-color;
88797
+ }
88798
+
88799
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
88800
+ fill: $btn-color;
88801
+ stroke: $btn-color;
88802
+ }
88803
+
88804
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
88805
+ stroke: $btn-outline-color;
88806
+ }
88807
+
88731
88808
 
88732
88809
 
88733
88810
 
@@ -121064,18 +121141,17 @@ $image-editor-device-slider-handler: calc(50% - 9px) !default;
121064
121141
  }
121065
121142
  }
121066
121143
  .e-ie-straighten-value-span,
121067
- .e-ie-straighten-span {
121068
- font-size: 14px;
121144
+ .e-ie-straighten-span,
121145
+ .e-ie-toolbar-straighten {
121146
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
121069
121147
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
121070
121148
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
121071
121149
  }
121072
121150
 
121073
121151
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
121074
121152
  height: auto;
121075
- @if $skin-name == 'Material3' {
121076
- margin-left: 8px;
121077
- padding-right: 2px;
121078
- }
121153
+ margin-left: 8px;
121154
+ padding-right: 2px;
121079
121155
  }
121080
121156
 
121081
121157
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -121095,6 +121171,10 @@ $image-editor-device-slider-handler: calc(50% - 9px) !default;
121095
121171
  }
121096
121172
  }
121097
121173
 
121174
+ .e-ie-finetune-value-span {
121175
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
121176
+ }
121177
+
121098
121178
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
121099
121179
  @if $skin-name == 'Material3' {
121100
121180
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -19818,9 +19818,6 @@ $ddl-group-list-item-text-intent: 0 !default;
19818
19818
  #{if(&, '&', '*')} .e-fixed-head {
19819
19819
  position: absolute;
19820
19820
  top: 0;
19821
- .e-rtl #{if(&, '&', '*')} {
19822
- left: 33px;
19823
- }
19824
19821
  }
19825
19822
  }
19826
19823
  }
@@ -24581,12 +24578,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24581
24578
  @if $skin-name == 'FluentUI' {
24582
24579
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24583
24580
  }
24581
+
24582
+ @if $skin-name == 'bootstrap5' {
24583
+ background: $btn-outline-active-bgcolor;
24584
+ color: $btn-outline-active-color;
24585
+ }
24584
24586
  }
24585
24587
 
24586
24588
  &:focus-visible { // only for keybord
24587
24589
  @if $skin-name == 'FluentUI' {
24588
24590
  background: $btn-outline-bgcolor;
24589
24591
  }
24592
+
24593
+ @if $skin-name == 'bootstrap5' {
24594
+ box-shadow: $btn-focus-box-shadow;
24595
+ }
24596
+
24590
24597
  @if $skin-name == 'Material3' {
24591
24598
  background: $btn-active-bgcolor;
24592
24599
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24637,12 +24644,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24637
24644
  @if $skin-name == 'FluentUI' {
24638
24645
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24639
24646
  }
24647
+
24648
+ @if $skin-name == 'bootstrap5' {
24649
+ background: $btn-outline-primary-focus-bgcolor;
24650
+ color: $btn-outline-active-color;
24651
+ }
24640
24652
  }
24641
24653
 
24642
24654
  &:focus-visible { // only for keybord
24643
24655
  @if $skin-name == 'FluentUI' {
24644
24656
  background: $btn-outline-bgcolor;
24645
24657
  }
24658
+
24659
+ @if $skin-name == 'bootstrap5' {
24660
+ box-shadow: $btn-primary-focus-box-shadow;
24661
+ }
24662
+
24646
24663
  @if $skin-name == 'Material3' {
24647
24664
  background: $btn-primary-active-bgcolor;
24648
24665
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24700,12 +24717,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24700
24717
  @if $skin-name == 'FluentUI' {
24701
24718
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24702
24719
  }
24720
+
24721
+ @if $skin-name == 'bootstrap5' {
24722
+ background: $btn-success-bgcolor;
24723
+ color: $btn-success-color;
24724
+ }
24703
24725
  }
24704
24726
 
24705
24727
  &:focus-visible { // only for keybord
24706
24728
  @if $skin-name == 'FluentUI' {
24707
24729
  background: $btn-outline-bgcolor;
24708
24730
  }
24731
+ @if $skin-name == 'bootstrap5' {
24732
+ box-shadow: $btn-success-focus-box-shadow;
24733
+ }
24709
24734
  @if $skin-name == 'Material3' {
24710
24735
  background: $btn-success-active-bgcolor;
24711
24736
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24763,12 +24788,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24763
24788
  @if $skin-name == 'FluentUI' {
24764
24789
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24765
24790
  }
24791
+
24792
+ @if $skin-name == 'bootstrap5' {
24793
+ background: $btn-info-bgcolor;
24794
+ color: $btn-info-color;
24795
+ }
24766
24796
  }
24767
24797
 
24768
24798
  &:focus-visible { // only for keybord
24769
24799
  @if $skin-name == 'FluentUI' {
24770
24800
  background: $btn-outline-bgcolor;
24771
24801
  }
24802
+ @if $skin-name == 'bootstrap5' {
24803
+ box-shadow: $btn-info-focus-box-shadow;
24804
+ }
24772
24805
  @if $skin-name == 'Material3' {
24773
24806
  background: $btn-info-active-bgcolor;
24774
24807
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24826,12 +24859,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24826
24859
  @if $skin-name == 'FluentUI' {
24827
24860
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24828
24861
  }
24862
+
24863
+ @if $skin-name == 'bootstrap5' {
24864
+ background: $btn-warning-bgcolor;
24865
+ color: $btn-warning-color;
24866
+ }
24829
24867
  }
24830
24868
 
24831
24869
  &:focus-visible { // only for keybord
24832
24870
  @if $skin-name == 'FluentUI' {
24833
24871
  background: $btn-outline-bgcolor;
24834
24872
  }
24873
+ @if $skin-name == 'bootstrap5' {
24874
+ box-shadow: $btn-warning-focus-box-shadow;
24875
+ }
24835
24876
  @if $skin-name == 'Material3' {
24836
24877
  background: $btn-warning-active-bgcolor;
24837
24878
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24889,12 +24930,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24889
24930
  @if $skin-name == 'FluentUI' {
24890
24931
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24891
24932
  }
24933
+
24934
+ @if $skin-name == 'bootstrap5' {
24935
+ background: $btn-danger-bgcolor;
24936
+ color: $btn-danger-color;
24937
+ }
24892
24938
  }
24893
24939
 
24894
24940
  &:focus-visible { // only for keybord
24895
24941
  @if $skin-name == 'FluentUI' {
24896
24942
  background: $btn-outline-bgcolor;
24897
24943
  }
24944
+ @if $skin-name == 'bootstrap5' {
24945
+ box-shadow: $btn-danger-focus-box-shadow;
24946
+ }
24898
24947
  @if $skin-name == 'Material3' {
24899
24948
  background: $btn-danger-active-bgcolor;
24900
24949
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59324,6 +59373,11 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
59324
59373
  }
59325
59374
  }
59326
59375
 
59376
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59377
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59378
+ display: flex;
59379
+ }
59380
+
59327
59381
  .e-chips-wrapper {
59328
59382
  width: 100%;
59329
59383
  }
@@ -83190,6 +83244,15 @@ margin: $grid-group-animator-cell-margin;
83190
83244
  color: $grid-cell-selection-color;
83191
83245
  }
83192
83246
 
83247
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
83248
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
83249
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
83250
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
83251
+ @if $grid-skin == 'material3' {
83252
+ background-color: rgba($primary-container, 1);
83253
+ }
83254
+ }
83255
+
83193
83256
  .e-filterbarcell,
83194
83257
  .e-filterbarcelldisabled {
83195
83258
  background-color: $grid-header-bg-color;
@@ -89563,6 +89626,20 @@ $btn-flat-primary-path-arc: $white;
89563
89626
  }
89564
89627
  }
89565
89628
 
89629
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
89630
+ fill: $btn-outline-color;
89631
+ stroke: $btn-outline-color;
89632
+ }
89633
+
89634
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
89635
+ fill: $btn-color;
89636
+ stroke: $btn-color;
89637
+ }
89638
+
89639
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
89640
+ stroke: $btn-outline-color;
89641
+ }
89642
+
89566
89643
 
89567
89644
 
89568
89645
 
@@ -105359,7 +105436,7 @@ $pv-comment-text-cursor-color: $black !default;
105359
105436
  }
105360
105437
 
105361
105438
  .e-pv-search-close::before {
105362
- content: '\e754';
105439
+ content: '\e7e7';
105363
105440
  font-family: 'e-icons';
105364
105441
  }
105365
105442
 
@@ -121932,18 +122009,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121932
122009
  }
121933
122010
  }
121934
122011
  .e-ie-straighten-value-span,
121935
- .e-ie-straighten-span {
121936
- font-size: 14px;
122012
+ .e-ie-straighten-span,
122013
+ .e-ie-toolbar-straighten {
122014
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
121937
122015
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
121938
122016
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
121939
122017
  }
121940
122018
 
121941
122019
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
121942
122020
  height: auto;
121943
- @if $skin-name == 'Material3' {
121944
- margin-left: 8px;
121945
- padding-right: 2px;
121946
- }
122021
+ margin-left: 8px;
122022
+ padding-right: 2px;
121947
122023
  }
121948
122024
 
121949
122025
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -121963,6 +122039,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121963
122039
  }
121964
122040
  }
121965
122041
 
122042
+ .e-ie-finetune-value-span {
122043
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
122044
+ }
122045
+
121966
122046
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
121967
122047
  @if $skin-name == 'Material3' {
121968
122048
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -19819,9 +19819,6 @@ $ddl-group-list-item-text-intent: 0 !default;
19819
19819
  #{if(&, '&', '*')} .e-fixed-head {
19820
19820
  position: absolute;
19821
19821
  top: 0;
19822
- .e-rtl #{if(&, '&', '*')} {
19823
- left: 33px;
19824
- }
19825
19822
  }
19826
19823
  }
19827
19824
  }
@@ -24582,12 +24579,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24582
24579
  @if $skin-name == 'FluentUI' {
24583
24580
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24584
24581
  }
24582
+
24583
+ @if $skin-name == 'bootstrap5' {
24584
+ background: $btn-outline-active-bgcolor;
24585
+ color: $btn-outline-active-color;
24586
+ }
24585
24587
  }
24586
24588
 
24587
24589
  &:focus-visible { // only for keybord
24588
24590
  @if $skin-name == 'FluentUI' {
24589
24591
  background: $btn-outline-bgcolor;
24590
24592
  }
24593
+
24594
+ @if $skin-name == 'bootstrap5' {
24595
+ box-shadow: $btn-focus-box-shadow;
24596
+ }
24597
+
24591
24598
  @if $skin-name == 'Material3' {
24592
24599
  background: $btn-active-bgcolor;
24593
24600
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24638,12 +24645,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24638
24645
  @if $skin-name == 'FluentUI' {
24639
24646
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24640
24647
  }
24648
+
24649
+ @if $skin-name == 'bootstrap5' {
24650
+ background: $btn-outline-primary-focus-bgcolor;
24651
+ color: $btn-outline-active-color;
24652
+ }
24641
24653
  }
24642
24654
 
24643
24655
  &:focus-visible { // only for keybord
24644
24656
  @if $skin-name == 'FluentUI' {
24645
24657
  background: $btn-outline-bgcolor;
24646
24658
  }
24659
+
24660
+ @if $skin-name == 'bootstrap5' {
24661
+ box-shadow: $btn-primary-focus-box-shadow;
24662
+ }
24663
+
24647
24664
  @if $skin-name == 'Material3' {
24648
24665
  background: $btn-primary-active-bgcolor;
24649
24666
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24701,12 +24718,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24701
24718
  @if $skin-name == 'FluentUI' {
24702
24719
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24703
24720
  }
24721
+
24722
+ @if $skin-name == 'bootstrap5' {
24723
+ background: $btn-success-bgcolor;
24724
+ color: $btn-success-color;
24725
+ }
24704
24726
  }
24705
24727
 
24706
24728
  &:focus-visible { // only for keybord
24707
24729
  @if $skin-name == 'FluentUI' {
24708
24730
  background: $btn-outline-bgcolor;
24709
24731
  }
24732
+ @if $skin-name == 'bootstrap5' {
24733
+ box-shadow: $btn-success-focus-box-shadow;
24734
+ }
24710
24735
  @if $skin-name == 'Material3' {
24711
24736
  background: $btn-success-active-bgcolor;
24712
24737
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24764,12 +24789,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24764
24789
  @if $skin-name == 'FluentUI' {
24765
24790
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24766
24791
  }
24792
+
24793
+ @if $skin-name == 'bootstrap5' {
24794
+ background: $btn-info-bgcolor;
24795
+ color: $btn-info-color;
24796
+ }
24767
24797
  }
24768
24798
 
24769
24799
  &:focus-visible { // only for keybord
24770
24800
  @if $skin-name == 'FluentUI' {
24771
24801
  background: $btn-outline-bgcolor;
24772
24802
  }
24803
+ @if $skin-name == 'bootstrap5' {
24804
+ box-shadow: $btn-info-focus-box-shadow;
24805
+ }
24773
24806
  @if $skin-name == 'Material3' {
24774
24807
  background: $btn-info-active-bgcolor;
24775
24808
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24827,12 +24860,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24827
24860
  @if $skin-name == 'FluentUI' {
24828
24861
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24829
24862
  }
24863
+
24864
+ @if $skin-name == 'bootstrap5' {
24865
+ background: $btn-warning-bgcolor;
24866
+ color: $btn-warning-color;
24867
+ }
24830
24868
  }
24831
24869
 
24832
24870
  &:focus-visible { // only for keybord
24833
24871
  @if $skin-name == 'FluentUI' {
24834
24872
  background: $btn-outline-bgcolor;
24835
24873
  }
24874
+ @if $skin-name == 'bootstrap5' {
24875
+ box-shadow: $btn-warning-focus-box-shadow;
24876
+ }
24836
24877
  @if $skin-name == 'Material3' {
24837
24878
  background: $btn-warning-active-bgcolor;
24838
24879
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24890,12 +24931,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
24890
24931
  @if $skin-name == 'FluentUI' {
24891
24932
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24892
24933
  }
24934
+
24935
+ @if $skin-name == 'bootstrap5' {
24936
+ background: $btn-danger-bgcolor;
24937
+ color: $btn-danger-color;
24938
+ }
24893
24939
  }
24894
24940
 
24895
24941
  &:focus-visible { // only for keybord
24896
24942
  @if $skin-name == 'FluentUI' {
24897
24943
  background: $btn-outline-bgcolor;
24898
24944
  }
24945
+ @if $skin-name == 'bootstrap5' {
24946
+ box-shadow: $btn-danger-focus-box-shadow;
24947
+ }
24899
24948
  @if $skin-name == 'Material3' {
24900
24949
  background: $btn-danger-active-bgcolor;
24901
24950
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59325,6 +59374,11 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
59325
59374
  }
59326
59375
  }
59327
59376
 
59377
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59378
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59379
+ display: flex;
59380
+ }
59381
+
59328
59382
  .e-chips-wrapper {
59329
59383
  width: 100%;
59330
59384
  }
@@ -83191,6 +83245,15 @@ margin: $grid-group-animator-cell-margin;
83191
83245
  color: $grid-cell-selection-color;
83192
83246
  }
83193
83247
 
83248
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
83249
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
83250
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
83251
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
83252
+ @if $grid-skin == 'material3' {
83253
+ background-color: rgba($primary-container, 1);
83254
+ }
83255
+ }
83256
+
83194
83257
  .e-filterbarcell,
83195
83258
  .e-filterbarcelldisabled {
83196
83259
  background-color: $grid-header-bg-color;
@@ -89564,6 +89627,20 @@ $btn-flat-primary-path-arc: $white;
89564
89627
  }
89565
89628
  }
89566
89629
 
89630
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
89631
+ fill: $btn-outline-color;
89632
+ stroke: $btn-outline-color;
89633
+ }
89634
+
89635
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
89636
+ fill: $btn-color;
89637
+ stroke: $btn-color;
89638
+ }
89639
+
89640
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
89641
+ stroke: $btn-outline-color;
89642
+ }
89643
+
89567
89644
 
89568
89645
 
89569
89646
 
@@ -105360,7 +105437,7 @@ $pv-comment-text-cursor-color: $black !default;
105360
105437
  }
105361
105438
 
105362
105439
  .e-pv-search-close::before {
105363
- content: '\e754';
105440
+ content: '\e7e7';
105364
105441
  font-family: 'e-icons';
105365
105442
  }
105366
105443
 
@@ -121933,18 +122010,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121933
122010
  }
121934
122011
  }
121935
122012
  .e-ie-straighten-value-span,
121936
- .e-ie-straighten-span {
121937
- font-size: 14px;
122013
+ .e-ie-straighten-span,
122014
+ .e-ie-toolbar-straighten {
122015
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
121938
122016
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
121939
122017
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
121940
122018
  }
121941
122019
 
121942
122020
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
121943
122021
  height: auto;
121944
- @if $skin-name == 'Material3' {
121945
- margin-left: 8px;
121946
- padding-right: 2px;
121947
- }
122022
+ margin-left: 8px;
122023
+ padding-right: 2px;
121948
122024
  }
121949
122025
 
121950
122026
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -121964,6 +122040,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121964
122040
  }
121965
122041
  }
121966
122042
 
122043
+ .e-ie-finetune-value-span {
122044
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
122045
+ }
122046
+
121967
122047
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
121968
122048
  @if $skin-name == 'Material3' {
121969
122049
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -6859,6 +6859,15 @@ margin: $grid-group-animator-cell-margin;
6859
6859
  color: $grid-cell-selection-color;
6860
6860
  }
6861
6861
 
6862
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
6863
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
6864
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
6865
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
6866
+ @if $grid-skin == 'material3' {
6867
+ background-color: rgba($primary-container, 1);
6868
+ }
6869
+ }
6870
+
6862
6871
  .e-filterbarcell,
6863
6872
  .e-filterbarcelldisabled {
6864
6873
  background-color: $grid-header-bg-color;