@syncfusion/ej2-splitbuttons 19.3.53 → 19.4.48

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 (56) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/ej2-splitbuttons.umd.min.js +2 -2
  3. package/dist/ej2-splitbuttons.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-splitbuttons.es2015.js +20 -1
  5. package/dist/es6/ej2-splitbuttons.es2015.js.map +1 -1
  6. package/dist/es6/ej2-splitbuttons.es5.js +20 -1
  7. package/dist/es6/ej2-splitbuttons.es5.js.map +1 -1
  8. package/dist/global/ej2-splitbuttons.min.js +2 -2
  9. package/dist/global/ej2-splitbuttons.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +7 -7
  12. package/src/common/common-model.d.ts +1 -1
  13. package/src/common/common.js +4 -1
  14. package/src/drop-down-button/drop-down-button-model.d.ts +1 -1
  15. package/src/drop-down-button/drop-down-button.js +22 -1
  16. package/styles/bootstrap-dark.css +1 -1
  17. package/styles/bootstrap.css +1 -1
  18. package/styles/bootstrap5-dark.css +12 -12
  19. package/styles/bootstrap5.css +12 -12
  20. package/styles/button-group/_fluent-definition.scss +31 -0
  21. package/styles/drop-down-button/_bootstrap5-definition.scss +1 -1
  22. package/styles/drop-down-button/_fluent-definition.scss +52 -0
  23. package/styles/drop-down-button/_tailwind-definition.scss +1 -1
  24. package/styles/drop-down-button/_theme.scss +6 -1
  25. package/styles/drop-down-button/bootstrap5-dark.css +3 -3
  26. package/styles/drop-down-button/bootstrap5.css +3 -3
  27. package/styles/drop-down-button/icons/_fluent.scss +10 -0
  28. package/styles/drop-down-button/tailwind-dark.css +3 -3
  29. package/styles/drop-down-button/tailwind.css +3 -3
  30. package/styles/fabric-dark.css +1 -1
  31. package/styles/fabric.css +1 -1
  32. package/styles/highcontrast-light.css +1 -1
  33. package/styles/highcontrast.css +1 -1
  34. package/styles/material-dark.css +1 -1
  35. package/styles/material.css +1 -1
  36. package/styles/progress-button/_bootstrap5-definition.scss +7 -7
  37. package/styles/progress-button/_fluent-definition.scss +21 -0
  38. package/styles/progress-button/_tailwind-definition.scss +7 -7
  39. package/styles/progress-button/bootstrap5-dark.css +8 -8
  40. package/styles/progress-button/bootstrap5.css +8 -8
  41. package/styles/progress-button/tailwind-dark.css +8 -8
  42. package/styles/progress-button/tailwind.css +8 -8
  43. package/styles/split-button/_fluent-definition.scss +25 -0
  44. package/styles/split-button/_layout.scss +15 -5
  45. package/styles/split-button/bootstrap-dark.css +1 -1
  46. package/styles/split-button/bootstrap.css +1 -1
  47. package/styles/split-button/bootstrap5-dark.css +1 -1
  48. package/styles/split-button/bootstrap5.css +1 -1
  49. package/styles/split-button/fabric-dark.css +1 -1
  50. package/styles/split-button/fabric.css +1 -1
  51. package/styles/split-button/highcontrast-light.css +1 -1
  52. package/styles/split-button/highcontrast.css +1 -1
  53. package/styles/split-button/material-dark.css +1 -1
  54. package/styles/split-button/material.css +1 -1
  55. package/styles/tailwind-dark.css +11 -11
  56. package/styles/tailwind.css +11 -11
@@ -590,38 +590,38 @@
590
590
  }
591
591
 
592
592
  .e-progress {
593
- background-color: rgba(255, 255, 255, 0.2);
593
+ background-color: rgba(173, 181, 189, 0.2);
594
594
  }
595
595
 
596
596
  *.e-primary .e-progress,
597
597
  *.e-success .e-progress,
598
598
  *.e-danger .e-progress,
599
599
  *.e-info .e-progress {
600
- background-color: rgba(255, 255, 255, 0.2);
600
+ background-color: rgba(173, 181, 189, 0.2);
601
601
  }
602
602
 
