@syncfusion/ej2-react-splitbuttons 23.2.4 → 24.1.44

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 (90) hide show
  1. package/CHANGELOG.md +2 -12
  2. package/README.md +1 -1
  3. package/dist/ej2-react-splitbuttons.min.js +1 -1
  4. package/dist/ej2-react-splitbuttons.umd.min.js +1 -1
  5. package/package.json +9 -9
  6. package/styles/bootstrap-dark.css +1 -1761
  7. package/styles/bootstrap.css +1 -1811
  8. package/styles/bootstrap4.css +1 -1836
  9. package/styles/bootstrap5-dark.css +1 -1851
  10. package/styles/bootstrap5.css +1 -1851
  11. package/styles/button-group/bootstrap-dark.css +1 -752
  12. package/styles/button-group/bootstrap.css +1 -726
  13. package/styles/button-group/bootstrap4.css +1 -756
  14. package/styles/button-group/bootstrap5-dark.css +1 -751
  15. package/styles/button-group/bootstrap5.css +1 -751
  16. package/styles/button-group/fabric-dark.css +1 -752
  17. package/styles/button-group/fabric.css +1 -758
  18. package/styles/button-group/fluent-dark.css +1 -755
  19. package/styles/button-group/fluent.css +1 -755
  20. package/styles/button-group/highcontrast-light.css +1 -752
  21. package/styles/button-group/highcontrast.css +1 -803
  22. package/styles/button-group/material-dark.css +1 -752
  23. package/styles/button-group/material.css +1 -756
  24. package/styles/button-group/material3-dark.css +1 -901
  25. package/styles/button-group/material3.css +1 -957
  26. package/styles/button-group/tailwind-dark.css +1 -739
  27. package/styles/button-group/tailwind.css +1 -739
  28. package/styles/drop-down-button/bootstrap-dark.css +1 -231
  29. package/styles/drop-down-button/bootstrap.css +1 -231
  30. package/styles/drop-down-button/bootstrap4.css +1 -226
  31. package/styles/drop-down-button/bootstrap5-dark.css +1 -236
  32. package/styles/drop-down-button/bootstrap5.css +1 -236
  33. package/styles/drop-down-button/fabric-dark.css +1 -231
  34. package/styles/drop-down-button/fabric.css +1 -231
  35. package/styles/drop-down-button/fluent-dark.css +1 -233
  36. package/styles/drop-down-button/fluent.css +1 -233
  37. package/styles/drop-down-button/highcontrast-light.css +1 -231
  38. package/styles/drop-down-button/highcontrast.css +1 -232
  39. package/styles/drop-down-button/material-dark.css +1 -231
  40. package/styles/drop-down-button/material.css +1 -231
  41. package/styles/drop-down-button/material3-dark.css +1 -292
  42. package/styles/drop-down-button/material3.css +1 -348
  43. package/styles/drop-down-button/tailwind-dark.css +1 -241
  44. package/styles/drop-down-button/tailwind.css +1 -241
  45. package/styles/fabric-dark.css +1 -1761
  46. package/styles/fabric.css +1 -1841
  47. package/styles/fluent-dark.css +1 -1852
  48. package/styles/fluent.css +1 -1852
  49. package/styles/highcontrast-light.css +1 -1761
  50. package/styles/highcontrast.css +1 -1813
  51. package/styles/material-dark.css +1 -1761
  52. package/styles/material.css +1 -1839
  53. package/styles/material3-dark.css +1 -2164
  54. package/styles/material3.css +1 -2382
  55. package/styles/progress-button/bootstrap-dark.css +1 -445
  56. package/styles/progress-button/bootstrap.css +1 -522
  57. package/styles/progress-button/bootstrap4.css +1 -525
  58. package/styles/progress-button/bootstrap5-dark.css +1 -538
  59. package/styles/progress-button/bootstrap5.css +1 -538
  60. package/styles/progress-button/fabric-dark.css +1 -445
  61. package/styles/progress-button/fabric.css +1 -522
  62. package/styles/progress-button/fluent-dark.css +1 -538
  63. package/styles/progress-button/fluent.css +1 -538
  64. package/styles/progress-button/highcontrast-light.css +1 -445
  65. package/styles/progress-button/highcontrast.css +1 -445
  66. package/styles/progress-button/material-dark.css +1 -445
  67. package/styles/progress-button/material.css +1 -522
  68. package/styles/progress-button/material3-dark.css +1 -556
  69. package/styles/progress-button/material3.css +1 -612
  70. package/styles/progress-button/tailwind-dark.css +1 -542
  71. package/styles/progress-button/tailwind.css +1 -542
  72. package/styles/split-button/bootstrap-dark.css +1 -330
  73. package/styles/split-button/bootstrap.css +1 -330
  74. package/styles/split-button/bootstrap4.css +1 -326
  75. package/styles/split-button/bootstrap5-dark.css +1 -323
  76. package/styles/split-button/bootstrap5.css +1 -323
  77. package/styles/split-button/fabric-dark.css +1 -330
  78. package/styles/split-button/fabric.css +1 -327
  79. package/styles/split-button/fluent-dark.css +1 -323
  80. package/styles/split-button/fluent.css +1 -323
  81. package/styles/split-button/highcontrast-light.css +1 -330
  82. package/styles/split-button/highcontrast.css +1 -330
  83. package/styles/split-button/material-dark.css +1 -330
  84. package/styles/split-button/material.css +1 -327
  85. package/styles/split-button/material3-dark.css +1 -412
  86. package/styles/split-button/material3.css +1 -462
  87. package/styles/split-button/tailwind-dark.css +1 -344
  88. package/styles/split-button/tailwind.css +1 -344
  89. package/styles/tailwind-dark.css +1 -1868
  90. package/styles/tailwind.css +1 -1868
