@syncfusion/ej2-splitbuttons 31.2.2 → 32.1.19

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 (357) hide show
  1. package/README.md +8 -0
  2. package/dist/ej2-splitbuttons.min.js +0 -9
  3. package/dist/ej2-splitbuttons.umd.min.js +0 -9
  4. package/dist/global/ej2-splitbuttons.min.js +0 -9
  5. package/dist/global/index.d.ts +0 -9
  6. package/package.json +3 -3
  7. package/styles/bds-lite.css +1 -5
  8. package/styles/bds-lite.scss +12 -13
  9. package/styles/bds.css +6 -10
  10. package/styles/bds.scss +16 -17
  11. package/styles/bootstrap-dark-lite.css +1 -1
  12. package/styles/bootstrap-dark-lite.scss +12 -13
  13. package/styles/bootstrap-dark.css +3 -3
  14. package/styles/bootstrap-dark.scss +16 -17
  15. package/styles/bootstrap-lite.css +1 -1
  16. package/styles/bootstrap-lite.scss +12 -13
  17. package/styles/bootstrap.css +3 -3
  18. package/styles/bootstrap.scss +16 -17
  19. package/styles/bootstrap4-lite.css +1 -7
  20. package/styles/bootstrap4-lite.scss +12 -13
  21. package/styles/bootstrap4.css +3 -11
  22. package/styles/bootstrap4.scss +16 -17
  23. package/styles/bootstrap5-dark-lite.css +3 -3
  24. package/styles/bootstrap5-dark-lite.scss +12 -13
  25. package/styles/bootstrap5-dark.css +5 -5
  26. package/styles/bootstrap5-dark.scss +16 -17
  27. package/styles/bootstrap5-lite.css +3 -3
  28. package/styles/bootstrap5-lite.scss +13 -13
  29. package/styles/bootstrap5.3-lite.css +170 -89
  30. package/styles/bootstrap5.3-lite.scss +13 -13
  31. package/styles/bootstrap5.3.css +173 -92
  32. package/styles/bootstrap5.3.scss +17 -17
  33. package/styles/bootstrap5.css +5 -5
  34. package/styles/bootstrap5.scss +17 -17
  35. package/styles/button-group/_all.scss +2 -2
  36. package/styles/button-group/_bds-definition.scss +13 -0
  37. package/styles/button-group/_bigger.scss +3 -0
  38. package/styles/button-group/_bootstrap-dark-definition.scss +13 -0
  39. package/styles/button-group/_bootstrap-definition.scss +12 -0
  40. package/styles/button-group/_bootstrap4-definition.scss +12 -0
  41. package/styles/button-group/_bootstrap5-dark-definition.scss +44 -1
  42. package/styles/button-group/_bootstrap5-definition.scss +13 -0
  43. package/styles/button-group/_bootstrap5.3-definition.scss +14 -1
  44. package/styles/button-group/_fabric-dark-definition.scss +13 -0
  45. package/styles/button-group/_fabric-definition.scss +12 -0
  46. package/styles/button-group/_fluent-dark-definition.scss +44 -1
  47. package/styles/button-group/_fluent-definition.scss +13 -0
  48. package/styles/button-group/_fluent2-definition.scss +14 -1
  49. package/styles/button-group/_fusionnew-definition.scss +8 -0
  50. package/styles/button-group/_group-button-mixin.scss +3 -0
  51. package/styles/button-group/_highcontrast-definition.scss +12 -0
  52. package/styles/button-group/_highcontrast-light-definition.scss +13 -0
  53. package/styles/button-group/_layout.scss +59 -56
  54. package/styles/button-group/_material-dark-definition.scss +13 -0
  55. package/styles/button-group/_material-definition.scss +12 -0
  56. package/styles/button-group/_material3-dark-definition.scss +44 -1
  57. package/styles/button-group/_material3-definition.scss +14 -1
  58. package/styles/button-group/_tailwind-dark-definition.scss +44 -1
  59. package/styles/button-group/_tailwind-definition.scss +13 -0
  60. package/styles/button-group/_tailwind3-definition.scss +14 -1
  61. package/styles/button-group/_theme-variables.scss +1 -0
  62. package/styles/button-group/_theme.scss +4 -2
  63. package/styles/button-group/bds.css +1 -1
  64. package/styles/button-group/bds.scss +5 -5
  65. package/styles/button-group/bootstrap-dark.css +1 -1
  66. package/styles/button-group/bootstrap-dark.scss +5 -5
  67. package/styles/button-group/bootstrap.css +1 -1
  68. package/styles/button-group/bootstrap.scss +5 -5
  69. package/styles/button-group/bootstrap4.css +1 -1
  70. package/styles/button-group/bootstrap4.scss +5 -5
  71. package/styles/button-group/bootstrap5-dark.css +3 -3
  72. package/styles/button-group/bootstrap5-dark.scss +5 -5
  73. package/styles/button-group/bootstrap5.3.css +146 -66
  74. package/styles/button-group/bootstrap5.3.scss +5 -5
  75. package/styles/button-group/bootstrap5.css +3 -3
  76. package/styles/button-group/bootstrap5.scss +5 -5
  77. package/styles/button-group/fabric-dark.css +1 -1
  78. package/styles/button-group/fabric-dark.scss +5 -5
  79. package/styles/button-group/fabric.css +1 -1
  80. package/styles/button-group/fabric.scss +5 -5
  81. package/styles/button-group/fluent-dark.css +1 -1
  82. package/styles/button-group/fluent-dark.scss +5 -5
  83. package/styles/button-group/fluent.css +1 -1
  84. package/styles/button-group/fluent.scss +5 -5
  85. package/styles/button-group/fluent2.css +167 -87
  86. package/styles/button-group/fluent2.scss +5 -5
  87. package/styles/button-group/highcontrast-light.css +1 -1
  88. package/styles/button-group/highcontrast-light.scss +5 -5
  89. package/styles/button-group/highcontrast.css +1 -1
  90. package/styles/button-group/highcontrast.scss +5 -5
  91. package/styles/button-group/material-dark.css +1 -1
  92. package/styles/button-group/material-dark.scss +5 -5
  93. package/styles/button-group/material.css +1 -1
  94. package/styles/button-group/material.scss +5 -5
  95. package/styles/button-group/material3-dark.css +146 -66
  96. package/styles/button-group/material3-dark.scss +5 -6
  97. package/styles/button-group/material3.css +146 -66
  98. package/styles/button-group/material3.scss +5 -6
  99. package/styles/button-group/tailwind-dark.css +1 -1
  100. package/styles/button-group/tailwind-dark.scss +5 -5
  101. package/styles/button-group/tailwind.css +1 -1
  102. package/styles/button-group/tailwind.scss +5 -5
  103. package/styles/button-group/tailwind3.css +135 -65
  104. package/styles/button-group/tailwind3.scss +5 -5
  105. package/styles/drop-down-button/_all.scss +2 -2
  106. package/styles/drop-down-button/_bds-definition.scss +14 -0
  107. package/styles/drop-down-button/_bigger.scss +11 -9
  108. package/styles/drop-down-button/_bootstrap-dark-definition.scss +13 -0
  109. package/styles/drop-down-button/_bootstrap-definition.scss +13 -0
  110. package/styles/drop-down-button/_bootstrap4-definition.scss +13 -1
  111. package/styles/drop-down-button/_bootstrap5-dark-definition.scss +66 -1
  112. package/styles/drop-down-button/_bootstrap5-definition.scss +13 -0
  113. package/styles/drop-down-button/_bootstrap5.3-definition.scss +14 -1
  114. package/styles/drop-down-button/_fabric-dark-definition.scss +13 -0
  115. package/styles/drop-down-button/_fabric-definition.scss +13 -0
  116. package/styles/drop-down-button/_fluent-dark-definition.scss +68 -1
  117. package/styles/drop-down-button/_fluent-definition.scss +13 -0
  118. package/styles/drop-down-button/_fluent2-definition.scss +23 -1
  119. package/styles/drop-down-button/_fusionnew-definition.scss +13 -0
  120. package/styles/drop-down-button/_highcontrast-definition.scss +13 -0
  121. package/styles/drop-down-button/_highcontrast-light-definition.scss +13 -0
  122. package/styles/drop-down-button/_layout.scss +25 -22
  123. package/styles/drop-down-button/_material-dark-definition.scss +13 -0
  124. package/styles/drop-down-button/_material-definition.scss +13 -0
  125. package/styles/drop-down-button/_material3-dark-definition.scss +67 -1
  126. package/styles/drop-down-button/_material3-definition.scss +14 -1
  127. package/styles/drop-down-button/_tailwind-dark-definition.scss +65 -1
  128. package/styles/drop-down-button/_tailwind-definition.scss +13 -0
  129. package/styles/drop-down-button/_tailwind3-definition.scss +14 -1
  130. package/styles/drop-down-button/_theme-variables.scss +1 -0
  131. package/styles/drop-down-button/_theme.scss +2 -0
  132. package/styles/drop-down-button/bds.scss +7 -7
  133. package/styles/drop-down-button/bootstrap-dark.scss +7 -7
  134. package/styles/drop-down-button/bootstrap.scss +7 -7
  135. package/styles/drop-down-button/bootstrap4.scss +7 -7
  136. package/styles/drop-down-button/bootstrap5-dark.scss +7 -7
  137. package/styles/drop-down-button/bootstrap5.3.css +83 -3
  138. package/styles/drop-down-button/bootstrap5.3.scss +7 -7
  139. package/styles/drop-down-button/bootstrap5.scss +7 -7
  140. package/styles/drop-down-button/fabric-dark.scss +7 -7
  141. package/styles/drop-down-button/fabric.scss +7 -7
  142. package/styles/drop-down-button/fluent-dark.scss +7 -7
  143. package/styles/drop-down-button/fluent.scss +7 -7
  144. package/styles/drop-down-button/fluent2.css +83 -3
  145. package/styles/drop-down-button/fluent2.scss +7 -7
  146. package/styles/drop-down-button/highcontrast-light.scss +7 -7
  147. package/styles/drop-down-button/highcontrast.scss +7 -7
  148. package/styles/drop-down-button/icons/_bds.scss +1 -0
  149. package/styles/drop-down-button/icons/_bootstrap-dark.scss +1 -0
  150. package/styles/drop-down-button/icons/_bootstrap.scss +1 -0
  151. package/styles/drop-down-button/icons/_bootstrap4.scss +1 -0
  152. package/styles/drop-down-button/icons/_bootstrap5-dark.scss +1 -1
  153. package/styles/drop-down-button/icons/_bootstrap5.3.scss +1 -0
  154. package/styles/drop-down-button/icons/_bootstrap5.scss +1 -0
  155. package/styles/drop-down-button/icons/_fabric-dark.scss +1 -0
  156. package/styles/drop-down-button/icons/_fabric.scss +1 -0
  157. package/styles/drop-down-button/icons/_fluent-dark.scss +1 -1
  158. package/styles/drop-down-button/icons/_fluent.scss +1 -0
  159. package/styles/drop-down-button/icons/_fluent2.scss +1 -0
  160. package/styles/drop-down-button/icons/_fusionnew.scss +1 -0
  161. package/styles/drop-down-button/icons/_highcontrast-light.scss +1 -0
  162. package/styles/drop-down-button/icons/_highcontrast.scss +1 -0
  163. package/styles/drop-down-button/icons/_material-dark.scss +1 -0
  164. package/styles/drop-down-button/icons/_material.scss +1 -0
  165. package/styles/drop-down-button/icons/_material3-dark.scss +1 -1
  166. package/styles/drop-down-button/icons/_material3.scss +1 -0
  167. package/styles/drop-down-button/icons/_tailwind-dark.scss +1 -0
  168. package/styles/drop-down-button/icons/_tailwind.scss +1 -0
  169. package/styles/drop-down-button/icons/_tailwind3.scss +1 -0
  170. package/styles/drop-down-button/material-dark.scss +7 -7
  171. package/styles/drop-down-button/material.scss +7 -7
  172. package/styles/drop-down-button/material3-dark.css +83 -2
  173. package/styles/drop-down-button/material3-dark.scss +7 -8
  174. package/styles/drop-down-button/material3.css +83 -2
  175. package/styles/drop-down-button/material3.scss +7 -8
  176. package/styles/drop-down-button/tailwind-dark.scss +7 -7
  177. package/styles/drop-down-button/tailwind.scss +7 -7
  178. package/styles/drop-down-button/tailwind3.css +72 -1
  179. package/styles/drop-down-button/tailwind3.scss +7 -7
  180. package/styles/fabric-dark-lite.css +1 -1
  181. package/styles/fabric-dark-lite.scss +13 -13
  182. package/styles/fabric-dark.css +3 -3
  183. package/styles/fabric-dark.scss +17 -17
  184. package/styles/fabric-lite.css +1 -1
  185. package/styles/fabric-lite.scss +13 -13
  186. package/styles/fabric.css +3 -3
  187. package/styles/fabric.scss +17 -17
  188. package/styles/fluent-dark-lite.css +1 -3
  189. package/styles/fluent-dark-lite.scss +13 -13
  190. package/styles/fluent-dark.css +3 -5
  191. package/styles/fluent-dark.scss +17 -17
  192. package/styles/fluent-lite.css +1 -3
  193. package/styles/fluent-lite.scss +13 -13
  194. package/styles/fluent.css +3 -5
  195. package/styles/fluent.scss +17 -17
  196. package/styles/fluent2-lite.css +191 -111
  197. package/styles/fluent2-lite.scss +13 -13
  198. package/styles/fluent2.css +193 -113
  199. package/styles/fluent2.scss +17 -17
  200. package/styles/highcontrast-light-lite.css +1 -1
  201. package/styles/highcontrast-light-lite.scss +13 -13
  202. package/styles/highcontrast-light.css +3 -3
  203. package/styles/highcontrast-light.scss +17 -17
  204. package/styles/highcontrast-lite.css +1 -1
  205. package/styles/highcontrast-lite.scss +13 -13
  206. package/styles/highcontrast.css +3 -3
  207. package/styles/highcontrast.scss +17 -17
  208. package/styles/material-dark-lite.css +1 -1
  209. package/styles/material-dark-lite.scss +13 -13
  210. package/styles/material-dark.css +3 -3
  211. package/styles/material-dark.scss +17 -17
  212. package/styles/material-lite.css +1 -1
  213. package/styles/material-lite.scss +12 -13
  214. package/styles/material.css +3 -3
  215. package/styles/material.scss +16 -17
  216. package/styles/material3-dark-lite.css +177 -88
  217. package/styles/material3-dark-lite.scss +13 -13
  218. package/styles/material3-dark.css +183 -94
  219. package/styles/material3-dark.scss +17 -19
  220. package/styles/material3-lite.css +177 -88
  221. package/styles/material3-lite.scss +13 -13
  222. package/styles/material3.css +183 -94
  223. package/styles/material3.scss +17 -19
  224. package/styles/progress-button/_all.scss +2 -2
  225. package/styles/progress-button/_bds-definition.scss +19 -0
  226. package/styles/progress-button/_bigger.scss +6 -4
  227. package/styles/progress-button/_bootstrap-dark-definition.scss +19 -0
  228. package/styles/progress-button/_bootstrap-definition.scss +19 -0
  229. package/styles/progress-button/_bootstrap4-definition.scss +19 -0
  230. package/styles/progress-button/_bootstrap5-dark-definition.scss +39 -1
  231. package/styles/progress-button/_bootstrap5-definition.scss +19 -0
  232. package/styles/progress-button/_bootstrap5.3-definition.scss +18 -0
  233. package/styles/progress-button/_fabric-dark-definition.scss +18 -0
  234. package/styles/progress-button/_fabric-definition.scss +18 -0
  235. package/styles/progress-button/_fluent-dark-definition.scss +38 -1
  236. package/styles/progress-button/_fluent-definition.scss +18 -0
  237. package/styles/progress-button/_fluent2-definition.scss +18 -0
  238. package/styles/progress-button/_fusionnew-definition.scss +14 -0
  239. package/styles/progress-button/_highcontrast-definition.scss +18 -0
  240. package/styles/progress-button/_highcontrast-light-definition.scss +18 -0
  241. package/styles/progress-button/_layout.scss +45 -43
  242. package/styles/progress-button/_material-dark-definition.scss +18 -0
  243. package/styles/progress-button/_material-definition.scss +18 -0
  244. package/styles/progress-button/_material3-dark-definition.scss +42 -1
  245. package/styles/progress-button/_material3-definition.scss +18 -0
  246. package/styles/progress-button/_tailwind-dark-definition.scss +38 -1
  247. package/styles/progress-button/_tailwind-definition.scss +18 -0
  248. package/styles/progress-button/_tailwind3-definition.scss +18 -0
  249. package/styles/progress-button/_theme-variables.scss +1 -0
  250. package/styles/progress-button/_theme.scss +2 -1
  251. package/styles/progress-button/bds.scss +6 -6
  252. package/styles/progress-button/bootstrap-dark.scss +6 -6
  253. package/styles/progress-button/bootstrap.scss +6 -6
  254. package/styles/progress-button/bootstrap4.scss +6 -6
  255. package/styles/progress-button/bootstrap5-dark.scss +6 -6
  256. package/styles/progress-button/bootstrap5.3.css +81 -1
  257. package/styles/progress-button/bootstrap5.3.scss +6 -6
  258. package/styles/progress-button/bootstrap5.scss +6 -6
  259. package/styles/progress-button/fabric-dark.scss +6 -6
  260. package/styles/progress-button/fabric.scss +6 -6
  261. package/styles/progress-button/fluent-dark.scss +6 -6
  262. package/styles/progress-button/fluent.scss +6 -6
  263. package/styles/progress-button/fluent2.css +81 -1
  264. package/styles/progress-button/fluent2.scss +6 -6
  265. package/styles/progress-button/highcontrast-light.scss +6 -6
  266. package/styles/progress-button/highcontrast.scss +6 -6
  267. package/styles/progress-button/material-dark.scss +6 -6
  268. package/styles/progress-button/material.scss +6 -6
  269. package/styles/progress-button/material3-dark.css +81 -1
  270. package/styles/progress-button/material3-dark.scss +6 -7
  271. package/styles/progress-button/material3.css +81 -1
  272. package/styles/progress-button/material3.scss +6 -7
  273. package/styles/progress-button/tailwind-dark.scss +6 -6
  274. package/styles/progress-button/tailwind.scss +6 -6
  275. package/styles/progress-button/tailwind3.css +71 -1
  276. package/styles/progress-button/tailwind3.scss +6 -6
  277. package/styles/split-button/_all.scss +2 -2
  278. package/styles/split-button/_bds-definition.scss +52 -0
  279. package/styles/split-button/_bigger.scss +33 -49
  280. package/styles/split-button/_bootstrap-dark-definition.scss +46 -0
  281. package/styles/split-button/_bootstrap-definition.scss +46 -0
  282. package/styles/split-button/_bootstrap4-definition.scss +46 -1
  283. package/styles/split-button/_bootstrap5-dark-definition.scss +70 -1
  284. package/styles/split-button/_bootstrap5-definition.scss +47 -0
  285. package/styles/split-button/_bootstrap5.3-definition.scss +44 -1
  286. package/styles/split-button/_fabric-dark-definition.scss +46 -0
  287. package/styles/split-button/_fabric-definition.scss +46 -0
  288. package/styles/split-button/_fluent-dark-definition.scss +70 -1
  289. package/styles/split-button/_fluent-definition.scss +47 -0
  290. package/styles/split-button/_fluent2-definition.scss +48 -1
  291. package/styles/split-button/_fusionnew-definition.scss +42 -0
  292. package/styles/split-button/_highcontrast-definition.scss +46 -0
  293. package/styles/split-button/_highcontrast-light-definition.scss +46 -0
  294. package/styles/split-button/_layout.scss +61 -68
  295. package/styles/split-button/_material-dark-definition.scss +47 -0
  296. package/styles/split-button/_material-definition.scss +46 -0
  297. package/styles/split-button/_material3-dark-definition.scss +74 -1
  298. package/styles/split-button/_material3-definition.scss +48 -0
  299. package/styles/split-button/_tailwind-dark-definition.scss +73 -1
  300. package/styles/split-button/_tailwind-definition.scss +49 -0
  301. package/styles/split-button/_tailwind3-definition.scss +48 -1
  302. package/styles/split-button/_theme-variables.scss +1 -0
  303. package/styles/split-button/_theme.scss +2 -0
  304. package/styles/split-button/bds.css +5 -9
  305. package/styles/split-button/bds.scss +7 -7
  306. package/styles/split-button/bootstrap-dark.css +2 -2
  307. package/styles/split-button/bootstrap-dark.scss +7 -7
  308. package/styles/split-button/bootstrap.css +2 -2
  309. package/styles/split-button/bootstrap.scss +7 -7
  310. package/styles/split-button/bootstrap4.css +2 -10
  311. package/styles/split-button/bootstrap4.scss +7 -7
  312. package/styles/split-button/bootstrap5-dark.css +2 -2
  313. package/styles/split-button/bootstrap5-dark.scss +7 -7
  314. package/styles/split-button/bootstrap5.3.css +103 -22
  315. package/styles/split-button/bootstrap5.3.scss +7 -7
  316. package/styles/split-button/bootstrap5.css +2 -2
  317. package/styles/split-button/bootstrap5.scss +7 -7
  318. package/styles/split-button/fabric-dark.css +2 -2
  319. package/styles/split-button/fabric-dark.scss +7 -7
  320. package/styles/split-button/fabric.css +2 -2
  321. package/styles/split-button/fabric.scss +7 -7
  322. package/styles/split-button/fluent-dark.css +2 -4
  323. package/styles/split-button/fluent-dark.scss +7 -7
  324. package/styles/split-button/fluent.css +2 -4
  325. package/styles/split-button/fluent.scss +7 -7
  326. package/styles/split-button/fluent2.css +102 -22
  327. package/styles/split-button/fluent2.scss +7 -7
  328. package/styles/split-button/highcontrast-light.css +2 -2
  329. package/styles/split-button/highcontrast-light.scss +7 -7
  330. package/styles/split-button/highcontrast.css +2 -2
  331. package/styles/split-button/highcontrast.scss +7 -7
  332. package/styles/split-button/material-dark.css +2 -2
  333. package/styles/split-button/material-dark.scss +7 -7
  334. package/styles/split-button/material.css +2 -2
  335. package/styles/split-button/material.scss +7 -7
  336. package/styles/split-button/material3-dark.css +113 -25
  337. package/styles/split-button/material3-dark.scss +7 -8
  338. package/styles/split-button/material3.css +113 -25
  339. package/styles/split-button/material3.scss +7 -8
  340. package/styles/split-button/tailwind-dark.css +2 -6
  341. package/styles/split-button/tailwind-dark.scss +7 -7
  342. package/styles/split-button/tailwind.css +2 -6
  343. package/styles/split-button/tailwind.scss +7 -7
  344. package/styles/split-button/tailwind3.css +92 -22
  345. package/styles/split-button/tailwind3.scss +7 -7
  346. package/styles/tailwind-dark-lite.css +1 -5
  347. package/styles/tailwind-dark-lite.scss +13 -13
  348. package/styles/tailwind-dark.css +3 -7
  349. package/styles/tailwind-dark.scss +17 -17
  350. package/styles/tailwind-lite.css +1 -5
  351. package/styles/tailwind-lite.scss +13 -13
  352. package/styles/tailwind.css +3 -7
  353. package/styles/tailwind.scss +17 -17
  354. package/styles/tailwind3-lite.css +158 -87
  355. package/styles/tailwind3-lite.scss +13 -13
  356. package/styles/tailwind3.css +160 -89
  357. package/styles/tailwind3.scss +17 -17
