@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/field/mods.scss CHANGED
@@ -1,337 +1,337 @@
1
- @use '@lucca-front/scss/src/commons/utils/form';
2
-
3
- @mixin inline {
4
- margin-right: calc(var(--components-field-input-inline-margin) * 2);
5
- display: inline-flex;
6
- }
7
-
8
- @mixin block {
9
- width: 100%;
10
- }
11
-
12
- @mixin compact {
13
- align-items: center;
14
- flex-direction: row;
15
- margin-bottom: var(--spacings-S);
16
- width: calc(
17
- var(--components-field-sizes-default) + var(--components-field-compact-label-right-margin) +
18
- var(--components-field-compact-label-sizes-default)
19
- );
20
-
21
- .textfield-label,
22
- .radiosfield-label,
23
- .checkboxesfield-label {
24
- margin-right: var(--components-field-compact-label-right-margin);
25
- width: var(--components-field-compact-label-sizes-default);
26
- flex: 0 0 auto;
27
- margin-bottom: 0;
28
- order: -1;
29
- }
30
-
31
- .textfield-messages,
32
- .radiosfield-messages,
33
- .checkboxesfield-messages {
34
- max-width: var(--components-field-compact-label-sizes-default);
35
- align-items: center;
36
- display: inline-flex;
37
- position: absolute;
38
- bottom: 0;
39
- top: 0;
40
- left: 100%;
41
- width: 100%;
42
- margin: 0 0 0 var(--spacings-S);
43
-
44
- &.mod-helper {
45
- padding-left: calc(var(--components-field-compact-label-sizes-default) + var(--components-field-compact-label-right-margin));
46
- bottom: auto;
47
- max-width: 100%;
48
- top: 100%;
49
- left: 0;
50
- right: 0;
51
- }
52
- }
53
-
54
- .radiosfield-input,
55
- .checkboxesfield-input {
56
- display: flex;
57
- flex-wrap: wrap;
58
- }
59
-
60
- .radio,
61
- .checkbox {
62
- margin-right: var(--spacings-M);
63
- }
64
- }
65
-
66
- @mixin compactBlock {
67
- width: 100%;
68
- }
69
-
70
- @mixin framed {
71
- display: block;
72
-
73
- fieldset {
74
- border: 0;
75
- padding: 0;
76
- }
77
-
78
- .textfield-messages,
79
- .radiosfield-messages,
80
- .checkboxesfield-messages {
81
- transition-duration: var(--commons-animations-durations-standard);
82
- transition-property: transform;
83
- position: absolute;
84
- text-align: center;
85
- bottom: 0;
86
- left: -1px;
87
- right: 0;
88
- transform: translateY(0);
89
- z-index: 4;
90
-
91
- > * {
92
- display: block;
93
- }
94
- }
95
-
96
- .textfield-messages-error,
97
- .radiosfield-messages-error,
98
- .checkboxesfield-messages-error {
99
- background-color: var(--palettes-error-700);
100
- color: var(--colors-white-color);
101
- }
102
-
103
- .textfield-messages-warning,
104
- .radiosfield-messages-warning,
105
- .checkboxesfield-messages-warning {
106
- background-color: var(--palettes-warning-700);
107
- color: var(--colors-white-color);
108
- }
109
-
110
- .textfield-messages-valid,
111
- .radiosfield-messages-valid,
112
- .checkboxesfield-messages-valid,
113
- .textfield-messages-success,
114
- .radiosfield-messages-success,
115
- .checkboxesfield-messages-success {
116
- background-color: var(--palettes-success-700);
117
- color: var(--colors-white-color);
118
- }
119
-
120
- .textfield-messages-helper,
121
- .radiosfield-messages-helper,
122
- .checkboxesfield-messages-helper {
123
- background-color: var(--palettes-grey-600);
124
- color: var(--colors-white-color);
125
- }
126
-
127
- .textfield-input,
128
- .radiosfield-input,
129
- .checkboxesfield-input {
130
- display: flex;
131
- flex-wrap: wrap;
132
- gap: var(--components-field-horizontal-spacing);
133
-
134
- .checkbox {
135
- margin-top: 0;
136
- margin-bottom: 0;
137
- }
138
- }
139
-
140
- .textfield-input {
141
- &:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
142
- background-color: var(--colors-white-color);
143
-
144
- &::placeholder {
145
- color: var(--palettes-grey-400);
146
- }
147
-
148
- &:focus,
149
- &:hover {
150
- position: relative;
151
- z-index: 1;
152
- background-color: var(--colors-white-color);
153
- box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color));
154
-
155
- ~ .textfield-messages,
156
- ~ .radiosfield-messages,
157
- ~ .checkboxesfield-messages {
158
- transform: translateY(100%);
159
- }
160
- }
161
-
162
- &:focus {
163
- z-index: 4;
164
- box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color)), 0 0 0 4px var(--components-field-framed-color50);
165
- }
166
- }
167
- }
168
-
169
- .textfield-suffix,
170
- .radiosfield-suffix,
171
- .checkboxesfield-suffix {
172
- padding: var(--components-field-framed-side-padding);
173
- top: auto;
174
- z-index: 10;
175
- right: 0;
176
- bottom: 0;
177
-
178
- // todo: déplacer dans textfield
179
- ~ .textfield-input {
180
- padding-right: var(--components-field-framed-suffix-padding-right);
181
- }
182
- }
183
- }
184
-
185
- @mixin fieldFramedState($state) {
186
- @if ($state == 'error') {
187
- z-index: 3;
188
- box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
189
- background-color: var(--palettes-#{$state}-50);
190
-
191
- &:focus-within,
192
- &:hover {
193
- z-index: 4;
194
- }
195
- }
196
-
197
- &.mod-search,
198
- &.mod-autocomplete,
199
- &.mod-select {
200
- &::after {
201
- color: var(--palettes-#{$state}-700);
202
- }
203
- }
204
-
205
- .radiosfield-label,
206
- .checkboxesfield-label,
207
- .textfield-label {
208
- color: var(--palettes-#{$state}-700);
209
- }
210
-
211
- .textfield-input {
212
- &:hover {
213
- background-color: var(--palettes-#{$state}-50) !important;
214
- }
215
-
216
- &:focus {
217
- background-color: white !important;
218
- box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
219
- }
220
-
221
- &::placeholder {
222
- color: var(--palettes-grey-400);
223
- }
224
-
225
- @if ($state == 'error') {
226
- background-color: var(--palettes-#{$state}-50) !important;
227
- box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
228
-
229
- &::placeholder {
230
- color: var(--palettes-#{$state}-400);
231
- }
232
-
233
- &:hover {
234
- background-color: var(--palettes-#{$state}-100) !important;
235
- }
236
-
237
- &:focus {
238
- box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
239
- background-color: white !important;
240
- }
241
- }
242
- }
243
-
244
- &:hover {
245
- background-color: var(--palettes-#{$state}-50);
246
-
247
- .textfield-messages,
248
- .radiosfield-messages,
249
- .checkboxesfield-messages {
250
- transform: translateY(100%);
251
- }
252
- }
253
-
254
- &:focus-within {
255
- background-color: white;
256
- box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50);
257
-
258
- .textfield-messages,
259
- .radiosfield-messages,
260
- .checkboxesfield-messages {
261
- transform: translateY(100%);
262
- }
263
- }
264
- }
265
-
266
- @mixin framedSearch {
267
- &::after {
268
- color: var(--palettes-grey-600);
269
- padding: var(--components-field-framed-side-padding);
270
- bottom: 0;
271
- right: 0;
272
- z-index: 4;
273
- }
274
-
275
- .textfield {
276
- width: 100%;
277
- }
278
-
279
- .textfield-input {
280
- padding-right: var(--components-field-framed-suffix-padding-right);
281
- }
282
- }
283
-
284
- @mixin fieldFramedError($fieldname) {
285
- @if ($fieldname == 'textfield') {
286
- &:not(:disabled) {
287
- z-index: 3;
288
- box-shadow: form.fakeBorderOverlay(var(--palettes-error-700));
289
- background-color: var(--palettes-error-50);
290
- transition: background-color var(--commons-animations-durations-fast);
291
-
292
- ~ .textfield-label {
293
- color: var(--palettes-error-700);
294
- }
295
-
296
- &:hover {
297
- z-index: 4;
298
- background-color: var(--palettes-error-100);
299
-
300
- ~ .textfield-messages {
301
- transform: translateY(100%);
302
- }
303
- }
304
-
305
- &:focus {
306
- background-color: white;
307
- box-shadow: form.fakeBorderOverlay(var(--palettes-error-700)), 0 0 0 4px var(--palettes-error-50);
308
-
309
- ~ .textfield-messages {
310
- transform: translateY(100%);
311
- }
312
- }
313
- }
314
- }
315
-
316
- @if ($fieldname == 'radiosfield') {
317
- &:not(:disabled) {
318
- ~ .radio-label,
319
- ~ .checkbox-label {
320
- &::before {
321
- border-color: var(--palettes-error-700);
322
- }
323
- }
324
- }
325
- }
326
- }
327
-
328
- @mixin inputRow {
329
- @include field-row;
330
- }
331
-
332
- @mixin field-row {
333
- display: flex;
334
- flex-direction: row;
335
- flex-wrap: wrap;
336
- column-gap: var(--components-field-horizontal-spacing);
337
- }
1
+ @use '@lucca-front/scss/src/commons/utils/form';
2
+
3
+ @mixin inline {
4
+ margin-right: calc(var(--components-field-input-inline-margin) * 2);
5
+ display: inline-flex;
6
+ }
7
+
8
+ @mixin block {
9
+ width: 100%;
10
+ }
11
+
12
+ @mixin compact {
13
+ align-items: center;
14
+ flex-direction: row;
15
+ margin-bottom: var(--spacings-S);
16
+ width: calc(
17
+ var(--components-field-sizes-default) + var(--components-field-compact-label-right-margin) +
18
+ var(--components-field-compact-label-sizes-default)
19
+ );
20
+
21
+ .textfield-label,
22
+ .radiosfield-label,
23
+ .checkboxesfield-label {
24
+ margin-right: var(--components-field-compact-label-right-margin);
25
+ width: var(--components-field-compact-label-sizes-default);
26
+ flex: 0 0 auto;
27
+ margin-bottom: 0;
28
+ order: -1;
29
+ }
30
+
31
+ .textfield-messages,
32
+ .radiosfield-messages,
33
+ .checkboxesfield-messages {
34
+ max-width: var(--components-field-compact-label-sizes-default);
35
+ align-items: center;
36
+ display: inline-flex;
37
+ position: absolute;
38
+ bottom: 0;
39
+ top: 0;
40
+ left: 100%;
41
+ width: 100%;
42
+ margin: 0 0 0 var(--spacings-S);
43
+
44
+ &.mod-helper {
45
+ padding-left: calc(var(--components-field-compact-label-sizes-default) + var(--components-field-compact-label-right-margin));
46
+ bottom: auto;
47
+ max-width: 100%;
48
+ top: 100%;
49
+ left: 0;
50
+ right: 0;
51
+ }
52
+ }
53
+
54
+ .radiosfield-input,
55
+ .checkboxesfield-input {
56
+ display: flex;
57
+ flex-wrap: wrap;
58
+ }
59
+
60
+ .radio,
61
+ .checkbox {
62
+ margin-right: var(--spacings-M);
63
+ }
64
+ }
65
+
66
+ @mixin compactBlock {
67
+ width: 100%;
68
+ }
69
+
70
+ @mixin framed {
71
+ display: block;
72
+
73
+ fieldset {
74
+ border: 0;
75
+ padding: 0;
76
+ }
77
+
78
+ .textfield-messages,
79
+ .radiosfield-messages,
80
+ .checkboxesfield-messages {
81
+ transition-duration: var(--commons-animations-durations-standard);
82
+ transition-property: transform;
83
+ position: absolute;
84
+ text-align: center;
85
+ bottom: 0;
86
+ left: -1px;
87
+ right: 0;
88
+ transform: translateY(0);
89
+ z-index: 4;
90
+
91
+ > * {
92
+ display: block;
93
+ }
94
+ }
95
+
96
+ .textfield-messages-error,
97
+ .radiosfield-messages-error,
98
+ .checkboxesfield-messages-error {
99
+ background-color: var(--palettes-error-700);
100
+ color: var(--colors-white-color);
101
+ }
102
+
103
+ .textfield-messages-warning,
104
+ .radiosfield-messages-warning,
105
+ .checkboxesfield-messages-warning {
106
+ background-color: var(--palettes-warning-700);
107
+ color: var(--colors-white-color);
108
+ }
109
+
110
+ .textfield-messages-valid,
111
+ .radiosfield-messages-valid,
112
+ .checkboxesfield-messages-valid,
113
+ .textfield-messages-success,
114
+ .radiosfield-messages-success,
115
+ .checkboxesfield-messages-success {
116
+ background-color: var(--palettes-success-700);
117
+ color: var(--colors-white-color);
118
+ }
119
+
120
+ .textfield-messages-helper,
121
+ .radiosfield-messages-helper,
122
+ .checkboxesfield-messages-helper {
123
+ background-color: var(--palettes-grey-600);
124
+ color: var(--colors-white-color);
125
+ }
126
+
127
+ .textfield-input,
128
+ .radiosfield-input,
129
+ .checkboxesfield-input {
130
+ display: flex;
131
+ flex-wrap: wrap;
132
+ gap: var(--components-field-horizontal-spacing);
133
+
134
+ .checkbox {
135
+ margin-top: 0;
136
+ margin-bottom: 0;
137
+ }
138
+ }
139
+
140
+ .textfield-input {
141
+ &:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
142
+ background-color: var(--colors-white-color);
143
+
144
+ &::placeholder {
145
+ color: var(--palettes-grey-400);
146
+ }
147
+
148
+ &:focus,
149
+ &:hover {
150
+ position: relative;
151
+ z-index: 1;
152
+ background-color: var(--colors-white-color);
153
+ box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color));
154
+
155
+ ~ .textfield-messages,
156
+ ~ .radiosfield-messages,
157
+ ~ .checkboxesfield-messages {
158
+ transform: translateY(100%);
159
+ }
160
+ }
161
+
162
+ &:focus {
163
+ z-index: 4;
164
+ box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color)), 0 0 0 4px var(--components-field-framed-color50);
165
+ }
166
+ }
167
+ }
168
+
169
+ .textfield-suffix,
170
+ .radiosfield-suffix,
171
+ .checkboxesfield-suffix {
172
+ padding: var(--components-field-framed-side-padding);
173
+ top: auto;
174
+ z-index: 10;
175
+ right: 0;
176
+ bottom: 0;
177
+
178
+ // todo: déplacer dans textfield
179
+ ~ .textfield-input {
180
+ padding-right: var(--components-field-framed-suffix-padding-right);
181
+ }
182
+ }
183
+ }
184
+
185
+ @mixin fieldFramedState($state) {
186
+ @if ($state == 'error') {
187
+ z-index: 3;
188
+ box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
189
+ background-color: var(--palettes-#{$state}-50);
190
+
191
+ &:focus-within,
192
+ &:hover {
193
+ z-index: 4;
194
+ }
195
+ }
196
+
197
+ &.mod-search,
198
+ &.mod-autocomplete,
199
+ &.mod-select {
200
+ &::after {
201
+ color: var(--palettes-#{$state}-700);
202
+ }
203
+ }
204
+
205
+ .radiosfield-label,
206
+ .checkboxesfield-label,
207
+ .textfield-label {
208
+ color: var(--palettes-#{$state}-700);
209
+ }
210
+
211
+ .textfield-input {
212
+ &:hover {
213
+ background-color: var(--palettes-#{$state}-50) !important;
214
+ }
215
+
216
+ &:focus {
217
+ background-color: white !important;
218
+ box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
219
+ }
220
+
221
+ &::placeholder {
222
+ color: var(--palettes-grey-400);
223
+ }
224
+
225
+ @if ($state == 'error') {
226
+ background-color: var(--palettes-#{$state}-50) !important;
227
+ box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
228
+
229
+ &::placeholder {
230
+ color: var(--palettes-#{$state}-400);
231
+ }
232
+
233
+ &:hover {
234
+ background-color: var(--palettes-#{$state}-100) !important;
235
+ }
236
+
237
+ &:focus {
238
+ box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
239
+ background-color: white !important;
240
+ }
241
+ }
242
+ }
243
+
244
+ &:hover {
245
+ background-color: var(--palettes-#{$state}-50);
246
+
247
+ .textfield-messages,
248
+ .radiosfield-messages,
249
+ .checkboxesfield-messages {
250
+ transform: translateY(100%);
251
+ }
252
+ }
253
+
254
+ &:focus-within {
255
+ background-color: white;
256
+ box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50);
257
+
258
+ .textfield-messages,
259
+ .radiosfield-messages,
260
+ .checkboxesfield-messages {
261
+ transform: translateY(100%);
262
+ }
263
+ }
264
+ }
265
+
266
+ @mixin framedSearch {
267
+ &::after {
268
+ color: var(--palettes-grey-600);
269
+ padding: var(--components-field-framed-side-padding);
270
+ bottom: 0;
271
+ right: 0;
272
+ z-index: 4;
273
+ }
274
+
275
+ .textfield {
276
+ width: 100%;
277
+ }
278
+
279
+ .textfield-input {
280
+ padding-right: var(--components-field-framed-suffix-padding-right);
281
+ }
282
+ }
283
+
284
+ @mixin fieldFramedError($fieldname) {
285
+ @if ($fieldname == 'textfield') {
286
+ &:not(:disabled) {
287
+ z-index: 3;
288
+ box-shadow: form.fakeBorderOverlay(var(--palettes-error-700));
289
+ background-color: var(--palettes-error-50);
290
+ transition: background-color var(--commons-animations-durations-fast);
291
+
292
+ ~ .textfield-label {
293
+ color: var(--palettes-error-700);
294
+ }
295
+
296
+ &:hover {
297
+ z-index: 4;
298
+ background-color: var(--palettes-error-100);
299
+
300
+ ~ .textfield-messages {
301
+ transform: translateY(100%);
302
+ }
303
+ }
304
+
305
+ &:focus {
306
+ background-color: white;
307
+ box-shadow: form.fakeBorderOverlay(var(--palettes-error-700)), 0 0 0 4px var(--palettes-error-50);
308
+
309
+ ~ .textfield-messages {
310
+ transform: translateY(100%);
311
+ }
312
+ }
313
+ }
314
+ }
315
+
316
+ @if ($fieldname == 'radiosfield') {
317
+ &:not(:disabled) {
318
+ ~ .radio-label,
319
+ ~ .checkbox-label {
320
+ &::before {
321
+ border-color: var(--palettes-error-700);
322
+ }
323
+ }
324
+ }
325
+ }
326
+ }
327
+
328
+ @mixin inputRow {
329
+ @include field-row;
330
+ }
331
+
332
+ @mixin field-row {
333
+ display: flex;
334
+ flex-direction: row;
335
+ flex-wrap: wrap;
336
+ column-gap: var(--components-field-horizontal-spacing);
337
+ }