@syncfusion/blazor-themes 23.1.44 → 23.2.5

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 (142) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +184 -17
  2. package/SCSS-Themes/bootstrap.scss +179 -17
  3. package/SCSS-Themes/bootstrap4.scss +179 -17
  4. package/SCSS-Themes/bootstrap5-dark.scss +181 -18
  5. package/SCSS-Themes/bootstrap5.scss +181 -18
  6. package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss +7 -0
  7. package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss +7 -0
  8. package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss +7 -0
  9. package/SCSS-Themes/documenteditor/document-editor/bootstrap5-dark.scss +7 -0
  10. package/SCSS-Themes/documenteditor/document-editor/bootstrap5.scss +7 -0
  11. package/SCSS-Themes/documenteditor/document-editor/fabric-dark.scss +7 -0
  12. package/SCSS-Themes/documenteditor/document-editor/fabric.scss +7 -0
  13. package/SCSS-Themes/documenteditor/document-editor/fluent-dark.scss +7 -0
  14. package/SCSS-Themes/documenteditor/document-editor/fluent.scss +7 -0
  15. package/SCSS-Themes/documenteditor/document-editor/highcontrast.scss +7 -0
  16. package/SCSS-Themes/documenteditor/document-editor/material-dark.scss +7 -0
  17. package/SCSS-Themes/documenteditor/document-editor/material.scss +7 -0
  18. package/SCSS-Themes/documenteditor/document-editor/material3-dark.scss +7 -0
  19. package/SCSS-Themes/documenteditor/document-editor/material3.scss +7 -0
  20. package/SCSS-Themes/documenteditor/document-editor/tailwind-dark.scss +7 -0
  21. package/SCSS-Themes/documenteditor/document-editor/tailwind.scss +7 -0
  22. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap-dark.scss +69 -0
  23. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap.scss +69 -0
  24. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap4.scss +69 -0
  25. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5-dark.scss +69 -0
  26. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5.scss +69 -0
  27. package/SCSS-Themes/documenteditor/document-editor-container/fabric-dark.scss +69 -0
  28. package/SCSS-Themes/documenteditor/document-editor-container/fabric.scss +69 -0
  29. package/SCSS-Themes/documenteditor/document-editor-container/fluent-dark.scss +69 -0
  30. package/SCSS-Themes/documenteditor/document-editor-container/fluent.scss +69 -0
  31. package/SCSS-Themes/documenteditor/document-editor-container/highcontrast.scss +69 -0
  32. package/SCSS-Themes/documenteditor/document-editor-container/material-dark.scss +69 -0
  33. package/SCSS-Themes/documenteditor/document-editor-container/material.scss +69 -0
  34. package/SCSS-Themes/documenteditor/document-editor-container/material3-dark.scss +69 -0
  35. package/SCSS-Themes/documenteditor/document-editor-container/material3.scss +69 -0
  36. package/SCSS-Themes/documenteditor/document-editor-container/tailwind-dark.scss +69 -0
  37. package/SCSS-Themes/documenteditor/document-editor-container/tailwind.scss +69 -0
  38. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +5 -0
  39. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +2 -1
  40. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +2 -1
  41. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +5 -0
  42. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +2 -1
  43. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +2 -1
  44. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +5 -0
  45. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +2 -1
  46. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +2 -1
  47. package/SCSS-Themes/fabric-dark.scss +184 -17
  48. package/SCSS-Themes/fabric.scss +179 -17
  49. package/SCSS-Themes/filemanager/file-manager/material3-dark.scss +1 -1
  50. package/SCSS-Themes/filemanager/file-manager/material3.scss +1 -1
  51. package/SCSS-Themes/fluent-dark.scss +181 -18
  52. package/SCSS-Themes/fluent.scss +181 -18
  53. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +48 -2
  54. package/SCSS-Themes/grids/grid/bootstrap.scss +48 -2
  55. package/SCSS-Themes/grids/grid/bootstrap4.scss +48 -2
  56. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +48 -2
  57. package/SCSS-Themes/grids/grid/bootstrap5.scss +48 -2
  58. package/SCSS-Themes/grids/grid/fabric-dark.scss +48 -2
  59. package/SCSS-Themes/grids/grid/fabric.scss +48 -2
  60. package/SCSS-Themes/grids/grid/fluent-dark.scss +48 -2
  61. package/SCSS-Themes/grids/grid/fluent.scss +48 -2
  62. package/SCSS-Themes/grids/grid/highcontrast.scss +48 -2
  63. package/SCSS-Themes/grids/grid/material-dark.scss +48 -2
  64. package/SCSS-Themes/grids/grid/material.scss +48 -2
  65. package/SCSS-Themes/grids/grid/material3-dark.scss +48 -2
  66. package/SCSS-Themes/grids/grid/material3.scss +48 -2
  67. package/SCSS-Themes/grids/grid/tailwind-dark.scss +48 -2
  68. package/SCSS-Themes/grids/grid/tailwind.scss +48 -2
  69. package/SCSS-Themes/highcontrast.scss +184 -17
  70. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +25 -7
  71. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +25 -7
  72. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +25 -7
  73. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +25 -7
  74. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +25 -7
  75. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +25 -7
  76. package/SCSS-Themes/image-editor/image-editor/fabric.scss +25 -7
  77. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +25 -7
  78. package/SCSS-Themes/image-editor/image-editor/fluent.scss +25 -7
  79. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +25 -7
  80. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +25 -7
  81. package/SCSS-Themes/image-editor/image-editor/material.scss +25 -7
  82. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +25 -7
  83. package/SCSS-Themes/image-editor/image-editor/material3.scss +25 -7
  84. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +25 -7
  85. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +25 -7
  86. package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap-dark.scss +4 -4
  87. package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap.scss +4 -4
  88. package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap4.scss +4 -4
  89. package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5-dark.scss +4 -4
  90. package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5.scss +4 -4
  91. package/SCSS-Themes/inplace-editor/inplace-editor/fabric-dark.scss +4 -4
  92. package/SCSS-Themes/inplace-editor/inplace-editor/fabric.scss +4 -4
  93. package/SCSS-Themes/inplace-editor/inplace-editor/fluent-dark.scss +4 -4
  94. package/SCSS-Themes/inplace-editor/inplace-editor/fluent.scss +4 -4
  95. package/SCSS-Themes/inplace-editor/inplace-editor/highcontrast.scss +4 -4
  96. package/SCSS-Themes/inplace-editor/inplace-editor/material-dark.scss +4 -4
  97. package/SCSS-Themes/inplace-editor/inplace-editor/material.scss +4 -4
  98. package/SCSS-Themes/inplace-editor/inplace-editor/material3-dark.scss +4 -4
  99. package/SCSS-Themes/inplace-editor/inplace-editor/material3.scss +4 -4
  100. package/SCSS-Themes/inplace-editor/inplace-editor/tailwind-dark.scss +4 -4
  101. package/SCSS-Themes/inplace-editor/inplace-editor/tailwind.scss +4 -4
  102. package/SCSS-Themes/material-dark.scss +179 -17
  103. package/SCSS-Themes/material.scss +179 -17
  104. package/SCSS-Themes/material3-dark.scss +181 -19
  105. package/SCSS-Themes/material3.scss +181 -19
  106. package/SCSS-Themes/pdfviewer/pdfviewer/material3-dark.scss +1 -1
  107. package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss +1 -1
  108. package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss +10 -3
  109. package/SCSS-Themes/ribbon/ribbon/bootstrap.scss +10 -3
  110. package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss +10 -3
  111. package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss +10 -3
  112. package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss +10 -3
  113. package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss +10 -3
  114. package/SCSS-Themes/ribbon/ribbon/fabric.scss +10 -3
  115. package/SCSS-Themes/ribbon/ribbon/fluent-dark.scss +10 -3
  116. package/SCSS-Themes/ribbon/ribbon/fluent.scss +10 -3
  117. package/SCSS-Themes/ribbon/ribbon/highcontrast.scss +10 -3
  118. package/SCSS-Themes/ribbon/ribbon/material-dark.scss +10 -3
  119. package/SCSS-Themes/ribbon/ribbon/material.scss +10 -3
  120. package/SCSS-Themes/ribbon/ribbon/material3-dark.scss +10 -3
  121. package/SCSS-Themes/ribbon/ribbon/material3.scss +10 -3
  122. package/SCSS-Themes/ribbon/ribbon/tailwind-dark.scss +10 -3
  123. package/SCSS-Themes/ribbon/ribbon/tailwind.scss +10 -3
  124. package/SCSS-Themes/schedule/schedule/bootstrap-dark.scss +16 -1
  125. package/SCSS-Themes/schedule/schedule/bootstrap.scss +16 -1
  126. package/SCSS-Themes/schedule/schedule/bootstrap4.scss +16 -1
  127. package/SCSS-Themes/schedule/schedule/bootstrap5-dark.scss +16 -1
  128. package/SCSS-Themes/schedule/schedule/bootstrap5.scss +16 -1
  129. package/SCSS-Themes/schedule/schedule/fabric-dark.scss +16 -1
  130. package/SCSS-Themes/schedule/schedule/fabric.scss +16 -1
  131. package/SCSS-Themes/schedule/schedule/fluent-dark.scss +16 -1
  132. package/SCSS-Themes/schedule/schedule/fluent.scss +16 -1
  133. package/SCSS-Themes/schedule/schedule/highcontrast.scss +16 -1
  134. package/SCSS-Themes/schedule/schedule/material-dark.scss +16 -1
  135. package/SCSS-Themes/schedule/schedule/material.scss +16 -1
  136. package/SCSS-Themes/schedule/schedule/material3-dark.scss +16 -1
  137. package/SCSS-Themes/schedule/schedule/material3.scss +16 -1
  138. package/SCSS-Themes/schedule/schedule/tailwind-dark.scss +16 -1
  139. package/SCSS-Themes/schedule/schedule/tailwind.scss +16 -1
  140. package/SCSS-Themes/tailwind-dark.scss +181 -18
  141. package/SCSS-Themes/tailwind.scss +181 -18
  142. package/package.json +1 -1
