@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/navside/component.scss CHANGED
@@ -1,221 +1,221 @@
1
- @use '@lucca-front/scss/src/commons/utils/loading';
2
- @use '@lucca-front/scss/src/commons/utils/a11y';
3
-
4
- @mixin component($atRoot: 'without: rule') {
5
- bottom: 0;
6
- left: 0;
7
- top: 0;
8
- z-index: 100;
9
- position: fixed;
10
- display: flex;
11
- flex-direction: column;
12
- background-color: var(--components-navSide-fullwidth-palette-bg-color);
13
- padding-top: var(--components-navSide-padding-top);
14
- width: var(--commons-navSide-width);
15
-
16
- @at-root ($atRoot) {
17
- .navSide-wrapper {
18
- display: flex;
19
- flex-direction: column;
20
- flex-grow: 1;
21
- min-height: 0;
22
- }
23
-
24
- .navSide-mainSection {
25
- flex-grow: 1;
26
- display: block;
27
- height: 100%;
28
- overflow-x: hidden;
29
- overflow-y: auto;
30
- position: relative;
31
-
32
- scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
33
- scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
34
- scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
35
- scrollbar-shadow-color: var(--components-navSide-scrollbar-thumb-color);
36
- scrollbar-3dlight-color: var(--components-navSide-scrollbar-thumb-color);
37
-
38
- &::-webkit-scrollbar-track {
39
- background-color: var(--components-navSide-scrollbar-bg-color);
40
- }
41
-
42
- &::-webkit-scrollbar {
43
- width: var(--components-navSide-scrollbar-width);
44
- }
45
-
46
- &::-webkit-scrollbar-thumb {
47
- background-color: var(--components-navSide-scrollbar-thumb-color);
48
- border-radius: var(--components-navSide-scrollbar-border-radius);
49
- }
50
- }
51
-
52
- .navSide-scrollWrapper {
53
- width: var(--commons-navSide-width);
54
- padding: var(--spacings-XS);
55
- margin: 0;
56
- list-style-type: none;
57
- }
58
-
59
- .navSide-item,
60
- .navSide-item-subMenu-item,
61
- .navSide-item-subMenu-link {
62
- &:not(.mod-mobileToggle) {
63
- + .navSide-item,
64
- + .navSide-item-subMenu-item,
65
- + .navSide-item-subMenu-link {
66
- margin-top: var(--spacings-XXS);
67
- }
68
- }
69
- }
70
-
71
- .navSide-item-link,
72
- .navSide-item-subMenu-link {
73
- cursor: pointer;
74
- background-color: transparent;
75
- border: 0;
76
- text-align: left;
77
- width: 100%;
78
- height: 100%;
79
- align-items: center;
80
- display: flex;
81
- column-gap: .75rem;
82
- text-decoration: none;
83
- user-select: none;
84
- color: var(--components-navSide-fullwidth-palette-text);
85
- transition-property: background-color, color;
86
- transition-duration: var(--commons-animations-durations-fast);
87
- border-radius: var(--commons-borderRadius-M);
88
-
89
- &:focus-visible {
90
- @include a11y.focusVisible;
91
- }
92
-
93
- &:hover {
94
- background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
95
- color: var(--components-navSide-fullwidth-palette-hovered-text);
96
- }
97
-
98
- &:active {
99
- background-color: var(--palettes-navigation-900);
100
- }
101
- }
102
-
103
- .navSide-item-link {
104
- font-size: var(--sizes-S-fontSize);
105
- line-height: var(--sizes-S-lineHeight);
106
- padding: .75rem var(--spacings-S);
107
- font-weight: 600;
108
- }
109
-
110
- .numericBadge {
111
- margin-left: auto;
112
- }
113
-
114
- .navSide-item-alert { // deprecated
115
- font-size: var(--sizes-XS-fontSize);
116
- font-weight: 600;
117
- background-color: var(--components-navSide-fullwidth-palette-alert-color);
118
- color: var(--components-navSide-fullwidth-palette-alert-text);
119
- transition-duration: var(--commons-animations-durations-standard);
120
- transition-property: background-color;
121
- margin-left: auto;
122
- border-radius: 6px;
123
- height: var(--sizes-S-lineHeight);
124
- line-height: var(--sizes-S-lineHeight);
125
- margin-right: 0;
126
- padding: 0 var(--spacings-XXS);
127
- min-width: 1.25rem;
128
- text-align: center;
129
- flex-shrink: 0;
130
- }
131
-
132
- .navSide-item-arrow {
133
- transition-duration: var(--commons-animations-durations-fast);
134
- transition-property: transform;
135
- transition-timing-function: ease-out;
136
- margin-left: auto;
137
- display: grid;
138
- place-items: center;
139
- transform: rotate(0);
140
- font-size: var(--sizes-L-fontSize);
141
- flex-shrink: 0;
142
- width: 1rem;
143
- height: 1rem;
144
- transform-origin: 50% 50%;
145
- }
146
-
147
- .navSide-item-subMenu {
148
- font-size: var(--components-navSide-sub-font-size);
149
- margin: 0;
150
- padding: 0;
151
- list-style-type: none;
152
- overflow: visible;
153
- }
154
-
155
- .navSide-item-subMenu-link {
156
- font-weight: 400;
157
- padding: var(--spacings-XS) var(--spacings-S) var(--spacings-XS) var(--spacings-XL);
158
- font-size: var(--sizes-S-fontSize);
159
- line-height: var(--sizes-S-lineHeight);
160
- }
161
-
162
- .navSide-bottomSection {
163
- height: var(--components-navSide-bottom-section-height);
164
- width: var(--commons-navSide-width);
165
- z-index: 1;
166
-
167
- .navSide-item,
168
- .navSide-item-link {
169
- height: 100%;
170
- background-color: transparent;
171
- padding: 0.5em;
172
- }
173
-
174
- .navSide-item-link {
175
- background-color: var(--components-navSide-bottom-section-palette-bg-color);
176
- color: var(--components-navSide-bottom-section-palette-text);
177
- padding: 1em;
178
- box-sizing: border-box;
179
- cursor: pointer;
180
-
181
- &:hover {
182
- background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
183
- color: var(--components-navSide-bottom-section-palette-hovered-text);
184
- }
185
- }
186
-
187
- .navSide-item-alert { // deprecated
188
- background-color: var(--components-navSide-bottom-section-palette-alert-color);
189
- color: var(--components-navSide-bottom-section-palette-alert-text);
190
- }
191
- }
192
-
193
- .navSide-item-placeholder {
194
- align-items: center;
195
- display: flex;
196
- padding: 1em;
197
-
198
- &::before,
199
- &::after {
200
- display: block;
201
- content: '';
202
- }
203
-
204
- &::before {
205
- background-color: rgba(var(--colors-grey-900-rgb), 0.15);
206
- border-radius: 1em;
207
- height: 1em;
208
- width: 1em;
209
- }
210
-
211
- &::after {
212
- @include loading.gradient;
213
-
214
- border-radius: var(--commons-borderRadius-M);
215
- flex: 1 1 auto;
216
- height: 0.9em;
217
- margin-left: 1em;
218
- }
219
- }
220
- }
221
- }
1
+ @use '@lucca-front/scss/src/commons/utils/loading';
2
+ @use '@lucca-front/scss/src/commons/utils/a11y';
3
+
4
+ @mixin component($atRoot: 'without: rule') {
5
+ bottom: 0;
6
+ left: 0;
7
+ top: 0;
8
+ z-index: 100;
9
+ position: fixed;
10
+ display: flex;
11
+ flex-direction: column;
12
+ background-color: var(--components-navSide-fullwidth-palette-bg-color);
13
+ padding-top: var(--components-navSide-padding-top);
14
+ width: var(--commons-navSide-width);
15
+
16
+ @at-root ($atRoot) {
17
+ .navSide-wrapper {
18
+ display: flex;
19
+ flex-direction: column;
20
+ flex-grow: 1;
21
+ min-height: 0;
22
+ }
23
+
24
+ .navSide-mainSection {
25
+ flex-grow: 1;
26
+ display: block;
27
+ height: 100%;
28
+ overflow-x: hidden;
29
+ overflow-y: auto;
30
+ position: relative;
31
+
32
+ scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
33
+ scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
34
+ scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
35
+ scrollbar-shadow-color: var(--components-navSide-scrollbar-thumb-color);
36
+ scrollbar-3dlight-color: var(--components-navSide-scrollbar-thumb-color);
37
+
38
+ &::-webkit-scrollbar-track {
39
+ background-color: var(--components-navSide-scrollbar-bg-color);
40
+ }
41
+
42
+ &::-webkit-scrollbar {
43
+ width: var(--components-navSide-scrollbar-width);
44
+ }
45
+
46
+ &::-webkit-scrollbar-thumb {
47
+ background-color: var(--components-navSide-scrollbar-thumb-color);
48
+ border-radius: var(--components-navSide-scrollbar-border-radius);
49
+ }
50
+ }
51
+
52
+ .navSide-scrollWrapper {
53
+ width: var(--commons-navSide-width);
54
+ padding: var(--spacings-XS);
55
+ margin: 0;
56
+ list-style-type: none;
57
+ }
58
+
59
+ .navSide-item,
60
+ .navSide-item-subMenu-item,
61
+ .navSide-item-subMenu-link {
62
+ &:not(.mod-mobileToggle) {
63
+ + .navSide-item,
64
+ + .navSide-item-subMenu-item,
65
+ + .navSide-item-subMenu-link {
66
+ margin-top: var(--spacings-XXS);
67
+ }
68
+ }
69
+ }
70
+
71
+ .navSide-item-link,
72
+ .navSide-item-subMenu-link {
73
+ cursor: pointer;
74
+ background-color: transparent;
75
+ border: 0;
76
+ text-align: left;
77
+ width: 100%;
78
+ height: 100%;
79
+ align-items: center;
80
+ display: flex;
81
+ column-gap: .75rem;
82
+ text-decoration: none;
83
+ user-select: none;
84
+ color: var(--components-navSide-fullwidth-palette-text);
85
+ transition-property: background-color, color;
86
+ transition-duration: var(--commons-animations-durations-fast);
87
+ border-radius: var(--commons-borderRadius-M);
88
+
89
+ &:focus-visible {
90
+ @include a11y.focusVisible;
91
+ }
92
+
93
+ &:hover {
94
+ background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
95
+ color: var(--components-navSide-fullwidth-palette-hovered-text);
96
+ }
97
+
98
+ &:active {
99
+ background-color: var(--palettes-navigation-900);
100
+ }
101
+ }
102
+
103
+ .navSide-item-link {
104
+ font-size: var(--sizes-S-fontSize);
105
+ line-height: var(--sizes-S-lineHeight);
106
+ padding: .75rem var(--spacings-S);
107
+ font-weight: 600;
108
+ }
109
+
110
+ .numericBadge {
111
+ margin-left: auto;
112
+ }
113
+
114
+ .navSide-item-alert { // deprecated
115
+ font-size: var(--sizes-XS-fontSize);
116
+ font-weight: 600;
117
+ background-color: var(--components-navSide-fullwidth-palette-alert-color);
118
+ color: var(--components-navSide-fullwidth-palette-alert-text);
119
+ transition-duration: var(--commons-animations-durations-standard);
120
+ transition-property: background-color;
121
+ margin-left: auto;
122
+ border-radius: 6px;
123
+ height: var(--sizes-S-lineHeight);
124
+ line-height: var(--sizes-S-lineHeight);
125
+ margin-right: 0;
126
+ padding: 0 var(--spacings-XXS);
127
+ min-width: 1.25rem;
128
+ text-align: center;
129
+ flex-shrink: 0;
130
+ }
131
+
132
+ .navSide-item-arrow {
133
+ transition-duration: var(--commons-animations-durations-fast);
134
+ transition-property: transform;
135
+ transition-timing-function: ease-out;
136
+ margin-left: auto;
137
+ display: grid;
138
+ place-items: center;
139
+ transform: rotate(0);
140
+ font-size: var(--sizes-L-fontSize);
141
+ flex-shrink: 0;
142
+ width: 1rem;
143
+ height: 1rem;
144
+ transform-origin: 50% 50%;
145
+ }
146
+
147
+ .navSide-item-subMenu {
148
+ font-size: var(--components-navSide-sub-font-size);
149
+ margin: 0;
150
+ padding: 0;
151
+ list-style-type: none;
152
+ overflow: visible;
153
+ }
154
+
155
+ .navSide-item-subMenu-link {
156
+ font-weight: 400;
157
+ padding: var(--spacings-XS) var(--spacings-S) var(--spacings-XS) var(--spacings-XL);
158
+ font-size: var(--sizes-S-fontSize);
159
+ line-height: var(--sizes-S-lineHeight);
160
+ }
161
+
162
+ .navSide-bottomSection {
163
+ height: var(--components-navSide-bottom-section-height);
164
+ width: var(--commons-navSide-width);
165
+ z-index: 1;
166
+
167
+ .navSide-item,
168
+ .navSide-item-link {
169
+ height: 100%;
170
+ background-color: transparent;
171
+ padding: 0.5em;
172
+ }
173
+
174
+ .navSide-item-link {
175
+ background-color: var(--components-navSide-bottom-section-palette-bg-color);
176
+ color: var(--components-navSide-bottom-section-palette-text);
177
+ padding: 1em;
178
+ box-sizing: border-box;
179
+ cursor: pointer;
180
+
181
+ &:hover {
182
+ background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
183
+ color: var(--components-navSide-bottom-section-palette-hovered-text);
184
+ }
185
+ }
186
+
187
+ .navSide-item-alert { // deprecated
188
+ background-color: var(--components-navSide-bottom-section-palette-alert-color);
189
+ color: var(--components-navSide-bottom-section-palette-alert-text);
190
+ }
191
+ }
192
+
193
+ .navSide-item-placeholder {
194
+ align-items: center;
195
+ display: flex;
196
+ padding: 1em;
197
+
198
+ &::before,
199
+ &::after {
200
+ display: block;
201
+ content: '';
202
+ }
203
+
204
+ &::before {
205
+ background-color: rgba(var(--colors-grey-900-rgb), 0.15);
206
+ border-radius: 1em;
207
+ height: 1em;
208
+ width: 1em;
209
+ }
210
+
211
+ &::after {
212
+ @include loading.gradient;
213
+
214
+ border-radius: var(--commons-borderRadius-M);
215
+ flex: 1 1 auto;
216
+ height: 0.9em;
217
+ margin-left: 1em;
218
+ }
219
+ }
220
+ }
221
+ }
package/src/components/navside/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/navside/index.scss CHANGED
@@ -1,99 +1,99 @@
1
- @use '@lucca-front/scss/src/commons/utils/media';
2
- @use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
3
- @use 'exports' as *;
4
-
5
- .navSide {
6
- @include vars;
7
- @include component;
8
-
9
- &.mod-withBanner {
10
- @include banner;
11
- }
12
-
13
- &.mod-compact {
14
- @include media.min('S') {
15
- @include compact;
16
-
17
- .navSide-item-link {
18
- &:hover {
19
- @include compactHover;
20
- }
21
-
22
- &:is(.is-active, .active) {
23
- @include compactActive;
24
- }
25
- }
26
- }
27
- }
28
-
29
- @include media.max('S') {
30
- @include mobile;
31
-
32
- &:not(.is-open, .open) {
33
- .navSide-item {
34
- &:not(.mod-mobileToggle) {
35
- @include mobileHidden;
36
- }
37
- }
38
- }
39
-
40
- &.mod-withBanner {
41
- .navSide-item {
42
- &.mod-mobileToggle {
43
- @include banner;
44
- }
45
- }
46
- }
47
-
48
- &:is(.is-open, .open) {
49
- @include mobileOpen;
50
-
51
- &.mod-withBanner {
52
- @include mobileOpenBanner;
53
- }
54
- }
55
- }
56
- }
57
-
58
- .navSide-item {
59
- &:not(.is-open) {
60
- @include notOpen;
61
- }
62
-
63
- &.mod-mobileToggle {
64
- @include mobileToggle;
65
- }
66
-
67
- &:is(.is-open, .open) {
68
- @include expanded;
69
-
70
- .navSide-item-subMenu-link {
71
- &:is(:hover) {
72
- @include sublinkHover;
73
- }
74
-
75
- &:is(.is-active, .active) {
76
- @include sublinkActive;
77
- }
78
- }
79
- }
80
- }
81
-
82
- .navSide-item-subMenu-link,
83
- .navSide-item-link {
84
- &:is(.is-active, .active) {
85
- @include active;
86
- }
87
-
88
- &:is([aria-expanded='true']) {
89
- @include expanded;
90
- }
91
- }
92
-
93
- html {
94
- &:is(.hasMenu, .withMenu) {
95
- @include media.max('S') {
96
- @include overlay;
97
- }
98
- }
99
- }
1
+ @use '@lucca-front/scss/src/commons/utils/media';
2
+ @use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
3
+ @use 'exports' as *;
4
+
5
+ .navSide {
6
+ @include vars;
7
+ @include component;
8
+
9
+ &.mod-withBanner {
10
+ @include banner;
11
+ }
12
+
13
+ &.mod-compact {
14
+ @include media.min('S') {
15
+ @include compact;
16
+
17
+ .navSide-item-link {
18
+ &:hover {
19
+ @include compactHover;
20
+ }
21
+
22
+ &:is(.is-active, .active) {
23
+ @include compactActive;
24
+ }
25
+ }
26
+ }
27
+ }
28
+
29
+ @include media.max('S') {
30
+ @include mobile;
31
+
32
+ &:not(.is-open, .open) {
33
+ .navSide-item {
34
+ &:not(.mod-mobileToggle) {
35
+ @include mobileHidden;
36
+ }
37
+ }
38
+ }
39
+
40
+ &.mod-withBanner {
41
+ .navSide-item {
42
+ &.mod-mobileToggle {
43
+ @include banner;
44
+ }
45
+ }
46
+ }
47
+
48
+ &:is(.is-open, .open) {
49
+ @include mobileOpen;
50
+
51
+ &.mod-withBanner {
52
+ @include mobileOpenBanner;
53
+ }
54
+ }
55
+ }
56
+ }
57
+
58
+ .navSide-item {
59
+ &:not(.is-open) {
60
+ @include notOpen;
61
+ }
62
+
63
+ &.mod-mobileToggle {
64
+ @include mobileToggle;
65
+ }
66
+
67
+ &:is(.is-open, .open) {
68
+ @include expanded;
69
+
70
+ .navSide-item-subMenu-link {
71
+ &:is(:hover) {
72
+ @include sublinkHover;
73
+ }
74
+
75
+ &:is(.is-active, .active) {
76
+ @include sublinkActive;
77
+ }
78
+ }
79
+ }
80
+ }
81
+
82
+ .navSide-item-subMenu-link,
83
+ .navSide-item-link {
84
+ &:is(.is-active, .active) {
85
+ @include active;
86
+ }
87
+
88
+ &:is([aria-expanded='true']) {
89
+ @include expanded;
90
+ }
91
+ }
92
+
93
+ html {
94
+ &:is(.hasMenu, .withMenu) {
95
+ @include media.max('S') {
96
+ @include overlay;
97
+ }
98
+ }
99
+ }