@syncfusion/blazor-themes 20.4.43 → 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 (189) hide show
  1. package/SCSS-Themes/base/tailwind.scss +1 -1
  2. package/SCSS-Themes/bootstrap-dark.scss +95 -47
  3. package/SCSS-Themes/bootstrap.scss +95 -47
  4. package/SCSS-Themes/bootstrap4.scss +96 -48
  5. package/SCSS-Themes/bootstrap5-dark.scss +96 -48
  6. package/SCSS-Themes/bootstrap5.scss +96 -48
  7. package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss +4 -0
  8. package/SCSS-Themes/buttons/check-box/bootstrap.scss +4 -0
  9. package/SCSS-Themes/buttons/check-box/bootstrap4.scss +4 -0
  10. package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss +4 -0
  11. package/SCSS-Themes/buttons/check-box/bootstrap5.scss +4 -0
  12. package/SCSS-Themes/buttons/check-box/fabric-dark.scss +4 -0
  13. package/SCSS-Themes/buttons/check-box/fabric.scss +4 -0
  14. package/SCSS-Themes/buttons/check-box/fluent-dark.scss +4 -0
  15. package/SCSS-Themes/buttons/check-box/fluent.scss +4 -0
  16. package/SCSS-Themes/buttons/check-box/highcontrast.scss +4 -0
  17. package/SCSS-Themes/buttons/check-box/material-dark.scss +4 -0
  18. package/SCSS-Themes/buttons/check-box/material.scss +4 -0
  19. package/SCSS-Themes/buttons/check-box/tailwind-dark.scss +4 -0
  20. package/SCSS-Themes/buttons/check-box/tailwind.scss +4 -0
  21. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-dark.scss +3 -0
  22. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap.scss +3 -0
  23. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap4.scss +3 -0
  24. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5-dark.scss +3 -0
  25. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5.scss +3 -0
  26. package/SCSS-Themes/dropdowns/drop-down-list/fabric-dark.scss +3 -0
  27. package/SCSS-Themes/dropdowns/drop-down-list/fabric.scss +3 -0
  28. package/SCSS-Themes/dropdowns/drop-down-list/fluent-dark.scss +3 -0
  29. package/SCSS-Themes/dropdowns/drop-down-list/fluent.scss +3 -0
  30. package/SCSS-Themes/dropdowns/drop-down-list/highcontrast.scss +3 -0
  31. package/SCSS-Themes/dropdowns/drop-down-list/material-dark.scss +3 -0
  32. package/SCSS-Themes/dropdowns/drop-down-list/material.scss +3 -0
  33. package/SCSS-Themes/dropdowns/drop-down-list/tailwind-dark.scss +3 -0
  34. package/SCSS-Themes/dropdowns/drop-down-list/tailwind.scss +3 -0
  35. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +3 -2
  36. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +3 -2
  37. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +3 -2
  38. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +3 -2
  39. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +3 -2
  40. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +3 -2
  41. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +3 -2
  42. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +3 -2
  43. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +3 -2
  44. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +3 -2
  45. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +3 -2
  46. package/SCSS-Themes/dropdowns/multi-select/material.scss +3 -2
  47. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +3 -2
  48. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +3 -2
  49. package/SCSS-Themes/fabric-dark.scss +95 -47
  50. package/SCSS-Themes/fabric.scss +95 -47
  51. package/SCSS-Themes/fluent-dark.scss +96 -48
  52. package/SCSS-Themes/fluent.scss +96 -48
  53. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +17 -1
  54. package/SCSS-Themes/grids/grid/bootstrap.scss +17 -1
  55. package/SCSS-Themes/grids/grid/bootstrap4.scss +17 -1
  56. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +17 -1
  57. package/SCSS-Themes/grids/grid/bootstrap5.scss +17 -1
  58. package/SCSS-Themes/grids/grid/fabric-dark.scss +17 -1
  59. package/SCSS-Themes/grids/grid/fabric.scss +17 -1
  60. package/SCSS-Themes/grids/grid/fluent-dark.scss +17 -1
  61. package/SCSS-Themes/grids/grid/fluent.scss +17 -1
  62. package/SCSS-Themes/grids/grid/highcontrast.scss +17 -1
  63. package/SCSS-Themes/grids/grid/material-dark.scss +17 -1
  64. package/SCSS-Themes/grids/grid/material.scss +17 -1
  65. package/SCSS-Themes/grids/grid/tailwind-dark.scss +17 -1
  66. package/SCSS-Themes/grids/grid/tailwind.scss +17 -1
  67. package/SCSS-Themes/highcontrast.scss +95 -47
  68. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +6 -0
  69. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +6 -0
  70. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +6 -0
  71. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +6 -0
  72. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +6 -0
  73. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +6 -0
  74. package/SCSS-Themes/image-editor/image-editor/fabric.scss +6 -0
  75. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +6 -0
  76. package/SCSS-Themes/image-editor/image-editor/fluent.scss +6 -0
  77. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +6 -0
  78. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +6 -0
  79. package/SCSS-Themes/image-editor/image-editor/material.scss +6 -0
  80. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +6 -0
  81. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +6 -0
  82. package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss +14 -0
  83. package/SCSS-Themes/inputs/color-picker/bootstrap.scss +14 -0
  84. package/SCSS-Themes/inputs/color-picker/bootstrap4.scss +14 -0
  85. package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss +14 -0
  86. package/SCSS-Themes/inputs/color-picker/bootstrap5.scss +14 -0
  87. package/SCSS-Themes/inputs/color-picker/fabric-dark.scss +14 -0
  88. package/SCSS-Themes/inputs/color-picker/fabric.scss +14 -0
  89. package/SCSS-Themes/inputs/color-picker/fluent-dark.scss +14 -0
  90. package/SCSS-Themes/inputs/color-picker/fluent.scss +14 -0
  91. package/SCSS-Themes/inputs/color-picker/highcontrast.scss +14 -0
  92. package/SCSS-Themes/inputs/color-picker/material-dark.scss +14 -0
  93. package/SCSS-Themes/inputs/color-picker/material.scss +14 -0
  94. package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss +14 -0
  95. package/SCSS-Themes/inputs/color-picker/tailwind.scss +14 -0
  96. package/SCSS-Themes/inputs/input/bootstrap-dark.scss +1 -0
  97. package/SCSS-Themes/inputs/input/bootstrap.scss +1 -0
  98. package/SCSS-Themes/inputs/input/bootstrap4.scss +1 -0
  99. package/SCSS-Themes/inputs/input/bootstrap5-dark.scss +1 -0
  100. package/SCSS-Themes/inputs/input/bootstrap5.scss +1 -0
  101. package/SCSS-Themes/inputs/input/fabric-dark.scss +1 -0
  102. package/SCSS-Themes/inputs/input/fabric.scss +1 -0
  103. package/SCSS-Themes/inputs/input/fluent-dark.scss +1 -0
  104. package/SCSS-Themes/inputs/input/fluent.scss +1 -0
  105. package/SCSS-Themes/inputs/input/highcontrast.scss +1 -0
  106. package/SCSS-Themes/inputs/input/material-dark.scss +1 -0
  107. package/SCSS-Themes/inputs/input/material.scss +1 -0
  108. package/SCSS-Themes/inputs/input/tailwind-dark.scss +1 -0
  109. package/SCSS-Themes/inputs/input/tailwind.scss +1 -0
  110. package/SCSS-Themes/material-dark.scss +95 -47
  111. package/SCSS-Themes/material.scss +95 -47
  112. package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss +16 -12
  113. package/SCSS-Themes/navigations/context-menu/bootstrap.scss +16 -12
  114. package/SCSS-Themes/navigations/context-menu/bootstrap4.scss +16 -12
  115. package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss +16 -12
  116. package/SCSS-Themes/navigations/context-menu/bootstrap5.scss +16 -12
  117. package/SCSS-Themes/navigations/context-menu/fabric-dark.scss +16 -12
  118. package/SCSS-Themes/navigations/context-menu/fabric.scss +16 -12
  119. package/SCSS-Themes/navigations/context-menu/fluent-dark.scss +16 -12
  120. package/SCSS-Themes/navigations/context-menu/fluent.scss +16 -12
  121. package/SCSS-Themes/navigations/context-menu/highcontrast.scss +16 -12
  122. package/SCSS-Themes/navigations/context-menu/material-dark.scss +16 -12
  123. package/SCSS-Themes/navigations/context-menu/material.scss +16 -12
  124. package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss +16 -12
  125. package/SCSS-Themes/navigations/context-menu/tailwind.scss +16 -12
  126. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +1 -1
  127. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +1 -1
  128. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +1 -1
  129. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +23 -27
  130. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +23 -27
  131. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +23 -27
  132. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +23 -27
  133. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +23 -27
  134. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +23 -27
  135. package/SCSS-Themes/pivotview/pivotview/fabric.scss +23 -27
  136. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +23 -27
  137. package/SCSS-Themes/pivotview/pivotview/fluent.scss +23 -27
  138. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +23 -27
  139. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +23 -27
  140. package/SCSS-Themes/pivotview/pivotview/material.scss +23 -27
  141. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +23 -27
  142. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +23 -27
  143. package/SCSS-Themes/popups/dialog/fluent-dark.scss +1 -1
  144. package/SCSS-Themes/popups/dialog/fluent.scss +1 -1
  145. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +4 -4
  146. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +4 -4
  147. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +4 -4
  148. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +4 -4
  149. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +4 -4
  150. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +4 -4
  151. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +4 -4
  152. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +4 -4
  153. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +4 -4
  154. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +4 -4
  155. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +4 -4
  156. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +4 -4
  157. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +4 -4
  158. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +4 -4
  159. package/SCSS-Themes/schedule/schedule/bootstrap-dark.scss +1 -1
  160. package/SCSS-Themes/schedule/schedule/bootstrap.scss +1 -1
  161. package/SCSS-Themes/schedule/schedule/bootstrap4.scss +1 -1
  162. package/SCSS-Themes/schedule/schedule/bootstrap5-dark.scss +1 -1
  163. package/SCSS-Themes/schedule/schedule/bootstrap5.scss +1 -1
  164. package/SCSS-Themes/schedule/schedule/fabric-dark.scss +1 -1
  165. package/SCSS-Themes/schedule/schedule/fabric.scss +1 -1
  166. package/SCSS-Themes/schedule/schedule/fluent-dark.scss +1 -1
  167. package/SCSS-Themes/schedule/schedule/fluent.scss +1 -1
  168. package/SCSS-Themes/schedule/schedule/highcontrast.scss +1 -1
  169. package/SCSS-Themes/schedule/schedule/material-dark.scss +1 -1
  170. package/SCSS-Themes/schedule/schedule/material.scss +1 -1
  171. package/SCSS-Themes/schedule/schedule/tailwind-dark.scss +1 -1
  172. package/SCSS-Themes/schedule/schedule/tailwind.scss +1 -1
  173. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss +3 -0
  174. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss +3 -0
  175. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss +3 -0
  176. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss +3 -0
  177. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5.scss +3 -0
  178. package/SCSS-Themes/splitbuttons/drop-down-button/fabric-dark.scss +3 -0
  179. package/SCSS-Themes/splitbuttons/drop-down-button/fabric.scss +3 -0
  180. package/SCSS-Themes/splitbuttons/drop-down-button/fluent-dark.scss +3 -0
  181. package/SCSS-Themes/splitbuttons/drop-down-button/fluent.scss +3 -0
  182. package/SCSS-Themes/splitbuttons/drop-down-button/highcontrast.scss +3 -0
  183. package/SCSS-Themes/splitbuttons/drop-down-button/material-dark.scss +3 -0
  184. package/SCSS-Themes/splitbuttons/drop-down-button/material.scss +3 -0
  185. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind-dark.scss +3 -0
  186. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind.scss +3 -0
  187. package/SCSS-Themes/tailwind-dark.scss +95 -47
  188. package/SCSS-Themes/tailwind.scss +96 -48
  189. package/package.json +1 -1
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $neutral-lighter !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $neutral-white !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $bg-base-0 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $grey-900 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $grey-50 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -228,6 +228,12 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
228
228
  border-top: $image-editor-border;