@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-base !default;
23
23
  $image-editor-bigger-tbar-btn-fontsize: $text-lg !default;
24
24
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
25
25
  $image-editor-drop-border: 2px dashed rgba($icon-color);
26
+ $image-editor-dropdown-btn-preview-top: -2px !default;
27
+ $image-editor-dropdown-btn-preview-left: -9px !default;
28
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
29
+ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
26
30
 
27
31
  @include export-module('image-editor-layout') {
28
32
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
90
94
 
91
95
  & .e-fill.e-template,
92
96
  & .e-stroke.e-template,
97
+ & .e-frame-stroke.e-template,
93
98
  & .e-pen-stroke-color.e-template,
94
99
  & .e-text-font-color.e-template,
95
100
  & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
108
113
  }
109
114
  }
110
115
 
116
+ & .e-btn-icon.e-dropdownbtn-preview {
117
+ margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
118
+ margin-left: $image-editor-bigger-dropdown-btn-preview-left;
119
+ }
120
+
121
+ & .e-dropdown-btn.e-icon-btn {
122
+ @if $skin-name == 'Material3' {
123
+ padding: 7px 15px;
124
+ }
125
+ }
126
+
111
127
  & .e-dropdown-btn.e-image-popup {
112
128
  & .e-select,
113
129
  & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
254
270
 
255
271
  & .e-fill.e-template,
256
272
  & .e-stroke.e-template,
273
+ & .e-frame-stroke.e-template,
257
274
  & .e-pen-stroke-color.e-template,
258
275
  & .e-text-font-color.e-template,
259
276
  & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
275
292
  & .e-btn-icon.e-dropdownbtn-preview {
276
293
  height: 18px;
277
294
  width: 18px;
278
- margin-top: -4px;
295
+ margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
296
+ margin-left: $image-editor-dropdown-btn-preview-left;
279
297
  }
280
298
 
281
299
  & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
347
365
  margin: 4px;
348
366
  text-align: center;
349
367
  }
