@syncfusion/ej2-splitbuttons 24.1.44 → 24.1.46

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 (51) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/dist/ej2-splitbuttons.min.js +2 -2
  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 -3
  6. package/dist/es6/ej2-splitbuttons.es2015.js.map +1 -1
  7. package/dist/es6/ej2-splitbuttons.es5.js +9 -3
  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 -3
  14. package/styles/bootstrap-dark.css +0 -1
  15. package/styles/bootstrap.css +0 -1
  16. package/styles/bootstrap4.css +39 -58
  17. package/styles/bootstrap5-dark.css +1 -0
  18. package/styles/bootstrap5.css +1 -0
  19. package/styles/button-group/_layout.scss +1 -1
  20. package/styles/button-group/_theme.scss +13 -13
  21. package/styles/button-group/bootstrap-dark.css +0 -1
  22. package/styles/button-group/bootstrap.css +0 -1
  23. package/styles/button-group/bootstrap4.css +39 -58
  24. package/styles/button-group/bootstrap5-dark.css +1 -0
  25. package/styles/button-group/bootstrap5.css +1 -0
  26. package/styles/button-group/fabric-dark.css +0 -1
  27. package/styles/button-group/fabric.css +0 -1
  28. package/styles/button-group/highcontrast-light.css +0 -1
  29. package/styles/button-group/highcontrast.css +0 -1
  30. package/styles/button-group/material-dark.css +0 -1
  31. package/styles/button-group/material.css +0 -1
  32. package/styles/button-group/material3-dark.css +0 -1
  33. package/styles/button-group/material3.css +0 -1
  34. package/styles/button-group/tailwind-dark.css +1 -1
  35. package/styles/button-group/tailwind.css +1 -1
  36. package/styles/drop-down-button/_fluent-definition.scss +1 -1
  37. package/styles/drop-down-button/_theme.scss +3 -1
  38. package/styles/drop-down-button/fluent-dark.css +1 -2
  39. package/styles/drop-down-button/fluent.css +1 -2
  40. package/styles/fabric-dark.css +0 -1
  41. package/styles/fabric.css +0 -1
  42. package/styles/fluent-dark.css +1 -2
  43. package/styles/fluent.css +1 -2
  44. package/styles/highcontrast-light.css +0 -1
  45. package/styles/highcontrast.css +0 -1
  46. package/styles/material-dark.css +0 -1
  47. package/styles/material.css +0 -1
  48. package/styles/material3-dark.css +0 -1
  49. package/styles/material3.css +0 -1
  50. package/styles/tailwind-dark.css +1 -1
  51. package/styles/tailwind.css +1 -1
@@ -8,6 +8,14 @@
8
8
  flex-direction: row;
9
9
  position: relative;
10
10
  }
11
+ *.e-btn-group input:focus + label.e-btn,
12
+ *.e-btn-group .e-btn:focus,
13
+ *.e-btn-group .e-btn:hover,
14
+ *.e-css.e-btn-group input:focus + label.e-btn,
15
+ *.e-css.e-btn-group .e-btn:focus,
16
+ *.e-css.e-btn-group .e-btn:hover {
17
+ z-index: 2;
18
+ }
11
19
  *.e-btn-group input + label.e-btn,
12
20
  *.e-css.e-btn-group input + label.e-btn {
13
21
  margin-bottom: 0;
@@ -240,10 +248,6 @@
240
248
  .e-css.e-btn-group:not(.e-outline) {
241
249
  box-shadow: none;
242
250
  }
243
- .e-btn-group .e-btn,
244
- .e-css.e-btn-group .e-btn {
245
- box-shadow: none;
246
- }
247
251
  .e-btn-group .e-btn:hover,
248
252
  .e-css.e-btn-group .e-btn:hover {
249
253
  box-shadow: none;
@@ -252,69 +256,63 @@
252
256
  .e-btn-group input:focus + label.e-btn,
253
257
  .e-css.e-btn-group .e-btn:focus,
254
258
  .e-css.e-btn-group input:focus + label.e-btn {
255
- background: #6c757d;
256
- border-color: #6c757d;
259
+ background: #5b636a;
260
+ border-color: #60686f;
257
261
  color: #fff;
258
262
  outline: #6c757d 0 solid;
259
263
  outline-offset: 0;
260
- box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5);
261
- box-shadow: none;
264
+ box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5);
262
265
  outline-color: inherit;
263
266
  }
