@syncfusion/ej2-splitbuttons 19.4.48 → 20.1.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/CHANGELOG.md +1 -3
  2. package/README.md +1 -1
  3. package/dist/ej2-splitbuttons.umd.min.js +2 -2
  4. package/dist/ej2-splitbuttons.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-splitbuttons.es2015.js +9 -2
  6. package/dist/es6/ej2-splitbuttons.es2015.js.map +1 -1
  7. package/dist/es6/ej2-splitbuttons.es5.js +9 -2
  8. package/dist/es6/ej2-splitbuttons.es5.js.map +1 -1
  9. package/dist/global/ej2-splitbuttons.min.js +2 -2
  10. package/dist/global/ej2-splitbuttons.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +7 -7
  13. package/src/drop-down-button/drop-down-button.js +9 -2
  14. package/styles/bootstrap-dark.css +49 -375
  15. package/styles/bootstrap.css +49 -370
  16. package/styles/bootstrap4.css +57 -379
  17. package/styles/bootstrap5-dark.css +84 -389
  18. package/styles/bootstrap5.css +82 -387
  19. package/styles/button-group/_fluent-dark-definition.scss +1 -0
  20. package/styles/button-group/bootstrap-dark.css +1 -106
  21. package/styles/button-group/bootstrap.css +1 -100
  22. package/styles/button-group/bootstrap4.css +5 -111
  23. package/styles/button-group/bootstrap5-dark.css +3 -108
  24. package/styles/button-group/bootstrap5.css +1 -106
  25. package/styles/button-group/fabric-dark.css +1 -106
  26. package/styles/button-group/fabric.css +1 -106
  27. package/styles/button-group/fluent-dark.css +761 -0
  28. package/styles/button-group/fluent-dark.scss +4 -0
  29. package/styles/button-group/fluent.css +761 -0
  30. package/styles/button-group/fluent.scss +4 -0
  31. package/styles/button-group/highcontrast-light.css +1 -106
  32. package/styles/button-group/highcontrast.css +1 -118
  33. package/styles/button-group/material-dark.css +1 -106
  34. package/styles/button-group/material.css +1 -107
  35. package/styles/button-group/tailwind-dark.css +1 -102
  36. package/styles/button-group/tailwind.css +1 -102
  37. package/styles/drop-down-button/_bootstrap5-definition.scss +4 -4
  38. package/styles/drop-down-button/_fluent-dark-definition.scss +1 -0
  39. package/styles/drop-down-button/_fluent-definition.scss +5 -5
  40. package/styles/drop-down-button/_layout.scss +1 -1
  41. package/styles/drop-down-button/_tailwind-definition.scss +4 -4
  42. package/styles/drop-down-button/bootstrap-dark.css +2 -36
  43. package/styles/drop-down-button/bootstrap.css +2 -36
  44. package/styles/drop-down-button/bootstrap4.css +3 -36
  45. package/styles/drop-down-button/bootstrap5-dark.css +10 -43
  46. package/styles/drop-down-button/bootstrap5.css +10 -43
  47. package/styles/drop-down-button/fabric-dark.css +2 -36
  48. package/styles/drop-down-button/fabric.css +2 -36
  49. package/styles/drop-down-button/fluent-dark.css +213 -0
  50. package/styles/drop-down-button/fluent-dark.scss +6 -0
  51. package/styles/drop-down-button/fluent.css +213 -0
  52. package/styles/drop-down-button/fluent.scss +6 -0
  53. package/styles/drop-down-button/highcontrast-light.css +2 -36
  54. package/styles/drop-down-button/highcontrast.css +2 -36
  55. package/styles/drop-down-button/icons/_fluent-dark.scss +1 -0
  56. package/styles/drop-down-button/icons/_fluent.scss +1 -1
  57. package/styles/drop-down-button/icons/_tailwind-dark.scss +1 -1
  58. package/styles/drop-down-button/icons/_tailwind.scss +1 -1
  59. package/styles/drop-down-button/material-dark.css +2 -36
  60. package/styles/drop-down-button/material.css +2 -36
  61. package/styles/drop-down-button/tailwind-dark.css +9 -43
  62. package/styles/drop-down-button/tailwind.css +9 -43
  63. package/styles/fabric-dark.css +49 -375
  64. package/styles/fabric.css +49 -375
  65. package/styles/fluent-dark.css +1818 -0
  66. package/styles/fluent-dark.scss +4 -0
  67. package/styles/fluent.css +1818 -0
  68. package/styles/fluent.scss +4 -0
  69. package/styles/highcontrast-light.css +49 -375
  70. package/styles/highcontrast.css +49 -387
  71. package/styles/material-dark.css +49 -375
  72. package/styles/material.css +49 -376
  73. package/styles/progress-button/_bootstrap5-definition.scss +6 -6
  74. package/styles/progress-button/_fluent-dark-definition.scss +1 -0
  75. package/styles/progress-button/_fluent-definition.scss +2 -2
  76. package/styles/progress-button/_tailwind-definition.scss +5 -5
  77. package/styles/progress-button/_theme.scss +56 -11
  78. package/styles/progress-button/bootstrap-dark.css +48 -165
  79. package/styles/progress-button/bootstrap.css +48 -165
  80. package/styles/progress-button/bootstrap4.css +48 -165
  81. package/styles/progress-button/bootstrap5-dark.css +73 -174
  82. package/styles/progress-button/bootstrap5.css +73 -174
  83. package/styles/progress-button/fabric-dark.css +48 -165
  84. package/styles/progress-button/fabric.css +48 -165
  85. package/styles/progress-button/fluent-dark.css +544 -0
  86. package/styles/progress-button/fluent-dark.scss +5 -0
  87. package/styles/progress-button/fluent.css +544 -0
  88. package/styles/progress-button/fluent.scss +5 -0
  89. package/styles/progress-button/highcontrast-light.css +48 -165
  90. package/styles/progress-button/highcontrast.css +48 -165
  91. package/styles/progress-button/material-dark.css +48 -165
  92. package/styles/progress-button/material.css +48 -165
  93. package/styles/progress-button/tailwind-dark.css +68 -169
  94. package/styles/progress-button/tailwind.css +68 -169
  95. package/styles/split-button/_fluent-dark-definition.scss +1 -0
  96. package/styles/split-button/_fluent-definition.scss +2 -2
  97. package/styles/split-button/_layout.scss +32 -12
  98. package/styles/split-button/_tailwind-definition.scss +1 -1
  99. package/styles/split-button/bootstrap-dark.css +1 -71
  100. package/styles/split-button/bootstrap.css +1 -71
  101. package/styles/split-button/bootstrap4.css +4 -70
  102. package/styles/split-button/bootstrap5-dark.css +1 -67
  103. package/styles/split-button/bootstrap5.css +1 -67
  104. package/styles/split-button/fabric-dark.css +1 -71
  105. package/styles/split-button/fabric.css +1 -71
  106. package/styles/split-button/fluent-dark.css +297 -0
  107. package/styles/split-button/fluent-dark.scss +6 -0
  108. package/styles/split-button/fluent.css +297 -0
  109. package/styles/split-button/fluent.scss +6 -0
  110. package/styles/split-button/highcontrast-light.css +1 -71
  111. package/styles/split-button/highcontrast.css +1 -71
  112. package/styles/split-button/material-dark.css +1 -71
  113. package/styles/split-button/material.css +1 -71
  114. package/styles/split-button/tailwind-dark.css +10 -80
  115. package/styles/split-button/tailwind.css +10 -80
  116. package/styles/tailwind-dark.css +85 -392
  117. package/styles/tailwind.css +85 -392
