@syncfusion/ej2-splitbuttons 29.2.4 → 30.1.37

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 (100) hide show
  1. package/dist/ej2-splitbuttons.min.js +2 -2
  2. package/dist/ej2-splitbuttons.umd.min.js +1 -1
  3. package/dist/global/ej2-splitbuttons.min.js +1 -1
  4. package/dist/global/index.d.ts +1 -1
  5. package/dist/ts/button-group/button-group.d.ts +38 -0
  6. package/dist/ts/button-group/button-group.ts +84 -0
  7. package/dist/ts/button-group/index.d.ts +4 -0
  8. package/dist/ts/button-group/index.ts +4 -0
  9. package/dist/ts/common/common-model.d.ts +51 -0
  10. package/dist/ts/common/common.d.ts +95 -0
  11. package/dist/ts/common/common.ts +218 -0
  12. package/dist/ts/common/index.d.ts +5 -0
  13. package/dist/ts/common/index.ts +5 -0
  14. package/dist/ts/drop-down-button/drop-down-button-model.d.ts +195 -0
  15. package/dist/ts/drop-down-button/drop-down-button.d.ts +308 -0
  16. package/dist/ts/drop-down-button/drop-down-button.ts +1110 -0
  17. package/dist/ts/drop-down-button/index.d.ts +5 -0
  18. package/dist/ts/drop-down-button/index.ts +5 -0
  19. package/dist/ts/index.d.ts +8 -0
  20. package/dist/ts/index.ts +8 -0
  21. package/dist/ts/progress-button/index.d.ts +5 -0
  22. package/dist/ts/progress-button/index.ts +5 -0
  23. package/dist/ts/progress-button/progress-button-model.d.ts +206 -0
  24. package/dist/ts/progress-button/progress-button.d.ts +323 -0
  25. package/dist/ts/progress-button/progress-button.ts +689 -0
  26. package/dist/ts/split-button/index.d.ts +5 -0
  27. package/dist/ts/split-button/index.ts +5 -0
  28. package/dist/ts/split-button/split-button-model.d.ts +133 -0
  29. package/dist/ts/split-button/split-button.d.ts +236 -0
  30. package/dist/ts/split-button/split-button.ts +535 -0
  31. package/package.json +9 -9
  32. package/styles/bds-lite.css +1 -7
  33. package/styles/bds.css +2 -7
  34. package/styles/bootstrap-dark-lite.css +0 -1
  35. package/styles/bootstrap-dark.css +0 -1
  36. package/styles/bootstrap-lite.css +0 -1
  37. package/styles/bootstrap.css +0 -1
  38. package/styles/bootstrap4-lite.css +0 -1
  39. package/styles/bootstrap4.css +3 -1
  40. package/styles/bootstrap5-dark-lite.css +2 -4
  41. package/styles/bootstrap5-dark.css +2 -4
  42. package/styles/bootstrap5-lite.css +2 -4
  43. package/styles/bootstrap5.3-lite.css +0 -2
  44. package/styles/bootstrap5.3.css +0 -2
  45. package/styles/bootstrap5.css +2 -4
  46. package/styles/drop-down-button/_layout.scss +0 -1
  47. package/styles/drop-down-button/material3-dark.css +0 -1
  48. package/styles/drop-down-button/material3.css +0 -1
  49. package/styles/fabric-dark-lite.css +0 -1
  50. package/styles/fabric-dark.css +0 -1
  51. package/styles/fabric-lite.css +0 -1
  52. package/styles/fabric.css +0 -1
  53. package/styles/fluent-dark-lite.css +0 -1
  54. package/styles/fluent-dark.css +1 -1
  55. package/styles/fluent-lite.css +0 -1
  56. package/styles/fluent.css +1 -1
  57. package/styles/fluent2-lite.css +1 -3
  58. package/styles/fluent2.css +1 -3
  59. package/styles/highcontrast-light-lite.css +0 -1
  60. package/styles/highcontrast-light.css +0 -1
  61. package/styles/highcontrast-lite.css +0 -1
  62. package/styles/highcontrast.css +0 -1
  63. package/styles/material-dark-lite.css +0 -1
  64. package/styles/material-dark.css +0 -1
  65. package/styles/material-lite.css +0 -1
  66. package/styles/material.css +0 -1
  67. package/styles/material3-dark-lite.css +3 -6
  68. package/styles/material3-dark.css +5 -8
  69. package/styles/material3-lite.css +3 -6
  70. package/styles/material3.css +5 -8
  71. package/styles/split-button/_bigger.scss +7 -1
  72. package/styles/split-button/_layout.scss +7 -13
  73. package/styles/split-button/_theme.scss +2 -8
  74. package/styles/split-button/bds.css +2 -7
  75. package/styles/split-button/bootstrap-dark.css +0 -1
  76. package/styles/split-button/bootstrap.css +0 -1
  77. package/styles/split-button/bootstrap4.css +3 -1
  78. package/styles/split-button/bootstrap5-dark.css +2 -4
  79. package/styles/split-button/bootstrap5.3.css +0 -2
  80. package/styles/split-button/bootstrap5.css +2 -4
  81. package/styles/split-button/fabric-dark.css +0 -1
  82. package/styles/split-button/fabric.css +0 -1
  83. package/styles/split-button/fluent-dark.css +1 -1
  84. package/styles/split-button/fluent.css +1 -1
  85. package/styles/split-button/fluent2.css +1 -3
  86. package/styles/split-button/highcontrast-light.css +0 -1
  87. package/styles/split-button/highcontrast.css +0 -1
  88. package/styles/split-button/material-dark.css +0 -1
  89. package/styles/split-button/material.css +0 -1
  90. package/styles/split-button/material3-dark.css +5 -7
  91. package/styles/split-button/material3.css +5 -7
  92. package/styles/split-button/tailwind-dark.css +2 -7
  93. package/styles/split-button/tailwind.css +2 -7
  94. package/styles/split-button/tailwind3.css +1 -3
  95. package/styles/tailwind-dark-lite.css +1 -7
  96. package/styles/tailwind-dark.css +2 -7
  97. package/styles/tailwind-lite.css +1 -7
  98. package/styles/tailwind.css +2 -7
  99. package/styles/tailwind3-lite.css +1 -3
  100. package/styles/tailwind3.css +1 -3