368
+
369
+ & .e-dropdown-btn {
370
+ margin: 0 auto;
371
+ width: max-content;
372
+ }
350
373
  }
351
374
 
352
375
  &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
388
411
 
389
412
  & .e-slider-container {
390
413
  margin-left: calc(50% - 137px);
391
- @if $skin-name == 'Material3' {
392
- height: 70px !important; /* stylelint-disable-line declaration-no-important */
393
- }
394
- @else {
395
- height: 54px !important; /* stylelint-disable-line declaration-no-important */
396
- }
414
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
397
415
  }
398
416
  }
399
417
  }
@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-base !default;
23
23
  $image-editor-bigger-tbar-btn-fontsize: $text-lg !default;
24
24
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
25
25
  $image-editor-drop-border: 2px dashed rgba($icon-color);
26
+ $image-editor-dropdown-btn-preview-top: -2px !default;
27
+ $image-editor-dropdown-btn-preview-left: -9px !default;
28
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
29
+ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
26
30
 
27
31
  @include export-module('image-editor-layout') {
28
32
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
90
94
 
91
95
  & .e-fill.e-template,
92
96
  & .e-stroke.e-template,
97
+ & .e-frame-stroke.e-template,
93
98
  & .e-pen-stroke-color.e-template,
94
99
  & .e-text-font-color.e-template,
95
100
  & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
108
113
  }