264
267
  .e-btn-group .e-btn:focus.e-primary,
265
268
  .e-btn-group input:focus + label.e-btn.e-primary,
266
269
  .e-css.e-btn-group .e-btn:focus.e-primary,
267
270
  .e-css.e-btn-group input:focus + label.e-btn.e-primary {
268
- background: #007bff;
269
- border-color: #007bff;
271
+ background: #006adb;
272
+ border-color: #006fe6;
270
273
  color: #fff;
271
274
  outline: #6c757d 0 solid;
272
- box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
273
- box-shadow: none;
275
+ box-shadow: 0 0 0 0.25em rgba(33, 130, 234, 0.5);
274
276
  outline-color: inherit;
275
277
  }
276
278
  .e-btn-group .e-btn:focus.e-success,
277
279
  .e-btn-group input:focus + label.e-btn.e-success,
278
280
  .e-css.e-btn-group .e-btn:focus.e-success,
279
281
  .e-css.e-btn-group input:focus + label.e-btn.e-success {
280
- background: #28a745;
281
- border-color: #28a745;
282
+ background: #218a39;
283
+ border-color: #23923d;
282
284
  color: #fff;
283
- box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
284
- box-shadow: none;
285
+ box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
285
286
  outline-color: inherit;
286
287
  }
287
288
  .e-btn-group .e-btn:focus.e-info,
288
289
  .e-btn-group input:focus + label.e-btn.e-info,
289
290
  .e-css.e-btn-group .e-btn:focus.e-info,
290
291
  .e-css.e-btn-group input:focus + label.e-btn.e-info {
291
- background: #17a2b8;
292
- border-color: #17a2b8;
292
+ background: #138698;
293
+ border-color: #148ea1;
293
294
  color: #fff;
294
- box-shadow: 0 0 0 0.25em rgba(51, 174, 194, 0.5);
295
- box-shadow: none;
295
+ box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
296
296
  outline-color: inherit;
297
297
  }
298
298
  .e-btn-group .e-btn:focus.e-warning,
299
299
  .e-btn-group input:focus + label.e-btn.e-warning,
300
300
  .e-css.e-btn-group .e-btn:focus.e-warning,
301
301
  .e-css.e-btn-group input:focus + label.e-btn.e-warning {
302
- background: #ffc107;
303
- border-color: #ffc107;
302
+ background: #e2aa00;
303
+ border-color: #edb100;
304
304
  color: #212529;
305
- box-shadow: 0 0 0 0.25em rgba(255, 202, 44, 0.5);
306
- box-shadow: none;
305
+ box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
307
306
  outline-color: inherit;
308
307
  }
309
308
  .e-btn-group .e-btn:focus.e-danger,
310
309
  .e-btn-group input:focus + label.e-btn.e-danger,
311
310
  .e-css.e-btn-group .e-btn:focus.e-danger,
312
311
  .e-css.e-btn-group input:focus + label.e-btn.e-danger {
313
- background: #dc3545;
314
- border-color: #dc3545;
312
+ background: #ca2333;
313
+ border-color: #d32535;
315
314
  color: #fff;
316
- box-shadow: 0 0 0 0.25em rgba(225, 83, 97, 0.5);
317
- box-shadow: none;
315
+ box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
318
316
  outline-color: inherit;
319
317
  }
320
318
  .e-btn-group .e-btn:focus.e-link,
@@ -343,36 +341,31 @@
343
341
  .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
344
342
  .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
345
343
  .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
346
- box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
347
- box-shadow: none;
344
+ box-shadow: 0 0 0 0.25em rgba(38, 133, 234, 0.5);
348
345
  }
349
346
  .e-btn-group .e-btn:focus.e-outline.e-success,
350
347
  .e-btn-group input:focus + label.e-btn.e-outline.e-success,
351
348
  .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
352
349
  .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