package/styles/button-group/_bootstrap4-definition.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use 'ej2-base/styles/definition/bootstrap4' as *;
2
+ @use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
3
+ @forward 'ej2-base/styles/definition/bootstrap4';
4
+ @forward 'ej2-buttons/styles/button/bootstrap4-definition';
1
5
  $btn-grp-margin: -1px !default;
2
6
  $btn-grp-margin-left: -1px !default;
3
7
  $btn-grp-wrapper-border: 4px !default;
@@ -5,6 +9,14 @@ $btn-grp-round-radius: 20px !default;
5
9
  $btn-grp-icon-font-size: 14px !default;
6
10
  $btn-grp-icon-font-size-bigger: 16px !default;
7
11
 
12
+ $btn-group-input-margin: 0 0 0 -1px !default;
13
+ $btn-zero-radius: 0 !default;
14
+ $btn-vertical-grp-margin: -1 0 0 !default;
15
+ $btn-top-radius: 2px !default;
16
+ $btn-group-zero-margin-padding: 0 !default;
17
+ $btn-group-input-height: 1px !default;
18
+ $btn-group-input-width: 1px !default;
19
+
8
20
  //Normal Outline GroupButton
9
21
  $btn-grp-outline-focus-border-color: $gray-600 !default;
10
22
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_bootstrap5-dark-definition.scss CHANGED
@@ -1 +1,44 @@
1
- @import './bootstrap5-definition.scss';
1
+ @use 'ej2-base/styles/definition/bootstrap5-dark' as *;
2
+ @use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
3
+ @forward 'ej2-base/styles/definition/bootstrap5-dark';
4
+ @forward 'ej2-buttons/styles/button/bootstrap5-dark-definition';
5
+
6
+ //layout variables
7
+ $btn-grp-margin: -1px !default;
8
+ $btn-grp-margin-left: -1px !default;
9
+ $btn-grp-wrapper-border: 4px !default;
10
+ $btn-grp-round-radius: 20px !default;
11
+ $btn-grp-icon-font-size: $text-base !default;
12
+ $btn-grp-icon-font-size-bigger: $text-xl !default;
13
+
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
22
+ //Normal Outline GroupButton
23
+ $btn-grp-outline-focus-border-color: $secondary-border-color !default;
24
+ $btn-grp-outline-focus-color: inherit !default;
25
+
26
+ //Outline Primary
27
+ $btn-grp-outline-primary-focus-border-color: $primary !default;
28
+ $btn-grp-outline-focus-primary-color: inherit !default;
29
+
30
+ //Outline Success
31
+ $btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
32
+ $btn-grp-outline-focus-success-color: inherit !default;
33
+
34
+ //Outline Info
35
+ $btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
36
+ $btn-grp-outline-focus-info-color: inherit !default;
37
+
38
+ //Outline warning
39
+ $btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
40
+ $btn-grp-outline-focus-warning-color: inherit !default;
41
+
42
+ //Outline danger
43
+ $btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
44
+ $btn-grp-outline-focus-danger-color: inherit !default;
package/styles/button-group/_bootstrap5-definition.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use 'ej2-base/styles/definition/bootstrap5' as *;
2
+ @use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
3
+ @forward 'ej2-base/styles/definition/bootstrap5';
4
+ @forward 'ej2-buttons/styles/button/bootstrap5-definition';
5
+
1
6
  //layout variables
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: -1px !default;
@@ -6,6 +11,14 @@ $btn-grp-round-radius: 20px !default;
6
11
  $btn-grp-icon-font-size: $text-base !default;
