@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/split-button/fluent-dark.css ADDED
@@ -0,0 +1,297 @@
1
+ /*! splitbutton layout */
2
+ .e-split-btn-wrapper {
3
+ display: -ms-inline-flexbox;
4
+ display: inline-flex;
5
+ white-space: nowrap;
6
+ width: min-content;
7
+ }
8
+ .e-split-btn-wrapper .e-split-btn {
9
+ border-bottom-right-radius: 0;
10
+ border-top-right-radius: 0;
11
+ text-transform: none;
12
+ z-index: 1;
13
+ padding: 3px 7px;
14
+ }
15
+ .e-split-btn-wrapper .e-split-btn:focus {
16
+ outline-offset: -3px;
17
+ }
18
+ .e-split-btn-wrapper .e-split-btn:focus {
19
+ box-shadow: none;
20
+ }
21
+ .e-split-btn-wrapper .e-split-btn:active {
22
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
23
+ z-index: 2;
24
+ }
25
+ .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
26
+ padding-bottom: 10px;
27
+ padding-top: 10px;
28
+ }
29
+ .e-split-btn-wrapper .e-split-btn .e-btn-icon {
30
+ font-size: 14px;
31
+ margin-left: 0;
32
+ padding-right: 4px;
33
+ width: auto;
34
+ }
35
+ .e-split-btn-wrapper .e-split-btn .e-icon-top {
36
+ padding-bottom: 4px;
37
+ padding-right: 0;
38
+ }
39
+ .e-split-btn-wrapper .e-split-btn.e-icon-btn {
40
+ padding-left: 8px;
41
+ padding-right: 8px;
42
+ }
43
+ .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
44
+ padding-right: 0;
45
+ }
46
+ .e-split-btn-wrapper .e-dropdown-btn {
47
+ border-bottom-left-radius: 0;
48
+ border-top-left-radius: 0;
49
+ margin-left: -1px;
50
+ padding: 4px;
51
+ }
52
+ .e-split-btn-wrapper .e-dropdown-btn:active {
53
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
54
+ z-index: 2;
55
+ }
56
+ .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
57
+ z-index: 0;
58
+ }
59
+ .e-split-btn-wrapper .e-dropdown-btn:focus {
60
+ outline-offset: -3px;
61
+ }
62
+ .e-split-btn-wrapper .e-btn:focus {
63
+ box-shadow: none;
64
+ }
65
+ .e-split-btn-wrapper .e-btn:active {
66
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
67
+ }
68
+ .e-split-btn-wrapper .e-btn:disabled {
69
+ box-shadow: none;
70
+ outline: 0;
71
+ outline-offset: 0;
72
+ }
73
+ .e-split-btn-wrapper.e-rtl .e-split-btn {
74
+ border-bottom-left-radius: 0;
75
+ border-bottom-right-radius: 0;
76
+ border-top-left-radius: 0;
77
+ border-top-right-radius: 0;
78
+ margin-left: -1px;
79
+ padding-left: 8px;
80
+ padding-right: 8px;
81
+ }
82
+ .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
83
+ margin-right: 0;
84
+ padding-left: 4px;
85
+ padding-right: 0;
86
+ }
87
+ .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
88
+ padding-left: 0;
89
+ }
90
+ .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
91
+ padding-left: 8px;
92
+ padding-right: 8px;
93
+ }
94
+ .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
95
+ padding-left: 0;
96
+ }
97
+ .e-split-btn-wrapper.e-rtl .e-dropdown-btn {
98
+ border-bottom-left-radius: 0;
99
+ border-bottom-right-radius: 0;
100
+ border-top-left-radius: 0;
101
+ border-top-right-radius: 0;
102
+ margin-left: 0;
103
+ }
104
+ .e-split-btn-wrapper.e-vertical {
105
+ display: inline-block;
106
+ }
107
+ .e-split-btn-wrapper.e-vertical .e-split-btn,
108
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn {
109
+ display: block;
110
+ width: 100%;
111
+ }
112
+ .e-split-btn-wrapper.e-vertical .e-split-btn {
113
+ border-bottom-left-radius: 0;
114
+ border-top-right-radius: 0;
115
+ line-height: 1;
116
+ padding-bottom: 4px;
117
+ padding-right: 10px;
118
+ }
119
+ .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
120
+ padding-bottom: 4px;
121
+ }
122
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn {
123
+ border-bottom-left-radius: 0;
124
+ border-top-right-radius: 0;
125
+ line-height: 0.334em;
126
+ margin-left: 0;
127
+ margin-top: -1px;
128
+ padding-bottom: 4px;
129
+ padding-top: 4px;
130
+ }
131
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
132
+ padding-top: 0;
133
+ }
134
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
135
+ border-bottom-right-radius: 0;
136
+ border-top-left-radius: 0;
137
+ margin-left: 0;
138
+ }
139
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
140
+ border-bottom-right-radius: 0;
141
+ border-top-left-radius: 0;
142
+ }
143
+
144
+ .e-bigger .e-split-btn-wrapper .e-split-btn,
145
+ .e-bigger.e-split-btn-wrapper .e-split-btn {
146
+ padding-left: 12px;
147
+ padding-right: 12px;
148
+ }
149
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
150
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
151
+ padding-bottom: 12px;
152
+ padding-top: 12px;
153
+ }
154
+ .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
155
+ .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
156
+ font-size: 16px;
157
+ margin-left: 0;
158
+ padding-right: 8px;
159
+ width: auto;
160
+ }
161
+ .e-bigger .e-split-btn-wrapper .e-split-btn .e-icon-top,
162
+ .e-bigger.e-split-btn-wrapper .e-split-btn .e-icon-top {
163
+ padding-bottom: 6px;
164
+ padding-right: 0;
165
+ }
166
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn,
167
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn {
168
+ padding-left: 12px;
169
+ padding-right: 12px;
170
+ }
171
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon,
172
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
173
+ padding-right: 0;
174
+ }
175
+ .e-bigger .e-split-btn-wrapper .e-dropdown-btn,
176
+ .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
177
+ padding-left: 4px;
178
+ padding-right: 4px;
179
+ }
180
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
181
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
182
+ padding-left: 6px;
183
+ padding-right: 12px;
184
+ }
185
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,
186
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
187
+ padding-left: 8px;
188
+ padding-right: 0;
189
+ }
190
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top,
191
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
192
+ padding-left: 0;
193
+ }
194
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn,
195
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
196
+ padding-left: 12px;
197
+ padding-right: 12px;
198
+ }
199
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon,
200
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
201
+ padding-left: 0;
202
+ }
203
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-split-btn,
204
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-split-btn {
205
+ padding-bottom: 6px;
206
+ padding-right: 12px;
207
+ }
208
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn,
209
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
210
+ padding-bottom: 4px;
211
+ padding-top: 4px;
212
+ }
213
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom,
214
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
215
+ padding-top: 0;
216
+ }
217
+
218
+ /*! splitbutton theme */
219
+ .e-split-btn-wrapper .e-split-btn {
220
+ border-right-color: #8a8886;
221
+ }
222
+ .e-split-btn-wrapper .e-split-btn:focus {
223
+ border-right-color: #8a8886;
224
+ }
225
+ .e-split-btn-wrapper .e-split-btn:active {
226
+ border-right-color: #292827;
227
+ }
228
+ .e-split-btn-wrapper .e-split-btn:disabled {
229
+ border-right-color: #252423;
230
+ }
231
+ .e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
232
+ border-right-color: #8a8886;
233
+ }
234
+ .e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
235
+ border-right-color: #323130;
236
+ }
237
+ .e-split-btn-wrapper.e-rtl .e-split-btn {
238
+ border-left-color: #8a8886;
239
+ border-right-color: #8a8886;
240
+ }
241
+ .e-split-btn-wrapper.e-rtl .e-split-btn:focus {
242
+ border-left-color: #8a8886;
243
+ border-right-color: #8a8886;
244
+ }
245
+ .e-split-btn-wrapper.e-rtl .e-split-btn:active {
246
+ border-left-color: #292827;
247
+ border-right-color: #292827;
248
+ }
249
+ .e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
250
+ border-left-color: #323130;
251
+ border-right-color: #323130;
252
+ }
253
+ .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
254
+ border-left-color: #8a8886;
255
+ border-right-color: #8a8886;
256
+ }
257
+ .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
258
+ border-left-color: #323130;
259
+ }
260
+ .e-split-btn-wrapper.e-vertical .e-split-btn {
261
+ border-bottom-color: #8a8886;
262
+ border-right-color: #8a8886;
263
+ }
264
+ .e-split-btn-wrapper.e-vertical .e-split-btn:focus {
265
+ border-bottom-color: #8a8886;
266
+ border-right-color: #8a8886;
267
+ }
268
+ .e-split-btn-wrapper.e-vertical .e-split-btn:active {
269
+ border-bottom-color: #292827;
270
+ border-right-color: #292827;
271
+ }
272
+ .e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
273
+ border-bottom-color: #323130;
274
+ border-right-color: #323130;
275
+ }
276
+ .e-split-btn-wrapper.e-vertical:hover .e-split-btn {
277
+ border-bottom-color: #8a8886;
278
+ border-right-color: #8a8886;
279
+ }
280
+ .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
281
+ border-bottom-color: #323130;
282
+ }
283
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
284
+ border-left-color: #8a8886;
285
+ }
286
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:focus {
287
+ border-left-color: #8a8886;
288
+ }
289
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active {
290
+ border-left-color: #8a8886;
291
+ }
292
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled {
293
+ border-left-color: #8a8886;
294
+ }
295
+ .e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
296
+ border-left-color: #8a8886;
297
+ }
package/styles/split-button/fluent-dark.scss ADDED
@@ -0,0 +1,6 @@
1
+ @import 'ej2-base/styles/fluent-dark-definition.scss';
2
+ @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
3
+ @import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
4
+ @import './../drop-down-button/fluent-dark-definition.scss';
5
+ @import 'fluent-dark-definition.scss';
6
+ @import 'all.scss';
package/styles/split-button/fluent.css ADDED
@@ -0,0 +1,297 @@
1
+ /*! splitbutton layout */
2
+ .e-split-btn-wrapper {
3
+ display: -ms-inline-flexbox;
4
+ display: inline-flex;
5
+ white-space: nowrap;
6
+ width: min-content;
7
+ }
8
+ .e-split-btn-wrapper .e-split-btn {
9
+ border-bottom-right-radius: 0;
10
+ border-top-right-radius: 0;
11
+ text-transform: none;
12
+ z-index: 1;
13
+ padding: 3px 7px;
14
+ }
15
+ .e-split-btn-wrapper .e-split-btn:focus {
16
+ outline-offset: -3px;
17
+ }
18
+ .e-split-btn-wrapper .e-split-btn:focus {
19
+ box-shadow: none;
20
+ }
21
+ .e-split-btn-wrapper .e-split-btn:active {
22
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
23
+ z-index: 2;
24
+ }
25
+ .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
26
+ padding-bottom: 10px;
27
+ padding-top: 10px;
28
+ }
29
+ .e-split-btn-wrapper .e-split-btn .e-btn-icon {
30
+ font-size: 14px;
31
+ margin-left: 0;
32
+ padding-right: 4px;
33
+ width: auto;
34
+ }
35
+ .e-split-btn-wrapper .e-split-btn .e-icon-top {
36
+ padding-bottom: 4px;
37
+ padding-right: 0;
38
+ }
39
+ .e-split-btn-wrapper .e-split-btn.e-icon-btn {
40
+ padding-left: 8px;
41
+ padding-right: 8px;
42
+ }
43
+ .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
44
+ padding-right: 0;
45
+ }
46
+ .e-split-btn-wrapper .e-dropdown-btn {
47
+ border-bottom-left-radius: 0;
48
+ border-top-left-radius: 0;
49
+ margin-left: -1px;
50
+ padding: 4px;
51
+ }
52
+ .e-split-btn-wrapper .e-dropdown-btn:active {
53
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
54
+ z-index: 2;
55
+ }
56
+ .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
57
+ z-index: 0;
58
+ }
59
+ .e-split-btn-wrapper .e-dropdown-btn:focus {
60
+ outline-offset: -3px;
61
+ }
62
+ .e-split-btn-wrapper .e-btn:focus {
63
+ box-shadow: none;
64
+ }
65
+ .e-split-btn-wrapper .e-btn:active {
66
+ box-shadow: 0 0 rgba(0, 0, 0, 0);
67
+ }
68
+ .e-split-btn-wrapper .e-btn:disabled {
69
+ box-shadow: none;
70
+ outline: 0;
71
+ outline-offset: 0;
72
+ }
73
+ .e-split-btn-wrapper.e-rtl .e-split-btn {
74
+ border-bottom-left-radius: 0;
75
+ border-bottom-right-radius: 0;
76
+ border-top-left-radius: 0;
77
+ border-top-right-radius: 0;
78
+ margin-left: -1px;
79
+ padding-left: 8px;
80
+ padding-right: 8px;
81
+ }
82
+ .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
83
+ margin-right: 0;
84
+ padding-left: 4px;
85
+ padding-right: 0;
86
+ }
87
+ .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
88
+ padding-left: 0;
89
+ }
90
+ .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
91
+ padding-left: 8px;
92
+ padding-right: 8px;
93
+ }
94
+ .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
95
+ padding-left: 0;
96
+ }
97
+ .e-split-btn-wrapper.e-rtl .e-dropdown-btn {
98
+ border-bottom-left-radius: 0;
99
+ border-bottom-right-radius: 0;
100
+ border-top-left-radius: 0;
101
+ border-top-right-radius: 0;
102
+ margin-left: 0;
103
+ }
104
+ .e-split-btn-wrapper.e-vertical {
105
+ display: inline-block;
106
+ }
107
+ .e-split-btn-wrapper.e-vertical .e-split-btn,
108
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn {
109
+ display: block;
110
+ width: 100%;
111
+ }
112
+ .e-split-btn-wrapper.e-vertical .e-split-btn {
113
+ border-bottom-left-radius: 0;
114
+ border-top-right-radius: 0;
115
+ line-height: 1;
116
+ padding-bottom: 4px;
117
+ padding-right: 10px;
118
+ }
119
+ .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
120
+ padding-bottom: 4px;
121
+ }
122
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn {
123
+ border-bottom-left-radius: 0;
124
+ border-top-right-radius: 0;
125
+ line-height: 0.334em;
126
+ margin-left: 0;
127
+ margin-top: -1px;
128
+ padding-bottom: 4px;
129
+ padding-top: 4px;
130
+ }
131
+ .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
132
+ padding-top: 0;
133
+ }
134
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
135
+ border-bottom-right-radius: 0;
136
+ border-top-left-radius: 0;
137
+ margin-left: 0;
138
+ }
139
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
140
+ border-bottom-right-radius: 0;
141
+ border-top-left-radius: 0;
142
+ }
143
+
144
+ .e-bigger .e-split-btn-wrapper .e-split-btn,
145
+ .e-bigger.e-split-btn-wrapper .e-split-btn {
146
+ padding-left: 12px;
147
+ padding-right: 12px;
148
+ }
149
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
150
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
151
+ padding-bottom: 12px;
152
+ padding-top: 12px;
153
+ }
154
+ .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
155
+ .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
156
+ font-size: 16px;
157
+ margin-left: 0;
158
+ padding-right: 8px;
159
+ width: auto;
160
+ }
161
+ .e-bigger .e-split-btn-wrapper .e-split-btn .e-icon-top,
162
+ .e-bigger.e-split-btn-wrapper .e-split-btn .e-icon-top {
163
+ padding-bottom: 6px;
164
+ padding-right: 0;
165
+ }
166
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn,
167
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn {
168
+ padding-left: 12px;
169
+ padding-right: 12px;
170
+ }
171
+ .e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon,
172
+ .e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
173
+ padding-right: 0;
174
+ }
175
+ .e-bigger .e-split-btn-wrapper .e-dropdown-btn,
176
+ .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
177
+ padding-left: 4px;
178
+ padding-right: 4px;
179
+ }
180
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
181
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
182
+ padding-left: 6px;
183
+ padding-right: 12px;
184
+ }
185
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,
186
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
187
+ padding-left: 8px;
188
+ padding-right: 0;
189
+ }
190
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top,
191
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
192
+ padding-left: 0;
193
+ }
194
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn,
195
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
196
+ padding-left: 12px;
197
+ padding-right: 12px;
198
+ }
199
+ .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon,
200
+ .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
201
+ padding-left: 0;
202
+ }
203
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-split-btn,
204
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-split-btn {
205
+ padding-bottom: 6px;
206
+ padding-right: 12px;
207
+ }
208
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn,
209
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
210
+ padding-bottom: 4px;
211
+ padding-top: 4px;
212
+ }
213
+ .e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom,
214
+ .e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
215
+ padding-top: 0;
216
+ }
217
+
218
+ /*! splitbutton theme */
219
+ .e-split-btn-wrapper .e-split-btn {
220
+ border-right-color: #8a8886;
221
+ }
222
+ .e-split-btn-wrapper .e-split-btn:focus {
223
+ border-right-color: #8a8886;
224
+ }
225
+ .e-split-btn-wrapper .e-split-btn:active {
226
+ border-right-color: #edebe9;
227
+ }
228
+ .e-split-btn-wrapper .e-split-btn:disabled {
229
+ border-right-color: #f3f2f1;
230
+ }
231
+ .e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
232
+ border-right-color: #8a8886;
233
+ }
234
+ .e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
235
+ border-right-color: #f3f2f1;
236
+ }
237
+ .e-split-btn-wrapper.e-rtl .e-split-btn {
238
+ border-left-color: #8a8886;
239
+ border-right-color: #8a8886;
240
+ }
241
+ .e-split-btn-wrapper.e-rtl .e-split-btn:focus {
242
+ border-left-color: #8a8886;
243
+ border-right-color: #8a8886;
244
+ }
245
+ .e-split-btn-wrapper.e-rtl .e-split-btn:active {
246
+ border-left-color: #edebe9;
247
+ border-right-color: #edebe9;
248
+ }
249
+ .e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
250
+ border-left-color: #f3f2f1;
251
+ border-right-color: #f3f2f1;
252
+ }
253
+ .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
254
+ border-left-color: #8a8886;
255
+ border-right-color: #8a8886;
256
+ }
257
+ .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
258
+ border-left-color: #f3f2f1;
259
+ }
260
+ .e-split-btn-wrapper.e-vertical .e-split-btn {
261
+ border-bottom-color: #8a8886;
262
+ border-right-color: #8a8886;
263
+ }
264
+ .e-split-btn-wrapper.e-vertical .e-split-btn:focus {
265
+ border-bottom-color: #8a8886;
266
+ border-right-color: #8a8886;
267
+ }
268
+ .e-split-btn-wrapper.e-vertical .e-split-btn:active {
269
+ border-bottom-color: #edebe9;
270
+ border-right-color: #edebe9;
271
+ }
272
+ .e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
273
+ border-bottom-color: #f3f2f1;
274
+ border-right-color: #f3f2f1;
275
+ }
276
+ .e-split-btn-wrapper.e-vertical:hover .e-split-btn {
277
+ border-bottom-color: #8a8886;
278
+ border-right-color: #8a8886;
279
+ }
280
+ .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
281
+ border-bottom-color: #f3f2f1;
282
+ }
283
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
284
+ border-left-color: #8a8886;
285
+ }
286
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:focus {
287
+ border-left-color: #8a8886;
288
+ }
289
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active {
290
+ border-left-color: #8a8886;
291
+ }
292
+ .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled {
293
+ border-left-color: #8a8886;
294
+ }
295
+ .e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
296
+ border-left-color: #8a8886;
297
+ }
package/styles/split-button/fluent.scss ADDED
@@ -0,0 +1,6 @@
1
+ @import 'ej2-base/styles/fluent-definition.scss';
2
+ @import 'ej2-buttons/styles/button/fluent-definition.scss';
3
+ @import 'ej2-popups/styles/popup/fluent-definition.scss';
4
+ @import './../drop-down-button/fluent-definition.scss';
5
+ @import 'fluent-definition.scss';
6
+ @import 'all.scss';