353
- box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
354
- box-shadow: none;
350
+ box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
355
351
  }
356
352
  .e-btn-group .e-btn:focus.e-outline.e-info,
357
353
  .e-btn-group input:focus + label.e-btn.e-outline.e-info,
358
354
  .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
359
355
  .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
360
- box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5);
361
- box-shadow: none;
356
+ box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
362
357
  }
363
358
  .e-btn-group .e-btn:focus.e-outline.e-warning,
364
359
  .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
365
360
  .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
366
361
  .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
367
- box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5);
368
- box-shadow: none;
362
+ box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
369
363
  }
370
364
  .e-btn-group .e-btn:focus.e-outline.e-danger,
371
365
  .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
372
366
  .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
373
367
  .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
374
- box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5);
375
- box-shadow: none;
368
+ box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
376
369
  }
377
370
  .e-btn-group .e-btn:active,
378
371
  .e-btn-group input:active + label.e-btn,
@@ -385,7 +378,6 @@
385
378
  color: #fff;
386
379
  outline: #6c757d 0 solid;
387
380
  outline-offset: 0;
388
- box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
389
381
  }
390
382
  .e-btn-group .e-btn:active.e-primary,
391
383
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -397,7 +389,6 @@
397
389
  border-color: #005cbf;
398
390
  color: #fff;
399
391
  outline: #6c757d 0 solid;
400
- box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5);
401
392
  }
402
393
  .e-btn-group .e-btn:active.e-success,
403
394
  .e-btn-group input:active + label.e-btn.e-success,
@@ -408,7 +399,6 @@
408
399
  background: #1e7e34;
409
400
  border-color: #1c7430;
410
401
  color: #fff;
411
- box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
412
402
  }
413
403
  .e-btn-group .e-btn:active.e-info,
414
404
  .e-btn-group input:active + label.e-btn.e-info,
@@ -419,7 +409,6 @@
419
409
  background: #117a8b;
420
410
  color: #fff;
421
411
  border-color: #10707f;
422
- box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
423
412
  }
424
413
  .e-btn-group .e-btn:active.e-warning,
425
414
  .e-btn-group input:active + label.e-btn.e-warning,
@@ -430,7 +419,6 @@
430
419
  background: #d39e00;
431
420
  border-color: #c69500;
432
421
  color: #212529;
433
- box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
434
422
  }
435
423
  .e-btn-group .e-btn:active.e-danger,
436
424
  .e-btn-group input:active + label.e-btn.e-danger,
@@ -441,7 +429,6 @@
441
429
  background: #bd2130;
442
430
  border-color: #b21f2d;
443
431
  color: #fff;
444
- box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
445
432
  }
446
433
  .e-btn-group .e-btn:active.e-outline,
447
434
  .e-btn-group input:active + label.e-btn.e-outline,
@@ -451,7 +438,6 @@
451
438
  .e-css.e-btn-group input:checked + label.e-btn.e-outline {
452
439
  background: #6c757d;
453
440
  border-color: transparent;
454
- box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
455
441
  color: #fff;
456
442
  }
457
443
  .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -462,7 +448,6 @@
462
448
  .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
463
449
  background: #007bff;
464
450
  border-color: transparent;
465
- box-shadow: 0 0 0 0.25em rgba(31, 139, 255, 0.5);
466
451
  color: #fff;
467
452
  }
468
453
  .e-btn-group .e-btn:active.e-outline.e-success,
@@ -473,7 +458,6 @@
473
458
  .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
474
459
  background: #28a745;
475
460
  border-color: transparent;
476
- box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
477
461
  color: #fff;
478
462
  }
479
463
  .e-btn-group .e-btn:active.e-outline.e-info,
@@ -484,7 +468,6 @@
484
468
  .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
485
469
  background: #17a2b8;
486
470
  border-color: transparent;
487
- box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
488
471
  color: #fff;
489
472
  }
490
473
  .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -495,7 +478,6 @@
495
478
  .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
496
479
  background: #ffc107;
497
480
  border-color: transparent;
498
- box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
499
481
  color: #212529;
500
482
  }
501
483
  .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -506,7 +488,6 @@
506
488
  .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