7
12
  $btn-grp-icon-font-size-bigger: $text-xl !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_bootstrap5.3-definition.scss CHANGED
@@ -1,11 +1,24 @@
1
+ @use 'ej2-base/styles/definition/bootstrap5.3' as *;
2
+ @use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
3
+ @forward 'ej2-base/styles/definition/bootstrap5.3';
4
+ @forward 'ej2-buttons/styles/button/bootstrap5.3-definition';
5
+
1
6
  //layout variables
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: -1px !default;
4
9
  $btn-grp-wrapper-border: 4px !default;
5
- $btn-grp-round-radius: 20px !default;
10
+ $btn-grp-round-radius: $radius-20 !default;
6
11
  $btn-grp-icon-font-size: $text-base !default;
7
12
  $btn-grp-icon-font-size-bigger: $text-xl !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: $radius-0 !default;
16
+ $btn-vertical-grp-margin: -1px 0 0 !default;
17
+ $btn-top-radius: $radius-2 !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_fabric-dark-definition.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use 'ej2-base/styles/definition/fabric-dark' as *;
2
+ @use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
3
+ @forward 'ej2-base/styles/definition/fabric-dark';
4
+ @forward 'ej2-buttons/styles/button/fabric-dark-definition';
5
+
1
6
  //default
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: 0 !default;
@@ -6,6 +11,14 @@ $btn-grp-round-radius: 20px !default;
6
11
  $btn-grp-icon-font-size: 14px !default;
