@lucca-front/scss 16.4.1 → 16.4.3

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 (399) hide show
  1. package/.jenkins/npmrc +1 -0
  2. package/dist/lucca-front.min.css +1 -1
  3. package/dockerRegistry-514df42c-5e08-4017-8742-cea13d9a7985.env +1 -0
  4. package/package.json +28 -28
  5. package/src/commons/base.scss +105 -105
  6. package/src/commons/config.scss +339 -339
  7. package/src/commons/core.scss +107 -107
  8. package/src/commons/exports.scss +3 -3
  9. package/src/commons/index.scss +6 -6
  10. package/src/commons/utils/a11y.scss +21 -21
  11. package/src/commons/utils/form.scss +19 -19
  12. package/src/commons/utils/index.scss +9 -9
  13. package/src/commons/utils/loading.scss +45 -45
  14. package/src/commons/utils/media.scss +35 -35
  15. package/src/commons/utils/reset.scss +39 -39
  16. package/src/commons/utils/text.scss +5 -5
  17. package/src/commons/vars.scss +55 -55
  18. package/src/components/actionIcon/component.scss +40 -40
  19. package/src/components/actionIcon/exports.scss +4 -4
  20. package/src/components/actionIcon/index.scss +38 -38
  21. package/src/components/actionIcon/mods.scss +68 -68
  22. package/src/components/actionIcon/states.scss +24 -24
  23. package/src/components/actionIcon/vars.scss +2 -2
  24. package/src/components/box/component.scss +18 -18
  25. package/src/components/box/exports.scss +4 -4
  26. package/src/components/box/index.scss +19 -19
  27. package/src/components/box/mods.scss +60 -60
  28. package/src/components/box/vars.scss +8 -8
  29. package/src/components/breadcrumbs/component.scss +51 -51
  30. package/src/components/breadcrumbs/exports.scss +4 -4
  31. package/src/components/breadcrumbs/index.scss +16 -16
  32. package/src/components/breadcrumbs/mods.scss +27 -27
  33. package/src/components/breadcrumbs/states.scss +16 -16
  34. package/src/components/breadcrumbs/vars.scss +2 -2
  35. package/src/components/button/component.scss +52 -52
  36. package/src/components/button/exports.scss +4 -4
  37. package/src/components/button/index.scss +98 -98
  38. package/src/components/button/mods.scss +157 -157
  39. package/src/components/button/states.scss +96 -96
  40. package/src/components/button/vars.scss +7 -7
  41. package/src/components/buttonGroup/component.scss +86 -86
  42. package/src/components/buttonGroup/exports.scss +4 -4
  43. package/src/components/buttonGroup/index.scss +14 -14
  44. package/src/components/buttonGroup/mods.scss +43 -43
  45. package/src/components/buttonGroup/vars.scss +2 -2
  46. package/src/components/callout/component.scss +61 -61
  47. package/src/components/callout/exports.scss +4 -4
  48. package/src/components/callout/index.scss +14 -14
  49. package/src/components/callout/mods.scss +21 -21
  50. package/src/components/callout/vars.scss +2 -2
  51. package/src/components/card/component.scss +48 -48
  52. package/src/components/card/exports.scss +4 -4
  53. package/src/components/card/index.scss +26 -26
  54. package/src/components/card/mods.scss +42 -42
  55. package/src/components/card/states.scss +21 -21
  56. package/src/components/card/vars.scss +9 -9
  57. package/src/components/checkbox/component.scss +94 -94
  58. package/src/components/checkbox/exports.scss +4 -4
  59. package/src/components/checkbox/index.scss +48 -48
  60. package/src/components/checkbox/mods.scss +35 -35
  61. package/src/components/checkbox/states.scss +53 -53
  62. package/src/components/checkbox/vars.scss +5 -5
  63. package/src/components/checkboxField/component.scss +75 -75
  64. package/src/components/checkboxField/exports.scss +4 -4
  65. package/src/components/checkboxField/index.scss +72 -80
  66. package/src/components/checkboxField/mods.scss +9 -31
  67. package/src/components/checkboxField/states.scss +122 -122
  68. package/src/components/checkboxField/vars.scss +6 -6
  69. package/src/components/chip/component.scss +56 -56
  70. package/src/components/chip/exports.scss +4 -4
  71. package/src/components/chip/index.scss +22 -22
  72. package/src/components/chip/mods.scss +29 -29
  73. package/src/components/chip/states.scss +8 -8
  74. package/src/components/chip/vars.scss +2 -2
  75. package/src/components/clear/component.scss +33 -33
  76. package/src/components/clear/exports.scss +4 -4
  77. package/src/components/clear/index.scss +19 -19
  78. package/src/components/clear/mods.scss +17 -17
  79. package/src/components/clear/states.scss +4 -4
  80. package/src/components/clear/vars.scss +4 -4
  81. package/src/components/code/component.scss +11 -11
  82. package/src/components/code/exports.scss +4 -4
  83. package/src/components/code/index.scss +10 -10
  84. package/src/components/code/mods.scss +6 -6
  85. package/src/components/code/vars.scss +2 -2
  86. package/src/components/collapse/component.scss +33 -33
  87. package/src/components/collapse/exports.scss +4 -4
  88. package/src/components/collapse/index.scss +14 -14
  89. package/src/components/collapse/states.scss +13 -13
  90. package/src/components/collapse/vars.scss +2 -2
  91. package/src/components/container/component.scss +5 -5
  92. package/src/components/container/exports.scss +4 -4
  93. package/src/components/container/index.scss +34 -34
  94. package/src/components/container/mods.scss +33 -33
  95. package/src/components/container/vars.scss +4 -4
  96. package/src/components/contentSection/component.scss +3 -3
  97. package/src/components/contentSection/exports.scss +4 -4
  98. package/src/components/contentSection/index.scss +6 -6
  99. package/src/components/contentSection/vars.scss +3 -3
  100. package/src/components/divider/component.scss +8 -8
  101. package/src/components/divider/exports.scss +4 -4
  102. package/src/components/divider/index.scss +6 -6
  103. package/src/components/divider/vars.scss +2 -2
  104. package/src/components/emptyState/component.scss +16 -16
  105. package/src/components/emptyState/exports.scss +4 -4
  106. package/src/components/emptyState/index.scss +6 -6
  107. package/src/components/emptyState/vars.scss +2 -2
  108. package/src/components/errorPage/component.scss +61 -61
  109. package/src/components/errorPage/exports.scss +4 -4
  110. package/src/components/errorPage/index.scss +11 -11
  111. package/src/components/errorPage/vars.scss +4 -4
  112. package/src/components/field/component.scss +112 -112
  113. package/src/components/field/exports.scss +4 -4
  114. package/src/components/field/index.scss +125 -125
  115. package/src/components/field/mods.scss +337 -337
  116. package/src/components/field/states.scss +184 -184
  117. package/src/components/field/vars.scss +37 -37
  118. package/src/components/fieldset/component.scss +48 -48
  119. package/src/components/fieldset/exports.scss +4 -4
  120. package/src/components/fieldset/index.scss +14 -14
  121. package/src/components/fieldset/mods.scss +17 -17
  122. package/src/components/fieldset/vars.scss +4 -4
  123. package/src/components/file/component.scss +122 -122
  124. package/src/components/file/exports.scss +4 -4
  125. package/src/components/file/index.scss +44 -44
  126. package/src/components/file/mods.scss +66 -66
  127. package/src/components/file/states.scss +97 -97
  128. package/src/components/file/vars.scss +2 -2
  129. package/src/components/filters/component.scss +38 -38
  130. package/src/components/filters/exports.scss +4 -4
  131. package/src/components/filters/index.scss +24 -24
  132. package/src/components/filters/mods.scss +21 -21
  133. package/src/components/filters/vars.scss +5 -5
  134. package/src/components/footer/component.scss +36 -36
  135. package/src/components/footer/exports.scss +4 -4
  136. package/src/components/footer/index.scss +10 -10
  137. package/src/components/footer/mods.scss +4 -4
  138. package/src/components/footer/vars.scss +2 -2
  139. package/src/components/form/component.scss +97 -96
  140. package/src/components/form/exports.scss +4 -4
  141. package/src/components/form/index.scss +118 -109
  142. package/src/components/form/mods.scss +266 -231
  143. package/src/components/form/states.scss +24 -24
  144. package/src/components/form/vars.scss +19 -19
  145. package/src/components/formLabel/component.scss +21 -21
  146. package/src/components/formLabel/exports.scss +4 -4
  147. package/src/components/formLabel/index.scss +18 -18
  148. package/src/components/formLabel/mods.scss +19 -19
  149. package/src/components/formLabel/states.scss +8 -8
  150. package/src/components/formLabel/vars.scss +7 -7
  151. package/src/components/gauge/component.scss +21 -21
  152. package/src/components/gauge/exports.scss +4 -4
  153. package/src/components/gauge/index.scss +14 -14
  154. package/src/components/gauge/mods.scss +14 -14
  155. package/src/components/gauge/vars.scss +3 -3
  156. package/src/components/grid/component.scss +68 -68
  157. package/src/components/grid/exports.scss +4 -4
  158. package/src/components/grid/index.scss +20 -20
  159. package/src/components/grid/mods.scss +17 -17
  160. package/src/components/grid/vars.scss +18 -18
  161. package/src/components/gridLegacy/component.scss +34 -34
  162. package/src/components/gridLegacy/exports.scss +4 -4
  163. package/src/components/gridLegacy/index.scss +94 -94
  164. package/src/components/gridLegacy/mods.scss +46 -46
  165. package/src/components/gridLegacy/vars.scss +2 -2
  166. package/src/components/header/component.scss +72 -72
  167. package/src/components/header/exports.scss +4 -4
  168. package/src/components/header/index.scss +28 -28
  169. package/src/components/header/mods.scss +34 -34
  170. package/src/components/header/states.scss +13 -13
  171. package/src/components/header/vars.scss +5 -5
  172. package/src/components/index.scss +75 -75
  173. package/src/components/inlineMessage/component.scss +13 -13
  174. package/src/components/inlineMessage/exports.scss +4 -4
  175. package/src/components/inlineMessage/index.scss +22 -22
  176. package/src/components/inlineMessage/mods.scss +5 -5
  177. package/src/components/inlineMessage/states.scss +41 -41
  178. package/src/components/inlineMessage/vars.scss +7 -7
  179. package/src/components/keyframe/exports.scss +4 -4
  180. package/src/components/keyframe/index.scss +1 -1
  181. package/src/components/keyframe/mods.scss +184 -184
  182. package/src/components/label/component.scss +19 -19
  183. package/src/components/label/exports.scss +4 -4
  184. package/src/components/label/index.scss +18 -18
  185. package/src/components/label/mods.scss +16 -16
  186. package/src/components/label/vars.scss +12 -12
  187. package/src/components/layout/component.scss +172 -172
  188. package/src/components/layout/exports.scss +4 -4
  189. package/src/components/layout/index.scss +68 -68
  190. package/src/components/layout/mods.scss +109 -109
  191. package/src/components/layout/states.scss +26 -26
  192. package/src/components/layout/vars.scss +3 -3
  193. package/src/components/link/component.scss +22 -22
  194. package/src/components/link/exports.scss +4 -4
  195. package/src/components/link/index.scss +18 -18
  196. package/src/components/link/mods.scss +16 -16
  197. package/src/components/link/states.scss +4 -4
  198. package/src/components/link/vars.scss +2 -2
  199. package/src/components/list/component.scss +48 -48
  200. package/src/components/list/exports.scss +4 -4
  201. package/src/components/list/index.scss +20 -20
  202. package/src/components/list/mods.scss +53 -53
  203. package/src/components/list/vars.scss +5 -5
  204. package/src/components/loading/component.scss +15 -15
  205. package/src/components/loading/exports.scss +4 -4
  206. package/src/components/loading/index.scss +30 -30
  207. package/src/components/loading/mods.scss +78 -78
  208. package/src/components/loading/vars.scss +3 -3
  209. package/src/components/main/component.scss +9 -9
  210. package/src/components/main/exports.scss +4 -4
  211. package/src/components/main/index.scss +32 -32
  212. package/src/components/main/mods.scss +21 -21
  213. package/src/components/main/states.scss +8 -8
  214. package/src/components/main/vars.scss +2 -2
  215. package/src/components/menu/component.scss +102 -102
  216. package/src/components/menu/exports.scss +4 -4
  217. package/src/components/menu/index.scss +26 -26
  218. package/src/components/menu/mods.scss +25 -25
  219. package/src/components/menu/states.scss +37 -37
  220. package/src/components/menu/vars.scss +3 -3
  221. package/src/components/mobileHeader/component.scss +30 -30
  222. package/src/components/mobileHeader/exports.scss +4 -4
  223. package/src/components/mobileHeader/index.scss +10 -10
  224. package/src/components/mobileHeader/mods.scss +23 -23
  225. package/src/components/mobileHeader/vars.scss +3 -3
  226. package/src/components/mobileNavigation/component.scss +56 -56
  227. package/src/components/mobileNavigation/exports.scss +4 -4
  228. package/src/components/mobileNavigation/index.scss +10 -10
  229. package/src/components/mobileNavigation/mods.scss +5 -5
  230. package/src/components/mobileNavigation/vars.scss +2 -2
  231. package/src/components/navside/component.scss +221 -221
  232. package/src/components/navside/exports.scss +4 -4
  233. package/src/components/navside/index.scss +99 -99
  234. package/src/components/navside/mods.scss +138 -138
  235. package/src/components/navside/states.scss +63 -63
  236. package/src/components/navside/vars.scss +55 -55
  237. package/src/components/newBadge/component.scss +10 -10
  238. package/src/components/newBadge/exports.scss +4 -4
  239. package/src/components/newBadge/index.scss +6 -6
  240. package/src/components/newBadge/vars.scss +2 -2
  241. package/src/components/notchBox/component.scss +83 -83
  242. package/src/components/notchBox/exports.scss +4 -4
  243. package/src/components/notchBox/index.scss +22 -22
  244. package/src/components/notchBox/mods.scss +224 -224
  245. package/src/components/notchBox/vars.scss +22 -22
  246. package/src/components/numericBadge/component.scss +17 -17
  247. package/src/components/numericBadge/exports.scss +4 -4
  248. package/src/components/numericBadge/index.scss +14 -14
  249. package/src/components/numericBadge/mods.scss +13 -13
  250. package/src/components/numericBadge/vars.scss +8 -8
  251. package/src/components/pageHeader/component.scss +58 -58
  252. package/src/components/pageHeader/exports.scss +4 -4
  253. package/src/components/pageHeader/index.scss +18 -18
  254. package/src/components/pageHeader/mods.scss +27 -27
  255. package/src/components/pageHeader/vars.scss +3 -3
  256. package/src/components/pagination/component.scss +39 -39
  257. package/src/components/pagination/exports.scss +4 -4
  258. package/src/components/pagination/index.scss +16 -16
  259. package/src/components/pagination/mods.scss +4 -4
  260. package/src/components/pagination/states.scss +5 -5
  261. package/src/components/pagination/vars.scss +2 -2
  262. package/src/components/progress/component.scss +42 -42
  263. package/src/components/progress/exports.scss +4 -4
  264. package/src/components/progress/index.scss +18 -18
  265. package/src/components/progress/mods.scss +19 -19
  266. package/src/components/progress/states.scss +21 -21
  267. package/src/components/progress/vars.scss +8 -8
  268. package/src/components/radio/component.scss +93 -93
  269. package/src/components/radio/exports.scss +4 -4
  270. package/src/components/radio/index.scss +25 -25
  271. package/src/components/radio/mods.scss +32 -32
  272. package/src/components/radio/states.scss +30 -30
  273. package/src/components/radio/vars.scss +7 -7
  274. package/src/components/radioButtons/component.scss +84 -84
  275. package/src/components/radioButtons/exports.scss +4 -4
  276. package/src/components/radioButtons/index.scss +20 -20
  277. package/src/components/radioButtons/mods.scss +11 -11
  278. package/src/components/radioButtons/states.scss +13 -13
  279. package/src/components/radioButtons/vars.scss +5 -5
  280. package/src/components/radioField/component.scss +99 -99
  281. package/src/components/radioField/exports.scss +4 -4
  282. package/src/components/radioField/index.scss +40 -40
  283. package/src/components/radioField/mods.scss +41 -41
  284. package/src/components/radioField/states.scss +122 -122
  285. package/src/components/radioField/vars.scss +7 -7
  286. package/src/components/section/component.scss +5 -5
  287. package/src/components/section/exports.scss +4 -4
  288. package/src/components/section/index.scss +19 -19
  289. package/src/components/section/mods.scss +13 -13
  290. package/src/components/section/vars.scss +2 -2
  291. package/src/components/skeleton/component.scss +17 -17
  292. package/src/components/skeleton/exports.scss +4 -4
  293. package/src/components/skeleton/index.scss +26 -26
  294. package/src/components/skeleton/mods.scss +27 -27
  295. package/src/components/skeleton/states.scss +84 -84
  296. package/src/components/skeleton/vars.scss +8 -8
  297. package/src/components/sortableList/component.scss +68 -68
  298. package/src/components/sortableList/exports.scss +4 -4
  299. package/src/components/sortableList/index.scss +16 -16
  300. package/src/components/sortableList/mods.scss +19 -19
  301. package/src/components/sortableList/vars.scss +8 -8
  302. package/src/components/status/component.scss +47 -47
  303. package/src/components/status/exports.scss +4 -4
  304. package/src/components/status/index.scss +18 -18
  305. package/src/components/status/states.scss +17 -17
  306. package/src/components/status/vars.scss +2 -2
  307. package/src/components/statusBadge/component.scss +27 -27
  308. package/src/components/statusBadge/exports.scss +4 -4
  309. package/src/components/statusBadge/index.scss +10 -10
  310. package/src/components/statusBadge/mods.scss +6 -6
  311. package/src/components/statusBadge/vars.scss +6 -6
  312. package/src/components/switch/component.scss +67 -67
  313. package/src/components/switch/exports.scss +4 -4
  314. package/src/components/switch/index.scss +48 -48
  315. package/src/components/switch/mods.scss +15 -15
  316. package/src/components/switch/states.scss +91 -91
  317. package/src/components/switch/vars.scss +12 -12
  318. package/src/components/switchField/component.scss +95 -95
  319. package/src/components/switchField/exports.scss +4 -4
  320. package/src/components/switchField/index.scss +32 -40
  321. package/src/components/switchField/mods.scss +11 -35
  322. package/src/components/switchField/states.scss +80 -80
  323. package/src/components/switchField/vars.scss +7 -7
  324. package/src/components/table/component.scss +75 -75
  325. package/src/components/table/exports.scss +4 -4
  326. package/src/components/table/index.scss +102 -102
  327. package/src/components/table/mods.scss +312 -312
  328. package/src/components/table/vars.scss +8 -8
  329. package/src/components/tableFixed/exports.scss +4 -4
  330. package/src/components/tableFixed/index.scss +21 -21
  331. package/src/components/tableFixed/mods.scss +5 -5
  332. package/src/components/tableOfContent/component.scss +29 -29
  333. package/src/components/tableOfContent/exports.scss +4 -4
  334. package/src/components/tableOfContent/index.scss +42 -42
  335. package/src/components/tableOfContent/states.scss +41 -41
  336. package/src/components/tableOfContent/vars.scss +14 -14
  337. package/src/components/tableSorted/exports.scss +4 -4
  338. package/src/components/tableSorted/index.scss +58 -58
  339. package/src/components/tableSorted/mods.scss +93 -93
  340. package/src/components/tableSorted/states.scss +167 -167
  341. package/src/components/tableSticked/exports.scss +4 -4
  342. package/src/components/tableSticked/index.scss +70 -70
  343. package/src/components/tableSticked/mods.scss +212 -212
  344. package/src/components/tableSticked/vars.scss +8 -8
  345. package/src/components/tag/component.scss +13 -13
  346. package/src/components/tag/exports.scss +4 -4
  347. package/src/components/tag/index.scss +18 -18
  348. package/src/components/tag/mods.scss +19 -19
  349. package/src/components/tag/vars.scss +2 -2
  350. package/src/components/textField/component.scss +112 -112
  351. package/src/components/textField/exports.scss +4 -4
  352. package/src/components/textField/index.scss +22 -22
  353. package/src/components/textField/mods.scss +34 -34
  354. package/src/components/textField/states.scss +15 -15
  355. package/src/components/textField/vars.scss +11 -11
  356. package/src/components/textfields/component.scss +77 -77
  357. package/src/components/textfields/exports.scss +4 -4
  358. package/src/components/textfields/index.scss +402 -402
  359. package/src/components/textfields/mods.scss +648 -648
  360. package/src/components/textfields/states.scss +229 -229
  361. package/src/components/textfields/vars.scss +41 -41
  362. package/src/components/timeline/component.scss +81 -81
  363. package/src/components/timeline/exports.scss +4 -4
  364. package/src/components/timeline/index.scss +101 -101
  365. package/src/components/timeline/mods.scss +384 -384
  366. package/src/components/timeline/states.scss +22 -22
  367. package/src/components/timeline/vars.scss +3 -3
  368. package/src/components/timepicker/component.scss +91 -91
  369. package/src/components/timepicker/exports.scss +4 -4
  370. package/src/components/timepicker/index.scss +14 -14
  371. package/src/components/timepicker/mods.scss +4 -4
  372. package/src/components/timepicker/states.scss +13 -13
  373. package/src/components/timepicker/vars.scss +5 -5
  374. package/src/components/title/component.scss +15 -15
  375. package/src/components/title/exports.scss +4 -4
  376. package/src/components/title/index.scss +39 -39
  377. package/src/components/title/mods.scss +48 -48
  378. package/src/components/title/vars.scss +2 -2
  379. package/src/components/titleSection/component.scss +34 -34
  380. package/src/components/titleSection/exports.scss +4 -4
  381. package/src/components/titleSection/index.scss +25 -25
  382. package/src/components/titleSection/mods.scss +10 -10
  383. package/src/components/titleSection/vars.scss +2 -2
  384. package/src/components/toast/component.scss +73 -73
  385. package/src/components/toast/exports.scss +4 -4
  386. package/src/components/toast/index.scss +14 -14
  387. package/src/components/toast/mods.scss +95 -95
  388. package/src/components/toast/vars.scss +11 -11
  389. package/src/components/util/exports.scss +4 -4
  390. package/src/components/util/index.scss +329 -329
  391. package/src/components/util/mods.scss +3 -3
  392. package/src/components/verticalNavigation/component.scss +55 -55
  393. package/src/components/verticalNavigation/exports.scss +4 -4
  394. package/src/components/verticalNavigation/index.scss +30 -30
  395. package/src/components/verticalNavigation/mods.scss +9 -9
  396. package/src/components/verticalNavigation/states.scss +28 -28
  397. package/src/components/verticalNavigation/vars.scss +5 -5
  398. package/src/main-all.scss +2 -2
  399. package/src/main.scss +1 -1