507
489
  background: #dc3545;
508
490
  border-color: transparent;
509
- box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
510
491
  color: #fff;
511
492
  }
512
493
  .e-btn-group .e-btn:disabled,
@@ -662,28 +643,28 @@
662
643
  .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
663
644
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-success,
664
645
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
665
- border-color: #28a745;
646
+ border-color: #23923d;
666
647
  outline-color: inherit;
667
648
  }
668
649
  .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
669
650
  .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
670
651
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
671
652
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
672
- border-color: #17a2b8;
653
+ border-color: #148ea1;
673
654
  outline-color: inherit;
674
655
  }
675
656
  .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
676
657
  .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
677
658
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
678
659
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
679
- border-color: #ffc107;
660
+ border-color: #edb100;
680
661
  outline-color: inherit;
681
662
  }
682
663
  .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
683
664
  .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
684
665
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
685
666
  .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
686
- border-color: #dc3545;
667
+ border-color: #d32535;
687
668
  outline-color: inherit;
688
669
  }
689
670
  .e-btn-group.e-vertical:not(.e-rtl) .e-outline:not(:first-of-type):not(:last-of-type),
@@ -717,28 +698,28 @@
717
698
  .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
718
699
  .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-success,
719
700
  .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
720
- border-color: #28a745;
701
+ border-color: #23923d;
721
702
  outline-color: inherit;
722
703
  }
723
704
  .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
724
705
  .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
725
706
  .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
726
707
  .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
727
- border-color: #17a2b8;
708
+ border-color: #148ea1;
728
709
  outline-color: inherit;
729
710
  }
730
711
  .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
731
712
  .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
732
713
  .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
733
714
  .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
734
- border-color: #ffc107;
715
+ border-color: #edb100;
735
716
  outline-color: inherit;
736
717
  }
737
718
  .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
738
719
  .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
739
720
  .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
740
721
  .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
741
- border-color: #dc3545;
722
+ border-color: #d32535;
742
723
  outline-color: inherit;
743
724
  }
744
725
  .e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type),
@@ -338,6 +338,7 @@
338
338
  .e-css.e-btn-group .e-btn:focus.e-outline,
339
339
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
340
340
  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
341
+ box-shadow: none;
341
342
  border-color: #5c636a;
342
343
  }
343
344
  .e-btn-group .e-btn:focus.e-outline.e-primary,
@@ -338,6 +338,7 @@
338
338
  .e-css.e-btn-group .e-btn:focus.e-outline,
339
339
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
340
340
  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
341
+ box-shadow: none;
341
342
  border-color: #5c636a;
342
343
  }
343
344
  .e-btn-group .e-btn:focus.e-outline.e-primary,
@@ -373,7 +373,6 @@
373
373
  color: #fff;
374
374
  outline: #414040 0 solid;
375
375
  outline-offset: 0;
376
- box-shadow: none;
377
376
  }
378
377
  .e-btn-group .e-btn:active.e-primary,
379
378
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -379,7 +379,6 @@
379
379
  color: #000;
380
380
  outline: #eaeaea 0 solid;
381
381
  outline-offset: 0;
382
- box-shadow: none;
383
382
  }
384
383
  .e-btn-group .e-btn:active.e-primary,
385
384
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -373,7 +373,6 @@
373
373
  color: #fff;
374
374
  outline: #000 0 solid;
375
375
  outline-offset: 0;
376
- box-shadow: none;
377
376
  }
378
377
  .e-btn-group .e-btn:active.e-primary,
379
378
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -374,7 +374,6 @@
374
374
  color: #000;
375
375
  outline: #fff 0 solid;
376
376
  outline-offset: 0;
377
- box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
378
377
  }
379
378
  .e-btn-group .e-btn:active.e-primary,
380
379
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -373,7 +373,6 @@
373
373
  color: #fff;
374
374
  outline: #616161 0 solid;
375
375
  outline-offset: 0;
376
- box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
377
376
  }
378
377
  .e-btn-group .e-btn:active.e-primary,
379
378
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -377,7 +377,6 @@
377
377
  color: rgba(0, 0, 0, 0.87);
378
378
  outline: #fafafa 0 solid;