package/styles/bootstrap4-lite.css CHANGED
@@ -223,7 +223,6 @@
223
223
  border-bottom-right-radius: 0;
224
224
  border-top-right-radius: 0;
225
225
  text-transform: none;
226
- z-index: 1;
227
226
  padding-left: 8px;
228
227
  padding-right: 8px;
229
228
  padding-left: 10px;
package/styles/bootstrap4.css CHANGED
@@ -279,7 +279,6 @@
279
279
  border-bottom-right-radius: 0;
280
280
  border-top-right-radius: 0;
281
281
  text-transform: none;
282
- z-index: 1;
283
282
  padding-left: 8px;
284
283
  padding-right: 8px;
285
284
  padding-left: 10px;
@@ -529,6 +528,7 @@
529
528
 
530
529
  .e-bigger .e-split-btn-wrapper .e-split-btn,
531
530
  .e-bigger.e-split-btn-wrapper .e-split-btn {
531
+ padding: 7px 4px;
532
532
  padding-left: 12px;
533
533
  padding-right: 12px;
534
534
  }
@@ -562,6 +562,8 @@
562
562
  .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
563
563
  padding-left: 10px;
564
564
  padding-right: 10px;
565
+ padding-left: 4px;
566
+ padding-right: 4px;
565
567
  }
566
568
  .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
567
569
  .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
package/styles/bootstrap5-dark-lite.css CHANGED
@@ -226,9 +226,7 @@
226
226
  border-bottom-right-radius: 0;
227
227
  border-top-right-radius: 0;
228
228
  text-transform: none;
229
- z-index: 1;
230
- padding-left: 10px;
231
- padding-right: 10px;
229
+ padding: 3.75px 11px;
232
230
  }
233
231
  .e-split-btn-wrapper .e-split-btn:focus {
234
232
  outline-offset: 0;
@@ -260,6 +258,7 @@
260
258
  .e-split-btn-wrapper .e-split-btn.e-icon-btn {
261
259
  padding-left: 10px;
262
260
  padding-right: 10px;
261
+ padding: 3.75px 11px;
263
262
  }
264
263
  .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
265
264
  padding-right: 0;
@@ -270,7 +269,6 @@
270
269
  margin-left: -1px;
271
270
  padding-left: 4px;
272
271
  padding-right: 4px;
273
- z-index: 1;
274
272
  }