package/src/components/notchBox/mods.scss CHANGED
@@ -1,224 +1,224 @@
1
- %commons {
2
- --smooth: 1px;
3
- --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
4
- --component-notchbox-notch-padding: calc(
5
- var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding)
6
- );
7
- --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) *
8
- var(--component-notchbox-notch-radius-inner);
9
- --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
10
- var(--component-notchbox-notch-radius-inner);
11
- --component-notchbox-badge-anchor: calc(
12
- var(--component-notchbox-badge-offset) * -1 +
13
- (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
14
- );
15
- }
16
-
17
- %mod-vertical {
18
- @extend %commons;
19
- --component-notchbox-box-min-height: calc(
20
- var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2
21
- );
22
- --component-notchbox-notch-gradient1-ref1: 100%;
23
- --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
24
-
25
- --component-notchbox-notch-gradient2-anchor: left;
26
- --component-notchbox-notch-gradient2-ref1: calc(
27
- var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) / 2 -
28
- var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
29
- );
30
- --component-notchbox-notch-gradient2-ref2: 100%;
31
-
32
- --component-notchbox-notch-gradient3-anchor: right;
33
- --component-notchbox-notch-gradient3-ref1: calc(
34
- 100% -
35
- (
36
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
37
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
38
- )
39
- );
40
- --component-notchbox-notch-gradient3-ref2: 100%;
41
-
42
- --component-notchbox-notch-gradient4-x: calc(
43
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 -
44
- var(--component-notchbox-notch-radius-outer) - var(--smooth)
45
- );
46
-
47
- --component-notchbox-notch-gradient5-x: calc(
48
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
49
- var(--component-notchbox-notch-radius-outer) + var(--smooth)
50
- );
51
- --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
52
-
53
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
54
- --component-notchbox-notch-gradient6-ref1: calc(
55
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2
56
- );
57
- --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
58
-
59
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
60
- --component-notchbox-notch-gradient7-ref1: calc(
61
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
62
- );
63
- --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
64
-
65
- --component-notchbox-notch-gradient8-x: calc(
66
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
67
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
68
- );
69
-
70
- --component-notchbox-notch-gradient9-x: calc(
71
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 -
72
- var(--component-notchbox-notch-percent-offset2) + var(--smooth) * 2
73
- );
74
- --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
75
-
76
- /** badge */
77
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
78
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
79
- --component-notchbox-badge-left: calc(
80
- var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2
81
- );
82
- }
83
-
84
- %mod-horizontal {
85
- @extend %commons;
86
- --component-notchbox-box-min-height: calc(
87
- var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2
88
- );
89
- --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
90
- --component-notchbox-notch-gradient1-ref2: 100%;
91
-
92
- --component-notchbox-notch-gradient2-anchor: top;
93
- --component-notchbox-notch-gradient2-ref1: 100%;
94
- --component-notchbox-notch-gradient2-ref2: calc(
95
- var(--component-notchbox-notch-position) -
96
- (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
97
- );
98
-
99
- --component-notchbox-notch-gradient3-anchor: bottom;
100
- --component-notchbox-notch-gradient3-ref1: 100%;
101
- --component-notchbox-notch-gradient3-ref2: calc(
102
- 100% -
103
- (
104
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
105
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
106
- )
107
- );
108
-
109
- --component-notchbox-notch-gradient4-y: calc(
110
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 -
111
- var(--component-notchbox-notch-radius-outer) - var(--smooth)
112
- );
113
-
114
- --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
115
- --component-notchbox-notch-gradient5-y: calc(
116
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
117
- var(--component-notchbox-notch-radius-outer) + var(--smooth)
118
- );
119
-
120
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
121
- --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
122
- --component-notchbox-notch-gradient6-ref2: calc(
123
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2
124
- );
125
-
126
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
127
- --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
128
- --component-notchbox-notch-gradient7-ref2: calc(
129
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
130
- );
131
-
132
- --component-notchbox-notch-gradient8-y: calc(
133
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
134
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
135
- );
136
-
137
- --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
138
- --component-notchbox-notch-gradient9-y: calc(
139
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 -
140
- var(--component-notchbox-notch-percent-offset2) + var(--smooth) * 2
141
- );
142
- /** badge */
143
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
144
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
145
- --component-notchbox-badge-top: calc(
146
- var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2
147
- );
148
- }
149
-
150
- @mixin top {
151
- @extend %mod-vertical;
152
- --component-notchbox-notch-gradient1-anchor: bottom;
153
- --component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
154
-
155
- --component-notchbox-notch-gradient8-anchor: 100% 0%;
156
- --component-notchbox-notch-gradient8-y: calc(
157
- var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
158
- );
159
- --component-notchbox-notch-gradient9-anchor: 0 0;
160
- --component-notchbox-badge-top: var(--component-notchbox-badge-anchor);
161
- --component-notchbox-box-padding-top: var(--component-notchbox-notch-padding);
162
- }
163
-
164
- @mixin bottom {
165
- @extend %mod-vertical;
166
- --component-notchbox-notch-gradient1-anchor: top;
167
- --component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
168
-
169
- --component-notchbox-notch-gradient8-anchor: 100% 100%;
170
- --component-notchbox-notch-gradient8-y: calc(
171
- 100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
172
- );
173
- --component-notchbox-notch-gradient9-anchor: 0 100%;
174
- --component-notchbox-badge-bottom: var(--component-notchbox-badge-anchor);
175
- --component-notchbox-box-padding-bottom: var(--component-notchbox-notch-padding);
176
- }
177
-
178
- @mixin left {
179
- @extend %mod-horizontal;
180
- --component-notchbox-notch-gradient1-anchor: right;
181
- --component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
182
- --component-notchbox-notch-gradient8-anchor: 0 100%;
183
- --component-notchbox-notch-gradient8-x: calc(
184
- var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
185
- );
186
- --component-notchbox-notch-gradient9-anchor: 0 0;
187
- --component-notchbox-badge-left: var(--component-notchbox-badge-anchor);
188
- --component-notchbox-box-padding-left: var(--component-notchbox-notch-padding);
189
- }
190
-
191
- @mixin right {
192
- @extend %mod-horizontal;
193
- --component-notchbox-notch-gradient1-anchor: left;
194
- --component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
195
- --component-notchbox-notch-gradient8-anchor: 100% 100%;
196
- --component-notchbox-notch-gradient8-x: calc(
197
- 100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
198
- );
199
- --component-notchbox-notch-gradient9-anchor: 100% 0;
200
-
201
- --component-notchbox-badge-right: var(--component-notchbox-badge-anchor);
202
- --component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
203
- }
204
-
205
- /** pre configured with DS parameters **/
206
- @mixin notchTop {
207
- @include top;
208
- }
209
-
210
- @mixin notchBottom {
211
- @include bottom;
212
- }
213
-
214
- @mixin notchLeft {
215
- @include left;
216
- --component-notchbox-badge-offset: 17px;
217
- --component-notchbox-notch-height: 24px;
218
- }
219
-
220
- @mixin notchRight {
221
- @include right;
222
- --component-notchbox-badge-offset: 17px;
223
- --component-notchbox-notch-height: 24px;
224
- }
1
+ %commons {
2
+ --smooth: 1px;
3
+ --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
4
+ --component-notchbox-notch-padding: calc(
5
+ var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding)
6
+ );
7
+ --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) *
8
+ var(--component-notchbox-notch-radius-inner);
9
+ --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
10
+ var(--component-notchbox-notch-radius-inner);
11
+ --component-notchbox-badge-anchor: calc(
12
+ var(--component-notchbox-badge-offset) * -1 +
13
+ (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
14
+ );
15
+ }
16
+
17
+ %mod-vertical {
18
+ @extend %commons;
19
+ --component-notchbox-box-min-height: calc(
20
+ var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2
21
+ );
22
+ --component-notchbox-notch-gradient1-ref1: 100%;
23
+ --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
24
+
25
+ --component-notchbox-notch-gradient2-anchor: left;
26
+ --component-notchbox-notch-gradient2-ref1: calc(
27
+ var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) / 2 -
28
+ var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
29
+ );
30
+ --component-notchbox-notch-gradient2-ref2: 100%;
31
+
32
+ --component-notchbox-notch-gradient3-anchor: right;
33
+ --component-notchbox-notch-gradient3-ref1: calc(
34
+ 100% -
35
+ (
36
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
37
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
38
+ )
39
+ );
40
+ --component-notchbox-notch-gradient3-ref2: 100%;
41
+
42
+ --component-notchbox-notch-gradient4-x: calc(
43
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 -
44
+ var(--component-notchbox-notch-radius-outer) - var(--smooth)
45
+ );
46
+
47
+ --component-notchbox-notch-gradient5-x: calc(
48
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
49
+ var(--component-notchbox-notch-radius-outer) + var(--smooth)
50
+ );
51
+ --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
52
+
53
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
54
+ --component-notchbox-notch-gradient6-ref1: calc(
55
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2
56
+ );
57
+ --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
58
+
59
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
60
+ --component-notchbox-notch-gradient7-ref1: calc(
61
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
62
+ );
63
+ --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
64
+
65
+ --component-notchbox-notch-gradient8-x: calc(
66
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
67
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
68
+ );
69
+
70
+ --component-notchbox-notch-gradient9-x: calc(
71
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 -
72
+ var(--component-notchbox-notch-percent-offset2) + var(--smooth) * 2
73
+ );
74
+ --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
75
+
76
+ /** badge */
77
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
78
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
79
+ --component-notchbox-badge-left: calc(
80
+ var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2
81
+ );
82
+ }
83
+
84
+ %mod-horizontal {
85
+ @extend %commons;
86
+ --component-notchbox-box-min-height: calc(
87
+ var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2
88
+ );
89
+ --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
90
+ --component-notchbox-notch-gradient1-ref2: 100%;
91
+
92
+ --component-notchbox-notch-gradient2-anchor: top;
93
+ --component-notchbox-notch-gradient2-ref1: 100%;
94
+ --component-notchbox-notch-gradient2-ref2: calc(
95
+ var(--component-notchbox-notch-position) -
96
+ (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
97
+ );
98
+
99
+ --component-notchbox-notch-gradient3-anchor: bottom;
100
+ --component-notchbox-notch-gradient3-ref1: 100%;
101
+ --component-notchbox-notch-gradient3-ref2: calc(
102
+ 100% -
103
+ (
104
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
105
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
106
+ )
107
+ );
108
+
109
+ --component-notchbox-notch-gradient4-y: calc(
110
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 -
111
+ var(--component-notchbox-notch-radius-outer) - var(--smooth)
112
+ );
113
+
114
+ --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
115
+ --component-notchbox-notch-gradient5-y: calc(
116
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
117
+ var(--component-notchbox-notch-radius-outer) + var(--smooth)
118
+ );
119
+
120
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
121
+ --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
122
+ --component-notchbox-notch-gradient6-ref2: calc(
123
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2
124
+ );
125
+
126
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
127
+ --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
128
+ --component-notchbox-notch-gradient7-ref2: calc(
129
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
130
+ );
131
+
132
+ --component-notchbox-notch-gradient8-y: calc(
133
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
134
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
135
+ );
136
+
137
+ --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
138
+ --component-notchbox-notch-gradient9-y: calc(
139
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 -
140
+ var(--component-notchbox-notch-percent-offset2) + var(--smooth) * 2
141
+ );
142
+ /** badge */
143
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
144
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
145
+ --component-notchbox-badge-top: calc(
146
+ var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2
147
+ );
148
+ }
149
+
150
+ @mixin top {
151
+ @extend %mod-vertical;
152
+ --component-notchbox-notch-gradient1-anchor: bottom;
153
+ --component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
154
+
155
+ --component-notchbox-notch-gradient8-anchor: 100% 0%;
156
+ --component-notchbox-notch-gradient8-y: calc(
157
+ var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
158
+ );
159
+ --component-notchbox-notch-gradient9-anchor: 0 0;
160
+ --component-notchbox-badge-top: var(--component-notchbox-badge-anchor);
161
+ --component-notchbox-box-padding-top: var(--component-notchbox-notch-padding);
162
+ }
163
+
164
+ @mixin bottom {
165
+ @extend %mod-vertical;
166
+ --component-notchbox-notch-gradient1-anchor: top;
167
+ --component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
168
+
169
+ --component-notchbox-notch-gradient8-anchor: 100% 100%;
170
+ --component-notchbox-notch-gradient8-y: calc(
171
+ 100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
172
+ );
173
+ --component-notchbox-notch-gradient9-anchor: 0 100%;
174
+ --component-notchbox-badge-bottom: var(--component-notchbox-badge-anchor);
175
+ --component-notchbox-box-padding-bottom: var(--component-notchbox-notch-padding);
176
+ }
177
+
178
+ @mixin left {
179
+ @extend %mod-horizontal;
180
+ --component-notchbox-notch-gradient1-anchor: right;
181
+ --component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
182
+ --component-notchbox-notch-gradient8-anchor: 0 100%;
183
+ --component-notchbox-notch-gradient8-x: calc(
184
+ var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
185
+ );
186
+ --component-notchbox-notch-gradient9-anchor: 0 0;
187
+ --component-notchbox-badge-left: var(--component-notchbox-badge-anchor);
188
+ --component-notchbox-box-padding-left: var(--component-notchbox-notch-padding);
189
+ }
190
+
191
+ @mixin right {
192
+ @extend %mod-horizontal;
193
+ --component-notchbox-notch-gradient1-anchor: left;
194
+ --component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
195
+ --component-notchbox-notch-gradient8-anchor: 100% 100%;
196
+ --component-notchbox-notch-gradient8-x: calc(
197
+ 100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
198
+ );
199
+ --component-notchbox-notch-gradient9-anchor: 100% 0;
200
+
201
+ --component-notchbox-badge-right: var(--component-notchbox-badge-anchor);
202
+ --component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
203
+ }
204
+
205
+ /** pre configured with DS parameters **/
206
+ @mixin notchTop {
207
+ @include top;
208
+ }
209
+
210
+ @mixin notchBottom {
211
+ @include bottom;
212
+ }
213
+
214
+ @mixin notchLeft {
215
+ @include left;
216
+ --component-notchbox-badge-offset: 17px;
217
+ --component-notchbox-notch-height: 24px;
218
+ }
219
+
220
+ @mixin notchRight {
221
+ @include right;
222
+ --component-notchbox-badge-offset: 17px;
223
+ --component-notchbox-notch-height: 24px;
224
+ }
package/src/components/notchBox/vars.scss CHANGED
@@ -1,22 +1,22 @@
1
- @mixin vars {
2
- /** notch */
3
- --component-notchbox-notch-radius: var(--commons-borderRadius-M);
4
- --component-notchbox-notch-radius-inner: 18px;
5
- --component-notchbox-notch-width: 56px;
6
- --component-notchbox-notch-height: 24px;
7
- --component-notchbox-notch-position: 50%;
8
- --component-notchbox-notch-percent: 0.5;
9
-
10
- /** box */
11
- --component-notchbox-box-radius: 16px;
12
- --component-notchbox-box-padding: var(--spacings-S);
13
- --component-notchbox-box-background-color: var(--colors-white-color);
14
- --component-notchbox-box-shadow: 0 0 4px var(--palettes-grey-200);
15
-
16
- /** badge */
17
- --component-notchbox-badge-offset: 17px;
18
- --component-notchbox-badge-height: 48px;
19
- --component-notchbox-badge-width: 48px;
20
- --component-notchbox-badge-radius: 14px;
21
- --component-notchbox-badge-background-color: var(--palettes-700, var(--palettes-primary-700));
22
- }
1
+ @mixin vars {
2
+ /** notch */
3
+ --component-notchbox-notch-radius: var(--commons-borderRadius-M);
4
+ --component-notchbox-notch-radius-inner: 18px;
5
+ --component-notchbox-notch-width: 56px;
6
+ --component-notchbox-notch-height: 24px;
7
+ --component-notchbox-notch-position: 50%;
8
+ --component-notchbox-notch-percent: 0.5;
9
+
10
+ /** box */
11
+ --component-notchbox-box-radius: 16px;
12
+ --component-notchbox-box-padding: var(--spacings-S);
13
+ --component-notchbox-box-background-color: var(--colors-white-color);
14
+ --component-notchbox-box-shadow: 0 0 4px var(--palettes-grey-200);
15
+
16
+ /** badge */
17
+ --component-notchbox-badge-offset: 17px;
18
+ --component-notchbox-badge-height: 48px;
19
+ --component-notchbox-badge-width: 48px;
20
+ --component-notchbox-badge-radius: 14px;
21
+ --component-notchbox-badge-background-color: var(--palettes-700, var(--palettes-primary-700));
22
+ }
package/src/components/numericBadge/component.scss CHANGED
@@ -1,17 +1,17 @@
1
- @mixin component {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- height: var(--components-numericBadge-size);
6
- min-width: var(--components-numericBadge-size);
7
- padding: var(--spacings-XXS);
8
- font-size: var(--components-numericBadge-fontSize);
9
- line-height: var(--components-numericBadge-lineHeight);
10
- font-weight: 600;
11
- background-color: var(--components-numericBadge-background);
12
- color: var(--components-numericBadge-color);
13
- border-radius: var(--components-numericBadge-borderRadius);
14
- transition-property: background-color, color;
15
- transition-duration: var(--commons-animations-durations-fast);
16
- transition-timing-function: ease;
17
- }
1
+ @mixin component {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ height: var(--components-numericBadge-size);
6
+ min-width: var(--components-numericBadge-size);
7
+ padding: var(--spacings-XXS);
8
+ font-size: var(--components-numericBadge-fontSize);
9
+ line-height: var(--components-numericBadge-lineHeight);
10
+ font-weight: 600;
11
+ background-color: var(--components-numericBadge-background);
12
+ color: var(--components-numericBadge-color);
13
+ border-radius: var(--components-numericBadge-borderRadius);
14
+ transition-property: background-color, color;
15
+ transition-duration: var(--commons-animations-durations-fast);
16
+ transition-timing-function: ease;
17
+ }
package/src/components/numericBadge/exports.scss CHANGED
@@ -1,4 +1,4 @@
1
- @forward 'vars';
2
- @forward 'mods';
3
- @forward 'states';
4
- @forward 'component';
1
+ @forward 'vars';
2
+ @forward 'mods';
3
+ @forward 'states';
4
+ @forward 'component';
package/src/components/numericBadge/index.scss CHANGED
@@ -1,14 +1,14 @@
1
- @use 'exports' as *;
2
-
3
- .numericBadge {
4
- @include vars;
5
- @include component;
6
-
7
- &.mod-S {
8
- @include s;
9
- }
10
-
11
- &.mod-XS {
12
- @include xs;
13
- }
14
- }
1
+ @use 'exports' as *;
2
+
3
+ .numericBadge {
4
+ @include vars;
5
+ @include component;
6
+
7
+ &.mod-S {
8
+ @include s;
9
+ }
10
+
11
+ &.mod-XS {
12
+ @include xs;
13
+ }
14
+ }
package/src/components/numericBadge/mods.scss CHANGED
@@ -1,13 +1,13 @@
1
- @mixin s {
2
- --components-numericBadge-size: 1.25rem;
3
- --components-numericBadge-borderRadius: 6px;
4
- --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
5
- --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
6
- }
7
-
8
- @mixin xs {
9
- --components-numericBadge-size: 1rem;
10
- --components-numericBadge-borderRadius: var(--commons-borderRadius-M);
11
- --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
12
- --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
13
- }
1
+ @mixin s {
2
+ --components-numericBadge-size: 1.25rem;
3
+ --components-numericBadge-borderRadius: 6px;
4
+ --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
5
+ --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
6
+ }
7
+
8
+ @mixin xs {
9
+ --components-numericBadge-size: 1rem;
10
+ --components-numericBadge-borderRadius: var(--commons-borderRadius-M);
11
+ --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
12
+ --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
13
+ }
package/src/components/numericBadge/vars.scss CHANGED
@@ -1,8 +1,8 @@
1
- @mixin vars {
2
- --components-numericBadge-background: var(--palettes-200, var(--palettes-grey-200));
3
- --components-numericBadge-color: var(--palettes-800, var(--palettes-grey-700));
4
- --components-numericBadge-size: 1.5rem;
5
- --components-numericBadge-fontSize: var(--sizes-S-fontSize);
6
- --components-numericBadge-lineHeight: var(--sizes-S-lineHeight);
7
- --components-numericBadge-borderRadius: var(--commons-borderRadius-L);
8
- }
1
+ @mixin vars {
2
+ --components-numericBadge-background: var(--palettes-200, var(--palettes-grey-200));
3
+ --components-numericBadge-color: var(--palettes-800, var(--palettes-grey-700));
4
+ --components-numericBadge-size: 1.5rem;
5
+ --components-numericBadge-fontSize: var(--sizes-S-fontSize);
6
+ --components-numericBadge-lineHeight: var(--sizes-S-lineHeight);
7
+ --components-numericBadge-borderRadius: var(--commons-borderRadius-L);
8
+ }