229
229
  }
230
230
 
231
+ & .e-canvas-wrapper {
232
+ & .e-textarea {
233
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
234
+ }
235
+ }
236
+
231
237
  & .e-bottom-toolbar {
232
238
  border-top: $image-editor-border;
233
239
  }
@@ -885,12 +885,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
885
885
  & .e-slider-track {
886
886
  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%);
887
887
  }
888
+
889
+ & .e-handle {
890
+ @if $skin-name == 'FluentUI' {
891
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
892
+ }
893
+ }
888
894
  }
889
895
 
890
896
  & .e-preview-container {
891
897
  margin-left: 0;
892
898
  margin-right: $cpicker-preview-margin-left;
893
899
  }
900
+
901
+ & .e-opacity-slider {
902
+ & .e-handle-first {
903
+ @if $skin-name == 'FluentUI' {
904
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
905
+ }
906
+ }
907
+ }
894
908
  }
895
909
 
896
910
  & .e-selected-value {
@@ -882,12 +882,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
882
882
  & .e-slider-track {
883
883
  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%);
884
884
  }
885
+
886
+ & .e-handle {
887
+ @if $skin-name == 'FluentUI' {
888
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
889
+ }
890
+ }
885
891
  }
886
892
 
887
893
  & .e-preview-container {
888
894
  margin-left: 0;
889
895
  margin-right: $cpicker-preview-margin-left;
890
896
  }