7
12
  $btn-grp-icon-font-size-bigger: 16px !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: $neutral-quintenary !default;
11
24
  $btn-grp-outline-focus-color: $neutral-secondary-alt !default;
package/styles/button-group/_fabric-definition.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use 'ej2-base/styles/definition/fabric' as *;
2
+ @use 'ej2-buttons/styles/button/fabric-definition' as *;
3
+ @forward 'ej2-base/styles/definition/fabric';
4
+ @forward 'ej2-buttons/styles/button/fabric-definition';
1
5
  $btn-grp-margin: -1px !default;
2
6
  $btn-grp-margin-left: 0 !default;
3
7
  $btn-grp-wrapper-border: 0 !default;
@@ -5,6 +9,14 @@ $btn-grp-round-radius: 20px !default;
5
9
  $btn-grp-icon-font-size: 14px !default;
6
10
  $btn-grp-icon-font-size-bigger: 16px !default;
7
11
 
12
+ $btn-group-input-margin: 0 0 0 -1px !default;
13
+ $btn-zero-radius: 0 !default;
14
+ $btn-vertical-grp-margin: -1 0 0 !default;
15
+ $btn-top-radius: 2px !default;
16
+ $btn-group-zero-margin-padding: 0 !default;
17
+ $btn-group-input-height: 1px !default;
18
+ $btn-group-input-width: 1px !default;
19
+
8
20
  //Normal Outline GroupButton