package/styles/progress-button/_bootstrap5-definition.scss CHANGED
@@ -11,11 +11,11 @@ $progress-btn-bigger-spin-btn-padding: 20px !default;
11
11
  $progress-btn-bigger-small-spin-btn-padding: 16px !default;
12
12
  $progress-btn-color: $secondary-text-color !default;
13
13
  $progress-btn-bgcolor: rgba($icon-color, .2) !default;
14
- $progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
14
+ $progress-btn-bgcolor-normal: rgba($white, .2) !default;
15
15
  $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
16
- $progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
17
- $progress-btn-flat-success-progress-color: rgba($success, 1) !default;
18
- $progress-btn-flat-info-progress-color: rgba($info, 1) !default;
19
- $progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
20
- $progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
16
+ $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
17
+ $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
18
+ $progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
19
+ $progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
20
+ $progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
21
21
  $btn-flat-primary-path-arc: $white;
package/styles/progress-button/_fluent-dark-definition.scss ADDED
@@ -0,0 +1 @@
1
+ @import './fluent-definition.scss';
package/styles/progress-button/_fluent-definition.scss CHANGED
@@ -10,8 +10,8 @@ $progress-btn-small-spin-btn-padding: 14px !default;
10
10
  $progress-btn-bigger-spin-btn-padding: 20px !default;