897
+
898
+ & .e-opacity-slider {
899
+ & .e-handle-first {
900
+ @if $skin-name == 'FluentUI' {
901
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
902
+ }
903
+ }
904
+ }
891
905
  }
892
906
 
893
907
  & .e-selected-value {
@@ -881,12 +881,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
881
881
  & .e-slider-track {
882
882
  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%);
883
883
  }
884
+
885
+ & .e-handle {
886
+ @if $skin-name == 'FluentUI' {
887
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
888
+ }
889
+ }
884
890
  }
885
891
 
886
892
  & .e-preview-container {
887
893
  margin-left: 0;
888
894
  margin-right: $cpicker-preview-margin-left;
889
895
  }
896
+
897
+ & .e-opacity-slider {
898
+ & .e-handle-first {
899
+ @if $skin-name == 'FluentUI' {
900
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
901
+ }
902
+ }
903
+ }
890
904
  }
891
905
 
892
906
  & .e-selected-value {
@@ -887,12 +887,26 @@ $cpicker-split-btn-border: 1px solid $border !default;
887
887
  & .e-slider-track {
888
888
  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%);
889
889
  }
890
+
891
+ & .e-handle {
892
+ @if $skin-name == 'FluentUI' {
893
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
894
+ }
895
+ }
890
896
  }