9
21
  $btn-grp-outline-focus-border-color: $neutral-quintenary !default;
10
22
  $btn-grp-outline-focus-color: $neutral-secondary-alt !default;
package/styles/button-group/_fluent-dark-definition.scss CHANGED
@@ -1 +1,44 @@
1
- @import './fluent-definition.scss';
1
+ @use 'ej2-base/styles/definition/fluent-dark' as *;
2
+ @use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
3
+ @forward 'ej2-base/styles/definition/fluent-dark';
4
+ @forward 'ej2-buttons/styles/button/fluent-dark-definition';
5
+
6
+ //layout variables
7
+ $btn-grp-margin: -1px !default;
8
+ $btn-grp-margin-left: -1px !default;
9
+ $btn-grp-wrapper-border: 4px !default;
10
+ $btn-grp-round-radius: 20px !default;
11
+ $btn-grp-icon-font-size: $text-base !default;
12
+ $btn-grp-icon-font-size-bigger: $text-xl !default;
13
+
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
22
+ //Normal Outline GroupButton
23
+ $btn-grp-outline-focus-border-color: $secondary-border-color !default;
24
+ $btn-grp-outline-focus-color: inherit !default;
25
+
26
+ //Outline Primary
27
+ $btn-grp-outline-primary-focus-border-color: $primary !default;
28
+ $btn-grp-outline-focus-primary-color: inherit !default;
29
+
30
+ //Outline Success
31
+ $btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
32
+ $btn-grp-outline-focus-success-color: inherit !default;
33
+
34
+ //Outline Info
35
+ $btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
36
+ $btn-grp-outline-focus-info-color: inherit !default;
37
+
38
+ //Outline warning
39
+ $btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
40
+ $btn-grp-outline-focus-warning-color: inherit !default;
41
+
42
+ //Outline danger
43
+ $btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
44
+ $btn-grp-outline-focus-danger-color: inherit !default;
package/styles/button-group/_fluent-definition.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use 'ej2-base/styles/definition/fluent' as *;
2
+ @use 'ej2-buttons/styles/button/fluent-definition' as *;
3
+ @forward 'ej2-base/styles/definition/fluent';
4
+ @forward 'ej2-buttons/styles/button/fluent-definition';
5
+
1
6
  //layout variables
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: -1px !default;
@@ -6,6 +11,14 @@ $btn-grp-round-radius: 20px !default;
6
11
  $btn-grp-icon-font-size: $text-base !default;
