@syncfusion/blazor-themes 20.4.44 → 20.4.48

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 (160) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +86 -46
  2. package/SCSS-Themes/bootstrap.scss +86 -46
  3. package/SCSS-Themes/bootstrap4.scss +87 -47
  4. package/SCSS-Themes/bootstrap5-dark.scss +87 -47
  5. package/SCSS-Themes/bootstrap5.scss +87 -47
  6. package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss +4 -0
  7. package/SCSS-Themes/buttons/check-box/bootstrap.scss +4 -0
  8. package/SCSS-Themes/buttons/check-box/bootstrap4.scss +4 -0
  9. package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss +4 -0
  10. package/SCSS-Themes/buttons/check-box/bootstrap5.scss +4 -0
  11. package/SCSS-Themes/buttons/check-box/fabric-dark.scss +4 -0
  12. package/SCSS-Themes/buttons/check-box/fabric.scss +4 -0
  13. package/SCSS-Themes/buttons/check-box/fluent-dark.scss +4 -0
  14. package/SCSS-Themes/buttons/check-box/fluent.scss +4 -0
  15. package/SCSS-Themes/buttons/check-box/highcontrast.scss +4 -0
  16. package/SCSS-Themes/buttons/check-box/material-dark.scss +4 -0
  17. package/SCSS-Themes/buttons/check-box/material.scss +4 -0
  18. package/SCSS-Themes/buttons/check-box/tailwind-dark.scss +4 -0
  19. package/SCSS-Themes/buttons/check-box/tailwind.scss +4 -0
  20. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +3 -2
  21. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +3 -2
  22. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +3 -2
  23. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +3 -2
  24. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +3 -2
  25. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +3 -2
  26. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +3 -2
  27. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +3 -2
  28. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +3 -2
  29. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +3 -2
  30. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +3 -2
  31. package/SCSS-Themes/dropdowns/multi-select/material.scss +3 -2
  32. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +3 -2
  33. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +3 -2
  34. package/SCSS-Themes/fabric-dark.scss +86 -46
  35. package/SCSS-Themes/fabric.scss +86 -46
  36. package/SCSS-Themes/fluent-dark.scss +87 -47
  37. package/SCSS-Themes/fluent.scss +87 -47
  38. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +12 -0
  39. package/SCSS-Themes/grids/grid/bootstrap.scss +12 -0
  40. package/SCSS-Themes/grids/grid/bootstrap4.scss +12 -0
  41. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +12 -0
  42. package/SCSS-Themes/grids/grid/bootstrap5.scss +12 -0
  43. package/SCSS-Themes/grids/grid/fabric-dark.scss +12 -0
  44. package/SCSS-Themes/grids/grid/fabric.scss +12 -0
  45. package/SCSS-Themes/grids/grid/fluent-dark.scss +12 -0
  46. package/SCSS-Themes/grids/grid/fluent.scss +12 -0
  47. package/SCSS-Themes/grids/grid/highcontrast.scss +12 -0
  48. package/SCSS-Themes/grids/grid/material-dark.scss +12 -0
  49. package/SCSS-Themes/grids/grid/material.scss +12 -0
  50. package/SCSS-Themes/grids/grid/tailwind-dark.scss +12 -0
  51. package/SCSS-Themes/grids/grid/tailwind.scss +12 -0
  52. package/SCSS-Themes/highcontrast.scss +86 -46
  53. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +6 -0
  54. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +6 -0
  55. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +6 -0
  56. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +6 -0
  57. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +6 -0
  58. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +6 -0
  59. package/SCSS-Themes/image-editor/image-editor/fabric.scss +6 -0
  60. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +6 -0
  61. package/SCSS-Themes/image-editor/image-editor/fluent.scss +6 -0
  62. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +6 -0
  63. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +6 -0
  64. package/SCSS-Themes/image-editor/image-editor/material.scss +6 -0
  65. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +6 -0
  66. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +6 -0
  67. package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss +14 -0
  68. package/SCSS-Themes/inputs/color-picker/bootstrap.scss +14 -0
  69. package/SCSS-Themes/inputs/color-picker/bootstrap4.scss +14 -0
  70. package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss +14 -0
  71. package/SCSS-Themes/inputs/color-picker/bootstrap5.scss +14 -0
  72. package/SCSS-Themes/inputs/color-picker/fabric-dark.scss +14 -0
  73. package/SCSS-Themes/inputs/color-picker/fabric.scss +14 -0
  74. package/SCSS-Themes/inputs/color-picker/fluent-dark.scss +14 -0
  75. package/SCSS-Themes/inputs/color-picker/fluent.scss +14 -0
  76. package/SCSS-Themes/inputs/color-picker/highcontrast.scss +14 -0
  77. package/SCSS-Themes/inputs/color-picker/material-dark.scss +14 -0
  78. package/SCSS-Themes/inputs/color-picker/material.scss +14 -0
  79. package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss +14 -0
  80. package/SCSS-Themes/inputs/color-picker/tailwind.scss +14 -0
  81. package/SCSS-Themes/material-dark.scss +86 -46
  82. package/SCSS-Themes/material.scss +86 -46
  83. package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss +16 -12
  84. package/SCSS-Themes/navigations/context-menu/bootstrap.scss +16 -12
  85. package/SCSS-Themes/navigations/context-menu/bootstrap4.scss +16 -12
  86. package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss +16 -12
  87. package/SCSS-Themes/navigations/context-menu/bootstrap5.scss +16 -12
  88. package/SCSS-Themes/navigations/context-menu/fabric-dark.scss +16 -12
  89. package/SCSS-Themes/navigations/context-menu/fabric.scss +16 -12
  90. package/SCSS-Themes/navigations/context-menu/fluent-dark.scss +16 -12
  91. package/SCSS-Themes/navigations/context-menu/fluent.scss +16 -12
  92. package/SCSS-Themes/navigations/context-menu/highcontrast.scss +16 -12
  93. package/SCSS-Themes/navigations/context-menu/material-dark.scss +16 -12
  94. package/SCSS-Themes/navigations/context-menu/material.scss +16 -12
  95. package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss +16 -12
  96. package/SCSS-Themes/navigations/context-menu/tailwind.scss +16 -12
  97. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +1 -1
  98. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +1 -1
  99. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +1 -1
  100. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +23 -27
  101. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +23 -27
  102. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +23 -27
  103. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +23 -27
  104. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +23 -27
  105. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +23 -27
  106. package/SCSS-Themes/pivotview/pivotview/fabric.scss +23 -27
  107. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +23 -27
  108. package/SCSS-Themes/pivotview/pivotview/fluent.scss +23 -27
  109. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +23 -27
  110. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +23 -27
  111. package/SCSS-Themes/pivotview/pivotview/material.scss +23 -27
  112. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +23 -27
  113. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +23 -27
  114. package/SCSS-Themes/popups/dialog/fluent-dark.scss +1 -1
  115. package/SCSS-Themes/popups/dialog/fluent.scss +1 -1
  116. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +4 -4
  117. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +4 -4
  118. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +4 -4
  119. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +4 -4
  120. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +4 -4
  121. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +4 -4
  122. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +4 -4
  123. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +4 -4
  124. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +4 -4
  125. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +4 -4
  126. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +4 -4
  127. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +4 -4
  128. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +4 -4
  129. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +4 -4
  130. package/SCSS-Themes/schedule/schedule/bootstrap-dark.scss +1 -1
  131. package/SCSS-Themes/schedule/schedule/bootstrap.scss +1 -1
  132. package/SCSS-Themes/schedule/schedule/bootstrap4.scss +1 -1
  133. package/SCSS-Themes/schedule/schedule/bootstrap5-dark.scss +1 -1
  134. package/SCSS-Themes/schedule/schedule/bootstrap5.scss +1 -1
  135. package/SCSS-Themes/schedule/schedule/fabric-dark.scss +1 -1
  136. package/SCSS-Themes/schedule/schedule/fabric.scss +1 -1
  137. package/SCSS-Themes/schedule/schedule/fluent-dark.scss +1 -1
  138. package/SCSS-Themes/schedule/schedule/fluent.scss +1 -1
  139. package/SCSS-Themes/schedule/schedule/highcontrast.scss +1 -1
  140. package/SCSS-Themes/schedule/schedule/material-dark.scss +1 -1
  141. package/SCSS-Themes/schedule/schedule/material.scss +1 -1
  142. package/SCSS-Themes/schedule/schedule/tailwind-dark.scss +1 -1
  143. package/SCSS-Themes/schedule/schedule/tailwind.scss +1 -1
  144. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss +3 -0
  145. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss +3 -0
  146. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss +3 -0
  147. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss +3 -0
  148. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5.scss +3 -0
  149. package/SCSS-Themes/splitbuttons/drop-down-button/fabric-dark.scss +3 -0
  150. package/SCSS-Themes/splitbuttons/drop-down-button/fabric.scss +3 -0
  151. package/SCSS-Themes/splitbuttons/drop-down-button/fluent-dark.scss +3 -0
  152. package/SCSS-Themes/splitbuttons/drop-down-button/fluent.scss +3 -0
  153. package/SCSS-Themes/splitbuttons/drop-down-button/highcontrast.scss +3 -0
  154. package/SCSS-Themes/splitbuttons/drop-down-button/material-dark.scss +3 -0
  155. package/SCSS-Themes/splitbuttons/drop-down-button/material.scss +3 -0
  156. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind-dark.scss +3 -0
  157. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind.scss +3 -0
  158. package/SCSS-Themes/tailwind-dark.scss +86 -46
  159. package/SCSS-Themes/tailwind.scss +86 -46
  160. package/package.json +1 -1