891
897
 
892
898
  & .e-preview-container {
893
899
  margin-left: 0;
894
900
  margin-right: $cpicker-preview-margin-left;
895
901
  }
902
+
903
+ & .e-opacity-slider {
904
+ & .e-handle-first {
905
+ @if $skin-name == 'FluentUI' {
906
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
907
+ }
908
+ }
909
+ }
896
910
  }
897
911
 
898
912
  & .e-selected-value {
@@ -887,12 +887,26 @@ $cpicker-split-btn-border: 1px solid $border !default;
887
887
  & .e-slider-track {
888
888
  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%);
889
889
  }
890
+
891
+ & .e-handle {
892
+ @if $skin-name == 'FluentUI' {
893
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
894
+ }
895
+ }
890
896
  }
891
897
 
892
898
  & .e-preview-container {
893
899
  margin-left: 0;
894
900
  margin-right: $cpicker-preview-margin-left;
895
901
  }
902
+
903
+ & .e-opacity-slider {
904
+ & .e-handle-first {
905
+ @if $skin-name == 'FluentUI' {
906
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
907
+ }
908
+ }
909
+ }
896
910
  }
897
911
 
898
912
  & .e-selected-value {
@@ -885,12 +885,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
885
885
  & .e-slider-track {
886
886
  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%);
887
887
  }