109
114
  }
110
115
 
116
+ & .e-btn-icon.e-dropdownbtn-preview {
117
+ margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
118
+ margin-left: $image-editor-bigger-dropdown-btn-preview-left;
119
+ }
120
+
121
+ & .e-dropdown-btn.e-icon-btn {
122
+ @if $skin-name == 'Material3' {
123
+ padding: 7px 15px;
124
+ }
125
+ }
126
+
111
127
  & .e-dropdown-btn.e-image-popup {
112
128
  & .e-select,
113
129
  & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
254
270
 
255
271
  & .e-fill.e-template,
256
272
  & .e-stroke.e-template,
273
+ & .e-frame-stroke.e-template,
257
274
  & .e-pen-stroke-color.e-template,
258
275
  & .e-text-font-color.e-template,
259
276
  & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
275
292
  & .e-btn-icon.e-dropdownbtn-preview {
276
293
  height: 18px;
277
294
  width: 18px;
278
- margin-top: -4px;
295
+ margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
296
+ margin-left: $image-editor-dropdown-btn-preview-left;
279
297
  }
280
298
 
281
299
  & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
347
365
  margin: 4px;
348
366
  text-align: center;
349
367
  }
368
+
369
+ & .e-dropdown-btn {
370
+ margin: 0 auto;
371
+ width: max-content;
372
+ }
350
373
  }
351
374
 
352
375
  &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed rgba($icon-color);
388
411
 
389
412
  & .e-slider-container {
390
413
  margin-left: calc(50% - 137px);
391
- @if $skin-name == 'Material3' {
392
- height: 70px !important; /* stylelint-disable-line declaration-no-important */
393
- }
394
- @else {
395
- height: 54px !important; /* stylelint-disable-line declaration-no-important */
396
- }
414
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
397
415
  }
398
416
  }
399
417
  }
@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
23
23
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
24
24
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
25
25
  $image-editor-drop-border: 2px dashed $icon-color !default;
26
+ $image-editor-dropdown-btn-preview-top: -2px !default;
27
+ $image-editor-dropdown-btn-preview-left: -6px !default;
28
+ $image-editor-bigger-dropdown-btn-preview-top: -2px !default;
29
+ $image-editor-bigger-dropdown-btn-preview-left: -6px !default;
26
30
 
27
31
  @include export-module('image-editor-layout') {
28
32
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
90
94
 
91
95
  & .e-fill.e-template,
92
96
  & .e-stroke.e-template,
97
+ & .e-frame-stroke.e-template,
93
98
  & .e-pen-stroke-color.e-template,
94
99
  & .e-text-font-color.e-template,
95
100
  & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
108
113
  }
109
114
  }
110
115
 