@@ -27253,6 +27253,10 @@ $cbox-border-style: solid !default;
27253
27253
  }
27254
27254
  }
27255
27255
 
27256
+ .e-checkbox-wrapper[readonly] {
27257
+ pointer-events: none;
27258
+ }
27259
+
27256
27260
  .e-small .e-checkbox-wrapper,
27257
27261
  .e-small.e-checkbox-wrapper,
27258
27262
  .e-small .e-css.e-checkbox-wrapper,
@@ -29521,6 +29525,9 @@ $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
29521
29525
 
29522
29526
  .e-caret {
29523
29527
  font-size: $drop-down-btn-caret-icon-font-size;
29528
+ @if $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
29529
+ margin-top: 0;
29530
+ }
29524
29531
  }
29525
29532
 
29526
29533
  &.e-vertical {
@@ -34525,12 +34532,26 @@ $cpicker-split-btn-border: 1px solid $border !default;
34525
34532
  & .e-slider-track {
34526
34533
  background: linear-gradient(to left, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
34527
34534
  }
34535
+
34536
+ & .e-handle {
34537
+ @if $skin-name == 'FluentUI' {
34538
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
34539
+ }
34540
+ }
34528
34541
  }
34529
34542
 
34530
34543
  & .e-preview-container {
34531
34544
  margin-left: 0;
34532
34545
  margin-right: $cpicker-preview-margin-left;
34533
34546
  }
34547
+
34548
+ & .e-opacity-slider {
34549
+ & .e-handle-first {
34550
+ @if $skin-name == 'FluentUI' {
34551
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
34552
+ }
34553
+ }
34554
+ }
34534
34555
  }