888
+
889
+ & .e-handle {
890
+ @if $skin-name == 'FluentUI' {
891
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
892
+ }
893
+ }
888
894
  }
889
895
 
890
896
  & .e-preview-container {
891
897
  margin-left: 0;
892
898
  margin-right: $cpicker-preview-margin-left;
893
899
  }
900
+
901
+ & .e-opacity-slider {
902
+ & .e-handle-first {
903
+ @if $skin-name == 'FluentUI' {
904
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
905
+ }
906
+ }
907
+ }
894
908
  }
895
909
 
896
910
  & .e-selected-value {
@@ -881,12 +881,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
881
881
  & .e-slider-track {
882
882
  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%);
883
883
  }
884
+
885
+ & .e-handle {
886
+ @if $skin-name == 'FluentUI' {
887
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
888
+ }
889
+ }
884
890
  }
885
891
 
886
892
  & .e-preview-container {
887
893
  margin-left: 0;
888
894
  margin-right: $cpicker-preview-margin-left;
889
895
  }
896
+
897
+ & .e-opacity-slider {
898
+ & .e-handle-first {
899
+ @if $skin-name == 'FluentUI' {
900
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
901
+ }
902
+ }
903
+ }
890
904
  }
891
905
 
892
906
  & .e-selected-value {
@@ -887,12 +887,26 @@ $cpicker-split-btn-border: 1px solid $border !default;
887
887
  & .e-slider-track {
888
888
  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%);
889
889
  }
890
+
891
+ & .e-handle {
892
+ @if $skin-name == 'FluentUI' {
893
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
894
+ }
895
+ }
890
896
  }
891
897
 
892
898
  & .e-preview-container {
893
899
  margin-left: 0;
894
900
  margin-right: $cpicker-preview-margin-left;
895
901
  }
902
+
903
+ & .e-opacity-slider {
904
+ & .e-handle-first {
905
+ @if $skin-name == 'FluentUI' {
906
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
907
+ }
908
+ }
909
+ }
896
910
  }
897
911
 
898
912
  & .e-selected-value {
@@ -887,12 +887,26 @@ $cpicker-split-btn-border: 1px solid $border !default;
887
887
  & .e-slider-track {
888
888
  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%);
889
889
  }
890
+
891
+ & .e-handle {
892
+ @if $skin-name == 'FluentUI' {
893
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
894
+ }
895
+ }
890
896
  }
891
897
 
892
898
  & .e-preview-container {
893
899
  margin-left: 0;
894
900
  margin-right: $cpicker-preview-margin-left;
895
901
  }
902
+
903
+ & .e-opacity-slider {
904
+ & .e-handle-first {
905
+ @if $skin-name == 'FluentUI' {
906
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
907
+ }
908
+ }
909
+ }
896
910
  }
897
911
 
898
912
  & .e-selected-value {
@@ -881,12 +881,26 @@ $cpicker-blazor-bigger-input-margin: calc(1.67% - 2.7px) !default;
881
881
  & .e-slider-track {
882
882
  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%);
883
883
  }
884
+
885
+ & .e-handle {
886
+ @if $skin-name == 'FluentUI' {
887
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
888
+ }
889
+ }
884
890
  }
885
891
 
886
892
  & .e-preview-container {
887
893
  margin-left: 0;
888
894
  margin-right: $cpicker-preview-margin-left;
889
895
  }