116
+ & .e-btn-icon.e-dropdownbtn-preview {
117
+ margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
118
+ margin-left: $image-editor-bigger-dropdown-btn-preview-left;
119
+ }
120
+
121
+ & .e-dropdown-btn.e-icon-btn {
122
+ @if $skin-name == 'Material3' {
123
+ padding: 7px 15px;
124
+ }
125
+ }
126
+
111
127
  & .e-dropdown-btn.e-image-popup {
112
128
  & .e-select,
113
129
  & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
254
270
 
255
271
  & .e-fill.e-template,
256
272
  & .e-stroke.e-template,
273
+ & .e-frame-stroke.e-template,
257
274
  & .e-pen-stroke-color.e-template,
258
275
  & .e-text-font-color.e-template,
259
276
  & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
275
292
  & .e-btn-icon.e-dropdownbtn-preview {
276
293
  height: 18px;
277
294
  width: 18px;
278
- margin-top: -4px;
295
+ margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
296
+ margin-left: $image-editor-dropdown-btn-preview-left;
279
297
  }
280
298
 
281
299
  & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
347
365
  margin: 4px;
348
366
  text-align: center;
349
367
  }
368
+
369
+ & .e-dropdown-btn {
370
+ margin: 0 auto;
371
+ width: max-content;
372
+ }
350
373
  }
351
374
 
352
375
  &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
388
411
 
389
412
  & .e-slider-container {
390
413
  margin-left: calc(50% - 137px);
391
- @if $skin-name == 'Material3' {
392
- height: 70px !important; /* stylelint-disable-line declaration-no-important */
393
- }
394
- @else {
395
- height: 54px !important; /* stylelint-disable-line declaration-no-important */
396
- }
414
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
397
415
  }
398
416
  }
399
417
  }
@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
23
23
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
24
24
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
25
25
  $image-editor-drop-border: 2px dashed $icon-color !default;
26
+ $image-editor-dropdown-btn-preview-top: -2px !default;
27
+ $image-editor-dropdown-btn-preview-left: -6px !default;
28
+ $image-editor-bigger-dropdown-btn-preview-top: -2px !default;
29
+ $image-editor-bigger-dropdown-btn-preview-left: -6px !default;
26
30
 
27
31
  @include export-module('image-editor-layout') {
28
32
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
90
94
 
91
95
  & .e-fill.e-template,
92
96
  & .e-stroke.e-template,
97
+ & .e-frame-stroke.e-template,
93
98
  & .e-pen-stroke-color.e-template,
94
99
  & .e-text-font-color.e-template,
95
100
  & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
108
113
  }
109
114
  }
110
115
 
116
+ & .e-btn-icon.e-dropdownbtn-preview {
117
+ margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
118
+ margin-left: $image-editor-bigger-dropdown-btn-preview-left;
119
+ }
120
+
121
+ & .e-dropdown-btn.e-icon-btn {
122
+ @if $skin-name == 'Material3' {
123
+ padding: 7px 15px;
124
+ }
125
+ }
126
+
111
127
  & .e-dropdown-btn.e-image-popup {
112
128
  & .e-select,
113
129
  & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
254
270
 
255
271
  & .e-fill.e-template,
256
272
  & .e-stroke.e-template,
273
+ & .e-frame-stroke.e-template,
257
274
  & .e-pen-stroke-color.e-template,
258
275
  & .e-text-font-color.e-template,
259
276
  & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
275
292
  & .e-btn-icon.e-dropdownbtn-preview {
276
293
  height: 18px;
277
294
  width: 18px;
278
- margin-top: -4px;
295
+ margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
296
+ margin-left: $image-editor-dropdown-btn-preview-left;
279
297
  }
280
298
 
281
299
  & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
347
365
  margin: 4px;
348
366
  text-align: center;
349
367
  }
368
+
369
+ & .e-dropdown-btn {
370
+ margin: 0 auto;
371
+ width: max-content;
372
+ }
350
373
  }
351
374
 
352
375
  &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
388
411
 
389
412
  & .e-slider-container {
390
413
  margin-left: calc(50% - 137px);
391
- @if $skin-name == 'Material3' {
392
- height: 70px !important; /* stylelint-disable-line declaration-no-important */
393
- }
394
- @else {
395
- height: 54px !important; /* stylelint-disable-line declaration-no-important */
396
- }
414
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
397
415
  }