603
603
  *.e-warning .e-progress {
604
- background-color: rgba(255, 255, 255, 0.2);
604
+ background-color: rgba(173, 181, 189, 0.2);
605
605
  }
606
606
 
607
607
  *.e-flat.e-primary .e-progress {
608
- background-color: rgba(255, 255, 255, 0.2);
608
+ background-color: rgba(13, 110, 253, 0.2);
609
609
  }
610
610
 
611
611
  *.e-flat.e-success .e-progress {
612
- background-color: rgba(255, 255, 255, 0.2);
612
+ background-color: rgba(33, 178, 111, 0.2);
613
613
  }
614
614
 
615
615
  *.e-flat.e-info .e-progress {
616
- background-color: rgba(0, 0, 0, 0.2);
616
+ background-color: rgba(13, 202, 240, 0.2);
617
617
  }
618
618
 
619
619
  *.e-flat.e-warning .e-progress {
620
- background-color: rgba(0, 0, 0, 0.2);
620
+ background-color: rgba(255, 193, 7, 0.2);
621
621
  }
622
622
 
623
623
  *.e-flat.e-danger .e-progress {
624
- background-color: rgba(255, 255, 255, 0.2);
624
+ background-color: rgba(228, 96, 109, 0.2);
625
625
  }
626
626
 
627
627
  *.e-outline:not(:focus).e-primary .e-progress {
@@ -590,38 +590,38 @@
590
590
  }
591
591
 
592
592
  .e-progress {
593
- background-color: rgba(255, 255, 255, 0.2);
593
+ background-color: rgba(108, 117, 125, 0.2);
594
594
  }
595
595
 
596
596
  *.e-primary .e-progress,
597
597
  *.e-success .e-progress,
598
598
  *.e-danger .e-progress,
599
599
  *.e-info .e-progress {
600
- background-color: rgba(255, 255, 255, 0.2);
600
+ background-color: rgba(108, 117, 125, 0.2);
601
601
  }
602
602
 
603
603
  *.e-warning .e-progress {
604
- background-color: rgba(255, 255, 255, 0.2);
604
+ background-color: rgba(108, 117, 125, 0.2);
605
605
  }
606
606
 
607
607
  *.e-flat.e-primary .e-progress {
608
- background-color: rgba(255, 255, 255, 0.2);
608
+ background-color: rgba(13, 110, 253, 0.2);
609
609
  }
610
610
 
611
611
  *.e-flat.e-success .e-progress {
612
- background-color: rgba(255, 255, 255, 0.2);
612
+ background-color: rgba(25, 135, 84, 0.2);
613
613
  }
614
614
 
615
615
  *.e-flat.e-info .e-progress {
616
- background-color: rgba(0, 0, 0, 0.2);
616
+ background-color: rgba(13, 202, 240, 0.2);
617
617
  }
618
618
 
619
619
  *.e-flat.e-warning .e-progress {
620
- background-color: rgba(0, 0, 0, 0.2);
620
+ background-color: rgba(255, 193, 7, 0.2);
621
621
  }
622
622
 
623
623
  *.e-flat.e-danger .e-progress {
624
- background-color: rgba(255, 255, 255, 0.2);
624
+ background-color: rgba(220, 53, 69, 0.2);
625
625
  }
626
626
 
627
627
  *.e-outline:not(:focus).e-primary .e-progress {
@@ -593,38 +593,38 @@
593
593
  }
594
594
 
595
595
  .e-progress {
596
- background-color: rgba(255, 255, 255, 0.2);
596
+ background-color: rgba(209, 213, 219, 0.2);
597
597
  }
598
598
 
599
599
  *.e-primary .e-progress,
600
600
  *.e-success .e-progress,
601
601
  *.e-danger .e-progress,
602
602
  *.e-info .e-progress {
603
- background-color: rgba(255, 255, 255, 0.2);
603
+ background-color: rgba(209, 213, 219, 0.2);
604
604
  }
605
605
 
606
606
  *.e-warning .e-progress {
607
- background-color: rgba(255, 255, 255, 0.2);
607
+ background-color: rgba(209, 213, 219, 0.2);
608
608
  }
609
609
 
610
610
  *.e-flat.e-primary .e-progress {
611
- background-color: rgba(0, 0, 0, 0.2);
611
+ background-color: rgba(34, 211, 238, 0.2);
612
612
  }
613
613
 
