@syncfusion/ej2-angular-splitbuttons 21.1.37-ngcc → 21.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 (197) hide show
  1. package/esm2020/public_api.mjs +3 -0
  2. package/esm2020/src/drop-down-button/dropdownbutton-all.module.mjs +23 -0
  3. package/esm2020/src/drop-down-button/dropdownbutton.component.mjs +64 -0
  4. package/esm2020/src/drop-down-button/dropdownbutton.module.mjs +34 -0
  5. package/esm2020/src/drop-down-button/items.directive.mjs +46 -0
  6. package/esm2020/src/index.mjs +13 -0
  7. package/esm2020/src/progress-button/progressbutton-all.module.mjs +23 -0
  8. package/esm2020/src/progress-button/progressbutton.component.mjs +59 -0
  9. package/esm2020/src/progress-button/progressbutton.module.mjs +25 -0
  10. package/esm2020/src/split-button/items.directive.mjs +46 -0
  11. package/esm2020/src/split-button/splitbutton-all.module.mjs +23 -0
  12. package/esm2020/src/split-button/splitbutton.component.mjs +64 -0
  13. package/esm2020/src/split-button/splitbutton.module.mjs +34 -0
  14. package/esm2020/syncfusion-ej2-angular-splitbuttons.mjs +5 -0
  15. package/fesm2015/syncfusion-ej2-angular-splitbuttons.mjs +405 -0
  16. package/fesm2015/syncfusion-ej2-angular-splitbuttons.mjs.map +1 -0
  17. package/fesm2020/syncfusion-ej2-angular-splitbuttons.mjs +405 -0
  18. package/fesm2020/syncfusion-ej2-angular-splitbuttons.mjs.map +1 -0
  19. package/package.json +27 -13
  20. package/src/drop-down-button/dropdownbutton-all.module.d.ts +6 -0
  21. package/src/drop-down-button/dropdownbutton.component.d.ts +3 -0
  22. package/src/drop-down-button/dropdownbutton.module.d.ts +7 -0
  23. package/src/drop-down-button/items.directive.d.ts +5 -0
  24. package/src/progress-button/progressbutton-all.module.d.ts +6 -0
  25. package/src/progress-button/progressbutton.component.d.ts +3 -0
  26. package/src/progress-button/progressbutton.module.d.ts +6 -0
  27. package/src/split-button/items.directive.d.ts +5 -0
  28. package/src/split-button/splitbutton-all.module.d.ts +6 -0
  29. package/src/split-button/splitbutton.component.d.ts +3 -0
  30. package/src/split-button/splitbutton.module.d.ts +7 -0
  31. package/styles/button-group/_all.scss +2 -0
  32. package/styles/button-group/_bootstrap-dark-definition.scss +33 -0
  33. package/styles/button-group/_bootstrap-definition.scss +30 -0
  34. package/styles/button-group/_bootstrap4-definition.scss +30 -0
  35. package/styles/button-group/_bootstrap5-dark-definition.scss +1 -0
  36. package/styles/button-group/_bootstrap5-definition.scss +31 -0
  37. package/styles/button-group/_fabric-dark-definition.scss +33 -0
  38. package/styles/button-group/_fabric-definition.scss +30 -0
  39. package/styles/button-group/_fluent-dark-definition.scss +1 -0
  40. package/styles/button-group/_fluent-definition.scss +31 -0
  41. package/styles/button-group/_fusionnew-definition.scss +31 -0
  42. package/styles/button-group/_group-button-mixin.scss +72 -0
  43. package/styles/button-group/_highcontrast-definition.scss +32 -0
  44. package/styles/button-group/_highcontrast-light-definition.scss +35 -0
  45. package/styles/button-group/_layout.scss +288 -0
  46. package/styles/button-group/_material-dark-definition.scss +33 -0
  47. package/styles/button-group/_material-definition.scss +30 -0
  48. package/styles/button-group/_tailwind-dark-definition.scss +1 -0
  49. package/styles/button-group/_tailwind-definition.scss +31 -0
  50. package/styles/button-group/_theme.scss +388 -0
  51. package/styles/button-group/bootstrap-dark.scss +4 -1
  52. package/styles/button-group/bootstrap.scss +4 -1
  53. package/styles/button-group/bootstrap4.scss +4 -1
  54. package/styles/button-group/bootstrap5-dark.scss +4 -1
  55. package/styles/button-group/bootstrap5.scss +4 -1
  56. package/styles/button-group/fabric-dark.scss +4 -1
  57. package/styles/button-group/fabric.scss +4 -1
  58. package/styles/button-group/fluent-dark.scss +4 -1
  59. package/styles/button-group/fluent.scss +4 -1
  60. package/styles/button-group/highcontrast-light.scss +4 -1
  61. package/styles/button-group/highcontrast.scss +4 -1
  62. package/styles/button-group/material-dark.scss +4 -1
  63. package/styles/button-group/material.scss +4 -1
  64. package/styles/button-group/tailwind-dark.scss +4 -1
  65. package/styles/button-group/tailwind.scss +4 -1
  66. package/styles/drop-down-button/_all.scss +2 -0
  67. package/styles/drop-down-button/_bootstrap-dark-definition.scss +51 -0
  68. package/styles/drop-down-button/_bootstrap-definition.scss +48 -0
  69. package/styles/drop-down-button/_bootstrap4-definition.scss +48 -0
  70. package/styles/drop-down-button/_bootstrap5-dark-definition.scss +1 -0
  71. package/styles/drop-down-button/_bootstrap5-definition.scss +50 -0
  72. package/styles/drop-down-button/_fabric-dark-definition.scss +51 -0
  73. package/styles/drop-down-button/_fabric-definition.scss +48 -0
  74. package/styles/drop-down-button/_fluent-dark-definition.scss +1 -0
  75. package/styles/drop-down-button/_fluent-definition.scss +52 -0
  76. package/styles/drop-down-button/_fusionnew-definition.scss +50 -0
  77. package/styles/drop-down-button/_highcontrast-definition.scss +47 -0
  78. package/styles/drop-down-button/_highcontrast-light-definition.scss +50 -0
  79. package/styles/drop-down-button/_layout.scss +233 -0
  80. package/styles/drop-down-button/_material-dark-definition.scss +51 -0
  81. package/styles/drop-down-button/_material-definition.scss +48 -0
  82. package/styles/drop-down-button/_tailwind-dark-definition.scss +1 -0
  83. package/styles/drop-down-button/_tailwind-definition.scss +49 -0
  84. package/styles/drop-down-button/_theme.scss +78 -0
  85. package/styles/drop-down-button/bootstrap-dark.scss +6 -1
  86. package/styles/drop-down-button/bootstrap.scss +6 -1
  87. package/styles/drop-down-button/bootstrap4.scss +6 -1
  88. package/styles/drop-down-button/bootstrap5-dark.scss +6 -1
  89. package/styles/drop-down-button/bootstrap5.scss +6 -1
  90. package/styles/drop-down-button/fabric-dark.scss +6 -1
  91. package/styles/drop-down-button/fabric.scss +6 -1
  92. package/styles/drop-down-button/fluent-dark.scss +6 -1
  93. package/styles/drop-down-button/fluent.scss +6 -1
  94. package/styles/drop-down-button/highcontrast-light.scss +6 -1
  95. package/styles/drop-down-button/highcontrast.scss +6 -1
  96. package/styles/drop-down-button/icons/_bootstrap-dark.scss +10 -0
  97. package/styles/drop-down-button/icons/_bootstrap.scss +10 -0
  98. package/styles/drop-down-button/icons/_bootstrap4.scss +10 -0
  99. package/styles/drop-down-button/icons/_bootstrap5-dark.scss +1 -0
  100. package/styles/drop-down-button/icons/_bootstrap5.scss +10 -0
  101. package/styles/drop-down-button/icons/_fabric-dark.scss +10 -0
  102. package/styles/drop-down-button/icons/_fabric.scss +10 -0
  103. package/styles/drop-down-button/icons/_fluent-dark.scss +1 -0
  104. package/styles/drop-down-button/icons/_fluent.scss +10 -0
  105. package/styles/drop-down-button/icons/_fusionnew.scss +10 -0
  106. package/styles/drop-down-button/icons/_highcontrast-light.scss +10 -0
  107. package/styles/drop-down-button/icons/_highcontrast.scss +10 -0
  108. package/styles/drop-down-button/icons/_material-dark.scss +10 -0
  109. package/styles/drop-down-button/icons/_material.scss +10 -0
  110. package/styles/drop-down-button/icons/_material3.scss +10 -0
  111. package/styles/drop-down-button/icons/_tailwind-dark.scss +10 -0
  112. package/styles/drop-down-button/icons/_tailwind.scss +10 -0
  113. package/styles/drop-down-button/material-dark.scss +6 -1
  114. package/styles/drop-down-button/material.scss +6 -1
  115. package/styles/drop-down-button/tailwind-dark.scss +6 -1
  116. package/styles/drop-down-button/tailwind.scss +6 -1
  117. package/styles/progress-button/_all.scss +2 -0
  118. package/styles/progress-button/_bootstrap-dark-definition.scss +27 -0
  119. package/styles/progress-button/_bootstrap-definition.scss +24 -0
  120. package/styles/progress-button/_bootstrap4-definition.scss +24 -0
  121. package/styles/progress-button/_bootstrap5-dark-definition.scss +1 -0
  122. package/styles/progress-button/_bootstrap5-definition.scss +21 -0
  123. package/styles/progress-button/_fabric-dark-definition.scss +27 -0
  124. package/styles/progress-button/_fabric-definition.scss +24 -0
  125. package/styles/progress-button/_fluent-dark-definition.scss +1 -0
  126. package/styles/progress-button/_fluent-definition.scss +21 -0
  127. package/styles/progress-button/_fusionnew-definition.scss +21 -0
  128. package/styles/progress-button/_highcontrast-definition.scss +24 -0
  129. package/styles/progress-button/_highcontrast-light-definition.scss +24 -0
  130. package/styles/progress-button/_layout.scss +396 -0
  131. package/styles/progress-button/_material-dark-definition.scss +27 -0
  132. package/styles/progress-button/_material-definition.scss +24 -0
  133. package/styles/progress-button/_tailwind-dark-definition.scss +1 -0
  134. package/styles/progress-button/_tailwind-definition.scss +21 -0
  135. package/styles/progress-button/_theme.scss +483 -0
  136. package/styles/progress-button/bootstrap-dark.scss +5 -1
  137. package/styles/progress-button/bootstrap.scss +5 -1
  138. package/styles/progress-button/bootstrap4.scss +5 -1
  139. package/styles/progress-button/bootstrap5-dark.scss +5 -1
  140. package/styles/progress-button/bootstrap5.scss +5 -1
  141. package/styles/progress-button/fabric-dark.scss +5 -1
  142. package/styles/progress-button/fabric.scss +5 -1
  143. package/styles/progress-button/fluent-dark.scss +5 -1
  144. package/styles/progress-button/fluent.scss +5 -1
  145. package/styles/progress-button/highcontrast-light.scss +5 -1
  146. package/styles/progress-button/highcontrast.scss +5 -1
  147. package/styles/progress-button/material-dark.scss +5 -1
  148. package/styles/progress-button/material.scss +5 -1
  149. package/styles/progress-button/tailwind-dark.scss +5 -1
  150. package/styles/progress-button/tailwind.scss +5 -1
  151. package/styles/split-button/_all.scss +2 -0
  152. package/styles/split-button/_bootstrap-dark-definition.scss +26 -0
  153. package/styles/split-button/_bootstrap-definition.scss +23 -0
  154. package/styles/split-button/_bootstrap4-definition.scss +26 -0
  155. package/styles/split-button/_bootstrap5-dark-definition.scss +1 -0
  156. package/styles/split-button/_bootstrap5-definition.scss +24 -0
  157. package/styles/split-button/_fabric-dark-definition.scss +26 -0
  158. package/styles/split-button/_fabric-definition.scss +23 -0
  159. package/styles/split-button/_fluent-dark-definition.scss +1 -0
  160. package/styles/split-button/_fluent-definition.scss +24 -0
  161. package/styles/split-button/_fusionnew-definition.scss +24 -0
  162. package/styles/split-button/_highcontrast-definition.scss +23 -0
  163. package/styles/split-button/_highcontrast-light-definition.scss +26 -0
  164. package/styles/split-button/_layout.scss +427 -0
  165. package/styles/split-button/_material-dark-definition.scss +26 -0
  166. package/styles/split-button/_material-definition.scss +23 -0
  167. package/styles/split-button/_tailwind-dark-definition.scss +1 -0
  168. package/styles/split-button/_tailwind-definition.scss +24 -0
  169. package/styles/split-button/_theme.scss +167 -0
  170. package/styles/split-button/bootstrap-dark.scss +6 -1
  171. package/styles/split-button/bootstrap.scss +6 -1
  172. package/styles/split-button/bootstrap4.scss +6 -1
  173. package/styles/split-button/bootstrap5-dark.scss +6 -1
  174. package/styles/split-button/bootstrap5.scss +6 -1
  175. package/styles/split-button/fabric-dark.scss +6 -1
  176. package/styles/split-button/fabric.scss +6 -1
  177. package/styles/split-button/fluent-dark.scss +6 -1
  178. package/styles/split-button/fluent.scss +6 -1
  179. package/styles/split-button/highcontrast-light.scss +6 -1
  180. package/styles/split-button/highcontrast.scss +6 -1
  181. package/styles/split-button/material-dark.scss +6 -1
  182. package/styles/split-button/material.scss +6 -1
  183. package/styles/split-button/tailwind-dark.scss +6 -1
  184. package/styles/split-button/tailwind.scss +6 -1
  185. package/syncfusion-ej2-angular-splitbuttons.d.ts +5 -0
  186. package/@syncfusion/ej2-angular-splitbuttons.es5.js +0 -565
  187. package/@syncfusion/ej2-angular-splitbuttons.es5.js.map +0 -1
  188. package/@syncfusion/ej2-angular-splitbuttons.js +0 -516
  189. package/@syncfusion/ej2-angular-splitbuttons.js.map +0 -1
  190. package/CHANGELOG.md +0 -250
  191. package/dist/ej2-angular-splitbuttons.umd.js +0 -603
  192. package/dist/ej2-angular-splitbuttons.umd.js.map +0 -1
  193. package/dist/ej2-angular-splitbuttons.umd.min.js +0 -11
  194. package/dist/ej2-angular-splitbuttons.umd.min.js.map +0 -1
  195. package/ej2-angular-splitbuttons.d.ts +0 -7
  196. package/ej2-angular-splitbuttons.metadata.json +0 -1
  197. package/postinstall/tagchange.js +0 -18