11
11
  $progress-btn-bigger-small-spin-btn-padding: 16px !default;
12
12
  $progress-btn-color: $secondary-text-color !default;
13
- $progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
14
- $progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
13
+ $progress-btn-bgcolor: rgba($icon-color, .2) !default;
14
+ $progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
15
15
  $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
16
16
  $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
17
17
  $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
package/styles/progress-button/_tailwind-definition.scss CHANGED
@@ -13,9 +13,9 @@ $progress-btn-color: $secondary-text-color !default;
13
13
  $progress-btn-bgcolor: rgba($icon-color, .2) !default;
14
14
  $progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
15
15
  $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
16
- $progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
17
- $progress-btn-flat-success-progress-color: rgba($success, 1) !default;
18
- $progress-btn-flat-info-progress-color: rgba($info, 1) !default;
19
- $progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
20
- $progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
16
+ $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
17
+ $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
18
+ $progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
19
+ $progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
20
+ $progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
21
21
  $btn-flat-primary-path-arc: $white;
package/styles/progress-button/_theme.scss CHANGED
@@ -25,7 +25,9 @@
25
25
 
26
26
  #{if(&, '&', '*')}.e-primary,
27
27
  #{if(&, '&', '*')}.e-primary.e-outline:hover,