896
+
897
+ & .e-opacity-slider {
898
+ & .e-handle-first {
899
+ @if $skin-name == 'FluentUI' {
900
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
901
+ }
902
+ }
903
+ }
890
904
  }
891
905
 
892
906
  & .e-selected-value {
@@ -889,12 +889,26 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.28px) !default;
889
889
  & .e-slider-track {
890
890
  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%);
891
891
  }
892
+
893
+ & .e-handle {
894
+ @if $skin-name == 'FluentUI' {
895
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
896
+ }
897
+ }
892
898
  }
893
899
 
894
900
  & .e-preview-container {
895
901
  margin-left: 0;
896
902
  margin-right: $cpicker-preview-margin-left;
897
903
  }
904
+
905
+ & .e-opacity-slider {
906
+ & .e-handle-first {
907
+ @if $skin-name == 'FluentUI' {
908
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
909
+ }
910
+ }
911
+ }
898
912
  }
899
913
 
900
914
  & .e-selected-value {
@@ -884,12 +884,26 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
884
884
  & .e-slider-track {
885
885
  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%);
886
886
  }
887
+
888
+ & .e-handle {
889
+ @if $skin-name == 'FluentUI' {
890
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
891
+ }
892
+ }
887
893
  }
888
894
 
889
895
  & .e-preview-container {
890
896
  margin-left: 0;
891
897
  margin-right: $cpicker-preview-margin-left;
892
898
  }
899
+
900
+ & .e-opacity-slider {
901
+ & .e-handle-first {
902
+ @if $skin-name == 'FluentUI' {
903
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
904
+ }
905
+ }
906
+ }
893
907
  }
894
908
 
895
909
  & .e-selected-value {
@@ -886,12 +886,26 @@ $cpicker-handler-tooltip-color: $white !default;
886
886
  & .e-slider-track {
887
887
  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%);
888
888
  }
889
+
890
+ & .e-handle {
891
+ @if $skin-name == 'FluentUI' {
892
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
893
+ }
894
+ }
889
895
  }
890
896
 
891
897
  & .e-preview-container {
892
898
  margin-left: 0;
893
899
  margin-right: $cpicker-preview-margin-left;
894
900
  }
901
+
902
+ & .e-opacity-slider {
903
+ & .e-handle-first {
904
+ @if $skin-name == 'FluentUI' {
905
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
906
+ }
907
+ }
908
+ }
895
909
  }
896
910
 
897
911
  & .e-selected-value {
@@ -886,12 +886,26 @@ $cpicker-handler-tooltip-color: $white !default;
886
886
  & .e-slider-track {
887
887
  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%);
888
888
  }
889
+
890
+ & .e-handle {
891
+ @if $skin-name == 'FluentUI' {
892
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
893
+ }
894
+ }
889
895
  }
890
896
 
891
897
  & .e-preview-container {
892
898
  margin-left: 0;
893
899
  margin-right: $cpicker-preview-margin-left;
894
900
  }
901
+
902
+ & .e-opacity-slider {
903
+ & .e-handle-first {
904
+ @if $skin-name == 'FluentUI' {
905
+ top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
906
+ }
907
+ }
908
+ }
895
909
  }
896
910
 