@@ -1,348 +1 @@
1
- :root {
2
- --color-sf-black: 0, 0, 0;
3
- --color-sf-white: 255, 255, 255;
4
- --color-sf-primary: 103, 80, 164;
5
- --color-sf-primary-container: 234, 221, 255;
6
- --color-sf-secondary: 98, 91, 113;
7
- --color-sf-secondary-container: 232, 222, 248;
8
- --color-sf-tertiary: 125, 82, 96;
9
- --color-sf-tertiary-container: 255, 216, 228;
10
- --color-sf-surface: 255, 255, 255;
11
- --color-sf-surface-variant: 231, 224, 236;
12
- --color-sf-background: var(--color-sf-surface);
13
- --color-sf-on-primary: 255, 255, 255;
14
- --color-sf-on-primary-container: 33, 0, 94;
15
- --color-sf-on-secondary: 255, 255, 255;
16
- --color-sf-on-secondary-container: 30, 25, 43;
17
- --color-sf-on-tertiary: 255, 255, 255;
18
- --color-sf-on-tertiary-containe: 55, 11, 30;
19
- --color-sf-on-surface: 28, 27, 31;
20
- --color-sf-on-surface-variant: 73, 69, 78;
21
- --color-sf-on-background: 28, 27, 31;
22
- --color-sf-outline: 121, 116, 126;
23
- --color-sf-outline-variant: 196, 199, 197;
24
- --color-sf-shadow: 0, 0, 0;
25
- --color-sf-surface-tint-color: 103, 80, 164;
26
- --color-sf-inverse-surface: 49, 48, 51;
27
- --color-sf-inverse-on-surface: 244, 239, 244;
28
- --color-sf-inverse-primary: 208, 188, 255;
29
- --color-sf-scrim: 0, 0, 0;
30
- --color-sf-error: 179, 38, 30;
31
- --color-sf-error-container: 249, 222, 220;
32
- --color-sf-on-error: 255, 250, 250;
33
- --color-sf-on-error-container: 65, 14, 11;
34
- --color-sf-success: 32, 81, 7;
35
- --color-sf-success-container: 209, 255, 186;
36
- --color-sf-on-success: 244, 255, 239;
37
- --color-sf-on-success-container: 13, 39, 0;
38
- --color-sf-info: 1, 87, 155;
39
- --color-sf-info-container: 233, 245, 255;
40
- --color-sf-on-info: 250, 253, 255;
41
- --color-sf-on-info-container: 0, 51, 91;
42
- --color-sf-warning: 145, 76, 0;
43
- --color-sf-warning-container: 254, 236, 222;
44
- --color-sf-on-warning: 255, 255, 255;
45
- --color-sf-on-warning-container: 47, 21, 0;
46
- --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
48
- --color-sf-diagram-palette-background: --color-sf-white;
49
- --color-sf-success-text: 255, 255, 255;
50
- --color-sf-warning-text: 255, 255, 255;
51
- --color-sf-danger-text: 255, 255, 255;
52
- --color-sf-info-text: 255, 255, 255;
53
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
54
- --color-sf-secondary-bg-color: var(--color-sf-surface);
55
- }
56
-
57
- .e-dark-mode {
58
- --color-sf-black: 0, 0, 0;
59
- --color-sf-white: 255, 255, 255;
60
- --color-sf-primary: 208, 188, 255;
61
- --color-sf-primary-container: 79, 55, 139;
62
- --color-sf-secondary: 204, 194, 220;
63
- --color-sf-secondary-container: 74, 68, 88;
64
- --color-sf-tertiary: 239, 184, 200;
65
- --color-sf-tertiary-container: 99, 59, 72;
66
- --color-sf-surface: 28, 27, 31;
67
- --color-sf-surface-variant: 28, 27, 31;
68
- --color-sf-background: var(--color-sf-surface);
69
- --color-sf-on-primary: 55, 30, 115;
70
- --color-sf-on-primary-container: 234, 221, 255;
71
- --color-sf-on-secondary: 51, 45, 65;
72
- --color-sf-on-secondary-container: 232, 222, 248;
73
- --color-sf-on-tertiary: 73, 37, 50;
74
- --color-sf-on-tertiary-containe: 255, 216, 228;
75
- --color-sf-on-surface: 230, 225, 229;
76
- --color-sf-on-surface-variant: 202, 196, 208;
77
- --color-sf-on-background: 230, 225, 229;
78
- --color-sf-outline: 147, 143, 153;
79
- --color-sf-outline-variant: 68, 71, 70;
80
- --color-sf-shadow: 0, 0, 0;
81
- --color-sf-surface-tint-color: 208, 188, 255;
82
- --color-sf-inverse-surface: 230, 225, 229;
83
- --color-sf-inverse-on-surface: 49, 48, 51;
84
- --color-sf-inverse-primary: 103, 80, 164;
85
- --color-sf-scrim: 0, 0, 0;
86
- --color-sf-error: 242, 184, 181;
87
- --color-sf-error-container: 140, 29, 24;
88
- --color-sf-on-error: 96, 20, 16;
89
- --color-sf-on-error-container: 249, 222, 220;
90
- --color-sf-success: 83, 202, 23;
91
- --color-sf-success-container: 22, 62, 2;
92
- --color-sf-on-success: 13, 39, 0;
93
- --color-sf-on-success-container: 183, 250, 150;
94
- --color-sf-info: 71, 172, 251;
95
- --color-sf-info-container: 0, 67, 120;
96
- --color-sf-on-info: 0, 51, 91;
97
- --color-sf-on-info-container: 173, 219, 255;
98
- --color-sf-warning: 245, 180, 130;
99
- --color-sf-warning-container: 123, 65, 0;
100
- --color-sf-on-warning: 99, 52, 0;
101
- --color-sf-on-warning-container: 255, 220, 193;
102
- --color-sf-spreadsheet-gridline: 231, 224, 236;
103
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
104
- --color-sf-success-text: 0, 0, 0;
105
- --color-sf-warning-text: 0, 0, 0;
106
- --color-sf-info-text: 0, 0, 0;
107
- --color-sf-danger-text: 0, 0, 0;
108
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
109
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
110
- }
111
-
112
- /* stylelint-disable-line no-empty-source */
113
- .e-dropdown-btn .e-caret::before,
114
- .e-dropdown-btn.e-btn .e-caret::before {
115
- content: "\e70d";
116
- }
117
-
118
- /*! drop-down button layout */
119
- .e-dropdown-btn,
120
- .e-dropdown-btn.e-btn {
121
- box-shadow: none;
122
- text-transform: none;
123
- white-space: normal;
124
- border-radius: 4px;
125
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
126
- padding: 7px 16px;
127
- }
128
- .e-dropdown-btn:focus,
129
- .e-dropdown-btn.e-btn:focus {
130
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
131
- }
132
- .e-dropdown-btn:focus-visible,
133
- .e-dropdown-btn.e-btn:focus-visible {
134
- box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
135
- }
136
- .e-dropdown-btn:active,
137
- .e-dropdown-btn.e-btn:active {
138
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
139
- }
140
- .e-dropdown-btn .e-btn-icon,
141
- .e-dropdown-btn.e-btn .e-btn-icon {
142
- font-size: 16px;
143
- }
144
- .e-dropdown-btn .e-caret,
145
- .e-dropdown-btn.e-btn .e-caret {
146
- font-size: 14px;
147
- }
148
- .e-dropdown-btn.e-vertical,
149
- .e-dropdown-btn.e-btn.e-vertical {
150
- line-height: 1;
151
- padding: 6px 12px;
152
- }
153
- .e-dropdown-btn.e-caret-hide .e-caret,
154
- .e-dropdown-btn.e-btn.e-caret-hide .e-caret {
155
- display: none;
156
- }
157
- .e-dropdown-btn.e-small .e-dropdown-popup ul,
158
- .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul {
159
- padding: 4px 0;
160
- }
161
- .e-dropdown-btn.e-small .e-dropdown-popup ul .e-item,
162
- .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul .e-item {
163
- padding: 0 8px;
164
- height: 24px;
165
- }
166
- .e-dropdown-btn.e-small.e-vertical,
167
- .e-dropdown-btn.e-btn.e-small.e-vertical {
168
- line-height: 1;
169
- padding: 6px 12px;
170
- }
171
-
172
- .e-bigger .e-dropdown-btn .e-btn-icon,
173
- .e-bigger.e-dropdown-btn .e-btn-icon {
174
- font-size: 18px;
175
- }
176
- .e-bigger .e-dropdown-btn .e-caret,
177
- .e-bigger.e-dropdown-btn .e-caret {
178
- font-size: 16px;
179
- }
180
- .e-bigger .e-dropdown-btn.e-vertical,
181
- .e-bigger.e-dropdown-btn.e-vertical {
182
- line-height: 1;
183
- padding: 8px 16px;
184
- }
185
- .e-bigger .e-dropdown-btn.e-small.e-vertical,
186
- .e-bigger.e-dropdown-btn.e-small.e-vertical {
187
- line-height: 1;
188
- padding: 8px 16px;
189
- }
190
-
191
- .e-dropdown-popup {
192
- position: absolute;
193
- }
194
- .e-dropdown-popup ul {
195
- border: 0 solid rgba(var(--color-sf-outline-variant));
196
- border-radius: 4px;
197
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
198
- box-sizing: border-box;
199
- font-size: 14px;
200
- font-weight: 400;
201
- list-style-image: none;
202
- list-style-position: outside;
203
- list-style-type: none;
204
- margin: 0;
205
- min-width: 120px;
206
- overflow: hidden;
207
- padding: 4px 0;
208
- -webkit-user-select: none;
209
- -ms-user-select: none;
210
- user-select: none;
211
- white-space: nowrap;
212
- }
213
- .e-dropdown-popup ul .e-item {
214
- cursor: pointer;
215
- display: -ms-flexbox;
216
- display: flex;
217
- height: 32px;
218
- line-height: 32px;
219
- padding: 0 12px;
220
- }
221
- .e-dropdown-popup ul .e-item.e-url {
222
- padding: 0;
223
- }
224
- .e-dropdown-popup ul .e-item .e-menu-url {
225
- display: block;
226
- padding: 0 12px;
227
- text-decoration: none;
228
- width: 100%;
229
- }
230
- .e-dropdown-popup ul .e-item .e-menu-icon {
231
- float: left;
232
- font-size: 16px;
233
- line-height: 32px;
234
- margin-right: 11px;
235
- vertical-align: middle;
236
- width: 1em;
237
- }
238
- .e-dropdown-popup ul .e-item.e-disabled {
239
- cursor: auto;
240
- pointer-events: none;
241
- box-shadow: none;
242
- }
243
- .e-dropdown-popup ul .e-item.e-separator {
244
- border-bottom-style: solid;
245
- border-bottom-width: 1px;
246
- cursor: auto;
247
- height: auto;
248
- line-height: normal;
249
- margin: 3px 0;
250
- pointer-events: none;
251
- }
252
- .e-dropdown-popup.e-transparent {
253
- background: transparent;
254
- box-shadow: none;
255
- }
256
- .e-dropdown-popup.e-transparent .e-dropdown-menu {
257
- border: 0;
258
- height: 1px;
259
- min-width: 0;
260
- padding: 0;
261
- width: 1px;
262
- }
263
-
264
- .e-rtl.e-dropdown-popup .e-item .e-menu-icon {
265
- float: right;
266
- margin-left: 11px;
267
- margin-right: 0;
268
- }
269
-
270
- *.e-bigger .e-dropdown-popup ul,
271
- *.e-bigger.e-dropdown-popup ul {
272
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
273
- font-size: 16px;
274
- max-width: 202px;
275
- min-width: 112px;
276
- padding: 8px 0;
277
- }
278
- *.e-bigger .e-dropdown-popup ul .e-item,
279
- *.e-bigger.e-dropdown-popup ul .e-item {
280
- height: 40px;
281
- line-height: 40px;
282
- padding: 0 16px;
283
- }
284
- *.e-bigger .e-dropdown-popup ul .e-item.e-url,
285
- *.e-bigger.e-dropdown-popup ul .e-item.e-url {
286
- padding: 0;
287
- }
288
- *.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
289
- *.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
290
- font-size: 20px;
291
- line-height: 40px;
292
- }
293
- *.e-bigger .e-dropdown-popup ul .e-item.e-separator,
294
- *.e-bigger.e-dropdown-popup ul .e-item.e-separator {
295
- height: auto;
296
- line-height: normal;
297
- }
298
-
299
- /*! drop-down button theme */
300
- .e-dropdown-popup {
301
- background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
302
- color: rgba(var(--color-sf-on-surface));
303
- }
304
- .e-dropdown-popup ul .e-item .e-menu-url {
305
- color: rgba(var(--color-sf-on-surface));
306
- }
307
- .e-dropdown-popup ul .e-item .e-menu-icon {
308
- color: rgba(var(--color-sf-on-surface-variant));
309
- }
310
- .e-dropdown-popup ul .e-item.e-focused {
311
- background-color: rgba(var(--color-sf-on-surface), 0.04);
312
- box-shadow: none;
313
- }
314
- .e-dropdown-popup ul .e-item:hover {
315
- background-color: rgba(var(--color-sf-on-surface), 0.05);
316
- color: rgba(var(--color-sf-on-surface));
317
- }
318
- .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected {
319
- background-color: rgba(var(--color-sf-primary-container), 0.65);
320
- color: rgba(var(--color-sf-on-surface));
321
- }
322
- .e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
323
- color: rgba(var(--color-sf-on-surface));
324
- }
325
- .e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
326
- color: rgba(var(--color-sf-on-surface));
327
- }
328
- .e-dropdown-popup ul .e-separator {
329
- border-bottom-color: rgba(var(--color-sf-outline-variant));
330
- }
331
-
332
- .e-dropdown-btn.e-inherit,
333
- .e-dropdown-btn.e-btn.e-inherit {
334
- background: inherit;
335
- border-color: transparent;
336
- box-shadow: none;
337
- color: inherit;
338
- }
339
- .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
340
- .e-dropdown-btn.e-btn.e-inherit:hover,
341
- .e-dropdown-btn.e-btn.e-inherit:focus,
342
- .e-dropdown-btn.e-btn.e-inherit:active,
343
- .e-dropdown-btn.e-btn.e-inherit.e-active {
344
- background-color: rgba(0, 0, 0, 0.056);
345
- border-color: transparent;
346
- box-shadow: none;
347
- color: inherit;
348
- }
1
+ @import '@syncfusion/ej2-splitbuttons/styles/drop-down-button/material3.css';
@@ -1,241 +1 @@
1
- /* stylelint-disable-line no-empty-source */
2
- .e-dropdown-btn .e-caret::before,
3
- .e-dropdown-btn.e-btn .e-caret::before {
4
- content: "\e70d";
5
- }
6
-
7
- /*! drop-down button layout */
8
- .e-dropdown-btn,
9
- .e-dropdown-btn.e-btn {
10
- box-shadow: none;
11
- text-transform: none;
12
- white-space: normal;
13
- }
14
- .e-dropdown-btn:hover,
15
- .e-dropdown-btn.e-btn:hover {
16
- box-shadow: none;
17
- }
18
- .e-dropdown-btn:focus,
19
- .e-dropdown-btn.e-btn:focus {
20
- box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
21
- }
22
- .e-dropdown-btn:active,
23
- .e-dropdown-btn.e-btn:active {
24
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
25
- }
26
- .e-dropdown-btn .e-btn-icon,
27
- .e-dropdown-btn.e-btn .e-btn-icon {
28
- font-size: 14px;
29
- }
30
- .e-dropdown-btn .e-caret,
31
- .e-dropdown-btn.e-btn .e-caret {
32
- font-size: 18px;
33
- }
34
- .e-dropdown-btn.e-vertical,
35
- .e-dropdown-btn.e-btn.e-vertical {
36
- line-height: 1;
37
- padding: 6px 12px;
38
- }
39
- .e-dropdown-btn.e-caret-hide .e-caret,
40
- .e-dropdown-btn.e-btn.e-caret-hide .e-caret {
41
- display: none;
42
- }
43
- .e-dropdown-btn.e-small .e-dropdown-popup ul,
44
- .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul {
45
- padding: 4px 0;
46
- }
47
- .e-dropdown-btn.e-small .e-dropdown-popup ul .e-item,
48
- .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul .e-item {
49
- padding: 0 8px;
50
- }
51
- .e-dropdown-btn.e-small.e-vertical,
52
- .e-dropdown-btn.e-btn.e-small.e-vertical {
53
- line-height: 1;
54
- padding: 6px 12px;
55
- }
56
-
57
- .e-bigger .e-dropdown-btn .e-btn-icon,
58
- .e-bigger.e-dropdown-btn .e-btn-icon {
59
- font-size: 16px;
60
- }
61
- .e-bigger .e-dropdown-btn .e-caret,
62
- .e-bigger.e-dropdown-btn .e-caret {
63
- font-size: 22px;
64
- }
65
- .e-bigger .e-dropdown-btn.e-vertical,
66
- .e-bigger.e-dropdown-btn.e-vertical {
67
- line-height: 1;
68
- padding: 8px 16px;
69
- }
70
- .e-bigger .e-dropdown-btn.e-small.e-vertical,
71
- .e-bigger.e-dropdown-btn.e-small.e-vertical {
72
- line-height: 1;
73
- padding: 8px 16px;
74
- }
75
-
76
- .e-dropdown-popup {
77
- position: absolute;
78
- border-radius: 4px;
79
- margin-top: 4px;
80
- }
81
- .e-dropdown-popup ul {
82
- border: 1px solid #4b5563;
83
- border-radius: 4px;
84
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
85
- box-sizing: border-box;
86
- font-size: 14px;
87
- font-weight: 400;
88
- list-style-image: none;
89
- list-style-position: outside;
90
- list-style-type: none;
91
- margin: 0;
92
- min-width: 120px;
93
- overflow: hidden;
94
- padding: 4px 0;
95
- -webkit-user-select: none;
96
- -ms-user-select: none;
97
- user-select: none;
98
- white-space: nowrap;
99
- }
100
- .e-dropdown-popup ul .e-item {
101
- cursor: pointer;
102
- display: -ms-flexbox;
103
- display: flex;
104
- height: 30px;
105
- line-height: 30px;
106
- padding: 0 12px;
107
- }
108
- .e-dropdown-popup ul .e-item.e-url {
109
- padding: 0;
110
- }
111
- .e-dropdown-popup ul .e-item .e-menu-url {
112
- display: block;
113
- padding: 0 12px;
114
- text-decoration: none;
115
- width: 100%;
116
- }
117
- .e-dropdown-popup ul .e-item .e-menu-icon {
118
- float: left;
119
- font-size: 18px;
120
- line-height: 30px;
121
- margin-right: 12px;
122
- vertical-align: middle;
123
- width: 1em;
124
- }
125
- .e-dropdown-popup ul .e-item.e-disabled {
126
- cursor: auto;
127
- pointer-events: none;
128
- }
129
- .e-dropdown-popup ul .e-item.e-separator {
130
- border-bottom-style: solid;
131
- border-bottom-width: 1px;
132
- cursor: auto;
133
- height: auto;
134
- line-height: normal;
135
- margin: 3px 0;
136
- pointer-events: none;
137
- }
138
- .e-dropdown-popup.e-transparent {
139
- background: transparent;
140
- box-shadow: none;
141
- }
142
- .e-dropdown-popup.e-transparent .e-dropdown-menu {
143
- border: 0;
144
- height: 1px;
145
- min-width: 0;
146
- padding: 0;
147
- width: 1px;
148
- }
149
-
150
- .e-rtl.e-dropdown-popup .e-item .e-menu-icon {
151
- float: right;
152
- margin-left: 12px;
153
- margin-right: 0;
154
- }
155
-
156
- *.e-bigger .e-dropdown-popup {
157
- background-color: transparent;
158
- border-radius: 4px;
159
- }
160
-
161
- *.e-bigger .e-dropdown-popup ul,
162
- *.e-bigger.e-dropdown-popup ul {
163
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
164
- font-size: 16px;
165
- max-width: 202px;
166
- min-width: 112px;
167
- padding: 4px 0;
168
- background-color: #374151;
169
- margin-top: 4px;
170
- }
171
- *.e-bigger .e-dropdown-popup ul .e-item,
172
- *.e-bigger.e-dropdown-popup ul .e-item {
173
- height: 36px;
174
- line-height: 36px;
175
- padding: 0 16px;
176
- }
177
- *.e-bigger .e-dropdown-popup ul .e-item.e-url,
178
- *.e-bigger.e-dropdown-popup ul .e-item.e-url {
179
- padding: 0;
180
- }
181
- *.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
182
- *.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
183
- font-size: 22px;
184
- line-height: 36px;
185
- }
186
- *.e-bigger .e-dropdown-popup ul .e-item.e-separator,
187
- *.e-bigger.e-dropdown-popup ul .e-item.e-separator {
188
- height: auto;
189
- line-height: normal;
190
- }
191
-
192
- /*! drop-down button theme */
193
- .e-dropdown-popup {
194
- background-color: #374151;
195
- color: #fff;
196
- }
197
- .e-dropdown-popup ul .e-item .e-menu-url {
198
- color: #fff;
199
- }
200
- .e-dropdown-popup ul .e-item .e-menu-icon {
201
- color: #fff;
202
- }
203
- .e-dropdown-popup ul .e-item.e-focused {
204
- background-color: #4b5563;
205
- box-shadow: none;
206
- }
207
- .e-dropdown-popup ul .e-item:hover {
208
- background-color: #4b5563;
209
- color: #fff;
210
- }
211
- .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected {
212
- background-color: #6b7280;
213
- color: #fff;
214
- }
215
- .e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
216
- color: #fff;
217
- }
218
- .e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
219
- color: #fff;
220
- }
221
- .e-dropdown-popup ul .e-separator {
222
- border-bottom-color: #4b5563;
223
- }
224
-
225
- .e-dropdown-btn.e-inherit,
226
- .e-dropdown-btn.e-btn.e-inherit {
227
- background: inherit;
228
- border-color: transparent;
229
- box-shadow: none;
230
- color: inherit;
231
- }
232
- .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
233
- .e-dropdown-btn.e-btn.e-inherit:hover,
234
- .e-dropdown-btn.e-btn.e-inherit:focus,
235
- .e-dropdown-btn.e-btn.e-inherit:active,
236
- .e-dropdown-btn.e-btn.e-inherit.e-active {
237
- background-color: rgba(0, 0, 0, 0.056);
238
- border-color: transparent;
239
- box-shadow: none;
240
- color: inherit;
241
- }
1
+ @import '@syncfusion/ej2-splitbuttons/styles/drop-down-button/tailwind-dark.css';