379
379
  outline-offset: 0;
380
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
381
380
  }
382
381
  .e-btn-group .e-btn:active.e-primary,
383
382
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -495,7 +495,6 @@
495
495
  color: rgba(var(--color-sf-on-surface));
496
496
  outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid;
497
497
  outline-offset: 0;
498
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
499
498
  box-shadow: none;
500
499
  }
501
500
  .e-btn-group .e-btn:active.e-primary,
@@ -551,7 +551,6 @@
551
551
  color: rgba(var(--color-sf-on-surface));
552
552
  outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
553
553
  outline-offset: 0;
554
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
555
554
  box-shadow: none;
556
555
  }
557
556
  .e-btn-group .e-btn:active.e-primary,
@@ -332,6 +332,7 @@
332
332
  .e-css.e-btn-group .e-btn:focus.e-outline,
333
333
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
334
334
  box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
335
+ box-shadow: none;
335
336
  }
336
337
  .e-btn-group .e-btn:focus.e-outline.e-primary,
337
338
  .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -374,7 +375,6 @@
374
375
  color: #fff;
375
376
  outline: #1f2937 0 solid;
376
377
  outline-offset: 0;
377
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
378
378
  }
379
379
  .e-btn-group .e-btn:active.e-primary,
380
380
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -332,6 +332,7 @@
332
332
  .e-css.e-btn-group .e-btn:focus.e-outline,
333
333
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
334
334
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
335
+ box-shadow: none;
335
336
  }
336
337
  .e-btn-group .e-btn:focus.e-outline.e-primary,
337
338
  .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -374,7 +375,6 @@
374
375
  color: #374151;
375
376
  outline: #fff 0 solid;
376
377
  outline-offset: 0;
377
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
378
378
  }
379
379
  .e-btn-group .e-btn:active.e-primary,
380
380
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -31,7 +31,7 @@ $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
31
31
  $drop-down-btn-popup-margin-top: 4px !default;
32
32
  $drop-down-btn-bigger-popup-margin-top: 4px !default;
33
33
  $drop-down-btn-ul-border: 0 solid $border-light !default;
34
- $drop-down-btn-li-box-shadow: none !default;
34
+ $drop-down-btn-li-box-shadow: inset 0 0 0 1px rgba($content-text-color, 1) !default;
35
35
  $drop-down-btn-li-border-style: solid !default;
36
36
 
37
37
  //Color
@@ -21,7 +21,9 @@
21
21
  }
22
22
 
23
23
  &.e-focused {
24
- background-color: $drop-down-btn-li-focus-bgcolor;
24
+ @if $skin-name != 'FluentUI' {
25
+ background-color: $drop-down-btn-li-focus-bgcolor;
26
+ }
25
27
  box-shadow: $drop-down-btn-li-box-shadow;
26
28
  }
27
29
 
@@ -193,8 +193,7 @@
193
193
  color: #a19f9d;
194
194
  }
195
195
  .e-dropdown-popup ul .e-item.e-focused {
196
- background-color: #3b3a39;
197
- box-shadow: none;
196
+ box-shadow: inset 0 0 0 1px #f3f2f1;
198
197
  }
199
198
  .e-dropdown-popup ul .e-item:hover {
200
199
  background-color: #323130;
@@ -193,8 +193,7 @@
193
193
  color: #605e5c;
194
194
  }
195
195
  .e-dropdown-popup ul .e-item.e-focused {
196
- background-color: #edebe9;
197
- box-shadow: none;
196
+ box-shadow: inset 0 0 0 1px #201f1e;
198
197
  }
199
198
  .e-dropdown-popup ul .e-item:hover {
200
199
  background-color: #f3f2f1;
@@ -936,7 +936,6 @@
936
936
  color: #fff;
937
937
  outline: #414040 0 solid;
938
938
  outline-offset: 0;
939
- box-shadow: none;
940
939
  }
941
940
  .e-btn-group .e-btn:active.e-primary,
942
941
  .e-btn-group input:active + label.e-btn.e-primary,
package/styles/fabric.css CHANGED
@@ -939,7 +939,6 @@
939
939
  color: #000;