34535
34556
 
34536
34557
  & .e-selected-value {
@@ -35532,22 +35553,26 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
35532
35553
 
35533
35554
 
35534
35555
  @mixin focused-icon-color {
35535
- & .e-caret {
35536
- color: $cmenu-caret-color;
35537
- }
35538
-
35539
- & .e-menu-icon {
35540
- color: $cmenu-icon-color;
35556
+ @if $skin-name != 'bootstrap5' {
35557
+ & .e-caret {
35558
+ color: $cmenu-caret-color;
35559
+ }
35560
+
35561
+ & .e-menu-icon {
35562
+ color: $cmenu-icon-color;
35563
+ }
35541
35564
  }
35542
35565
  }
35543
35566
 
35544
35567
  @mixin selected-icon-color {
35545
- & .e-caret {
35546
- color: $cmenu-caret-hover-color;
35547
- }
35548
-
35549
- & .e-menu-icon {
35550
- color: $cmenu-hover-icon-color;
35568
+ @if $skin-name != 'bootstrap5' {
35569
+ & .e-caret {
35570
+ color: $cmenu-caret-hover-color;
35571
+ }
35572
+
35573
+ & .e-menu-icon {
35574
+ color: $cmenu-hover-icon-color;
35575
+ }
35551
35576
  }
35552
35577
  }
35553
35578
 
@@ -52211,7 +52236,7 @@ $treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
52211
52236
  $treeview-text-wrap-padding: 0 0 0 20px !default;
52212
52237
  $treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
52213
52238
  $treeview-icon-size: 20px !default;
52214
- $treeview-icon-margin: 0 2px 0 -25px !default;
52239
+ $treeview-icon-margin: 0 4px 0 -25px !default;
52215
52240
  $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
52216
52241
  $treeview-icon-padding: 0px !default;
52217
52242
  $treeview-text-padding: 0 8px !default;
@@ -57183,6 +57208,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
57183
57208
  $ddl-chip-sel-mobile-close-height: 40px !default;
57184
57209
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
57185
57210
  $ddl-input-text-indent: 8px !default;
57211
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
57186
57212
  $ddl-rtl-chip-sel-close-left: -12px !default;
57187
57213
  $ddl-popup-active-focus-border-width: 0 !default;
57188
57214
  $ddl-popup-active-focus-shadow-item: none !default;
@@ -57755,8 +57781,8 @@ $ddl-close-down-icon-left: 35px !default;
57755
57781
  height: $ddl-input-height;
57756
57782
  min-height: $ddl-input-height;
57757
57783
  outline: none;
57758
- padding: 0;
57759
- text-indent: $ddl-input-text-indent;
57784
+ padding: $ddl-input-placeholder-padding;
57785
+ text-indent: 0;
57760
57786
  }
57761
57787
 
57762
57788
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -75590,9 +75616,16 @@ $grid-dropitems-count-margin-left: -4px !default;
75590
75616
  margin-top: $grid-reorder-arrow-top-margin;
75591
75617
  }
75592
75618
 
75619
+ .e-gridheader .e-headercontent .e-reorderuparrow-virtual {
75620
+ margin-top: $grid-reorder-virtualarrow-top-margin;
75621
+ }
75622
+
75593
75623
  .e-gridheader .e-headercontent .e-reorderdownarrow {
75594
75624
  margin-top: $grid-reorder-downarrow-top-margin;
75595
75625
  }
75626
+ .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
75627
+ margin-top: $grid-reorder-virtualdownarrow-top-margin;
75628
+ }
75596
75629
 