275
273
  .e-split-btn-wrapper .e-dropdown-btn:active {
276
274
  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
package/styles/bootstrap5-dark.css CHANGED
@@ -289,9 +289,7 @@
289
289
  border-bottom-right-radius: 0;
290
290
  border-top-right-radius: 0;
291
291
  text-transform: none;
292
- z-index: 1;
293
- padding-left: 10px;
294
- padding-right: 10px;
292
+ padding: 3.75px 11px;
295
293
  }
296
294
  .e-split-btn-wrapper .e-split-btn:focus {
297
295
  outline-offset: 0;
@@ -323,6 +321,7 @@
323
321
  .e-split-btn-wrapper .e-split-btn.e-icon-btn {
324
322
  padding-left: 10px;
325
323
  padding-right: 10px;
324
+ padding: 3.75px 11px;
326
325
  }
327
326
  .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
328
327
  padding-right: 0;
@@ -333,7 +332,6 @@
333
332
  margin-left: -1px;
334
333
  padding-left: 4px;
335
334
  padding-right: 4px;
336
- z-index: 1;
337
335
  }
338
336
  .e-split-btn-wrapper .e-dropdown-btn:active {
339
337
  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
package/styles/bootstrap5-lite.css CHANGED
@@ -226,9 +226,7 @@
226
226
  border-bottom-right-radius: 0;
227
227
  border-top-right-radius: 0;
228
228
  text-transform: none;
229
- z-index: 1;
230
- padding-left: 10px;
231
- padding-right: 10px;
229
+ padding: 3.75px 11px;
232
230
  }
233
231
  .e-split-btn-wrapper .e-split-btn:focus {
234
232
  outline-offset: 0;
@@ -260,6 +258,7 @@
260
258
  .e-split-btn-wrapper .e-split-btn.e-icon-btn {
261
259
  padding-left: 10px;
262
260
  padding-right: 10px;
261
+ padding: 3.75px 11px;
263
262
  }
264
263
  .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
265
264
  padding-right: 0;
@@ -270,7 +269,6 @@
270
269
  margin-left: -1px;
271
270
  padding-left: 4px;
272
271
  padding-right: 4px;
273
- z-index: 1;
274
272
  }
275
273
  .e-split-btn-wrapper .e-dropdown-btn:active {
276
274
  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
package/styles/bootstrap5.3-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
@@ -274,7 +273,6 @@
274
273
  margin-left: -1px;
275
274
  padding-left: 4px;
276
275
  padding-right: 4px;
277
- z-index: 1;
278
276
  }
279
277
  .e-split-btn-wrapper .e-dropdown-btn:active {
280
278
  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
package/styles/bootstrap5.3.css CHANGED
@@ -293,7 +293,6 @@
293
293
  border-bottom-right-radius: 0;
294
294
  border-top-right-radius: 0;
295
295
  text-transform: none;
296
- z-index: 1;
297
296
  padding-left: 10px;
298
297
  padding-right: 10px;
299
298
  }
@@ -337,7 +336,6 @@
337
336
  margin-left: -1px;
338
337
  padding-left: 4px;
339
338
  padding-right: 4px;
340
- z-index: 1;
341
339
  }
342
340
  .e-split-btn-wrapper .e-dropdown-btn:active {
343
341
  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
package/styles/bootstrap5.css CHANGED
@@ -289,9 +289,7 @@
289
289
  border-bottom-right-radius: 0;
290
290
  border-top-right-radius: 0;
291
291
  text-transform: none;
292
- z-index: 1;
293
- padding-left: 10px;
294
- padding-right: 10px;
292
+ padding: 3.75px 11px;
295
293
  }
296
294
  .e-split-btn-wrapper .e-split-btn:focus {
297
295
  outline-offset: 0;
@@ -323,6 +321,7 @@
323
321
  .e-split-btn-wrapper .e-split-btn.e-icon-btn {
324
322
  padding-left: 10px;
325
323
  padding-right: 10px;
324
+ padding: 3.75px 11px;
326
325
  }
327
326
  .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
328
327
  padding-right: 0;
@@ -333,7 +332,6 @@
333
332
  margin-left: -1px;
334
333
  padding-left: 4px;
335
334
  padding-right: 4px;
336
- z-index: 1;
337
335
  }