614
614
  *.e-flat.e-success .e-progress {
615
- background-color: rgba(0, 0, 0, 0.2);
615
+ background-color: rgba(34, 197, 94, 0.2);
616
616
  }
617
617
 
618
618
  *.e-flat.e-info .e-progress {
619
- background-color: rgba(0, 0, 0, 0.2);
619
+ background-color: rgba(56, 189, 248, 0.2);
620
620
  }
621
621
 
622
622
  *.e-flat.e-warning .e-progress {
623
- background-color: rgba(0, 0, 0, 0.2);
623
+ background-color: rgba(249, 115, 22, 0.2);
624
624
  }
625
625
 
626
626
  *.e-flat.e-danger .e-progress {
627
- background-color: rgba(0, 0, 0, 0.2);
627
+ background-color: rgba(248, 113, 113, 0.2);
628
628
  }
629
629
 
630
630
  *.e-outline:not(:focus).e-primary .e-progress {
@@ -593,38 +593,38 @@
593
593
  }
594
594
 
595
595
  .e-progress {
596
- background-color: rgba(55, 65, 81, 0.2);
596
+ background-color: rgba(107, 114, 128, 0.2);
597
597
  }
598
598
 
599
599
  *.e-primary .e-progress,
600
600
  *.e-success .e-progress,
601
601
  *.e-danger .e-progress,
602
602
  *.e-info .e-progress {
603
- background-color: rgba(55, 65, 81, 0.2);
603
+ background-color: rgba(107, 114, 128, 0.2);
604
604
  }
605
605
 
606
606
  *.e-warning .e-progress {
607
- background-color: rgba(55, 65, 81, 0.2);
607
+ background-color: rgba(107, 114, 128, 0.2);
608
608
  }
609
609
 
610
610
  *.e-flat.e-primary .e-progress {
611
- background-color: rgba(255, 255, 255, 0.2);
611
+ background-color: rgba(79, 70, 229, 0.2);
612
612
  }
613
613
 
614
614
  *.e-flat.e-success .e-progress {
615
- background-color: rgba(255, 255, 255, 0.2);
615
+ background-color: rgba(21, 128, 61, 0.2);
616
616
  }
617
617
 
618
618
  *.e-flat.e-info .e-progress {
619
- background-color: rgba(255, 255, 255, 0.2);
619
+ background-color: rgba(14, 116, 144, 0.2);
620
620
  }
621
621
 
622
622
  *.e-flat.e-warning .e-progress {
623
- background-color: rgba(255, 255, 255, 0.2);
623
+ background-color: rgba(194, 65, 12, 0.2);
624
624
  }
625
625
 
626
626
  *.e-flat.e-danger .e-progress {
627
- background-color: rgba(255, 255, 255, 0.2);
627
+ background-color: rgba(220, 38, 38, 0.2);
628
628
  }
629
629
 
630
630
  *.e-outline:not(:focus).e-primary .e-progress {
@@ -0,0 +1,25 @@
1
+ //layout variables
2
+ $split-btn-zindex: 2 !default;
3
+ $split-btn-border-radius: 0 !default;
4
+ $split-btn-focus-outline-offset: 0 !default;
5
+ $split-btn-vertical-secondary-icon-line-height: .334em !default;
6
+ $split-btn-seperator-border: 1px solid !default;
7
+ $split-btn-sec-btn-margin-left: -1px !default;
8
+ $split-btn-icon-btn-padding: 10px !default;
9
+ $split-btn-icon-btn-padding-bigger: 12px !default;
10
+ $split-btn-focus-border-color: $secondary-border-color !default;
11
+ $split-btn-focus-vertical-border-color: $secondary-border-color !default;
12
+ $split-btn-seperator-border-color: $secondary-border-color !default;
13
+ $split-btn-seperator-default-border-color: $secondary-border-color !default;
14
+ $split-btn-seperator-vertical-border-color: $secondary-border-color !default;
15
+ $split-btn-hover-border-color: $secondary-border-color !default;
16
+ $split-btn-hover-vertical-border-color: $secondary-border-color !default;
17
+ $split-btn-active-border-color: $secondary-bg-color-pressed !default;
18
+ $split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
19
+ $split-btn-disabled-vertical-border-color: $secondary-border-color-disabled !default;
20
+ $split-btn-active-box-shadow: $shadow-none !default;
21
+ $split-btn-disabled-left-border-color: $secondary-border-color !default;
22
+ $split-btn-hover-left-border-color: $secondary-border-color !default;
23
+ $split-btn-focus-left-border-color: $secondary-border-color !default;
24
+ $split-btn-active-left-border-color: $secondary-border-color !default;
25
+
@@ -18,9 +18,12 @@
18
18
  padding-left: 12px;
19
19
  padding-right: 12px;
20
20
  }