75597
75630
  .e-masked-cell.e-rowcell .e-virtualcell {
75598
75631
  background-color: $grid-maskedcell-virtual-background-color;
@@ -75643,6 +75676,11 @@ $grid-dropitems-count-margin-left: -4px !default;
75643
75676
  .e-cc-contentdiv .e-choosercheck {
75644
75677
  white-space: $grid-filter-checkbox-white-space;
75645
75678
  }
75679
+
75680
+ .e-filterdiv .e-multiselect.e-input-group:not(.e-rtl),
75681
+ .e-fltrtempdiv .e-multiselect.e-input-group:not(.e-rtl){
75682
+ text-align: left;
75683
+ }
75646
75684
  }
75647
75685
  }
75648
75686
  }
@@ -82412,7 +82450,7 @@ $rte-drop-text-mobile-width: 250px !default;
82412
82450
  font-size: $rte-toolbar-big-icon-size;
82413
82451
  }
82414
82452
 
82415
- .e-toolbar-item .e-font-color .e-selected-color.e-icons::before,
82453
+ .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
82416
82454
  .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
82417
82455
  top: -20px;
82418
82456
  }
@@ -82656,13 +82694,13 @@ $rte-drop-text-mobile-width: 250px !default;
82656
82694
  padding-right: $rte-drop-btn-action-padding-right;
82657
82695
  }
82658
82696
 