@@ -0,0 +1 @@
1
+ @import './bootstrap5-definition.scss';
@@ -0,0 +1,24 @@
1
+ //layout variables
2
+ $split-btn-zindex: 2 !default;
3
+ $split-btn-border-radius: 4px !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 !default;
20
+ $split-btn-active-box-shadow: $secondary-shadow-focus !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;
@@ -0,0 +1,26 @@
1
+ //default
2
+ $split-btn-zindex: 2;
3
+ $split-btn-border-radius: 0;
4
+ $split-btn-focus-border-color: $neutral-tertiary-alt;
5
+ $split-btn-focus-vertical-border-color: transparent;
6
+ $split-btn-focus-outline-offset: -4px;
7
+ $split-btn-vertical-secondary-icon-line-height: .213em;
8
+ $split-btn-seperator-border: 1px solid;
9
+ $split-btn-seperator-border-color: transparent;
10
+ $split-btn-seperator-default-border-color: transparent;
11
+ $split-btn-seperator-vertical-border-color: transparent;
12
+ $split-btn-hover-border-color: $neutral-tertiary-alt;
13
+ $split-btn-hover-vertical-border-color: $neutral-light;
14
+ $split-btn-active-border-color: $neutral-tertiary-alt;
15
+ $split-btn-active-vertical-border-color: $neutral-tertiary-alt;
16
+ $split-btn-disabled-vertical-border-color: transparent;
17
+ $split-btn-active-box-shadow: none;
18
+ $split-btn-disabled-left-border-color: transparent;
19
+ $split-btn-hover-left-border-color: transparent;
20
+ $split-btn-focus-left-border-color: transparent;
21
+ $split-btn-active-left-border-color: transparent;
22
+ $split-btn-sec-btn-margin-left: 0;
23
+ $split-btn-icon-btn-padding: 8px;
24
+ $split-btn-icon-btn-padding-bigger: 11px;
25
+
26
+ //enddefault
@@ -0,0 +1,23 @@
1
+ $split-btn-zindex: 2 !default;
2
+ $split-btn-border-radius: 0 !default;
3
+ $split-btn-focus-border-color: $neutral-tertiary-alt !default;
4
+ $split-btn-focus-vertical-border-color: transparent !default;
5
+ $split-btn-focus-outline-offset: -4px !default;
6
+ $split-btn-vertical-secondary-icon-line-height: .213em !default;
7
+ $split-btn-seperator-border: 1px solid !default;
8
+ $split-btn-seperator-border-color: transparent !default;
9
+ $split-btn-seperator-default-border-color: transparent !default;
10
+ $split-btn-seperator-vertical-border-color: transparent !default;
11
+ $split-btn-hover-border-color: $neutral-tertiary-alt !default;
12
+ $split-btn-hover-vertical-border-color: $neutral-light !default;
13
+ $split-btn-active-border-color: $neutral-tertiary-alt !default;
14
+ $split-btn-active-vertical-border-color: $neutral-tertiary-alt !default;
15
+ $split-btn-disabled-vertical-border-color: transparent !default;
16
+ $split-btn-active-box-shadow: none !default;
17
+ $split-btn-disabled-left-border-color: transparent !default;
18
+ $split-btn-hover-left-border-color: transparent !default;
19
+ $split-btn-focus-left-border-color: transparent !default;
20
+ $split-btn-active-left-border-color: transparent !default;
21
+ $split-btn-sec-btn-margin-left: 0 !default;
22
+ $split-btn-icon-btn-padding: 8px !default;
23
+ $split-btn-icon-btn-padding-bigger: 11px !default;
@@ -0,0 +1 @@
1
+ @import './fluent-definition.scss';
@@ -0,0 +1,24 @@
1
+ //layout variables
2
+ $split-btn-zindex: 2 !default;
3
+ $split-btn-border-radius: 0 !default;
4
+ $split-btn-focus-outline-offset: -3px !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: 8px !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;
@@ -0,0 +1,24 @@
1
+ //layout variables
2
+ $split-btn-zindex: 2 !default;
3
+ $split-btn-border-radius: 4px !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 !default;
20
+ $split-btn-active-box-shadow: $secondary-shadow-focus !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;
@@ -0,0 +1,23 @@
1
+ $split-btn-zindex: 2 !default;
2
+ $split-btn-border-radius: 0 !default;
3
+ $split-btn-focus-border-color: $border-fg !default;
4
+ $split-btn-focus-vertical-border-color: $border-fg !default;
5
+ $split-btn-focus-outline-offset: -4px !default;
6
+ $split-btn-vertical-secondary-icon-line-height: .213em !default;
7
+ $split-btn-seperator-border: 1px solid !default;
8
+ $split-btn-seperator-border-color: $border-fg !default;
9
+ $split-btn-seperator-default-border-color: $border-fg !default;
10
+ $split-btn-seperator-vertical-border-color: $border-fg !default;
11
+ $split-btn-hover-border-color: $border-fg !default;
12
+ $split-btn-hover-vertical-border-color: $hover-border !default;
13
+ $split-btn-active-border-color: $selection-bg !default;
14
+ $split-btn-active-vertical-border-color: $selection-bg !default;
15
+ $split-btn-disabled-vertical-border-color: $disable !default;
16
+ $split-btn-active-box-shadow: none !default;
17
+ $split-btn-disabled-left-border-color: $disable !default;
18
+ $split-btn-hover-left-border-color: $border-fg !default;
19
+ $split-btn-focus-left-border-color: $border-fg !default;
20
+ $split-btn-active-left-border-color: $selection-bg !default;
21
+ $split-btn-sec-btn-margin-left: -1px !default;
22
+ $split-btn-icon-btn-padding: 8px !default;
23
+ $split-btn-icon-btn-padding-bigger: 11px !default;
@@ -0,0 +1,26 @@
1
+ //default
2
+ $split-btn-zindex: 2;
3
+ $split-btn-border-radius: 0;
4
+ $split-btn-focus-border-color: $border-fg;
5
+ $split-btn-focus-vertical-border-color: $border-fg;
6
+ $split-btn-focus-outline-offset: -4px;
7
+ $split-btn-vertical-secondary-icon-line-height: .213em;
8
+ $split-btn-seperator-border: 1px solid;
9
+ $split-btn-seperator-border-color: $border-fg;
10
+ $split-btn-seperator-default-border-color: $border-fg;
11
+ $split-btn-seperator-vertical-border-color: $border-fg;
12
+ $split-btn-hover-border-color: $border-fg;
13
+ $split-btn-hover-vertical-border-color: $hover-border;
14
+ $split-btn-active-border-color: $selection-bg;
15
+ $split-btn-active-vertical-border-color: $selection-bg;
16
+ $split-btn-disabled-vertical-border-color: $disable;
17
+ $split-btn-active-box-shadow: none;
18
+ $split-btn-disabled-left-border-color: $disable;
19
+ $split-btn-hover-left-border-color: $border-fg;
20
+ $split-btn-focus-left-border-color: $border-fg;
21
+ $split-btn-active-left-border-color: $selection-bg;
22
+ $split-btn-sec-btn-margin-left: -1px;
23
+ $split-btn-icon-btn-padding: 8px;
24
+ $split-btn-icon-btn-padding-bigger: 11px;
25
+
26
+ //enddefault
@@ -0,0 +1,427 @@
1
+ @include export-module('split-button-layout') {
2
+
3
+ /*! splitbutton layout */
4
+ .e-split-btn-wrapper {
5
+ display: inline-flex;
6
+ white-space: nowrap;
7
+ width: min-content;
8
+
9
+ .e-split-btn {
10
+ border-bottom-right-radius: 0;
11
+ border-top-right-radius: 0;
12
+ text-transform: none;
13
+ z-index: 1;
14
+ @if $skin-name == 'bootstrap4' {
15
+ padding-left: $split-btn-icon-btn-padding;
16
+ padding-right: $split-btn-icon-btn-padding;
17
+ }
18
+ @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
19
+ padding-left: 12px;
20
+ padding-right: 12px;
21
+ }
22
+ @else if $skin-name == 'FluentUI' {
23
+ padding: 3px 7px;
24
+ }
25
+ @else {
26
+ padding-left: 10px;
27
+ padding-right: 10px;
28
+ }
29
+
30
+ &:focus {
31
+ outline-offset: $split-btn-focus-outline-offset;
32
+ }
33
+
34
+ &:hover {
35
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
36
+ box-shadow: none;
37
+ }
38
+ }
39
+
40
+ &:focus {
41
+ @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
42
+ box-shadow: $split-btn-active-box-shadow;
43
+ z-index: $split-btn-zindex;
44
+ }
45
+ @else {
46
+ box-shadow: none;
47
+ }
48
+ }
49
+
50
+ &:active {
51
+ box-shadow: $split-btn-active-box-shadow;
52
+ z-index: $split-btn-zindex;
53
+ }
54
+
55
+ &.e-top-icon-btn {
56
+ padding-bottom: 10px;
57
+ padding-top: 10px;
58
+ }
59
+
60
+ .e-btn-icon {
61
+ font-size: $drop-down-btn-icon-font-size;
62
+ margin-left: 0;
63
+ @if $skin-name == 'FluentUI' {
64
+ padding-right: 4px;
65
+ }
66
+ @else {
67
+ padding-right: 8px;
68
+ }
69
+ width: auto;
70
+ }
71
+
72
+ .e-icon-top {
73
+ padding-bottom: 4px;
74
+ padding-right: 0;
75
+ }
76
+
77
+ &.e-icon-btn {
78
+ padding-left: $split-btn-icon-btn-padding;
79
+ padding-right: $split-btn-icon-btn-padding;
80
+
81
+ .e-btn-icon {
82
+ padding-right: 0;
83
+ }
84
+ }
85
+ }
86
+
87
+ .e-dropdown-btn {
88
+ border-bottom-left-radius: 0;
89
+ border-top-left-radius: 0;
90
+ margin-left: $split-btn-sec-btn-margin-left;
91
+ @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
92
+ padding-left: $split-btn-icon-btn-padding;
93
+ padding-right: $split-btn-icon-btn-padding;
94
+ }
95
+ @else if $skin-name == 'FluentUI' {
96
+ padding: 4px;
97
+ }
98
+ @else {
99
+ padding-left: 4px;
100
+ padding-right: 4px;
101
+ }
102
+ @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
103
+ z-index: 1;
104
+ }
105
+
106
+ &:focus,
107
+ &:hover {
108
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
109
+ box-shadow: none;
110
+ }
111
+ }
112
+
113
+ &:active {
114
+ box-shadow: $split-btn-active-box-shadow;
115
+ z-index: $split-btn-zindex;
116
+ }
117
+
118
+ &:disabled {
119
+ &:focus,
120
+ &:hover,
121
+ &:active {
122
+ z-index: 0;
123
+ }
124
+ }
125
+
126
+ &:focus {
127
+ outline-offset: $split-btn-focus-outline-offset;
128
+ }
129
+ }
130
+
131
+ .e-btn {
132
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
133
+ box-shadow: none;
134
+ }
135
+
136
+ &:hover {
137
+ @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
138
+ box-shadow: none;
139
+ }
140
+ }
141
+
142
+ &:focus {
143
+ @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
144
+ box-shadow: $split-btn-active-box-shadow;
145
+ z-index: $split-btn-zindex;
146
+ }
147
+ @else {
148
+ box-shadow: none;
149
+ }
150
+ }
151
+
152
+ &:active {
153
+ box-shadow: $split-btn-active-box-shadow;
154
+ @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
155
+ z-index: $split-btn-zindex;
156
+ }
157
+ }
158
+
159
+ &:disabled {
160
+ box-shadow: none;
161
+ @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
162
+ outline: 0;
163
+ outline-offset: 0;
164
+ }
165
+ }
166
+
167
+ &.e-inherit {
168
+ &:focus,
169
+ &:active {
170
+ box-shadow: none;
171
+ }
172
+ }
173
+ }
174
+
175
+ &.e-rtl {
176
+ .e-split-btn {
177
+ border-bottom-left-radius: 0;
178
+ border-bottom-right-radius: $split-btn-border-radius;
179
+ border-top-left-radius: 0;
180
+ border-top-right-radius: $split-btn-border-radius;
181
+ margin-left: $split-btn-sec-btn-margin-left;
182
+ @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
183
+ padding-left: $split-btn-icon-btn-padding;
184
+ padding-right: $split-btn-icon-btn-padding;
185
+ }
186
+ @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
187
+ padding-left: 12px;
188
+ padding-right: 12px;
189
+ }
190
+ @else {
191
+ padding-left: 4px;
192
+ padding-right: 10px;
193
+ }
194
+
195
+ .e-btn-icon {
196
+ margin-right: 0;
197
+ @if $skin-name == 'FluentUI' {
198
+ padding-left: 4px;
199
+ }
200
+ @else {
201
+ padding-left: 8px;
202
+ }
203
+ padding-right: 0;
204
+ }
205
+
206
+ .e-icon-top {
207
+ padding-left: 0;
208
+ }
209
+
210
+ &.e-icon-btn {
211
+ padding-left: $split-btn-icon-btn-padding;
212
+ padding-right: $split-btn-icon-btn-padding;
213
+
214
+ .e-btn-icon {
215
+ padding-left: 0;
216
+ }
217
+ }
218
+ }
219
+
220
+ .e-dropdown-btn {
221
+ border-bottom-left-radius: $split-btn-border-radius;
222
+ border-bottom-right-radius: 0;
223
+ border-top-left-radius: $split-btn-border-radius;
224
+ border-top-right-radius: 0;
225
+ margin-left: 0;
226
+ @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
227
+ z-index: 1;
228
+ }
229
+ }
230
+ }
231
+
232
+ &.e-vertical {
233
+ display: inline-block;
234
+
235
+ .e-split-btn,
236
+ .e-dropdown-btn {
237
+ display: block;
238
+ width: 100%;
239
+ }
240
+
241
+ .e-split-btn {
242
+ border-bottom-left-radius: 0;
243
+ border-top-right-radius: $split-btn-border-radius;
244
+ line-height: 1;
245
+ @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
246
+ padding-bottom: $split-btn-icon-btn-padding;
247
+ padding-right: $split-btn-icon-btn-padding;
248
+ }
249
+ @else {
250
+ padding-bottom: 4px;
251
+ padding-right: 10px;
252
+ }
253
+
254
+ .e-icon-top {
255
+ padding-bottom: 4px;
256
+ }
257
+ }
258
+
259
+ .e-dropdown-btn {
260
+ border-bottom-left-radius: $split-btn-border-radius;
261
+ border-top-right-radius: 0;
262
+ line-height: $split-btn-vertical-secondary-icon-line-height;
263
+ margin-left: 0;
264
+ margin-top: $split-btn-sec-btn-margin-left;
265
+ @if $skin-name == 'bootstrap4' {
266
+ padding-bottom: $split-btn-icon-btn-padding;
267
+ padding-top: $split-btn-icon-btn-padding;
268
+ }
269
+ @else {
270
+ padding-bottom: 4px;
271
+ padding-top: 4px;
272
+ }
273
+
274
+ .e-icon-bottom {
275
+ padding-top: 0;
276
+ }
277
+ }
278
+
279
+ &.e-rtl {
280
+ .e-split-btn {
281
+ border-bottom-right-radius: 0;
282
+ border-top-left-radius: $split-btn-border-radius;
283
+ margin-left: 0;
284
+ }
285
+
286
+ .e-dropdown-btn {
287
+ border-bottom-right-radius: $split-btn-border-radius;
288
+ border-top-left-radius: 0;
289
+ }
290
+ }
291
+ }
292
+ }
293
+
294
+ .e-bigger .e-split-btn-wrapper,
295
+ .e-bigger.e-split-btn-wrapper {
296
+ .e-split-btn {
297
+ @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
298
+ padding-left: $split-btn-icon-btn-padding-bigger;
299
+ padding-right: $split-btn-icon-btn-padding-bigger;
300
+ }
301
+ @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
302
+ padding-left: 16px;
303
+ padding-right: 16px;
304
+ }
305
+ @else {
306
+ padding-left: 12px;
307
+ padding-right: 6px;
308
+ }
309
+
310
+ &.e-top-icon-btn {
311
+ padding-bottom: 12px;
312
+ padding-top: 12px;
313
+ }
314
+
315
+ .e-btn-icon {
316
+ font-size: $drop-down-btn-icon-font-size-bigger;
317
+ margin-left: 0;
318
+ @if $skin-name == 'FluentUI' {
319
+ padding-right: 8px;
320
+ }
321
+ @else {
322
+ padding-right: 10px;
323
+ }
324
+ width: auto;
325
+ }
326
+
327
+ .e-icon-top {
328
+ padding-bottom: 6px;
329
+ padding-right: 0;
330
+ }
331
+
332
+ &.e-icon-btn {
333
+ padding-left: $split-btn-icon-btn-padding-bigger;
334
+ padding-right: $split-btn-icon-btn-padding-bigger;
335
+
336
+ .e-btn-icon {
337
+ padding-right: 0;
338
+ }
339
+ }
340
+ }
341
+
342
+ .e-dropdown-btn {
343
+ @if $skin-name == 'bootstrap4' {
344
+ padding-left: 10px;
345
+ padding-right: 10px;
346
+ }
347
+ @else {
348
+ padding-left: 4px;
349
+ padding-right: 4px;
350
+ }
351
+ @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
352
+ z-index: 1;
353
+ }
354
+ }
355
+
356
+ &.e-rtl {
357
+ .e-split-btn {
358
+ @if $skin-name == 'bootstrap4' {
359
+ padding-left: $split-btn-icon-btn-padding-bigger;
360
+ padding-right: $split-btn-icon-btn-padding-bigger;
361
+ }
362
+ @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
363
+ padding-left: 12px;
364
+ padding-right: 12px;
365
+ }
366
+ @else {
367
+ padding-left: 6px;
368
+ padding-right: 12px;
369
+ }
370
+
371
+ .e-btn-icon {
372
+ @if $skin-name == 'FluentUI' {
373
+ padding-left: 8px;
374
+ }
375
+ @else {
376
+ padding-left: 10px;
377
+ }
378
+ padding-right: 0;
379
+ }
380
+
381
+ .e-icon-top {
382
+ padding-left: 0;
383
+ }
384
+
385
+ &.e-icon-btn {
386
+ padding-left: $split-btn-icon-btn-padding-bigger;
387
+ padding-right: $split-btn-icon-btn-padding-bigger;
388
+
389
+ .e-btn-icon {
390
+ padding-left: 0;
391
+ }
392
+ }
393
+ }
394
+ }
395
+
396
+ &.e-vertical {
397
+ .e-split-btn {
398
+ @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
399
+ padding-bottom: $split-btn-icon-btn-padding-bigger;
400
+ padding-right: $split-btn-icon-btn-padding-bigger;
401
+ }
402
+ @else {
403
+ padding-bottom: 6px;
404
+ padding-right: 12px;
405
+ }
406
+ }
407
+
408
+ .e-dropdown-btn {
409
+ @if $skin-name == 'bootstrap4' {
410
+ padding-bottom: $split-btn-icon-btn-padding-bigger;
411
+ padding-top: $split-btn-icon-btn-padding-bigger;
412
+ }
413
+ @else {
414
+ padding-bottom: 4px;
415
+ padding-top: 4px;
416
+ }
417
+ @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
418
+ z-index: 1;
419
+ }
420
+
421
+ .e-icon-bottom {
422
+ padding-top: 0;
423
+ }
424
+ }
425
+ }
426
+ }
427
+ }
@@ -0,0 +1,26 @@
1
+ //default
2
+ $split-btn-zindex: 0;
3
+ $split-btn-border-radius: 2px;
4
+ $split-btn-focus-border-color: transparent;
5
+ $split-btn-focus-vertical-border-color: transparent;
6
+ $split-btn-focus-outline-offset: 0;
7
+ $split-btn-vertical-secondary-icon-line-height: .417em;
8
+ $split-btn-seperator-border: 1px solid;
9
+ $split-btn-seperator-border-color: transparent;
10
+ $split-btn-seperator-default-border-color: transparent;
11
+ $split-btn-seperator-vertical-border-color: transparent;
12
+ $split-btn-hover-border-color: transparent;
13
+ $split-btn-hover-vertical-border-color: transparent;
14
+ $split-btn-active-border-color: transparent;
15
+ $split-btn-active-vertical-border-color: transparent;
16
+ $split-btn-disabled-vertical-border-color: transparent;
17
+ $split-btn-active-box-shadow: none;
18
+ $split-btn-disabled-left-border-color: transparent;
19
+ $split-btn-hover-left-border-color: transparent;
20
+ $split-btn-focus-left-border-color: transparent;
21
+ $split-btn-active-left-border-color: transparent;
22
+ $split-btn-sec-btn-margin-left: 0;
23
+ $split-btn-icon-btn-padding: 6px;
24
+ $split-btn-icon-btn-padding-bigger: 9px;
25
+
26
+ //enddefault
@@ -0,0 +1,23 @@
1
+ $split-btn-zindex: 0 !default;
2
+ $split-btn-border-radius: 2px !default;
3
+ $split-btn-focus-border-color: transparent !default;
4
+ $split-btn-focus-vertical-border-color: transparent !default;
5
+ $split-btn-focus-outline-offset: 0 !default;
6
+ $split-btn-vertical-secondary-icon-line-height: .417em !default;
7
+ $split-btn-seperator-border: 1px solid !default;
8
+ $split-btn-seperator-border-color: transparent !default;
9
+ $split-btn-seperator-default-border-color: transparent !default;
10
+ $split-btn-seperator-vertical-border-color: transparent !default;
11
+ $split-btn-hover-border-color: transparent !default;
12
+ $split-btn-hover-vertical-border-color: transparent !default;
13
+ $split-btn-active-border-color: transparent !default;
14
+ $split-btn-active-vertical-border-color: transparent !default;
15
+ $split-btn-disabled-vertical-border-color: transparent !default;
16
+ $split-btn-active-box-shadow: none !default;
17
+ $split-btn-disabled-left-border-color: transparent !default;
18
+ $split-btn-hover-left-border-color: transparent !default;
19
+ $split-btn-focus-left-border-color: transparent !default;
20
+ $split-btn-active-left-border-color: transparent !default;
21
+ $split-btn-sec-btn-margin-left: 0 !default;
22
+ $split-btn-icon-btn-padding: 6px !default;
23
+ $split-btn-icon-btn-padding-bigger: 9px !default;
@@ -0,0 +1 @@
1
+ @import './tailwind-definition.scss';
@@ -0,0 +1,24 @@
1
+ //layout variables
2
+ $split-btn-zindex: 2 !default;
3
+ $split-btn-border-radius: 4px !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: 8px !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 !default;
20
+ $split-btn-active-box-shadow: $shadow-focus-ring2 !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;