21
+ @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
22
+ padding: 0 19px;
23
+ }
21
24
  @else {
22
25
  padding-left: 10px;
23
- padding-right: 4px;
26
+ padding-right: 10px;
24
27
  }
25
28
 
26
29
  &:focus {
@@ -28,7 +31,7 @@
28
31
  }
29
32
 
30
33
  &:hover {
31
- @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
34
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
32
35
  box-shadow: none;
33
36
  }
34
37
  }
@@ -83,6 +86,9 @@
83
86
  padding-left: $split-btn-icon-btn-padding;
84
87
  padding-right: $split-btn-icon-btn-padding;
85
88
  }
89
+ @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
90
+ padding: 4px;
91
+ }
86
92
  @else {
87
93
  padding-left: 4px;
88
94
  padding-right: 4px;
@@ -93,7 +99,7 @@
93
99
 
94
100
  &:focus,
95
101
  &:hover {
96
- @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
102
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
97
103
  box-shadow: none;
98
104
  }
99
105
  }
@@ -117,12 +123,12 @@
117
123
  }
118
124
 
119
125
  .e-btn {
120
- @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
126
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
121
127
  box-shadow: none;
122
128
  }
123
129
 
124
130
  &:hover {
125
- @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
131
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
126
132
  box-shadow: none;
127
133
  }
128
134
  }
@@ -146,6 +152,10 @@
146
152
 
147
153
  &:disabled {
148
154
  box-shadow: none;
155
+ @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
156
+ outline: 0;
157
+ outline-offset: 0;
158
+ }
149
159
  }
150
160
  }
151
161
 
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -12,7 +12,7 @@
12
12
  text-transform: none;
13
13
  z-index: 1;
14
14
  padding-left: 10px;
15
- padding-right: 4px;
15
+ padding-right: 10px;
16
16
  }
17
17
 
18
18
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -13,7 +13,7 @@
13
13
  text-transform: none;
14
14
  z-index: 1;
15
15
  padding-left: 10px;
16
- padding-right: 4px;
16
+ padding-right: 10px;
17
17
  }
18
18
 
19
19
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -13,7 +13,7 @@
13
13
  text-transform: none;
14
14
  z-index: 1;
15
15
  padding-left: 10px;
16
- padding-right: 4px;
16
+ padding-right: 10px;
17
17
  }
18
18
 
19
19
  .e-split-btn-wrapper .e-split-btn:focus {
@@ -118,8 +118,8 @@
118
118
  cursor: pointer;
119
119
  display: -ms-flexbox;
120
120
  display: flex;
121
- height: 30px;
122
- line-height: 30px;
121
+ height: 28px;
122
+ line-height: 28px;
123
123
  padding: 0 12px;
124
124
  }
125
125
 
@@ -137,7 +137,7 @@
137
137
  .e-dropdown-popup ul .e-item .e-menu-icon {
138
138
  float: left;
139
139
  font-size: 18px;
140
- line-height: 30px;
140
+ line-height: 28px;
141
141
  margin-right: 11px;
142
142
  vertical-align: middle;
143
143
  width: 1em;
@@ -2081,38 +2081,38 @@
2081
2081
  }
2082
2082
 
2083
2083
  .e-progress {
2084
- background-color: rgba(255, 255, 255, 0.2);
2084
+ background-color: rgba(209, 213, 219, 0.2);
2085
2085
  }
2086
2086
 
2087
2087
  *.e-primary .e-progress,
2088
2088
  *.e-success .e-progress,
2089
2089
  *.e-danger .e-progress,
2090
2090
  *.e-info .e-progress {
2091
- background-color: rgba(255, 255, 255, 0.2);
2091
+ background-color: rgba(209, 213, 219, 0.2);
2092
2092
  }
2093
2093
 