7
12
  $btn-grp-icon-font-size-bigger: $text-xl !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_fluent2-definition.scss CHANGED
@@ -1,11 +1,24 @@
1
+ @use 'ej2-base/styles/definition/fluent2' as *;
2
+ @use 'ej2-buttons/styles/button/fluent2-definition' as *;
3
+ @forward 'ej2-base/styles/definition/fluent2';
4
+ @forward 'ej2-buttons/styles/button/fluent2-definition';
5
+
1
6
  //layout variables
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: -1px !default;
4
9
  $btn-grp-wrapper-border: 4px !default;
5
- $btn-grp-round-radius: 20px !default;
10
+ $btn-grp-round-radius: $radius-20 !default;
6
11
  $btn-grp-icon-font-size: $text-sm !default;
7
12
  $btn-grp-icon-font-size-bigger: 16px !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: $radius-0 !default;
16
+ $btn-vertical-grp-margin: -1px 0 0 !default;
17
+ $btn-top-radius: $radius-2 !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_fusionnew-definition.scss CHANGED
@@ -6,6 +6,14 @@ $btn-grp-round-radius: 20px !default;
6
6
  $btn-grp-icon-font-size: 16px !default;
7
7
  $btn-grp-icon-font-size-bigger: 20px !default;
8
8
 
9
+ $btn-group-input-margin: 0 0 0 -1px !default;
10
+ $btn-zero-radius: 0 !default;
11
+ $btn-vertical-grp-margin: -1 0 0 !default;
12
+ $btn-top-radius: 2px !default;
13
+ $btn-group-zero-margin-padding: 0 !default;
14
+ $btn-group-input-height: 1px !default;
15
+ $btn-group-input-width: 1px !default;
16
+
9
17
  //Normal Outline GroupButton
10
18
  $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
19
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_group-button-mixin.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @use 'ej2-base/styles/common/mixin' as *;
2
+ @use 'ej2-buttons/styles/button/mixin' as *;
3
+ @use './theme-variables' as *;
1
4
  @mixin apply-border {
2
5
  &:not(:first-of-type):not(:last-of-type) {
3
6
  border-left: transparent;
package/styles/button-group/_highcontrast-definition.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use 'ej2-base/styles/definition/highcontrast' as *;
2
+ @use 'ej2-buttons/styles/button/highcontrast-definition' as *;
3
+ @forward 'ej2-base/styles/definition/highcontrast';
4
+ @forward 'ej2-buttons/styles/button/highcontrast-definition';
1
5
  $btn-grp-margin: -1px !default;
2
6
  $btn-grp-margin-left: 0 !default;
3
7
  $btn-grp-wrapper-border: 0 !default;
@@ -7,6 +11,14 @@ $btn-grp-round-radius: 20px !default;
7
11
  $btn-grp-icon-font-size: 14px !default;
8
12
  $btn-grp-icon-font-size-bigger: 16px !default;
9
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
10
22
  //Normal Outline GroupButton
11
23
  $btn-grp-outline-focus-border-color: $bg-base-100 !default;
12
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_highcontrast-light-definition.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use 'ej2-base/styles/definition/highcontrast-light' as *;
2
+ @use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
3
+ @forward 'ej2-base/styles/definition/highcontrast-light';
4
+ @forward 'ej2-buttons/styles/button/highcontrast-light-definition';
5
+
1
6
  //default
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: 0 !default;
@@ -8,6 +13,14 @@ $btn-grp-round-radius: 20px !default;
8
13
  $btn-grp-icon-font-size: 14px !default;
9
14
  $btn-grp-icon-font-size-bigger: 16px !default;
10
15
 
16
+ $btn-group-input-margin: 0 0 0 -1px !default;
17
+ $btn-zero-radius: 0 !default;
18
+ $btn-vertical-grp-margin: -1 0 0 !default;
19
+ $btn-top-radius: 2px !default;
20
+ $btn-group-zero-margin-padding: 0 !default;
21
+ $btn-group-input-height: 1px !default;
22
+ $btn-group-input-width: 1px !default;
23
+
11
24
  //Normal Outline GroupButton
12
25
  $btn-grp-outline-focus-border-color: $bg-base-100 !default;
13
26
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_layout.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @use 'ej2-base/styles/common/mixin' as *;
2
+ @use 'ej2-buttons/styles/button/mixin' as *;
3
+ @use './theme-variables' as *;
1
4
  @include export-module('button-group-layout') {
2
5
  /* stylelint-disable */
3
6
  #{if(&, '&', '*')}.e-btn-group,
@@ -22,16 +25,16 @@
22
25
  }
23
26
 
24
27
  input + label.e-btn {
25
- margin-bottom: 0;
28
+ margin-bottom: $btn-group-zero-margin-padding;
26
29
  }
27
30
 
28
31
  input {
29
32
  -moz-appearance: none;
30
- height: 1px;
31
- margin: 0 0 0 $btn-grp-margin;
33
+ height: $btn-group-input-height;
34
+ margin: $btn-group-input-margin;
32
35
  opacity: 0;
33
36
  position: absolute;
34
- width: 1px;
37
+ width: $btn-group-input-width;
35
38
  }
36
39
 
37
40
  // Disabled
@@ -53,50 +56,50 @@
53
56
  }
54
57
 
55
58
  &:not(:first-of-type):not(:last-of-type) {
56
- border-radius: 0;
59
+ border-radius: $btn-zero-radius;
57
60
  }
58
61
 
59
62
  &:first-of-type,
60
63
  &:last-of-type:not(:last-child) {
61
- border-bottom-right-radius: 0;
62
- border-top-right-radius: 0;
64
+ border-bottom-right-radius: $btn-zero-radius;
65
+ border-top-right-radius: $btn-zero-radius;
63
66
  }
64
67
 
65
68
  &:last-of-type {
66
- border-bottom-left-radius: 0;
67
- border-top-left-radius: 0;
69
+ border-bottom-left-radius: $btn-zero-radius;
70
+ border-top-left-radius: $btn-zero-radius;
68
71
  }
69
72
  }