28
- #{if(&, '&', '*')}.e-primary.e-outline:focus {
28
+ #{if(&, '&', '*')}.e-primary.e-outline:focus,
29
+ #{if(&, '&', '*')}.e-primary.e-flat:hover,
30
+ #{if(&, '&', '*')}.e-primary.e-flat:focus {
29
31
  .e-spinner-pane .e-spinner-inner svg {
30
32
  fill: $btn-primary-color;
31
33
  stroke: $btn-primary-color;
@@ -45,7 +47,7 @@
45
47
  stroke: $btn-flat-primary-color;
46
48
 
47
49
  .e-path-circle {
48
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
50
+ @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
49
51
  stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
50
52
  }
51
53
  @else {
@@ -67,7 +69,9 @@
67
69
 
68
70
  #{if(&, '&', '*')}.e-success,
69
71
  #{if(&, '&', '*')}.e-success.e-outline:hover,
70
- #{if(&, '&', '*')}.e-success.e-outline:focus {
72
+ #{if(&, '&', '*')}.e-success.e-outline:focus,
73
+ #{if(&, '&', '*')}.e-success.e-flat:hover,
74
+ #{if(&, '&', '*')}.e-success.e-flat:focus {
71
75
  .e-spinner-pane .e-spinner-inner svg {
72
76
  fill: $btn-success-color;
73
77
  stroke: $btn-success-color;
@@ -87,7 +91,7 @@
87
91
  stroke: $btn-flat-success-color;
88
92
 
89
93
  .e-path-circle {
90
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
94
+ @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
91
95
  stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
92
96
  }
93
97
  @else {
@@ -109,7 +113,9 @@
109
113
 
110
114
  &.e-info,
111
115
  &.e-info.e-outline:hover,
112
- &.e-info.e-outline:focus {
116
+ &.e-info.e-outline:focus,
117
+ &.e-info.e-flat:hover,
118
+ &.e-info.e-flat:focus {
113
119
  .e-spinner-pane .e-spinner-inner svg {
114
120
  fill: $btn-info-color;
115
121
  stroke: $btn-info-color;
@@ -129,7 +135,7 @@
129
135
  stroke: $btn-flat-info-color;
130
136
 
131
137
  .e-path-circle {
132
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
138
+ @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
133
139
  stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
134
140
  }
135
141
  @else {
@@ -151,7 +157,9 @@
151
157
 
152
158
  &.e-warning,
153
159
  &.e-warning.e-outline:hover,
154
- &.e-warning.e-outline:focus {
160
+ &.e-warning.e-outline:focus,
161
+ &.e-warning.e-flat:hover,
162
+ &.e-warning.e-flat:focus {
155
163
  .e-spinner-pane .e-spinner-inner svg {
156
164
  fill: $btn-warning-color;
157
165
  stroke: $btn-warning-color;
@@ -171,7 +179,7 @@
171
179
  stroke: $btn-flat-warning-color;
172
180
 
173
181
  .e-path-circle {
174
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
182
+ @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
175
183
  stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
176
184
  }
177
185
  @else {
@@ -193,7 +201,9 @@
193
201
 
194
202
  &.e-danger,
195
203
  &.e-danger.e-outline:hover,
196
- &.e-danger.e-outline:focus {
204
+ &.e-danger.e-outline:focus,
205
+ &.e-danger.e-flat:hover,
206
+ &.e-danger.e-flat:focus {
197
207
  .e-spinner-pane .e-spinner-inner svg {
198
208
  fill: $btn-danger-color;
199
209
  stroke: $btn-danger-color;
@@ -213,7 +223,7 @@
213
223
  stroke: $btn-flat-danger-color;
214
224
 
215
225
  .e-path-circle {
216
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
226
+ @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
217
227
  stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
218
228
  }
219
229
  @else {
@@ -233,7 +243,8 @@
233
243
  }
234
244
  }
235
245
 
236
- &.e-outline {
246
+ &.e-outline,
247
+ &.e-flat {
237
248
  &.e-primary {
238
249
  .e-spinner-pane .e-spinner-inner svg {
239
250
  fill: $btn-primary-bgcolor;
@@ -408,4 +419,38 @@
408
419
  }
409
420
  }
410
421
  }
422
+
423
+ #{if(&, '&', '*')}.e-flat:not(:focus) {
424
+ @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
425
+ &.e-primary {
426
+ .e-progress {
427
+ background-color: fade-out($btn-primary-bgcolor, .8);
428
+ }
429
+ }
430
+
431
+ &.e-success {
432
+ .e-progress {
433
+ background-color: fade-out($btn-success-bgcolor, .8);
434
+ }
435
+ }
436
+
437
+ &.e-info {
438
+ .e-progress {
439
+ background-color: fade-out($btn-info-bgcolor, .8);
440
+ }
441
+ }
442
+
443
+ &.e-warning {
444
+ .e-progress {
445
+ background-color: fade-out($btn-warning-bgcolor, .8);
446
+ }
447
+ }
448
+
449
+ &.e-danger {
450
+ .e-progress {
451
+ background-color: fade-out($btn-danger-bgcolor, .8);
452
+ }
453
+ }
454
+ }
455
+ }
411
456
  }