2094
2094
  *.e-warning .e-progress {
2095
- background-color: rgba(255, 255, 255, 0.2);
2095
+ background-color: rgba(209, 213, 219, 0.2);
2096
2096
  }
2097
2097
 
2098
2098
  *.e-flat.e-primary .e-progress {
2099
- background-color: rgba(0, 0, 0, 0.2);
2099
+ background-color: rgba(34, 211, 238, 0.2);
2100
2100
  }
2101
2101
 
2102
2102
  *.e-flat.e-success .e-progress {
2103
- background-color: rgba(0, 0, 0, 0.2);
2103
+ background-color: rgba(34, 197, 94, 0.2);
2104
2104
  }
2105
2105
 
2106
2106
  *.e-flat.e-info .e-progress {
2107
- background-color: rgba(0, 0, 0, 0.2);
2107
+ background-color: rgba(56, 189, 248, 0.2);
2108
2108
  }
2109
2109
 
2110
2110
  *.e-flat.e-warning .e-progress {
2111
- background-color: rgba(0, 0, 0, 0.2);
2111
+ background-color: rgba(249, 115, 22, 0.2);
2112
2112
  }
2113
2113
 
2114
2114
  *.e-flat.e-danger .e-progress {
2115
- background-color: rgba(0, 0, 0, 0.2);
2115
+ background-color: rgba(248, 113, 113, 0.2);
2116
2116
  }
2117
2117
 
2118
2118
  *.e-outline:not(:focus).e-primary .e-progress {
@@ -118,8 +118,8 @@
118
118
  cursor: pointer;
119
119
  display: -ms-flexbox;
120
120
  display: flex;
121
- height: 30px;
122
- line-height: 30px;
121
+ height: 28px;
122
+ line-height: 28px;
123
123
  padding: 0 12px;
124
124
  }
125
125
 
@@ -137,7 +137,7 @@
137
137
  .e-dropdown-popup ul .e-item .e-menu-icon {
138
138
  float: left;
139
139
  font-size: 18px;
140
- line-height: 30px;
140
+ line-height: 28px;
141
141
  margin-right: 11px;
142
142
  vertical-align: middle;
143
143
  width: 1em;
@@ -2081,38 +2081,38 @@
2081
2081
  }
2082
2082
 
2083
2083
  .e-progress {
2084
- background-color: rgba(55, 65, 81, 0.2);
2084
+ background-color: rgba(107, 114, 128, 0.2);
2085
2085
  }
2086
2086
 
2087
2087
  *.e-primary .e-progress,
2088
2088
  *.e-success .e-progress,
2089
2089
  *.e-danger .e-progress,
2090
2090
  *.e-info .e-progress {
2091
- background-color: rgba(55, 65, 81, 0.2);
2091
+ background-color: rgba(107, 114, 128, 0.2);
2092
2092
  }
2093
2093
 
2094
2094
  *.e-warning .e-progress {
2095
- background-color: rgba(55, 65, 81, 0.2);
2095
+ background-color: rgba(107, 114, 128, 0.2);
2096
2096
  }
2097
2097
 
2098
2098
  *.e-flat.e-primary .e-progress {
2099
- background-color: rgba(255, 255, 255, 0.2);
2099
+ background-color: rgba(79, 70, 229, 0.2);
2100
2100
  }
2101
2101
 
2102
2102
  *.e-flat.e-success .e-progress {
2103
- background-color: rgba(255, 255, 255, 0.2);
2103
+ background-color: rgba(21, 128, 61, 0.2);
2104
2104
  }
2105
2105
 
2106
2106
  *.e-flat.e-info .e-progress {
2107
- background-color: rgba(255, 255, 255, 0.2);
2107
+ background-color: rgba(14, 116, 144, 0.2);
2108
2108
  }
2109
2109
 
2110
2110
  *.e-flat.e-warning .e-progress {
2111
- background-color: rgba(255, 255, 255, 0.2);
2111
+ background-color: rgba(194, 65, 12, 0.2);
2112
2112
  }
2113
2113
 
2114
2114
  *.e-flat.e-danger .e-progress {
2115
- background-color: rgba(255, 255, 255, 0.2);
2115
+ background-color: rgba(220, 38, 38, 0.2);
2116
2116
  }
2117
2117
 
2118
2118
  *.e-outline:not(:focus).e-primary .e-progress {