70
73
 
71
74
  .e-split-btn-wrapper {
72
75
  +.e-btn {
73
- border-bottom-left-radius: 0;
74
- border-top-left-radius: 0;
76
+ border-bottom-left-radius: $btn-zero-radius;
77
+ border-top-left-radius: $btn-zero-radius;
75
78
  }
76
79
 
77
80
  &:not(:first-child):not(:last-child) {
78
81
  .e-btn:last-child {
79
- border-bottom-right-radius: 0;
80
- border-top-right-radius: 0;
82
+ border-bottom-right-radius: $btn-zero-radius;
83
+ border-top-right-radius: $btn-zero-radius;
81
84
  }
82
85
 
83
86
  .e-btn:first-child {
84
- border-bottom-left-radius: 0;
85
- border-top-left-radius: 0;
87
+ border-bottom-left-radius: $btn-zero-radius;
88
+ border-top-left-radius: $btn-zero-radius;
86
89
  }
87
90
  }
88
91
 
89
92
  &:first-child {
90
93
  .e-btn:last-child {
91
- border-bottom-right-radius: 0;
92
- border-top-right-radius: 0;
94
+ border-bottom-right-radius: $btn-zero-radius;
95
+ border-top-right-radius: $btn-zero-radius;
93
96
  }
94
97
  }
95
98
 
96
99
  &:last-child {
97
100
  .e-btn:first-child {
98
- border-bottom-left-radius: 0;
99
- border-top-left-radius: 0;
101
+ border-bottom-left-radius: $btn-zero-radius;
102
+ border-top-left-radius: $btn-zero-radius;
100
103
  }
101
104
  }
102
105
  }
@@ -108,50 +111,50 @@
108
111
  margin-left: $btn-grp-margin-left;
109
112
 
110
113
  &:not(:first-of-type):not(:last-of-type) {
111
- border-radius: 0;
114
+ border-radius: $btn-zero-radius;
112
115
  }
113
116
 
114
117
  &:first-of-type,
115
118
  &:last-of-type:not(:last-child) {
116
- border-bottom-left-radius: 0;
117
- border-top-left-radius: 0;
119
+ border-bottom-left-radius: $btn-zero-radius;
120
+ border-top-left-radius: $btn-zero-radius;
118
121
  }
119
122
 
120
123
  &:last-of-type {
121
- border-bottom-right-radius: 0;
122
- border-top-right-radius: 0;
124
+ border-bottom-right-radius: $btn-zero-radius;
125
+ border-top-right-radius: $btn-zero-radius;
123
126
  }
124
127
  }
125
128
 
126
129
  .e-split-btn-wrapper {
127
130
  +.e-btn {
128
- border-bottom-right-radius: 0;
129
- border-top-right-radius: 0;
131
+ border-bottom-right-radius: $btn-zero-radius;
132
+ border-top-right-radius: $btn-zero-radius;
130
133
  }
131
134
 
132
135
  &:not(:first-child):not(:last-child) {
133
136
  .e-btn:last-child {
134
- border-bottom-left-radius: 0;
135
- border-top-left-radius: 0;
137
+ border-bottom-left-radius: $btn-zero-radius;
138
+ border-top-left-radius: $btn-zero-radius;
136
139
  }
137
140
 
138
141
  .e-btn:first-child {
139
- border-bottom-right-radius: 0;
140
- border-top-right-radius: 0;
142
+ border-bottom-right-radius: $btn-zero-radius;
143
+ border-top-right-radius: $btn-zero-radius;
141
144
  }
142
145
  }
143
146
 
144
147
  &:first-child {
145
148
  .e-btn:last-child {
146
- border-bottom-left-radius: 0;
147
- border-top-left-radius: 0;
149
+ border-bottom-left-radius: $btn-zero-radius;
150
+ border-top-left-radius: $btn-zero-radius;
148
151
  }
149
152
  }
150
153
 
151
154
  &:last-child {
152
155
  .e-btn:first-child {
153
- border-bottom-right-radius: 0;
154
- border-top-right-radius: 0;
156
+ border-bottom-right-radius: $btn-zero-radius;
157
+ border-top-right-radius: $btn-zero-radius;
155
158
  }
156
159
  }
157
160
  }
@@ -163,7 +166,7 @@
163
166
  flex-direction: column;
164
167
 