897
911
  & .e-selected-value {
@@ -3367,6 +3367,7 @@ $float-label-rtl-value: -7px !default;
3367
3367
 
3368
3368
  input.e-input.e-rtl#{$css},
3369
3369
  .e-input-group.e-rtl input.e-input,
3370
+ .e-input-group.e-control-container.e-rtl input.e-control,
3370
3371
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3371
3372
  .e-float-input.e-rtl input,
3372
3373
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3358,6 +3358,7 @@ $float-label-rtl-value: -7px !default;
3358
3358
 
3359
3359
  input.e-input.e-rtl#{$css},
3360
3360
  .e-input-group.e-rtl input.e-input,
3361
+ .e-input-group.e-control-container.e-rtl input.e-control,
3361
3362
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3362
3363
  .e-float-input.e-rtl input,
3363
3364
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3363,6 +3363,7 @@ $float-label-rtl-value: -7px !default;
3363
3363
 
3364
3364
  input.e-input.e-rtl#{$css},
3365
3365
  .e-input-group.e-rtl input.e-input,
3366
+ .e-input-group.e-control-container.e-rtl input.e-control,
3366
3367
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3367
3368
  .e-float-input.e-rtl input,
3368
3369
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3374,6 +3374,7 @@ $float-label-rtl-value: -7px !default;
3374
3374
 
3375
3375
  input.e-input.e-rtl#{$css},
3376
3376
  .e-input-group.e-rtl input.e-input,
3377
+ .e-input-group.e-control-container.e-rtl input.e-control,
3377
3378
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3378
3379
  .e-float-input.e-rtl input,
3379
3380
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3374,6 +3374,7 @@ $float-label-rtl-value: -7px !default;
3374
3374
 
3375
3375
  input.e-input.e-rtl#{$css},
3376
3376
  .e-input-group.e-rtl input.e-input,
3377
+ .e-input-group.e-control-container.e-rtl input.e-control,
3377
3378
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3378
3379
  .e-float-input.e-rtl input,
3379
3380
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3357,6 +3357,7 @@ $float-label-rtl-value: -7px !default;
3357
3357
 
3358
3358
  input.e-input.e-rtl#{$css},
3359
3359
  .e-input-group.e-rtl input.e-input,
3360
+ .e-input-group.e-control-container.e-rtl input.e-control,
3360
3361
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3361
3362
  .e-float-input.e-rtl input,
3362
3363
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3349,6 +3349,7 @@ $float-label-rtl-value: -7px !default;
3349
3349
 
3350
3350
  input.e-input.e-rtl#{$css},
3351
3351
  .e-input-group.e-rtl input.e-input,
3352
+ .e-input-group.e-control-container.e-rtl input.e-control,
3352
3353
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3353
3354
  .e-float-input.e-rtl input,
3354
3355
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3376,6 +3376,7 @@ $float-label-rtl-value: -10px !default;
3376
3376
 
3377
3377
  input.e-input.e-rtl#{$css},
3378
3378
  .e-input-group.e-rtl input.e-input,
3379
+ .e-input-group.e-control-container.e-rtl input.e-control,
3379
3380
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3380
3381
  .e-float-input.e-rtl input,
3381
3382
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3376,6 +3376,7 @@ $float-label-rtl-value: -10px !default;
3376
3376
 
3377
3377
  input.e-input.e-rtl#{$css},
3378
3378
  .e-input-group.e-rtl input.e-input,
3379
+ .e-input-group.e-control-container.e-rtl input.e-control,
3379
3380
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3380
3381
  .e-float-input.e-rtl input,
3381
3382
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3350,6 +3350,7 @@ $float-label-rtl-value: -7px !default;
3350
3350
 
3351
3351
  input.e-input.e-rtl#{$css},
3352
3352
  .e-input-group.e-rtl input.e-input,
3353
+ .e-input-group.e-control-container.e-rtl input.e-control,
3353
3354
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3354
3355
  .e-float-input.e-rtl input,
3355
3356
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3611,6 +3611,7 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
3611
3611
 
3612
3612
  input.e-input.e-rtl#{$css},
3613
3613
  .e-input-group.e-rtl input.e-input,
3614
+ .e-input-group.e-control-container.e-rtl input.e-control,
3614
3615
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3615
3616
  .e-float-input.e-rtl input,
3616
3617
  .e-float-input.e-control-wrapper.e-rtl input,
@@ -3611,6 +3611,7 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
3611
3611
 
3612
3612
  input.e-input.e-rtl#{$css},
3613
3613
  .e-input-group.e-rtl input.e-input,
3614
+ .e-input-group.e-control-container.e-rtl input.e-control,
3614
3615
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
3615
3616
  .e-float-input.e-rtl input,
3616
3617
  .e-float-input.e-control-wrapper.e-rtl input,