398
416
  }
399
417
  }
@@ -239,12 +239,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
239
239
  position: relative;
240
240
  width: auto;
241
241
 
242
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
242
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
243
  display: block;
244
244
  visibility: hidden;
245
245
  }
246
246
 
247
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
247
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
248
248
  display: block;
249
249
  visibility: hidden;
250
250
  }
@@ -656,8 +656,8 @@ $editor-btn-icon-color: $grey-dark-font !default;
656
656
  &.e-tooltip-wrap {
657
657
  max-width: 100%;
658
658
 
659
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
659
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
661
661
  display: block;
662
662
  visibility: hidden;
663
663
  }
@@ -240,12 +240,12 @@ $editor-btn-icon-color: $grey-light-font !default;
240
240
  position: relative;
241
241
  width: auto;
242
242
 
243
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
247
247
 
248
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
248
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
249
249
  display: block;
250
250
  visibility: hidden;
251
251
  }
@@ -657,8 +657,8 @@ $editor-btn-icon-color: $grey-light-font !default;
657
657
  &.e-tooltip-wrap {
658
658
  max-width: 100%;
659
659
 
660
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
660
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
662
662
  display: block;
663
663
  visibility: hidden;
664
664
  }
@@ -240,12 +240,12 @@ $editor-btn-icon-color: $gray-700 !default;
240
240
  position: relative;
241
241
  width: auto;
242
242
 
243
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
247
247
 
248
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
248
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
249
249
  display: block;
250
250
  visibility: hidden;
251
251
  }
@@ -657,8 +657,8 @@ $editor-btn-icon-color: $gray-700 !default;
657
657
  &.e-tooltip-wrap {
658
658
  max-width: 100%;
659
659
 
660
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
660
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
662
662
  display: block;
663
663
  visibility: hidden;
664
664
  }
@@ -234,12 +234,12 @@ $editor-btn-icon-color: $icon-color !default;
234
234
  position: relative;
235
235
  width: auto;
236
236
 
237
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
237
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
238
238
  display: block;
239
239
  visibility: hidden;
240
240
  }
241
241
 
242
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
242
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
243
243
  display: block;
244
244
  visibility: hidden;
245
245
  }
@@ -651,8 +651,8 @@ $editor-btn-icon-color: $icon-color !default;
651
651
  &.e-tooltip-wrap {
652
652
  max-width: 100%;
653
653
 
654
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
655
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
654
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
655
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
656
656
  display: block;
657
657
  visibility: hidden;
658
658
  }
@@ -234,12 +234,12 @@ $editor-btn-icon-color: $icon-color !default;
234
234
  position: relative;
235
235
  width: auto;
236
236
 
237
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
237
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
238
238
  display: block;
239
239
  visibility: hidden;
240
240
  }
241
241
 
242
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
242
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
243
243
  display: block;
244
244
  visibility: hidden;
245
245
  }
@@ -651,8 +651,8 @@ $editor-btn-icon-color: $icon-color !default;
651
651
  &.e-tooltip-wrap {
652
652
  max-width: 100%;
653
653
 
654
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
655
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
654
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
655
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
656
656
  display: block;
657
657
  visibility: hidden;
658
658
  }
@@ -239,12 +239,12 @@ $editor-btn-icon-color: $neutral-light-fontalt !default;
239
239
  position: relative;
240
240
  width: auto;
241
241
 
242
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
242
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
243
  display: block;
244
244
  visibility: hidden;
245
245
  }
246
246
 
247
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
247
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
248
248
  display: block;
249
249
  visibility: hidden;
250
250
  }
@@ -656,8 +656,8 @@ $editor-btn-icon-color: $neutral-light-fontalt !default;
656
656
  &.e-tooltip-wrap {
657
657
  max-width: 100%;
658
658
 
659
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
659
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
661
661
  display: block;
662
662
  visibility: hidden;
663
663
  }
@@ -240,12 +240,12 @@ $editor-btn-icon-color: $neutral-light-font !default;
240
240
  position: relative;