165
168
  input {
166
- margin: $btn-grp-margin 0 0;
169
+ margin: $btn-vertical-grp-margin;
167
170
  }
168
171
 
169
172
  // Round corner
@@ -173,21 +176,21 @@
173
176
  }
174
177
 
175
178
  &:not(:first-of-type):not(:last-of-type) {
176
- border-radius: 0;
179
+ border-radius: $btn-zero-radius;
177
180
  }
178
181
 
179
182
  &:first-of-type {
180
- border-bottom-left-radius: 0;
181
- border-bottom-right-radius: 0;
182
- border-top-left-radius: 2px;
183
- border-top-right-radius: 2px;
183
+ border-bottom-left-radius: $btn-zero-radius;
184
+ border-bottom-right-radius: $btn-zero-radius;
185
+ border-top-left-radius: $btn-top-radius;
186
+ border-top-right-radius: $btn-top-radius;
184
187
  }
185
188
 
186
189
  &:last-of-type {
187
- border-bottom-left-radius: 2px;
188
- border-bottom-right-radius: 2px;
189
- border-top-left-radius: 0;
190
- border-top-right-radius: 0;
190
+ border-bottom-left-radius: $btn-top-radius;
191
+ border-bottom-right-radius: $btn-top-radius;
192
+ border-top-left-radius: $btn-zero-radius;
193
+ border-top-right-radius: $btn-zero-radius;
191
194
  }
192
195
  }
193
196
  }
@@ -209,15 +212,15 @@
209
212
  }
210
213
 
211
214
  &:last-of-type:not(:last-child) {
212
- border-bottom-right-radius: 0;
213
- border-top-right-radius: 0;
215
+ border-bottom-right-radius: $btn-zero-radius;
216
+ border-top-right-radius: $btn-zero-radius;
214
217
  }
215
218
  }
216
219
 
217
220
  .e-split-btn-wrapper {
218
221
  +.e-btn {
219
- border-bottom-left-radius: 0;
220
- border-top-left-radius: 0;
222
+ border-bottom-left-radius: $btn-zero-radius;
223
+ border-top-left-radius: $btn-zero-radius;
221
224
  }
222
225
 
223
226
  &:first-child {
@@ -227,15 +230,15 @@
227
230
  }
228
231
 
229
232
  .e-btn:last-child {
230
- border-bottom-right-radius: 0;
231
- border-top-right-radius: 0;
233
+ border-bottom-right-radius: $btn-zero-radius;
234
+ border-top-right-radius: $btn-zero-radius;
232
235
  }
233
236
  }
234
237
 
235
238
  &:last-child {
236
239
  .e-btn:first-child {
237
- border-bottom-left-radius: 0;
238
- border-top-left-radius: 0;
240
+ border-bottom-left-radius: $btn-zero-radius;
241
+ border-top-left-radius: $btn-zero-radius;
239
242
  }
240
243
 
241
244
  .e-btn:last-child {
@@ -262,13 +265,13 @@
262
265
  }
263
266
 
264
267
  &:last-of-type:not(:last-child) {
265
- border-bottom-left-radius: 0;
266
- border-top-left-radius: 0;
268
+ border-bottom-left-radius: $btn-zero-radius;
269
+ border-top-left-radius: $btn-zero-radius;
267
270
  }
268
271
 
269
272
  &:first-of-type:not(:first-child) {
270
- border-bottom-right-radius: 0;
271
- border-top-right-radius: 0;
273
+ border-bottom-right-radius: $btn-zero-radius;
274
+ border-top-right-radius: $btn-zero-radius;
272
275
  }
273
276
  }
274
277
  }
package/styles/button-group/_material-dark-definition.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use 'ej2-base/styles/definition/material-dark' as *;
2
+ @use 'ej2-buttons/styles/button/material-dark-definition' as *;
3
+ @forward 'ej2-base/styles/definition/material-dark';
4
+ @forward 'ej2-buttons/styles/button/material-dark-definition';
5
+
1
6
  //default
2
7
  $btn-grp-margin: -1px !default;
3
8
  $btn-grp-margin-left: 0 !default;
@@ -6,6 +11,14 @@ $btn-grp-round-radius: 20px !default;
6
11
  $btn-grp-icon-font-size: 14px !default;
7
12
  $btn-grp-icon-font-size-bigger: 16px !default;
8
13
 
14
+ $btn-group-input-margin: 0 0 0 -1px !default;
15
+ $btn-zero-radius: 0 !default;
16
+ $btn-vertical-grp-margin: -1 0 0 !default;
17
+ $btn-top-radius: 2px !default;
18
+ $btn-group-zero-margin-padding: 0 !default;
19
+ $btn-group-input-height: 1px !default;
20
+ $btn-group-input-width: 1px !default;
21
+
9
22
  //Normal Outline GroupButton
10
23
  $btn-grp-outline-focus-border-color: inherit !default;
11
24
  $btn-grp-outline-focus-color: inherit !default;
package/styles/button-group/_material-definition.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use 'ej2-base/styles/definition/material' as *;
2
+ @use 'ej2-buttons/styles/button/material-definition' as *;
3
+ @forward 'ej2-base/styles/definition/material';
4
+ @forward 'ej2-buttons/styles/button/material-definition';
1
5
  $btn-grp-margin: -1px !default;
2
6
  $btn-grp-margin-left: 0 !default;
3
7
  $btn-grp-wrapper-border: 2px !default;
@@ -5,6 +9,14 @@ $btn-grp-round-radius: 20px !default;
5
9
  $btn-grp-icon-font-size: 14px !default;
6
10
  $btn-grp-icon-font-size-bigger: 16px !default;
7
11
 
12
+ $btn-group-input-margin: 0 0 0 -1px !default;
13
+ $btn-zero-radius: 0 !default;
14
+ $btn-vertical-grp-margin: -1 0 0 !default;
15
+ $btn-top-radius: 2px !default;
16
+ $btn-group-zero-margin-padding: 0 !default;
17
+ $btn-group-input-height: 1px !default;
18
+ $btn-group-input-width: 1px !default;
19
+
8
20
  //Normal Outline GroupButton
9
21
  $btn-grp-outline-focus-border-color: inherit !default;
10
22
  $btn-grp-outline-focus-color: inherit !default;