@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/timeline/mods.scss CHANGED
@@ -1,384 +1,384 @@
1
- @use '@lucca-front/scss/src/commons/utils/reset';
2
- @use '@lucca-front/scss/src/commons/utils/a11y';
3
- @use '@lucca-front/icons/src/commons/utils/icon';
4
-
5
- @mixin S {
6
- .timeline-step-title {
7
- padding-left: 1.25rem;
8
-
9
- &::before {
10
- width: 0.5rem;
11
- height: 0.5rem;
12
- }
13
- }
14
- }
15
-
16
- @mixin L {
17
- .timeline-step-title {
18
- padding-left: 2.25rem;
19
- min-width: 2rem;
20
-
21
- &::before {
22
- width: 1.5rem;
23
- height: 1.5rem;
24
- }
25
- }
26
-
27
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
28
- &::before {
29
- left: var(--spacings-XS);
30
- }
31
- }
32
- }
33
-
34
- @mixin addStepL {
35
- .timeline-step-title-icon {
36
- &::before {
37
- left: var(--spacings-XS);
38
- }
39
- }
40
- }
41
-
42
- @mixin vertical {
43
- align-items: flex-start;
44
- flex-direction: column;
45
-
46
- .timeline-step {
47
- margin-top: var(--spacings-XS);
48
- display: block;
49
- position: relative;
50
- width: 100%;
51
-
52
- // line
53
- &:not(:last-child)::after {
54
- content: '';
55
- display: block;
56
- height: auto;
57
- position: absolute;
58
- top: calc(var(--spacings-L) + var(--spacings-XXS));
59
- bottom: -0.75rem;
60
- left: 0.45rem; // magic number
61
- margin: 0;
62
- border-left: 2px solid var(--palettes-grey-200);
63
- }
64
-
65
- &:not(:last-child)[aria-current='step'] {
66
- &::after {
67
- top: calc(var(--spacings-L) + var(--spacings-XXS));
68
- }
69
- }
70
- }
71
-
72
- .timeline-step-title {
73
- margin: var(--spacings-XS) 0;
74
- min-height: var(--spacings-M);
75
- min-width: 0;
76
-
77
- &:before {
78
- top: .75rem;
79
- }
80
- }
81
-
82
- .timeline-step-description {
83
- padding-left: var(--spacings-L);
84
- }
85
-
86
- .timeline-stepAddBetweenStep {
87
- min-height: 3rem;
88
- }
89
- }
90
-
91
- @mixin verticalNotSNotL {
92
- .timeline-step-title {
93
- &:before {
94
- left: 0;
95
- }
96
- }
97
- }
98
-
99
- @mixin verticalS {
100
- .timeline-step {
101
- &::after {
102
- bottom: calc(var(--spacings-S) * -1);
103
- left: 0.45rem; // magic number
104
- top: var(--spacings-L);
105
- }
106
-
107
- &[aria-current='step'] {
108
- &::after {
109
- top: var(--spacings-L);
110
- }
111
- }
112
- }
113
- .timeline-step-description {
114
- padding-left: var(--spacings-M);
115
- }
116
- }
117
-
118
- @mixin verticalL {
119
- .timeline-step {
120
- &::after {
121
- bottom: calc(var(--spacings-XS) * -1);
122
- left: 0.95rem; // magic number
123
- top: 2.5rem;
124
- }
125
-
126
- &[aria-current='step'] {
127
- &::after {
128
- top: 2.5rem;
129
- }
130
- }
131
- }
132
- .timeline-step-description {
133
- padding-left: 2.5rem;
134
- min-height: var(--spacings-L);
135
- }
136
- }
137
-
138
- @mixin verticalProgress {
139
- .timeline-step[aria-current='step'] {
140
- &::after {
141
- height: unset;
142
- width: 2px;
143
- border: none;
144
- background: linear-gradient(180deg, var(--palettes-primary-700) var(--progress), var(--palettes-grey-200) var(--progress));
145
- }
146
- }
147
- }
148
-
149
- @mixin number {
150
- counter-reset: timeline;
151
- .timeline-step:not(.timeline-stepAddBetweenStep) {
152
- .timeline-step-title {
153
- counter-increment: timeline;
154
-
155
- &::before {
156
- content: counter(timeline);
157
- font-size: var(--sizes-XS-fontSize);
158
- line-height: 1;
159
- }
160
- }
161
- }
162
- }
163
-
164
- @mixin numberL {
165
- .timeline-step-title::after {
166
- font-size: var(--sizes-S-fontSize);
167
- }
168
- }
169
-
170
- @mixin checkedPastStep {
171
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step):not(.timeline-stepAddBetweenStep) {
172
- .timeline-step-title {
173
- .timeline-step-title-icon::before {
174
- @include icon.generate('sign_confirm');
175
- font-size: var(--components-timeline-icon-size);
176
- display: flex;
177
- background-color: transparent;
178
- color: var(--palettes-primary-700);
179
- }
180
- &::before {
181
- background-color: var(--palettes-primary-100);
182
- }
183
- }
184
-
185
- &::after {
186
- border-color: var(--palettes-primary-200);
187
- border-bottom-style: solid;
188
- }
189
- }
190
- }
191
-
192
- @mixin checkedPastStepL {
193
- --components-timeline-icon-size: var(--sizes-S-lineHeight);
194
- }
195
-
196
- @mixin checkedPastStepVerticalNotL {
197
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
198
- .timeline-step-title {
199
- .timeline-step-title-icon::before {
200
- left: 0;
201
- }
202
- }
203
- }
204
- }
205
-
206
- @mixin checkedPastStepVerticalL {
207
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
208
- .timeline-step-title {
209
- .timeline-step-title-icon::before {
210
- left: var(--sizes-XS-fontSize);
211
- }
212
- }
213
- }
214
- }
215
-
216
- @mixin addStep {
217
- .timeline-step {
218
- &:nth-last-child(2)::after {
219
- background-color: transparent;
220
- background-image: linear-gradient(
221
- 90deg,
222
- transparent 25%,
223
- var(--palettes-grey-200) 25%,
224
- var(--palettes-grey-200) 50%,
225
- transparent 50%,
226
- transparent 75%,
227
- var(--palettes-grey-200) 75%,
228
- var(--palettes-grey-200) 100%
229
- );
230
- background-size: var(--spacings-XS) var(--spacings-XS);
231
- }
232
-
233
- &:last-child {
234
- .timeline-step-title {
235
- &:before {
236
- display: none;
237
- }
238
- .timeline-step-title-icon::before {
239
- @include icon.generate('maths_plus');
240
- display: flex;
241
- }
242
- }
243
- }
244
- }
245
-
246
- .timeline-step-title-icon {
247
- &::before {
248
- content: '';
249
- color: var(--palettes-primary-text);
250
- width: 1rem;
251
- height: 1rem;
252
- display: flex;
253
- align-items: center;
254
- justify-content: center;
255
- border-radius: 50%;
256
- background-color: var(--palettes-primary-700);
257
- position: absolute;
258
- left: var(--spacings-XXS);
259
- top: 50%;
260
- transform: translateY(-50%);
261
- }
262
- }
263
-
264
- .button {
265
- gap: 0;
266
- }
267
- }
268
-
269
- @mixin addStepVertical {
270
- .timeline-step {
271
- &:nth-last-child(2)::after {
272
- background-color: transparent;
273
- background-image: linear-gradient(
274
- 0deg,
275
- transparent 25%,
276
- var(--palettes-grey-200) 25%,
277
- var(--palettes-grey-200) 50%,
278
- transparent 50%,
279
- transparent 75%,
280
- var(--palettes-grey-200) 75%,
281
- var(--palettes-grey-200) 100%
282
- );
283
- background-size: var(--spacings-XS) var(--spacings-XS);
284
- }
285
- }
286
- }
287
-
288
- @mixin addStepVerticalNotL {
289
- .timeline-step:last-child {
290
- .timeline-step-title {
291
- .timeline-step-title-icon::before {
292
- left: 0;
293
- }
294
- }
295
- }
296
- }
297
-
298
- @mixin addStepVerticalL {
299
- .timeline-step:last-child {
300
- .timeline-step-title {
301
- .timeline-step-title-icon::before {
302
- left: var(--spacings-XS);
303
- }
304
- }
305
- }
306
- }
307
-
308
- @mixin addBetweenStep {
309
- .timeline-stepAddBetweenStep {
310
- .timeline-step-title {
311
- padding-left: 0;
312
-
313
- &:before {
314
- display: none;
315
- }
316
- }
317
- }
318
- .timeline-stepAddBetweenStep-title {
319
- @include reset.button;
320
- width: auto;
321
-
322
- &:hover {
323
- .timeline-step-title-icon::before {
324
- background-color: var(--palettes-primary-600);
325
- }
326
- }
327
-
328
- &:focus-visible {
329
- .timeline-step-title-icon::before {
330
- @include a11y.focusVisible;
331
- }
332
- }
333
- }
334
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
335
- @include icon.generate('maths_plus');
336
- display: flex;
337
- transition: background-color var(--commons-animations-durations-fast);
338
- }
339
- }
340
-
341
- @mixin addBetweenStepVerticalNotL {
342
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
343
- left: 0;
344
- }
345
- }
346
-
347
- @mixin addBetweenStepL {
348
- .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
349
- width: 1.5rem;
350
- height: 1.5rem;
351
- left: var(--spacings-XXS);
352
- }
353
- }
354
-
355
- @mixin progress {
356
- .timeline-step[aria-current='step'] {
357
- &::after {
358
- border: none;
359
- height: 2px;
360
- background: linear-gradient(90deg, var(--palettes-primary-700) var(--progress), var(--palettes-grey-200) var(--progress));
361
- }
362
- }
363
- }
364
-
365
- @mixin dashed {
366
- .timeline-step::after {
367
- border-bottom-style: dashed;
368
- }
369
- }
370
-
371
- @mixin dashedVertical {
372
- .timeline-step::after {
373
- border-left-style: dashed;
374
- }
375
- }
376
-
377
- @mixin notPastChecked {
378
- .timeline-step-title {
379
- &::before {
380
- background-color: var(--palettes-primary-700);
381
- color: var(--colors-white-color);
382
- }
383
- }
384
- }
1
+ @use '@lucca-front/scss/src/commons/utils/reset';
2
+ @use '@lucca-front/scss/src/commons/utils/a11y';
3
+ @use '@lucca-front/icons/src/commons/utils/icon';
4
+
5
+ @mixin S {
6
+ .timeline-step-title {
7
+ padding-left: 1.25rem;
8
+
9
+ &::before {
10
+ width: 0.5rem;
11
+ height: 0.5rem;
12
+ }
13
+ }
14
+ }
15
+
16
+ @mixin L {
17
+ .timeline-step-title {
18
+ padding-left: 2.25rem;
19
+ min-width: 2rem;
20
+
21
+ &::before {
22
+ width: 1.5rem;
23
+ height: 1.5rem;
24
+ }
25
+ }
26
+
27
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
28
+ &::before {
29
+ left: var(--spacings-XS);
30
+ }
31
+ }
32
+ }
33
+
34
+ @mixin addStepL {
35
+ .timeline-step-title-icon {
36
+ &::before {
37
+ left: var(--spacings-XS);
38
+ }
39
+ }
40
+ }
41
+
42
+ @mixin vertical {
43
+ align-items: flex-start;
44
+ flex-direction: column;
45
+
46
+ .timeline-step {
47
+ margin-top: var(--spacings-XS);
48
+ display: block;
49
+ position: relative;
50
+ width: 100%;
51
+
52
+ // line
53
+ &:not(:last-child)::after {
54
+ content: '';
55
+ display: block;
56
+ height: auto;
57
+ position: absolute;
58
+ top: calc(var(--spacings-L) + var(--spacings-XXS));
59
+ bottom: -0.75rem;
60
+ left: 0.45rem; // magic number
61
+ margin: 0;
62
+ border-left: 2px solid var(--palettes-grey-200);
63
+ }
64
+
65
+ &:not(:last-child)[aria-current='step'] {
66
+ &::after {
67
+ top: calc(var(--spacings-L) + var(--spacings-XXS));
68
+ }
69
+ }
70
+ }
71
+
72
+ .timeline-step-title {
73
+ margin: var(--spacings-XS) 0;
74
+ min-height: var(--spacings-M);
75
+ min-width: 0;
76
+
77
+ &:before {
78
+ top: .75rem;
79
+ }
80
+ }
81
+
82
+ .timeline-step-description {
83
+ padding-left: var(--spacings-L);
84
+ }
85
+
86
+ .timeline-stepAddBetweenStep {
87
+ min-height: 3rem;
88
+ }
89
+ }
90
+
91
+ @mixin verticalNotSNotL {
92
+ .timeline-step-title {
93
+ &:before {
94
+ left: 0;
95
+ }
96
+ }
97
+ }
98
+
99
+ @mixin verticalS {
100
+ .timeline-step {
101
+ &::after {
102
+ bottom: calc(var(--spacings-S) * -1);
103
+ left: 0.45rem; // magic number
104
+ top: var(--spacings-L);
105
+ }
106
+
107
+ &[aria-current='step'] {
108
+ &::after {
109
+ top: var(--spacings-L);
110
+ }
111
+ }
112
+ }
113
+ .timeline-step-description {
114
+ padding-left: var(--spacings-M);
115
+ }
116
+ }
117
+
118
+ @mixin verticalL {
119
+ .timeline-step {
120
+ &::after {
121
+ bottom: calc(var(--spacings-XS) * -1);
122
+ left: 0.95rem; // magic number
123
+ top: 2.5rem;
124
+ }
125
+
126
+ &[aria-current='step'] {
127
+ &::after {
128
+ top: 2.5rem;
129
+ }
130
+ }
131
+ }
132
+ .timeline-step-description {
133
+ padding-left: 2.5rem;
134
+ min-height: var(--spacings-L);
135
+ }
136
+ }
137
+
138
+ @mixin verticalProgress {
139
+ .timeline-step[aria-current='step'] {
140
+ &::after {
141
+ height: unset;
142
+ width: 2px;
143
+ border: none;
144
+ background: linear-gradient(180deg, var(--palettes-primary-700) var(--progress), var(--palettes-grey-200) var(--progress));
145
+ }
146
+ }
147
+ }
148
+
149
+ @mixin number {
150
+ counter-reset: timeline;
151
+ .timeline-step:not(.timeline-stepAddBetweenStep) {
152
+ .timeline-step-title {
153
+ counter-increment: timeline;
154
+
155
+ &::before {
156
+ content: counter(timeline);
157
+ font-size: var(--sizes-XS-fontSize);
158
+ line-height: 1;
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ @mixin numberL {
165
+ .timeline-step-title::after {
166
+ font-size: var(--sizes-S-fontSize);
167
+ }
168
+ }
169
+
170
+ @mixin checkedPastStep {
171
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step):not(.timeline-stepAddBetweenStep) {
172
+ .timeline-step-title {
173
+ .timeline-step-title-icon::before {
174
+ @include icon.generate('sign_confirm');
175
+ font-size: var(--components-timeline-icon-size);
176
+ display: flex;
177
+ background-color: transparent;
178
+ color: var(--palettes-primary-700);
179
+ }
180
+ &::before {
181
+ background-color: var(--palettes-primary-100);
182
+ }
183
+ }
184
+
185
+ &::after {
186
+ border-color: var(--palettes-primary-200);
187
+ border-bottom-style: solid;
188
+ }
189
+ }
190
+ }
191
+
192
+ @mixin checkedPastStepL {
193
+ --components-timeline-icon-size: var(--sizes-S-lineHeight);
194
+ }
195
+
196
+ @mixin checkedPastStepVerticalNotL {
197
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
198
+ .timeline-step-title {
199
+ .timeline-step-title-icon::before {
200
+ left: 0;
201
+ }
202
+ }
203
+ }
204
+ }
205
+
206
+ @mixin checkedPastStepVerticalL {
207
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
208
+ .timeline-step-title {
209
+ .timeline-step-title-icon::before {
210
+ left: var(--sizes-XS-fontSize);
211
+ }
212
+ }
213
+ }
214
+ }
215
+
216
+ @mixin addStep {
217
+ .timeline-step {
218
+ &:nth-last-child(2)::after {
219
+ background-color: transparent;
220
+ background-image: linear-gradient(
221
+ 90deg,
222
+ transparent 25%,
223
+ var(--palettes-grey-200) 25%,
224
+ var(--palettes-grey-200) 50%,
225
+ transparent 50%,
226
+ transparent 75%,
227
+ var(--palettes-grey-200) 75%,
228
+ var(--palettes-grey-200) 100%
229
+ );
230
+ background-size: var(--spacings-XS) var(--spacings-XS);
231
+ }
232
+
233
+ &:last-child {
234
+ .timeline-step-title {
235
+ &:before {
236
+ display: none;
237
+ }
238
+ .timeline-step-title-icon::before {
239
+ @include icon.generate('maths_plus');
240
+ display: flex;
241
+ }
242
+ }
243
+ }
244
+ }
245
+
246
+ .timeline-step-title-icon {
247
+ &::before {
248
+ content: '';
249
+ color: var(--palettes-primary-text);
250
+ width: 1rem;
251
+ height: 1rem;
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ border-radius: 50%;
256
+ background-color: var(--palettes-primary-700);
257
+ position: absolute;
258
+ left: var(--spacings-XXS);
259
+ top: 50%;
260
+ transform: translateY(-50%);
261
+ }
262
+ }
263
+
264
+ .button {
265
+ gap: 0;
266
+ }
267
+ }
268
+
269
+ @mixin addStepVertical {
270
+ .timeline-step {
271
+ &:nth-last-child(2)::after {
272
+ background-color: transparent;
273
+ background-image: linear-gradient(
274
+ 0deg,
275
+ transparent 25%,
276
+ var(--palettes-grey-200) 25%,
277
+ var(--palettes-grey-200) 50%,
278
+ transparent 50%,
279
+ transparent 75%,
280
+ var(--palettes-grey-200) 75%,
281
+ var(--palettes-grey-200) 100%
282
+ );
283
+ background-size: var(--spacings-XS) var(--spacings-XS);
284
+ }
285
+ }
286
+ }
287
+
288
+ @mixin addStepVerticalNotL {
289
+ .timeline-step:last-child {
290
+ .timeline-step-title {
291
+ .timeline-step-title-icon::before {
292
+ left: 0;
293
+ }
294
+ }
295
+ }
296
+ }
297
+
298
+ @mixin addStepVerticalL {
299
+ .timeline-step:last-child {
300
+ .timeline-step-title {
301
+ .timeline-step-title-icon::before {
302
+ left: var(--spacings-XS);
303
+ }
304
+ }
305
+ }
306
+ }
307
+
308
+ @mixin addBetweenStep {
309
+ .timeline-stepAddBetweenStep {
310
+ .timeline-step-title {
311
+ padding-left: 0;
312
+
313
+ &:before {
314
+ display: none;
315
+ }
316
+ }
317
+ }
318
+ .timeline-stepAddBetweenStep-title {
319
+ @include reset.button;
320
+ width: auto;
321
+
322
+ &:hover {
323
+ .timeline-step-title-icon::before {
324
+ background-color: var(--palettes-primary-600);
325
+ }
326
+ }
327
+
328
+ &:focus-visible {
329
+ .timeline-step-title-icon::before {
330
+ @include a11y.focusVisible;
331
+ }
332
+ }
333
+ }
334
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
335
+ @include icon.generate('maths_plus');
336
+ display: flex;
337
+ transition: background-color var(--commons-animations-durations-fast);
338
+ }
339
+ }
340
+
341
+ @mixin addBetweenStepVerticalNotL {
342
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
343
+ left: 0;
344
+ }
345
+ }
346
+
347
+ @mixin addBetweenStepL {
348
+ .timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
349
+ width: 1.5rem;
350
+ height: 1.5rem;
351
+ left: var(--spacings-XXS);
352
+ }
353
+ }
354
+
355
+ @mixin progress {
356
+ .timeline-step[aria-current='step'] {
357
+ &::after {
358
+ border: none;
359
+ height: 2px;
360
+ background: linear-gradient(90deg, var(--palettes-primary-700) var(--progress), var(--palettes-grey-200) var(--progress));
361
+ }
362
+ }
363
+ }
364
+
365
+ @mixin dashed {
366
+ .timeline-step::after {
367
+ border-bottom-style: dashed;
368
+ }
369
+ }
370
+
371
+ @mixin dashedVertical {
372
+ .timeline-step::after {
373
+ border-left-style: dashed;
374
+ }
375
+ }
376
+
377
+ @mixin notPastChecked {
378
+ .timeline-step-title {
379
+ &::before {
380
+ background-color: var(--palettes-primary-700);
381
+ color: var(--colors-white-color);
382
+ }
383
+ }
384
+ }