338
336
  .e-split-btn-wrapper .e-dropdown-btn:active {
339
337
  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
package/styles/drop-down-button/_layout.scss CHANGED
@@ -9,7 +9,6 @@
9
9
  @if $skin-name == 'Material3' {
10
10
  border-radius: $btn-border-radius;
11
11
  box-shadow: $drop-down-btn-box-shadow;
12
- padding: 7px 16px;
13
12
  }
14
13
 
15
14
  &:hover {
package/styles/drop-down-button/material3-dark.css CHANGED
@@ -15,7 +15,6 @@
15
15
  border-radius: 4px;
16
16
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
17
17
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
18
- padding: 7px 16px;
19
18
  }
20
19
  .e-dropdown-btn:focus,
21
20
  .e-dropdown-btn.e-btn:focus {
package/styles/drop-down-button/material3.css CHANGED
@@ -17,7 +17,6 @@
17
17
  border-radius: 4px;
18
18
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
19
19
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
20
- padding: 7px 16px;
21
20
  }
22
21
  .e-dropdown-btn:focus,
23
22
  .e-dropdown-btn.e-btn:focus {
package/styles/fabric-dark-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
package/styles/fabric-dark.css CHANGED
@@ -286,7 +286,6 @@
286
286
  border-bottom-right-radius: 0;
287
287
  border-top-right-radius: 0;
288
288
  text-transform: none;
289
- z-index: 1;
290
289
  padding-left: 10px;
291
290
  padding-right: 10px;
292
291
  }
package/styles/fabric-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
package/styles/fabric.css CHANGED
@@ -286,7 +286,6 @@
286
286
  border-bottom-right-radius: 0;
287
287
  border-top-right-radius: 0;
288
288
  text-transform: none;
289
- z-index: 1;
290
289
  padding-left: 10px;
291
290
  padding-right: 10px;
292
291
  }
package/styles/fluent-dark-lite.css CHANGED
@@ -231,7 +231,6 @@
231
231
  border-bottom-right-radius: 0;
232
232
  border-top-right-radius: 0;
233
233
  text-transform: none;
234
- z-index: 1;
235
234
  padding: 3px 7px;
236
235
  padding-left: 10px;
237
236
  padding-right: 10px;
package/styles/fluent-dark.css CHANGED
@@ -287,7 +287,6 @@
287
287
  border-bottom-right-radius: 0;
288
288
  border-top-right-radius: 0;
289
289
  text-transform: none;
290
- z-index: 1;
291
290
  padding: 3px 7px;
292
291
  padding-left: 10px;
293
292
  padding-right: 10px;
@@ -533,6 +532,7 @@
533
532
 
534
533
  .e-bigger .e-split-btn-wrapper .e-split-btn,
535
534
  .e-bigger.e-split-btn-wrapper .e-split-btn {
535
+ padding: 7px 4px;
536
536
  padding-left: 12px;
537
537
  padding-right: 12px;
538
538
  }
package/styles/fluent-lite.css CHANGED
@@ -231,7 +231,6 @@
231
231
  border-bottom-right-radius: 0;
232
232
  border-top-right-radius: 0;
233
233
  text-transform: none;
234
- z-index: 1;
235
234
  padding: 3px 7px;
236
235
  padding-left: 10px;
237
236
  padding-right: 10px;
package/styles/fluent.css CHANGED
@@ -287,7 +287,6 @@
287
287
  border-bottom-right-radius: 0;
288
288
  border-top-right-radius: 0;
289
289
  text-transform: none;
290
- z-index: 1;
291
290
  padding: 3px 7px;
292
291
  padding-left: 10px;
293
292
  padding-right: 10px;
@@ -533,6 +532,7 @@
533
532
 
534
533
  .e-bigger .e-split-btn-wrapper .e-split-btn,
535
534
  .e-bigger.e-split-btn-wrapper .e-split-btn {
535
+ padding: 7px 4px;
536
536
  padding-left: 12px;
537
537
  padding-right: 12px;
538
538
  }
package/styles/fluent2-lite.css CHANGED
@@ -258,9 +258,7 @@
258
258
  border-bottom-right-radius: 0;