82659
- .e-font-color .e-selected-color.e-icons::before {
82697
+ .e-rte-font-color .e-selected-color.e-icons::before {
82660
82698
  font-size: 12px;
82661
82699
  position: relative;
82662
82700
  top: -18px;
82663
82701
  }
82664
82702
 
82665
- .e-font-color.e-icons::before {
82703
+ .e-rte-font-color.e-icons::before {
82666
82704
  font-size: 13px;
82667
82705
  }
82668
82706
 
@@ -84945,7 +84983,7 @@ $rte-drop-text-mobile-width: 250px !default;
84945
84983
  content: '\e76f';
84946
84984
  }
84947
84985
 
84948
- .e-font-color::before {
84986
+ .e-rte-font-color::before {
84949
84987
  content: '\e79f';
84950
84988
  }
84951
84989
 
@@ -102409,20 +102447,6 @@ $pivotpager-single-size-title-padding: 8px !default;
102409
102447
 
102410
102448
  .e-toolbar-items {
102411
102449
  background: $pivotgrid-grp-bg-color;
102412
-
102413
- .e-toolbar-item {
102414
- .e-tbar-btn.e-btn.e-control {
102415
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
102416
- background: $pivotgrid-grp-bg-color;
102417
-
102418
- &:hover {
102419
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
102420
- background: $pivotgrid-grp-bg-hover-color;
102421
- }
102422
- }
102423
- }
102424
- }
102425
- }
102426
102450
  }
102427
102451
 
102428
102452
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -102515,20 +102539,28 @@ $pivotpager-single-size-title-padding: 8px !default;
102515
102539
  @if ($pivotgrid-skin == 'bootstrap4') {
102516
102540
  background-color: $gray-600;
102517
102541
  border-radius: $pivotgrid-default-border-radius;
102518
- }
102542
+ }
102519
102543
 
102520
- .e-menu-icon,
102521
- .e-icons{
102522
- @if ($pivotgrid-skin == 'bootstrap4') {
102523
- color: $white;
102544
+ .e-menu-icon,
102545
+ .e-icons{
102546
+ @if ($pivotgrid-skin == 'bootstrap4') {
102547
+ color: $white;
102548
+ }
102549
+
102550
+ @if ($pivotgrid-skin == 'FluentUI') {
102551
+ color: $pivotgrid-active-color;
102552
+ }
102524
102553
  }
102554
+ }
102525
102555
 
102526
- @if ($pivotgrid-skin == 'FluentUI') {
102527
- color: $pivotgrid-active-color;
102556
+ ul.e-menu {
102557
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
102558
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
102559
+ padding-right: 0 !important;
102560
+ padding-left: 0 !important;
102528
102561
  }
102529
102562
  }
102530
102563
  }
102531
- }
102532
102564
 
102533
102565
  .e-tab .e-tab-header .e-toolbar-item.e-active {
102534
102566
  margin-left: 18px !important;
@@ -103021,15 +103053,17 @@ $pivotpager-single-size-title-padding: 8px !default;
103021
103053
  }
103022
103054
 
103023
103055
  .e-toolbar .e-tbar-btn {
103024
- @if ($skin-name == 'tailwind') {
103025
- background-color: transparent;
103026
- }
103056
+ background-color: transparent;
103057
+
103058
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
103059
+ border: none !important;
103060
+ }
103027
103061
 
103028
103062
  &:hover {
103029
103063
  @if ($skin-name == 'tailwind') {
103030
103064
  background-color: $pivot-toolbar-icon-hover-color;
103031
- }
103032
- }
103065
+ }
103066
+ }
103033
103067
  }
103034
103068
 
103035
103069
 
@@ -107267,7 +107301,7 @@ $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default
107267
107301
  vertical-align: top;
107268
107302
 
107269
107303
  &.e-translate {
107270
- transition: transform .3s ease 0s;
107304
+ transition: transform .1s ease 0s;
107271
107305
  }
107272
107306
  }
107273
107307
 
@@ -112123,6 +112157,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
112123
112157
  border-top: $image-editor-border;
112124
112158
  }
112125
112159
 
112160
+ & .e-canvas-wrapper {
112161
+ & .e-textarea {
112162
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
112163
+ }
112164
+ }
112165
+
112126
112166
  & .e-bottom-toolbar {
112127
112167
  border-top: $image-editor-border;
112128
112168
  }
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -277,6 +277,10 @@ $cbox-key-focussed-bgcolor: transparent !default;
277
277
  }
278
278
  }
279
279
 
280
+ .e-checkbox-wrapper[readonly] {
281
+ pointer-events: none;
282
+ }
283
+
280
284
  .e-small .e-checkbox-wrapper,
281
285
  .e-small.e-checkbox-wrapper,
282
286
  .e-small .e-css.e-checkbox-wrapper,
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -282,6 +282,10 @@ $cbox-ripple-size: -9px !default;
282
282
  }