940
940
  outline: #eaeaea 0 solid;
941
941
  outline-offset: 0;
942
- box-shadow: none;
943
942
  }
944
943
  .e-btn-group .e-btn:active.e-primary,
945
944
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -193,8 +193,7 @@
193
193
  color: #a19f9d;
194
194
  }
195
195
  .e-dropdown-popup ul .e-item.e-focused {
196
- background-color: #3b3a39;
197
- box-shadow: none;
196
+ box-shadow: inset 0 0 0 1px #f3f2f1;
198
197
  }
199
198
  .e-dropdown-popup ul .e-item:hover {
200
199
  background-color: #323130;
package/styles/fluent.css CHANGED
@@ -193,8 +193,7 @@
193
193
  color: #605e5c;
194
194
  }
195
195
  .e-dropdown-popup ul .e-item.e-focused {
196
- background-color: #edebe9;
197
- box-shadow: none;
196
+ box-shadow: inset 0 0 0 1px #201f1e;
198
197
  }
199
198
  .e-dropdown-popup ul .e-item:hover {
200
199
  background-color: #f3f2f1;
@@ -936,7 +936,6 @@
936
936
  color: #fff;
937
937
  outline: #000 0 solid;
938
938
  outline-offset: 0;
939
- box-shadow: none;
940
939
  }
941
940
  .e-btn-group .e-btn:active.e-primary,
942
941
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -938,7 +938,6 @@
938
938
  color: #000;
939
939
  outline: #fff 0 solid;
940
940
  outline-offset: 0;
941
- box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
942
941
  }
943
942
  .e-btn-group .e-btn:active.e-primary,
944
943
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -936,7 +936,6 @@
936
936
  color: #fff;
937
937
  outline: #616161 0 solid;
938
938
  outline-offset: 0;
939
- box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
940
939
  }
941
940
  .e-btn-group .e-btn:active.e-primary,
942
941
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -937,7 +937,6 @@
937
937
  color: rgba(0, 0, 0, 0.87);
938
938
  outline: #fafafa 0 solid;
939
939
  outline-offset: 0;
940
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
941
940
  }
942
941
  .e-btn-group .e-btn:active.e-primary,
943
942
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -1091,7 +1091,6 @@
1091
1091
  color: rgba(var(--color-sf-on-surface));
1092
1092
  outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid;
1093
1093
  outline-offset: 0;
1094
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
1095
1094
  box-shadow: none;
1096
1095
  }
1097
1096
  .e-btn-group .e-btn:active.e-primary,
@@ -1141,7 +1141,6 @@
1141
1141
  color: rgba(var(--color-sf-on-surface));
1142
1142
  outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
1143
1143
  outline-offset: 0;
1144
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
1145
1144
  box-shadow: none;
1146
1145
  }
1147
1146
  .e-btn-group .e-btn:active.e-primary,
@@ -919,6 +919,7 @@
919
919
  .e-css.e-btn-group .e-btn:focus.e-outline,
920
920
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
921
921
  box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
922
+ box-shadow: none;
922
923
  }
923
924
  .e-btn-group .e-btn:focus.e-outline.e-primary,
924
925
  .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -961,7 +962,6 @@
961
962
  color: #fff;
962
963
  outline: #1f2937 0 solid;
963
964
  outline-offset: 0;
964
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
965
965
  }
966
966
  .e-btn-group .e-btn:active.e-primary,
967
967
  .e-btn-group input:active + label.e-btn.e-primary,
@@ -919,6 +919,7 @@
919
919
  .e-css.e-btn-group .e-btn:focus.e-outline,
920
920
  .e-css.e-btn-group input:focus + label.e-btn.e-outline {
921
921
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
922
+ box-shadow: none;
922
923
  }
923
924
  .e-btn-group .e-btn:focus.e-outline.e-primary,
924
925
  .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -961,7 +962,6 @@
961
962
  color: #374151;
962
963
  outline: #fff 0 solid;
963
964
  outline-offset: 0;
964
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
965
965
  }
966
966
  .e-btn-group .e-btn:active.e-primary,
967
967
  .e-btn-group input:active + label.e-btn.e-primary,