259
259
  border-top-right-radius: 0;
260
260
  text-transform: none;
261
- z-index: 1;
262
- padding-left: 10px;
263
- padding-right: 10px;
261
+ padding: 3.75px 11px;
264
262
  }
265
263
  .e-split-btn-wrapper .e-split-btn:focus {
266
264
  outline-offset: 0;
package/styles/fluent2.css CHANGED
@@ -316,9 +316,7 @@
316
316
  border-bottom-right-radius: 0;
317
317
  border-top-right-radius: 0;
318
318
  text-transform: none;
319
- z-index: 1;
320
- padding-left: 10px;
321
- padding-right: 10px;
319
+ padding: 3.75px 11px;
322
320
  }
323
321
  .e-split-btn-wrapper .e-split-btn:focus {
324
322
  outline-offset: 0;
package/styles/highcontrast-light-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
package/styles/highcontrast-light.css CHANGED
@@ -277,7 +277,6 @@
277
277
  border-bottom-right-radius: 0;
278
278
  border-top-right-radius: 0;
279
279
  text-transform: none;
280
- z-index: 1;
281
280
  padding-left: 10px;
282
281
  padding-right: 10px;
283
282
  }
package/styles/highcontrast-lite.css CHANGED
@@ -231,7 +231,6 @@
231
231
  border-bottom-right-radius: 0;
232
232
  border-top-right-radius: 0;
233
233
  text-transform: none;
234
- z-index: 1;
235
234
  padding-left: 10px;
236
235
  padding-right: 10px;
237
236
  }
package/styles/highcontrast.css CHANGED
@@ -287,7 +287,6 @@
287
287
  border-bottom-right-radius: 0;
288
288
  border-top-right-radius: 0;
289
289
  text-transform: none;
290
- z-index: 1;
291
290
  padding-left: 10px;
292
291
  padding-right: 10px;
293
292
  }
package/styles/material-dark-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
package/styles/material-dark.css CHANGED
@@ -286,7 +286,6 @@
286
286
  border-bottom-right-radius: 0;
287
287
  border-top-right-radius: 0;
288
288
  text-transform: none;
289
- z-index: 1;
290
289
  padding-left: 10px;
291
290
  padding-right: 10px;
292
291
  }
package/styles/material-lite.css CHANGED
@@ -230,7 +230,6 @@
230
230
  border-bottom-right-radius: 0;
231
231
  border-top-right-radius: 0;
232
232
  text-transform: none;
233
- z-index: 1;
234
233
  padding-left: 10px;
235
234
  padding-right: 10px;
236
235
  }
package/styles/material.css CHANGED
@@ -286,7 +286,6 @@
286
286
  border-bottom-right-radius: 0;
287
287
  border-top-right-radius: 0;
288
288
  text-transform: none;
289
- z-index: 1;
290
289
  padding-left: 10px;
291
290
  padding-right: 10px;
292
291
  }
package/styles/material3-dark-lite.css CHANGED
@@ -15,7 +15,6 @@
15
15
  border-radius: 4px;
16
16
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
17
17
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
18
- padding: 7px 16px;
19
18
  }
20
19
  .e-dropdown-btn:focus,
21
20
  .e-dropdown-btn.e-btn:focus {
@@ -244,9 +243,10 @@
244
243
  border-bottom-right-radius: 0;
245
244
  border-top-right-radius: 0;
246
245
  text-transform: none;
247
- z-index: 1;
248
246
  -webkit-box-shadow: none;
249
247
  box-shadow: none;
248
+ padding-left: 10px;
249
+ padding-right: 10px;
250
250
  }
251
251
  .e-split-btn-wrapper .e-split-btn:focus {
252
252
  outline-offset: 0;
@@ -419,10 +419,7 @@
419
419
  }
420
420
 
421
421
  .e-split-btn-wrapper .e-split-btn {
422
- -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
423
- border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
424
- border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
425
- border-width: 0 1px 0 0;
422
+ border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
426
423
  }
427
424
  .e-split-btn-wrapper .e-split-btn:focus {
428
425
  border-right-color: rgba(var(--color-sf-outline-variant));
package/styles/material3-dark.css CHANGED
@@ -15,7 +15,6 @@
15
15
  border-radius: 4px;
16
16
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
17
17
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
18
- padding: 7px 16px;
19
18
  }