283
283
  }
284
284
 
285
+ .e-checkbox-wrapper[readonly] {
286
+ pointer-events: none;
287
+ }
288
+
285
289
  .e-small .e-checkbox-wrapper,
286
290
  .e-small.e-checkbox-wrapper,
287
291
  .e-small .e-css.e-checkbox-wrapper,
@@ -279,6 +279,10 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
279
279
  }
280
280
  }
281
281
 
282
+ .e-checkbox-wrapper[readonly] {
283
+ pointer-events: none;
284
+ }
285
+
282
286
  .e-small .e-checkbox-wrapper,
283
287
  .e-small.e-checkbox-wrapper,
284
288
  .e-small .e-css.e-checkbox-wrapper,
@@ -284,6 +284,10 @@ $cbox-icon-color: $icon-color !default;
284
284
  }
285
285
  }
286
286
 
287
+ .e-checkbox-wrapper[readonly] {
288
+ pointer-events: none;
289
+ }
290
+
287
291
  .e-small .e-checkbox-wrapper,
288
292
  .e-small.e-checkbox-wrapper,
289
293
  .e-small .e-css.e-checkbox-wrapper,
@@ -284,6 +284,10 @@ $cbox-icon-color: $icon-color !default;
284
284
  }
285
285
  }
286
286
 
287
+ .e-checkbox-wrapper[readonly] {
288
+ pointer-events: none;
289
+ }
290
+
287
291
  .e-small .e-checkbox-wrapper,
288
292
  .e-small.e-checkbox-wrapper,
289
293
  .e-small .e-css.e-checkbox-wrapper,
@@ -278,6 +278,10 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
278
278
  }
279
279
  }
280
280
 
281
+ .e-checkbox-wrapper[readonly] {
282
+ pointer-events: none;
283
+ }
284
+
281
285
  .e-small .e-checkbox-wrapper,
282
286
  .e-small.e-checkbox-wrapper,
283
287
  .e-small .e-css.e-checkbox-wrapper,
@@ -283,6 +283,10 @@ $cbox-border-style: solid !default;
283
283
  }
284
284
  }
285
285
 
286
+ .e-checkbox-wrapper[readonly] {
287
+ pointer-events: none;
288
+ }
289
+
286
290
  .e-small .e-checkbox-wrapper,
287
291
  .e-small.e-checkbox-wrapper,
288
292
  .e-small .e-css.e-checkbox-wrapper,
@@ -279,6 +279,10 @@ $cbox-border-style: solid !default;
279
279
  }
280
280
  }
281
281
 
282
+ .e-checkbox-wrapper[readonly] {
283
+ pointer-events: none;
284
+ }
285
+
282
286
  .e-small .e-checkbox-wrapper,
283
287
  .e-small.e-checkbox-wrapper,
284
288
  .e-small .e-css.e-checkbox-wrapper,
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -280,6 +280,10 @@ $cbox-border-style: solid !default;
280
280
  }
281
281
  }
282
282
 
283
+ .e-checkbox-wrapper[readonly] {
284
+ pointer-events: none;
285
+ }
286
+
283
287
  .e-small .e-checkbox-wrapper,
284
288
  .e-small.e-checkbox-wrapper,
285
289
  .e-small .e-css.e-checkbox-wrapper,
@@ -94,6 +94,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
94
94
  $ddl-chip-sel-mobile-close-height: 40px !default;
95
95
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
96
96
  $ddl-input-text-indent: 6px !default;
97
+ $ddl-input-placeholder-padding: 0 0 0 12px !default;
97
98
  $ddl-rtl-chip-sel-close-left: -10px !default;
98
99
  $ddl-popup-active-focus-bg-color: $brand-primary !default;
99
100
  $ddl-popup-active-focus-font-color: $brand-primary-font !default;
@@ -622,8 +623,8 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
622
623
  height: $ddl-input-height;
623
624
  min-height: $ddl-input-height;
624
625
  outline: none;
625
- padding: 0;
626
- text-indent: $ddl-input-text-indent;
626
+ padding: $ddl-input-placeholder-padding;
627
+ text-indent: 0;
627
628
  }
628
629
 
629
630
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -93,6 +93,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
93
93
  $ddl-chip-sel-mobile-close-height: 40px !default;