241
241
  width: auto;
242
242
 
243
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
247
247
 
248
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
248
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
249
249
  display: block;
250
250
  visibility: hidden;
251
251
  }
@@ -657,8 +657,8 @@ $editor-btn-icon-color: $neutral-light-font !default;
657
657
  &.e-tooltip-wrap {
658
658
  max-width: 100%;
659
659
 
660
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
660
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
662
662
  display: block;
663
663
  visibility: hidden;
664
664
  }
@@ -235,12 +235,12 @@ $editor-btn-icon-color: $icon-color !default;
235
235
  position: relative;
236
236
  width: auto;
237
237
 
238
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
238
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
239
239
  display: block;
240
240
  visibility: hidden;
241
241
  }
242
242
 
243
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
@@ -652,8 +652,8 @@ $editor-btn-icon-color: $icon-color !default;
652
652
  &.e-tooltip-wrap {
653
653
  max-width: 100%;
654
654
 
655
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
655
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
657
657
  display: block;
658
658
  visibility: hidden;
659
659
  }
@@ -235,12 +235,12 @@ $editor-btn-icon-color: $icon-color !default;
235
235
  position: relative;
236
236
  width: auto;
237
237
 
238
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
238
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
239
239
  display: block;
240
240
  visibility: hidden;
241
241
  }
242
242
 
243
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
@@ -652,8 +652,8 @@ $editor-btn-icon-color: $icon-color !default;
652
652
  &.e-tooltip-wrap {
653
653
  max-width: 100%;
654
654
 
655
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
655
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
657
657
  display: block;
658
658
  visibility: hidden;
659
659
  }
@@ -239,12 +239,12 @@ $editor-btn-icon-color: $content-font !default;
239
239
  position: relative;
240
240
  width: auto;
241
241
 
242
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
242
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
243
  display: block;
244
244
  visibility: hidden;
245
245
  }
246
246
 
247
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
247
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
248
248
  display: block;
249
249
  visibility: hidden;
250
250
  }
@@ -656,8 +656,8 @@ $editor-btn-icon-color: $content-font !default;
656
656
  &.e-tooltip-wrap {
657
657
  max-width: 100%;
658
658
 
659
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
659
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
660
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
661
661
  display: block;
662
662
  visibility: hidden;
663
663
  }
@@ -240,12 +240,12 @@ $editor-btn-icon-color: $grey-dark-font !default;
240
240
  position: relative;
241
241
  width: auto;
242
242
 
243
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
247
247
 
248
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
248
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
249
249
  display: block;
250
250
  visibility: hidden;
251
251
  }
@@ -657,8 +657,8 @@ $editor-btn-icon-color: $grey-dark-font !default;
657
657
  &.e-tooltip-wrap {
658
658
  max-width: 100%;
659
659
 
660
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
660
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
662
662
  display: block;
663
663
  visibility: hidden;
664
664
  }
@@ -240,12 +240,12 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
240
240
  position: relative;
241
241
  width: auto;
242
242
 
243
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
247
247
 
248
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
248
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
249
249
  display: block;
250
250
  visibility: hidden;
251
251
  }
@@ -657,8 +657,8 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
657
657
  &.e-tooltip-wrap {
658
658
  max-width: 100%;
659
659
 
660
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
660
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
661
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
662
662
  display: block;
663
663
  visibility: hidden;
664
664
  }
@@ -235,12 +235,12 @@ $editor-btn-icon-color: rgba($icon-color) !default;
235
235
  position: relative;
236
236
  width: auto;
237
237
 
238
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
238
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
239
239
  display: block;
240
240
  visibility: hidden;
241
241
  }
242
242
 
243
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
243
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
244
244
  display: block;
245
245
  visibility: hidden;
246
246
  }
@@ -652,8 +652,8 @@ $editor-btn-icon-color: rgba($icon-color) !default;
652
652
  &.e-tooltip-wrap {
653
653
  max-width: 100%;
654
654
 
655
- .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
- .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
655
+ .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
656
+ .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
657
657
  display: block;
658
658
  visibility: hidden;
659
659
  }