20
19
  .e-dropdown-btn:focus,
21
20
  .e-dropdown-btn.e-btn:focus {
@@ -300,9 +299,10 @@
300
299
  border-bottom-right-radius: 0;
301
300
  border-top-right-radius: 0;
302
301
  text-transform: none;
303
- z-index: 1;
304
302
  -webkit-box-shadow: none;
305
303
  box-shadow: none;
304
+ padding-left: 10px;
305
+ padding-right: 10px;
306
306
  }
307
307
  .e-split-btn-wrapper .e-split-btn:focus {
308
308
  outline-offset: 0;
@@ -475,10 +475,7 @@
475
475
  }
476
476
 
477
477
  .e-split-btn-wrapper .e-split-btn {
478
- -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
479
- border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
480
- border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
481
- border-width: 0 1px 0 0;
478
+ border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
482
479
  }
483
480
  .e-split-btn-wrapper .e-split-btn:focus {
484
481
  border-right-color: rgba(var(--color-sf-outline-variant));
@@ -596,6 +593,7 @@
596
593
  border-radius: 4px;
597
594
  -webkit-box-shadow: none;
598
595
  box-shadow: none;
596
+ padding: 9px 4px;
599
597
  padding-left: 12px;
600
598
  padding-right: 6px;
601
599
  }
@@ -628,8 +626,7 @@
628
626
  }
629
627
  .e-bigger .e-split-btn-wrapper .e-dropdown-btn,
630
628
  .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
631
- padding-left: 4px;
632
- padding-right: 4px;
629
+ padding: 9px 4px;
633
630
  }
634
631
  .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
635
632
  .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
package/styles/material3-lite.css CHANGED
@@ -17,7 +17,6 @@
17
17
  border-radius: 4px;
18
18
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
19
19
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
20
- padding: 7px 16px;
21
20
  }
22
21
  .e-dropdown-btn:focus,
23
22
  .e-dropdown-btn.e-btn:focus {
@@ -246,9 +245,10 @@
246
245
  border-bottom-right-radius: 0;
247
246
  border-top-right-radius: 0;
248
247
  text-transform: none;
249
- z-index: 1;
250
248
  -webkit-box-shadow: none;
251
249
  box-shadow: none;
250
+ padding-left: 10px;
251
+ padding-right: 10px;
252
252
  }
253
253
  .e-split-btn-wrapper .e-split-btn:focus {
254
254
  outline-offset: 0;
@@ -413,10 +413,7 @@
413
413
  }
414
414
 
415
415
  .e-split-btn-wrapper .e-split-btn {
416
- -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
417
- border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
418
- border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
419
- border-width: 0 1px 0 0;
416
+ border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
420
417
  }
421
418
  .e-split-btn-wrapper .e-split-btn:focus {
422
419
  border-right-color: rgba(var(--color-sf-outline-variant));
package/styles/material3.css CHANGED
@@ -17,7 +17,6 @@
17
17
  border-radius: 4px;
18
18
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
19
19
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
20
- padding: 7px 16px;
21
20
  }
22
21
  .e-dropdown-btn:focus,
23
22
  .e-dropdown-btn.e-btn:focus {
@@ -302,9 +301,10 @@
302
301
  border-bottom-right-radius: 0;
303
302
  border-top-right-radius: 0;
304
303
  text-transform: none;
305
- z-index: 1;
306
304
  -webkit-box-shadow: none;
307
305
  box-shadow: none;
306
+ padding-left: 10px;
307
+ padding-right: 10px;
308
308
  }
309
309
  .e-split-btn-wrapper .e-split-btn:focus {
310
310
  outline-offset: 0;
@@ -469,10 +469,7 @@
469
469
  }
470
470
 
471
471
  .e-split-btn-wrapper .e-split-btn {
472
- -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
473
- border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
474
- border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
475
- border-width: 0 1px 0 0;
472
+ border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
476
473
  }
477
474
  .e-split-btn-wrapper .e-split-btn:focus {
478
475
  border-right-color: rgba(var(--color-sf-outline-variant));
@@ -590,6 +587,7 @@
590
587
  border-radius: 4px;
591
588
  -webkit-box-shadow: none;
592
589
  box-shadow: none;
590
+ padding: 9px 4px;
593
591
  padding-left: 12px;
594
592
  padding-right: 6px;
595
593
  }