94
94
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
95
95
  $ddl-input-text-indent: 6px !default;
96
+ $ddl-input-placeholder-padding: 0 0 0 12px !default;
96
97
  $ddl-rtl-chip-sel-close-left: -10px !default;
97
98
  $ddl-popup-active-focus-bg-color: $brand-primary !default;
98
99
  $ddl-popup-active-focus-font-color: $brand-primary-font !default;
@@ -616,8 +617,8 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
616
617
  height: $ddl-input-height;
617
618
  min-height: $ddl-input-height;
618
619
  outline: none;
619
- padding: 0;
620
- text-indent: $ddl-input-text-indent;
620
+ padding: $ddl-input-placeholder-padding;
621
+ text-indent: 0;
621
622
  }
622
623
 
623
624
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -96,6 +96,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
96
96
  $ddl-chip-sel-mobile-close-height: 40px !default;
97
97
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
98
98
  $ddl-input-text-indent: 6px !default;
99
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
99
100
  $ddl-rtl-chip-sel-close-left: -10px !default;
100
101
  $ddl-popup-active-focus-bg-color: $primary !default;
101
102
  $ddl-popup-active-focus-font-color: $primary-font !default;
@@ -683,8 +684,8 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
683
684
  height: $ddl-input-height;
684
685
  min-height: $ddl-input-height;
685
686
  outline: none;
686
- padding: 0;
687
- text-indent: $ddl-input-text-indent;
687
+ padding: $ddl-input-placeholder-padding;
688
+ text-indent: 0;
688
689
  }
689
690
 
690
691
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -81,6 +81,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
81
81
  $ddl-chip-sel-mobile-close-height: 40px !default;
82
82
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
83
83
  $ddl-input-text-indent: 8px !default;
84
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
84
85
  $ddl-rtl-chip-sel-close-left: -12px !default;
85
86
  $ddl-popup-active-focus-border-width: 0 !default;
86
87
  $ddl-popup-active-focus-shadow-item: none !default;
@@ -653,8 +654,8 @@ $ddl-close-down-icon-left: 35px !default;
653
654
  height: $ddl-input-height;
654
655
  min-height: $ddl-input-height;
655
656
  outline: none;
656
- padding: 0;
657
- text-indent: $ddl-input-text-indent;
657
+ padding: $ddl-input-placeholder-padding;
658
+ text-indent: 0;
658
659
  }
659
660
 
660
661
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -81,6 +81,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
81
81
  $ddl-chip-sel-mobile-close-height: 40px !default;
82
82
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
83
83
  $ddl-input-text-indent: 8px !default;
84
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
84
85
  $ddl-rtl-chip-sel-close-left: -12px !default;
85
86
  $ddl-popup-active-focus-border-width: 0 !default;
86
87
  $ddl-popup-active-focus-shadow-item: none !default;
@@ -653,8 +654,8 @@ $ddl-close-down-icon-left: 35px !default;
653
654
  height: $ddl-input-height;
654
655
  min-height: $ddl-input-height;
655
656
  outline: none;
656
- padding: 0;
657
- text-indent: $ddl-input-text-indent;
657
+ padding: $ddl-input-placeholder-padding;
658
+ text-indent: 0;
658
659
  }
659
660
 
660
661
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -92,6 +92,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
92
92
  $ddl-chip-sel-mobile-close-height: 26px !default;
93
93
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
94
94
  $ddl-input-text-indent: 10px !default;
95
+ $ddl-input-placeholder-padding: 0 0 0 10px !default;
95
96
  $ddl-rtl-chip-sel-close-left: -12px !default;
96
97
  $ddl-popup-active-focus-bg-color: $neutral-quintenary !default;
97
98
  $ddl-popup-active-focus-font-color: $neutral-light-fontalt !default;
@@ -611,8 +612,8 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
611
612
  height: $ddl-input-height;
612
613
  min-height: $ddl-input-height;
613
614
  outline: none;
614
- padding: 0;
615
- text-indent: $ddl-input-text-indent;
615
+ padding: $ddl-input-placeholder-padding;
616
+ text-indent: 0;
616
617
  }
617
618
 
618
619
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -91,6 +91,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
91
91
  $ddl-chip-sel-mobile-close-height: 26px !default;