@@ -622,8 +620,7 @@
622
620
  }
623
621
  .e-bigger .e-split-btn-wrapper .e-dropdown-btn,
624
622
  .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
625
- padding-left: 4px;
626
- padding-right: 4px;
623
+ padding: 9px 4px;
627
624
  }
628
625
  .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
629
626
  .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
package/styles/split-button/_bigger.scss CHANGED
@@ -6,17 +6,20 @@
6
6
  box-shadow: $btn-box-shadow;
7
7
  }
8
8
  .e-split-btn {
9
- @if $skin-name == 'Material3' {
9
+ @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
10
10
  border-radius: 4px;
11
11
  box-shadow: none;
12
+ padding: 9px 4px;
12
13
  }
13
14
  @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
15
+ padding: 7px 4px;
14
16
  padding-left: $split-btn-icon-btn-padding-bigger;
15
17
  padding-right: $split-btn-icon-btn-padding-bigger;
16
18
  }
17
19
  @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
18
20
  padding-left: 16px;
19
21
  padding-right: 16px;
22
+ line-height: 1.781em;
20
23
  }
21
24
  @else {
22
25
  padding-left: 12px;
@@ -63,6 +66,9 @@
63
66
  padding-left: 10px;
64
67
  padding-right: 10px;
65
68
  }
69
+ @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
70
+ padding: 9px 4px;
71
+ }
66
72
  @else {
67
73
  padding-left: 4px;
68
74
  padding-right: 4px;
package/styles/split-button/_layout.scss CHANGED
@@ -12,21 +12,19 @@
12
12
  border-bottom-right-radius: 0;
13
13
  border-top-right-radius: 0;
14
14
  text-transform: none;
15
- z-index: 1;
16
15
  @if $skin-name == 'bootstrap4' {
17
16
  padding-left: $split-btn-icon-btn-padding;
18
17
  padding-right: $split-btn-icon-btn-padding;
19
18
  }
20
- @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
21
- padding-left: 12px;
22
- padding-right: 12px;
23
- }
24
19
  @else if $skin-name == 'FluentUI' {
25
20
  padding: 3px 7px;
26
21
  }
27
- @if $skin-name == 'Material3' {
22
+ @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
28
23
  box-shadow: none;
29
24
  }
25
+ @if $skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
26
+ padding: 3.75px 11px;
27
+ }
30
28
  @else {
31
29
  padding-left: 10px;
32
30
  padding-right: 10px;
@@ -98,7 +96,9 @@
98
96
  &.e-icon-btn {
99
97
  padding-left: $split-btn-icon-btn-padding;
100
98
  padding-right: $split-btn-icon-btn-padding;
101
-
99
+ @if $skin-name == 'bootstrap5' {
100
+ padding: 3.75px 11px;
101
+ }
102
102
  .e-btn-icon {
103
103
  padding-right: 0;
104
104
  }
@@ -123,9 +123,6 @@
123
123
  padding-left: 4px;
124
124
  padding-right: 4px;
125
125
  }
126
- @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
127
- z-index: 1;
128
- }
129
126
 
130
127
  &:focus,
131
128
  &:hover {
@@ -270,9 +267,6 @@
270
267
  border-radius: 4px;
271
268
  box-shadow: none;
272
269
  }
273
- @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
274
- z-index: 1;
275
- }
276
270
  }
277
271
  }
278
272
 
package/styles/split-button/_theme.scss CHANGED
@@ -1,14 +1,8 @@
1
1
  @include export-module('split-button-theme') {
2
2
  .e-split-btn-wrapper {
3
3
  .e-split-btn {
4
- @if $skin-name == 'Material3' {
5
- border-image: $split-btn-seperator-border-color;
6
- border-width: 0 1px 0 0;
7
- }
8
- @else {
9
- @if $skin-name != 'tailwind3' {
10
- border-right-color: $split-btn-seperator-border-color;
11
- }
4
+ @if $skin-name != 'tailwind3' {
5
+ border-right-color: $split-btn-seperator-border-color;
12
6
  }
13
7
 
14
8
  &:focus {