92
92
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
93
93
  $ddl-input-text-indent: 10px !default;
94
+ $ddl-input-placeholder-padding: 0 0 0 10px !default;
94
95
  $ddl-rtl-chip-sel-close-left: -12px !default;
95
96
  $ddl-popup-active-focus-bg-color: $theme-lighter !default;
96
97
  $ddl-popup-active-focus-font-color: $neutral-light-font !default;
@@ -607,8 +608,8 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
607
608
  height: $ddl-input-height;
608
609
  min-height: $ddl-input-height;
609
610
  outline: none;
610
- padding: 0;
611
- text-indent: $ddl-input-text-indent;
611
+ padding: $ddl-input-placeholder-padding;
612
+ text-indent: 0;
612
613
  }
613
614
 
614
615
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -82,6 +82,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
82
82
  $ddl-chip-sel-mobile-close-height: 40px !default;
83
83
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
84
84
  $ddl-input-text-indent: 8px !default;
85
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
85
86
  $ddl-rtl-chip-sel-close-left: -12px !default;
86
87
  $ddl-popup-active-focus-border-width: 0 !default;
87
88
  $ddl-popup-active-focus-shadow-item: none !default;
@@ -664,8 +665,8 @@ $ddl-small-clear-icon-width: 12px !default;
664
665
  height: $ddl-input-height;
665
666
  min-height: $ddl-input-height;
666
667
  outline: none;
667
- padding: 0;
668
- text-indent: $ddl-input-text-indent;
668
+ padding: $ddl-input-placeholder-padding;
669
+ text-indent: 0;
669
670
  }
670
671
 
671
672
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -82,6 +82,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
82
82
  $ddl-chip-sel-mobile-close-height: 40px !default;
83
83
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
84
84
  $ddl-input-text-indent: 8px !default;
85
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
85
86
  $ddl-rtl-chip-sel-close-left: -12px !default;
86
87
  $ddl-popup-active-focus-border-width: 0 !default;
87
88
  $ddl-popup-active-focus-shadow-item: none !default;
@@ -664,8 +665,8 @@ $ddl-small-clear-icon-width: 12px !default;
664
665
  height: $ddl-input-height;
665
666
  min-height: $ddl-input-height;
666
667
  outline: none;
667
- padding: 0;
668
- text-indent: $ddl-input-text-indent;
668
+ padding: $ddl-input-placeholder-padding;
669
+ text-indent: 0;
669
670
  }
670
671
 
671
672
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -91,6 +91,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
91
91
  $ddl-chip-sel-mobile-close-height: 26px !default;
92
92
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
93
93
  $ddl-input-text-indent: 10px !default;
94
+ $ddl-input-placeholder-padding: 0 0 0 10px !default;
94
95
  $ddl-rtl-chip-sel-close-left: -12px !default;
95
96
  $ddl-popup-active-focus-bg-color: $selection-bg !default;
96
97
  $ddl-popup-active-focus-font-color: $selection-font !default;
@@ -720,8 +721,8 @@ $ddl-closer-margin-top-bigger-small: -3.4em !default;
720
721
  height: $ddl-input-height;
721
722
  min-height: $ddl-input-height;
722
723
  outline: none;
723
- padding: 0;
724
- text-indent: $ddl-input-text-indent;
724
+ padding: $ddl-input-placeholder-padding;
725
+ text-indent: 0;
725
726
  }
726
727
 
727
728
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -93,6 +93,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
93
93
  $ddl-chip-sel-mobile-close-height: 40px !default;
94
94
  $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
95
95
  $ddl-input-text-indent: 0 !default;
96
+ $ddl-input-placeholder-padding: 4px 0 4px 0 !default;
96
97
  $ddl-rtl-chip-sel-close-left: -12px !default;
97
98
  $ddl-popup-active-focus-bg-color: $grey-800 !default;
98
99
  $ddl-popup-active-focus-font-color: $accent !default;
@@ -654,8 +655,8 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
654
655
  height: $ddl-input-height;
655
656
  min-height: $ddl-input-height;
656
657
  outline: none;
657
- padding: 0;
658
- text-indent: $ddl-input-text-indent;
658
+ padding: $ddl-input-placeholder-padding;
659
+ text-indent: 0;
659
660
  }
660
661
 
661
662
  .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {