@lucca-front/scss 16.4.2 → 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 (398) hide show
  1. package/.jenkins/npmrc +1 -0
  2. package/dockerRegistry-514df42c-5e08-4017-8742-cea13d9a7985.env +1 -0
  3. package/package.json +28 -28
  4. package/src/commons/base.scss +105 -105
  5. package/src/commons/config.scss +339 -339
  6. package/src/commons/core.scss +107 -107
  7. package/src/commons/exports.scss +3 -3
  8. package/src/commons/index.scss +6 -6
  9. package/src/commons/utils/a11y.scss +21 -21
  10. package/src/commons/utils/form.scss +19 -19
  11. package/src/commons/utils/index.scss +9 -9
  12. package/src/commons/utils/loading.scss +45 -45
  13. package/src/commons/utils/media.scss +35 -35
  14. package/src/commons/utils/reset.scss +39 -39
  15. package/src/commons/utils/text.scss +5 -5
  16. package/src/commons/vars.scss +55 -55
  17. package/src/components/actionIcon/component.scss +40 -40
  18. package/src/components/actionIcon/exports.scss +4 -4
  19. package/src/components/actionIcon/index.scss +38 -38
  20. package/src/components/actionIcon/mods.scss +68 -68
  21. package/src/components/actionIcon/states.scss +24 -24
  22. package/src/components/actionIcon/vars.scss +2 -2
  23. package/src/components/box/component.scss +18 -18
  24. package/src/components/box/exports.scss +4 -4
  25. package/src/components/box/index.scss +19 -19
  26. package/src/components/box/mods.scss +60 -60
  27. package/src/components/box/vars.scss +8 -8
  28. package/src/components/breadcrumbs/component.scss +51 -51
  29. package/src/components/breadcrumbs/exports.scss +4 -4
  30. package/src/components/breadcrumbs/index.scss +16 -16
  31. package/src/components/breadcrumbs/mods.scss +27 -27
  32. package/src/components/breadcrumbs/states.scss +16 -16
  33. package/src/components/breadcrumbs/vars.scss +2 -2
  34. package/src/components/button/component.scss +52 -52
  35. package/src/components/button/exports.scss +4 -4
  36. package/src/components/button/index.scss +98 -98
  37. package/src/components/button/mods.scss +157 -157
  38. package/src/components/button/states.scss +96 -96
  39. package/src/components/button/vars.scss +7 -7
  40. package/src/components/buttonGroup/component.scss +86 -86
  41. package/src/components/buttonGroup/exports.scss +4 -4
  42. package/src/components/buttonGroup/index.scss +14 -14
  43. package/src/components/buttonGroup/mods.scss +43 -43
  44. package/src/components/buttonGroup/vars.scss +2 -2
  45. package/src/components/callout/component.scss +61 -61
  46. package/src/components/callout/exports.scss +4 -4
  47. package/src/components/callout/index.scss +14 -14
  48. package/src/components/callout/mods.scss +21 -21
  49. package/src/components/callout/vars.scss +2 -2
  50. package/src/components/card/component.scss +48 -48
  51. package/src/components/card/exports.scss +4 -4
  52. package/src/components/card/index.scss +26 -26
  53. package/src/components/card/mods.scss +42 -42
  54. package/src/components/card/states.scss +21 -21
  55. package/src/components/card/vars.scss +9 -9
  56. package/src/components/checkbox/component.scss +94 -94
  57. package/src/components/checkbox/exports.scss +4 -4
  58. package/src/components/checkbox/index.scss +48 -48
  59. package/src/components/checkbox/mods.scss +35 -35
  60. package/src/components/checkbox/states.scss +53 -53
  61. package/src/components/checkbox/vars.scss +5 -5
  62. package/src/components/checkboxField/component.scss +75 -75
  63. package/src/components/checkboxField/exports.scss +4 -4
  64. package/src/components/checkboxField/index.scss +72 -72
  65. package/src/components/checkboxField/mods.scss +9 -9
  66. package/src/components/checkboxField/states.scss +122 -122
  67. package/src/components/checkboxField/vars.scss +6 -6
  68. package/src/components/chip/component.scss +56 -56
  69. package/src/components/chip/exports.scss +4 -4
  70. package/src/components/chip/index.scss +22 -22
  71. package/src/components/chip/mods.scss +29 -29
  72. package/src/components/chip/states.scss +8 -8
  73. package/src/components/chip/vars.scss +2 -2
  74. package/src/components/clear/component.scss +33 -33
  75. package/src/components/clear/exports.scss +4 -4
  76. package/src/components/clear/index.scss +19 -19
  77. package/src/components/clear/mods.scss +17 -17
  78. package/src/components/clear/states.scss +4 -4
  79. package/src/components/clear/vars.scss +4 -4
  80. package/src/components/code/component.scss +11 -11
  81. package/src/components/code/exports.scss +4 -4
  82. package/src/components/code/index.scss +10 -10
  83. package/src/components/code/mods.scss +6 -6
  84. package/src/components/code/vars.scss +2 -2
  85. package/src/components/collapse/component.scss +33 -33
  86. package/src/components/collapse/exports.scss +4 -4
  87. package/src/components/collapse/index.scss +14 -14
  88. package/src/components/collapse/states.scss +13 -13
  89. package/src/components/collapse/vars.scss +2 -2
  90. package/src/components/container/component.scss +5 -5
  91. package/src/components/container/exports.scss +4 -4
  92. package/src/components/container/index.scss +34 -34
  93. package/src/components/container/mods.scss +33 -33
  94. package/src/components/container/vars.scss +4 -4
  95. package/src/components/contentSection/component.scss +3 -3
  96. package/src/components/contentSection/exports.scss +4 -4
  97. package/src/components/contentSection/index.scss +6 -6
  98. package/src/components/contentSection/vars.scss +3 -3
  99. package/src/components/divider/component.scss +8 -8
  100. package/src/components/divider/exports.scss +4 -4
  101. package/src/components/divider/index.scss +6 -6
  102. package/src/components/divider/vars.scss +2 -2
  103. package/src/components/emptyState/component.scss +16 -16
  104. package/src/components/emptyState/exports.scss +4 -4
  105. package/src/components/emptyState/index.scss +6 -6
  106. package/src/components/emptyState/vars.scss +2 -2
  107. package/src/components/errorPage/component.scss +61 -61
  108. package/src/components/errorPage/exports.scss +4 -4
  109. package/src/components/errorPage/index.scss +11 -11
  110. package/src/components/errorPage/vars.scss +4 -4
  111. package/src/components/field/component.scss +112 -112
  112. package/src/components/field/exports.scss +4 -4
  113. package/src/components/field/index.scss +125 -125
  114. package/src/components/field/mods.scss +337 -337
  115. package/src/components/field/states.scss +184 -184
  116. package/src/components/field/vars.scss +37 -37
  117. package/src/components/fieldset/component.scss +48 -48
  118. package/src/components/fieldset/exports.scss +4 -4
  119. package/src/components/fieldset/index.scss +14 -14
  120. package/src/components/fieldset/mods.scss +17 -17
  121. package/src/components/fieldset/vars.scss +4 -4
  122. package/src/components/file/component.scss +122 -122
  123. package/src/components/file/exports.scss +4 -4
  124. package/src/components/file/index.scss +44 -44
  125. package/src/components/file/mods.scss +66 -66
  126. package/src/components/file/states.scss +97 -97
  127. package/src/components/file/vars.scss +2 -2
  128. package/src/components/filters/component.scss +38 -38
  129. package/src/components/filters/exports.scss +4 -4
  130. package/src/components/filters/index.scss +24 -24
  131. package/src/components/filters/mods.scss +21 -21
  132. package/src/components/filters/vars.scss +5 -5
  133. package/src/components/footer/component.scss +36 -36
  134. package/src/components/footer/exports.scss +4 -4
  135. package/src/components/footer/index.scss +10 -10
  136. package/src/components/footer/mods.scss +4 -4
  137. package/src/components/footer/vars.scss +2 -2
  138. package/src/components/form/component.scss +97 -97
  139. package/src/components/form/exports.scss +4 -4
  140. package/src/components/form/index.scss +118 -118
  141. package/src/components/form/mods.scss +266 -266
  142. package/src/components/form/states.scss +24 -24
  143. package/src/components/form/vars.scss +19 -19
  144. package/src/components/formLabel/component.scss +21 -21
  145. package/src/components/formLabel/exports.scss +4 -4
  146. package/src/components/formLabel/index.scss +18 -18
  147. package/src/components/formLabel/mods.scss +19 -19
  148. package/src/components/formLabel/states.scss +8 -8
  149. package/src/components/formLabel/vars.scss +7 -7
  150. package/src/components/gauge/component.scss +21 -21
  151. package/src/components/gauge/exports.scss +4 -4
  152. package/src/components/gauge/index.scss +14 -14
  153. package/src/components/gauge/mods.scss +14 -14
  154. package/src/components/gauge/vars.scss +3 -3
  155. package/src/components/grid/component.scss +68 -68
  156. package/src/components/grid/exports.scss +4 -4
  157. package/src/components/grid/index.scss +20 -20
  158. package/src/components/grid/mods.scss +17 -17
  159. package/src/components/grid/vars.scss +18 -18
  160. package/src/components/gridLegacy/component.scss +34 -34
  161. package/src/components/gridLegacy/exports.scss +4 -4
  162. package/src/components/gridLegacy/index.scss +94 -94
  163. package/src/components/gridLegacy/mods.scss +46 -46
  164. package/src/components/gridLegacy/vars.scss +2 -2
  165. package/src/components/header/component.scss +72 -72
  166. package/src/components/header/exports.scss +4 -4
  167. package/src/components/header/index.scss +28 -28
  168. package/src/components/header/mods.scss +34 -34
  169. package/src/components/header/states.scss +13 -13
  170. package/src/components/header/vars.scss +5 -5
  171. package/src/components/index.scss +75 -75
  172. package/src/components/inlineMessage/component.scss +13 -13
  173. package/src/components/inlineMessage/exports.scss +4 -4
  174. package/src/components/inlineMessage/index.scss +22 -22
  175. package/src/components/inlineMessage/mods.scss +5 -5
  176. package/src/components/inlineMessage/states.scss +41 -41
  177. package/src/components/inlineMessage/vars.scss +7 -7
  178. package/src/components/keyframe/exports.scss +4 -4
  179. package/src/components/keyframe/index.scss +1 -1
  180. package/src/components/keyframe/mods.scss +184 -184
  181. package/src/components/label/component.scss +19 -19
  182. package/src/components/label/exports.scss +4 -4
  183. package/src/components/label/index.scss +18 -18
  184. package/src/components/label/mods.scss +16 -16
  185. package/src/components/label/vars.scss +12 -12
  186. package/src/components/layout/component.scss +172 -172
  187. package/src/components/layout/exports.scss +4 -4
  188. package/src/components/layout/index.scss +68 -68
  189. package/src/components/layout/mods.scss +109 -109
  190. package/src/components/layout/states.scss +26 -26
  191. package/src/components/layout/vars.scss +3 -3
  192. package/src/components/link/component.scss +22 -22
  193. package/src/components/link/exports.scss +4 -4
  194. package/src/components/link/index.scss +18 -18
  195. package/src/components/link/mods.scss +16 -16
  196. package/src/components/link/states.scss +4 -4
  197. package/src/components/link/vars.scss +2 -2
  198. package/src/components/list/component.scss +48 -48
  199. package/src/components/list/exports.scss +4 -4
  200. package/src/components/list/index.scss +20 -20
  201. package/src/components/list/mods.scss +53 -53
  202. package/src/components/list/vars.scss +5 -5
  203. package/src/components/loading/component.scss +15 -15
  204. package/src/components/loading/exports.scss +4 -4
  205. package/src/components/loading/index.scss +30 -30
  206. package/src/components/loading/mods.scss +78 -78
  207. package/src/components/loading/vars.scss +3 -3
  208. package/src/components/main/component.scss +9 -9
  209. package/src/components/main/exports.scss +4 -4
  210. package/src/components/main/index.scss +32 -32
  211. package/src/components/main/mods.scss +21 -21
  212. package/src/components/main/states.scss +8 -8
  213. package/src/components/main/vars.scss +2 -2
  214. package/src/components/menu/component.scss +102 -102
  215. package/src/components/menu/exports.scss +4 -4
  216. package/src/components/menu/index.scss +26 -26
  217. package/src/components/menu/mods.scss +25 -25
  218. package/src/components/menu/states.scss +37 -37
  219. package/src/components/menu/vars.scss +3 -3
  220. package/src/components/mobileHeader/component.scss +30 -30
  221. package/src/components/mobileHeader/exports.scss +4 -4
  222. package/src/components/mobileHeader/index.scss +10 -10
  223. package/src/components/mobileHeader/mods.scss +23 -23
  224. package/src/components/mobileHeader/vars.scss +3 -3
  225. package/src/components/mobileNavigation/component.scss +56 -56
  226. package/src/components/mobileNavigation/exports.scss +4 -4
  227. package/src/components/mobileNavigation/index.scss +10 -10
  228. package/src/components/mobileNavigation/mods.scss +5 -5
  229. package/src/components/mobileNavigation/vars.scss +2 -2
  230. package/src/components/navside/component.scss +221 -221
  231. package/src/components/navside/exports.scss +4 -4
  232. package/src/components/navside/index.scss +99 -99
  233. package/src/components/navside/mods.scss +138 -138
  234. package/src/components/navside/states.scss +63 -63
  235. package/src/components/navside/vars.scss +55 -55
  236. package/src/components/newBadge/component.scss +10 -10
  237. package/src/components/newBadge/exports.scss +4 -4
  238. package/src/components/newBadge/index.scss +6 -6
  239. package/src/components/newBadge/vars.scss +2 -2
  240. package/src/components/notchBox/component.scss +83 -83
  241. package/src/components/notchBox/exports.scss +4 -4
  242. package/src/components/notchBox/index.scss +22 -22
  243. package/src/components/notchBox/mods.scss +224 -224
  244. package/src/components/notchBox/vars.scss +22 -22
  245. package/src/components/numericBadge/component.scss +17 -17
  246. package/src/components/numericBadge/exports.scss +4 -4
  247. package/src/components/numericBadge/index.scss +14 -14
  248. package/src/components/numericBadge/mods.scss +13 -13
  249. package/src/components/numericBadge/vars.scss +8 -8
  250. package/src/components/pageHeader/component.scss +58 -58
  251. package/src/components/pageHeader/exports.scss +4 -4
  252. package/src/components/pageHeader/index.scss +18 -18
  253. package/src/components/pageHeader/mods.scss +27 -27
  254. package/src/components/pageHeader/vars.scss +3 -3
  255. package/src/components/pagination/component.scss +39 -39
  256. package/src/components/pagination/exports.scss +4 -4
  257. package/src/components/pagination/index.scss +16 -16
  258. package/src/components/pagination/mods.scss +4 -4
  259. package/src/components/pagination/states.scss +5 -5
  260. package/src/components/pagination/vars.scss +2 -2
  261. package/src/components/progress/component.scss +42 -42
  262. package/src/components/progress/exports.scss +4 -4
  263. package/src/components/progress/index.scss +18 -18
  264. package/src/components/progress/mods.scss +19 -19
  265. package/src/components/progress/states.scss +21 -21
  266. package/src/components/progress/vars.scss +8 -8
  267. package/src/components/radio/component.scss +93 -93
  268. package/src/components/radio/exports.scss +4 -4
  269. package/src/components/radio/index.scss +25 -25
  270. package/src/components/radio/mods.scss +32 -32
  271. package/src/components/radio/states.scss +30 -30
  272. package/src/components/radio/vars.scss +7 -7
  273. package/src/components/radioButtons/component.scss +84 -84
  274. package/src/components/radioButtons/exports.scss +4 -4
  275. package/src/components/radioButtons/index.scss +20 -20
  276. package/src/components/radioButtons/mods.scss +11 -11
  277. package/src/components/radioButtons/states.scss +13 -13
  278. package/src/components/radioButtons/vars.scss +5 -5
  279. package/src/components/radioField/component.scss +99 -99
  280. package/src/components/radioField/exports.scss +4 -4
  281. package/src/components/radioField/index.scss +40 -40
  282. package/src/components/radioField/mods.scss +41 -41
  283. package/src/components/radioField/states.scss +122 -122
  284. package/src/components/radioField/vars.scss +7 -7
  285. package/src/components/section/component.scss +5 -5
  286. package/src/components/section/exports.scss +4 -4
  287. package/src/components/section/index.scss +19 -19
  288. package/src/components/section/mods.scss +13 -13
  289. package/src/components/section/vars.scss +2 -2
  290. package/src/components/skeleton/component.scss +17 -17
  291. package/src/components/skeleton/exports.scss +4 -4
  292. package/src/components/skeleton/index.scss +26 -26
  293. package/src/components/skeleton/mods.scss +27 -27
  294. package/src/components/skeleton/states.scss +84 -84
  295. package/src/components/skeleton/vars.scss +8 -8
  296. package/src/components/sortableList/component.scss +68 -68
  297. package/src/components/sortableList/exports.scss +4 -4
  298. package/src/components/sortableList/index.scss +16 -16
  299. package/src/components/sortableList/mods.scss +19 -19
  300. package/src/components/sortableList/vars.scss +8 -8
  301. package/src/components/status/component.scss +47 -47
  302. package/src/components/status/exports.scss +4 -4
  303. package/src/components/status/index.scss +18 -18
  304. package/src/components/status/states.scss +17 -17
  305. package/src/components/status/vars.scss +2 -2
  306. package/src/components/statusBadge/component.scss +27 -27
  307. package/src/components/statusBadge/exports.scss +4 -4
  308. package/src/components/statusBadge/index.scss +10 -10
  309. package/src/components/statusBadge/mods.scss +6 -6
  310. package/src/components/statusBadge/vars.scss +6 -6
  311. package/src/components/switch/component.scss +67 -67
  312. package/src/components/switch/exports.scss +4 -4
  313. package/src/components/switch/index.scss +48 -48
  314. package/src/components/switch/mods.scss +15 -15
  315. package/src/components/switch/states.scss +91 -91
  316. package/src/components/switch/vars.scss +12 -12
  317. package/src/components/switchField/component.scss +95 -95
  318. package/src/components/switchField/exports.scss +4 -4
  319. package/src/components/switchField/index.scss +32 -32
  320. package/src/components/switchField/mods.scss +11 -11
  321. package/src/components/switchField/states.scss +80 -80
  322. package/src/components/switchField/vars.scss +7 -7
  323. package/src/components/table/component.scss +75 -75
  324. package/src/components/table/exports.scss +4 -4
  325. package/src/components/table/index.scss +102 -102
  326. package/src/components/table/mods.scss +312 -312
  327. package/src/components/table/vars.scss +8 -8
  328. package/src/components/tableFixed/exports.scss +4 -4
  329. package/src/components/tableFixed/index.scss +21 -21
  330. package/src/components/tableFixed/mods.scss +5 -5
  331. package/src/components/tableOfContent/component.scss +29 -29
  332. package/src/components/tableOfContent/exports.scss +4 -4
  333. package/src/components/tableOfContent/index.scss +42 -42
  334. package/src/components/tableOfContent/states.scss +41 -41
  335. package/src/components/tableOfContent/vars.scss +14 -14
  336. package/src/components/tableSorted/exports.scss +4 -4
  337. package/src/components/tableSorted/index.scss +58 -58
  338. package/src/components/tableSorted/mods.scss +93 -93
  339. package/src/components/tableSorted/states.scss +167 -167
  340. package/src/components/tableSticked/exports.scss +4 -4
  341. package/src/components/tableSticked/index.scss +70 -70
  342. package/src/components/tableSticked/mods.scss +212 -212
  343. package/src/components/tableSticked/vars.scss +8 -8
  344. package/src/components/tag/component.scss +13 -13
  345. package/src/components/tag/exports.scss +4 -4
  346. package/src/components/tag/index.scss +18 -18
  347. package/src/components/tag/mods.scss +19 -19
  348. package/src/components/tag/vars.scss +2 -2
  349. package/src/components/textField/component.scss +112 -112
  350. package/src/components/textField/exports.scss +4 -4
  351. package/src/components/textField/index.scss +22 -22
  352. package/src/components/textField/mods.scss +34 -34
  353. package/src/components/textField/states.scss +15 -15
  354. package/src/components/textField/vars.scss +11 -11
  355. package/src/components/textfields/component.scss +77 -77
  356. package/src/components/textfields/exports.scss +4 -4
  357. package/src/components/textfields/index.scss +402 -402
  358. package/src/components/textfields/mods.scss +648 -648
  359. package/src/components/textfields/states.scss +229 -229
  360. package/src/components/textfields/vars.scss +41 -41
  361. package/src/components/timeline/component.scss +81 -81
  362. package/src/components/timeline/exports.scss +4 -4
  363. package/src/components/timeline/index.scss +101 -101
  364. package/src/components/timeline/mods.scss +384 -384
  365. package/src/components/timeline/states.scss +22 -22
  366. package/src/components/timeline/vars.scss +3 -3
  367. package/src/components/timepicker/component.scss +91 -91
  368. package/src/components/timepicker/exports.scss +4 -4
  369. package/src/components/timepicker/index.scss +14 -14
  370. package/src/components/timepicker/mods.scss +4 -4
  371. package/src/components/timepicker/states.scss +13 -13
  372. package/src/components/timepicker/vars.scss +5 -5
  373. package/src/components/title/component.scss +15 -15
  374. package/src/components/title/exports.scss +4 -4
  375. package/src/components/title/index.scss +39 -39
  376. package/src/components/title/mods.scss +48 -48
  377. package/src/components/title/vars.scss +2 -2
  378. package/src/components/titleSection/component.scss +34 -34
  379. package/src/components/titleSection/exports.scss +4 -4
  380. package/src/components/titleSection/index.scss +25 -25
  381. package/src/components/titleSection/mods.scss +10 -10
  382. package/src/components/titleSection/vars.scss +2 -2
  383. package/src/components/toast/component.scss +73 -73
  384. package/src/components/toast/exports.scss +4 -4
  385. package/src/components/toast/index.scss +14 -14
  386. package/src/components/toast/mods.scss +95 -95
  387. package/src/components/toast/vars.scss +11 -11
  388. package/src/components/util/exports.scss +4 -4
  389. package/src/components/util/index.scss +329 -329
  390. package/src/components/util/mods.scss +3 -3
  391. package/src/components/verticalNavigation/component.scss +55 -55
  392. package/src/components/verticalNavigation/exports.scss +4 -4
  393. package/src/components/verticalNavigation/index.scss +30 -30
  394. package/src/components/verticalNavigation/mods.scss +9 -9
  395. package/src/components/verticalNavigation/states.scss +28 -28
  396. package/src/components/verticalNavigation/vars.scss +5 -5
  397. package/src/main-all.scss +2 -2
  398. package/src/main.scss +1 -1
package/src/components/navside/mods.scss CHANGED
@@ -1,138 +1,138 @@
1
- @use '@lucca-front/scss/src/commons/utils/a11y';
2
-
3
- @mixin compact {
4
- background-color: var(--components-navSide-compact-palette-bg-color);
5
- width: var(--commons-navSide-compact-width);
6
- text-align: center;
7
-
8
- .navSide-mainSection,
9
- .navSide-scrollWrapper {
10
- width: var(--commons-navSide-compact-width);
11
- }
12
-
13
- .navSide-item-link {
14
- color: var(--components-navSide-compact-palette-text);
15
- font-size: var(--components-navSide-compact-font-size);
16
- padding: .75rem var(--spacings-XS);
17
- flex-direction: column;
18
- justify-content: center;
19
- position: relative;
20
- text-align: center;
21
- row-gap: var(--spacings-XXS);
22
- }
23
-
24
- .navSide-item-arrow,
25
- .navSide-item-subMenu {
26
- display: none;
27
- }
28
-
29
- .navSide-item-alert { // deprecated
30
- background-color: var(--components-navSide-compact-palette-alert-color);
31
- color: var(--components-navSide-compact-palette-alert-text);
32
- padding: 0 var(--spacings-XS);
33
- margin: auto;
34
- position: relative;
35
- }
36
-
37
- .navSide-item-placeholder {
38
- flex-direction: column;
39
-
40
- &::before {
41
- height: 1.5em;
42
- width: 1.5em;
43
- }
44
-
45
- &::after {
46
- margin-left: 0;
47
- margin-top: .75rem;
48
- width: 100%;
49
- }
50
- }
51
-
52
- .navSide-bottomSection {
53
- width: var(--commons-navSide-compact-width);
54
-
55
- .navSide-item-link {
56
- background-color: var(--components-navSide-bottom-section-palette-bg-color);
57
- color: var(--components-navSide-bottom-section-palette-text);
58
- flex-direction: row;
59
-
60
- &:hover {
61
- background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
62
- color: var(--components-navSide-bottom-section-palette-hovered-text);
63
- }
64
-
65
- .navSide-item-link-title {
66
- @include a11y.mask;
67
- }
68
- }
69
- }
70
- }
71
-
72
- @mixin compactHover {
73
- background-color: var(--components-navSide-compact-palette-hovered-bg);
74
- color: var(--components-navSide-compact-palette-hovered-text);
75
- }
76
-
77
- @mixin compactActive {
78
- background-color: var(--components-navSide-compact-palette-selected-bg);
79
- color: var(--components-navSide-compact-palette-selected-text);
80
- opacity: 1;
81
-
82
- .navSide-item-alert { // deprecated
83
- background-color: var(--components-navSide-compact-palette-selected-alert-color);
84
- color: var(--components-navSide-compact-palette-selected-alert-text);
85
- }
86
- }
87
-
88
- @mixin banner {
89
- top: var(--commons-banner-height);
90
- }
91
-
92
- @mixin mobileToggle {
93
- display: none;
94
- }
95
-
96
- @mixin mobile {
97
- padding-top: var(--commons-navSide-mobile-toggle-height);
98
- width: 100%;
99
- bottom: auto;
100
-
101
- .navSide-mainSection,
102
- .navSide-scrollWrapper {
103
- width: 100%;
104
- height: auto;
105
- }
106
-
107
- .navSide-scrollWrapper {
108
- padding: 0;
109
- }
110
-
111
- .navSide-item {
112
- &.mod-mobileToggle {
113
- height: var(--commons-navSide-mobile-toggle-height);
114
- background-color: var(--palettes-primary-800);
115
- top: 0;
116
- left: 0;
117
- right: 0;
118
- z-index: 1;
119
- display: block;
120
- position: fixed;
121
- cursor: pointer;
122
-
123
- .navSide-item-link {
124
- border-radius: 0;
125
-
126
- &:focus-visible {
127
- box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text) inset;
128
- }
129
- }
130
- }
131
- }
132
-
133
- .navSide-bottomSection {
134
- background-color: transparent;
135
- width: auto;
136
- height: auto;
137
- }
138
- }
1
+ @use '@lucca-front/scss/src/commons/utils/a11y';
2
+
3
+ @mixin compact {
4
+ background-color: var(--components-navSide-compact-palette-bg-color);
5
+ width: var(--commons-navSide-compact-width);
6
+ text-align: center;
7
+
8
+ .navSide-mainSection,
9
+ .navSide-scrollWrapper {
10
+ width: var(--commons-navSide-compact-width);
11
+ }
12
+
13
+ .navSide-item-link {
14
+ color: var(--components-navSide-compact-palette-text);
15
+ font-size: var(--components-navSide-compact-font-size);
16
+ padding: .75rem var(--spacings-XS);
17
+ flex-direction: column;
18
+ justify-content: center;
19
+ position: relative;
20
+ text-align: center;
21
+ row-gap: var(--spacings-XXS);
22
+ }
23
+
24
+ .navSide-item-arrow,
25
+ .navSide-item-subMenu {
26
+ display: none;
27
+ }
28
+
29
+ .navSide-item-alert { // deprecated
30
+ background-color: var(--components-navSide-compact-palette-alert-color);
31
+ color: var(--components-navSide-compact-palette-alert-text);
32
+ padding: 0 var(--spacings-XS);
33
+ margin: auto;
34
+ position: relative;
35
+ }
36
+
37
+ .navSide-item-placeholder {
38
+ flex-direction: column;
39
+
40
+ &::before {
41
+ height: 1.5em;
42
+ width: 1.5em;
43
+ }
44
+
45
+ &::after {
46
+ margin-left: 0;
47
+ margin-top: .75rem;
48
+ width: 100%;
49
+ }
50
+ }
51
+
52
+ .navSide-bottomSection {
53
+ width: var(--commons-navSide-compact-width);
54
+
55
+ .navSide-item-link {
56
+ background-color: var(--components-navSide-bottom-section-palette-bg-color);
57
+ color: var(--components-navSide-bottom-section-palette-text);
58
+ flex-direction: row;
59
+
60
+ &:hover {
61
+ background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
62
+ color: var(--components-navSide-bottom-section-palette-hovered-text);
63
+ }
64
+
65
+ .navSide-item-link-title {
66
+ @include a11y.mask;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ @mixin compactHover {
73
+ background-color: var(--components-navSide-compact-palette-hovered-bg);
74
+ color: var(--components-navSide-compact-palette-hovered-text);
75
+ }
76
+
77
+ @mixin compactActive {
78
+ background-color: var(--components-navSide-compact-palette-selected-bg);
79
+ color: var(--components-navSide-compact-palette-selected-text);
80
+ opacity: 1;
81
+
82
+ .navSide-item-alert { // deprecated
83
+ background-color: var(--components-navSide-compact-palette-selected-alert-color);
84
+ color: var(--components-navSide-compact-palette-selected-alert-text);
85
+ }
86
+ }
87
+
88
+ @mixin banner {
89
+ top: var(--commons-banner-height);
90
+ }
91
+
92
+ @mixin mobileToggle {
93
+ display: none;
94
+ }
95
+
96
+ @mixin mobile {
97
+ padding-top: var(--commons-navSide-mobile-toggle-height);
98
+ width: 100%;
99
+ bottom: auto;
100
+
101
+ .navSide-mainSection,
102
+ .navSide-scrollWrapper {
103
+ width: 100%;
104
+ height: auto;
105
+ }
106
+
107
+ .navSide-scrollWrapper {
108
+ padding: 0;
109
+ }
110
+
111
+ .navSide-item {
112
+ &.mod-mobileToggle {
113
+ height: var(--commons-navSide-mobile-toggle-height);
114
+ background-color: var(--palettes-primary-800);
115
+ top: 0;
116
+ left: 0;
117
+ right: 0;
118
+ z-index: 1;
119
+ display: block;
120
+ position: fixed;
121
+ cursor: pointer;
122
+
123
+ .navSide-item-link {
124
+ border-radius: 0;
125
+
126
+ &:focus-visible {
127
+ box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text) inset;
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ .navSide-bottomSection {
134
+ background-color: transparent;
135
+ width: auto;
136
+ height: auto;
137
+ }
138
+ }
package/src/components/navside/states.scss CHANGED
@@ -1,63 +1,63 @@
1
- @mixin active {
2
- background-color: var(--components-navSide-fullwidth-palette-selected-bg);
3
- color: var(--components-navSide-fullwidth-palette-selected-text);
4
- opacity: 1;
5
-
6
- .navSide-item-alert { // deprecated
7
- background-color: var(--components-navSide-fullwidth-palette-selected-alert-text);
8
- color: var(--components-navSide-fullwidth-palette-selected-alert-color);
9
- }
10
- }
11
-
12
- @mixin expanded {
13
- .navSide-item-arrow {
14
- transform: rotate(-0.25turn);
15
- }
16
- }
17
-
18
- @mixin notOpen {
19
- .navSide-item-subMenu {
20
- display: none;
21
- }
22
- }
23
-
24
- @mixin sublinkHover {
25
- background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
26
- color: var(--components-navSide-fullwidth-palette-hovered-text);
27
- }
28
-
29
- @mixin sublinkActive {
30
- background-color: var(--components-navSide-fullwidth-palette-selected-bg);
31
- color: var(--components-navSide-fullwidth-palette-selected-text);
32
- }
33
-
34
- @mixin mobileOpen {
35
- height: 100vh;
36
- overflow-x: hidden;
37
- overflow-y: auto;
38
-
39
- .navSide-scrollWrapper {
40
- padding: 0.5em;
41
- }
42
- }
43
-
44
- @mixin mobileOpenBanner {
45
- height: calc(100vh - var(--commons-banner-height));
46
- }
47
-
48
- @mixin mobileHidden {
49
- display: none;
50
- }
51
-
52
- @mixin overlay {
53
- &,
54
- body {
55
- touch-action: none;
56
- overscroll-behavior: none;
57
- -webkit-overflow-scrolling: auto;
58
- }
59
-
60
- body {
61
- overflow: hidden !important;
62
- }
63
- }
1
+ @mixin active {
2
+ background-color: var(--components-navSide-fullwidth-palette-selected-bg);
3
+ color: var(--components-navSide-fullwidth-palette-selected-text);
4
+ opacity: 1;
5
+
6
+ .navSide-item-alert { // deprecated
7
+ background-color: var(--components-navSide-fullwidth-palette-selected-alert-text);
8
+ color: var(--components-navSide-fullwidth-palette-selected-alert-color);
9
+ }
10
+ }
11
+
12
+ @mixin expanded {
13
+ .navSide-item-arrow {
14
+ transform: rotate(-0.25turn);
15
+ }
16
+ }
17
+
18
+ @mixin notOpen {
19
+ .navSide-item-subMenu {
20
+ display: none;
21
+ }
22
+ }
23
+
24
+ @mixin sublinkHover {
25
+ background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
26
+ color: var(--components-navSide-fullwidth-palette-hovered-text);
27
+ }
28
+
29
+ @mixin sublinkActive {
30
+ background-color: var(--components-navSide-fullwidth-palette-selected-bg);
31
+ color: var(--components-navSide-fullwidth-palette-selected-text);
32
+ }
33
+
34
+ @mixin mobileOpen {
35
+ height: 100vh;
36
+ overflow-x: hidden;
37
+ overflow-y: auto;
38
+
39
+ .navSide-scrollWrapper {
40
+ padding: 0.5em;
41
+ }
42
+ }
43
+
44
+ @mixin mobileOpenBanner {
45
+ height: calc(100vh - var(--commons-banner-height));
46
+ }
47
+
48
+ @mixin mobileHidden {
49
+ display: none;
50
+ }
51
+
52
+ @mixin overlay {
53
+ &,
54
+ body {
55
+ touch-action: none;
56
+ overscroll-behavior: none;
57
+ -webkit-overflow-scrolling: auto;
58
+ }
59
+
60
+ body {
61
+ overflow: hidden !important;
62
+ }
63
+ }
package/src/components/navside/vars.scss CHANGED
@@ -1,55 +1,55 @@
1
- @mixin vars($atRoot: 'without: rule') {
2
- @at-root ($atRoot) {
3
- :root {
4
- --commons-navSide-width: 15rem;
5
- --commons-navSide-compact-width: 7.5rem;
6
- --commons-navSide-mobile-toggle-height: 3.5rem;
7
- }
8
- }
9
-
10
- --components-navSide-offset-top: 0;
11
- --components-navSide-padding-top: 0;
12
- --components-navSide-sub-font-size: 0.875rem;
13
- --components-navSide-submenu-max-height: 33rem;
14
-
15
- --components-navSide-fullwidth-palette-bg-color: var(--palettes-navigation-800);
16
- --components-navSide-fullwidth-palette-text: var(--colors-white-color);
17
- --components-navSide-fullwidth-palette-selected-bg: var(--palettes-primary-700);
18
- --components-navSide-fullwidth-palette-selected-text: var(--colors-white-color);
19
- --components-navSide-fullwidth-palette-hovered-bg: var(--palettes-navigation-700);
20
- --components-navSide-fullwidth-palette-hovered-text: var(--colors-white-color);
21
- --components-navSide-fullwidth-palette-alert-color: var(--palettes-primary-200);
22
- --components-navSide-fullwidth-palette-alert-text: var(--palettes-primary-800);
23
- --components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-primary-700);
24
- --components-navSide-fullwidth-palette-selected-alert-text: var(--colors-white-color);
25
-
26
- --components-navSide-compact-palette-bg-color: var(--palettes-navigation-800);
27
- --components-navSide-compact-palette-text: var(--colors-white-color);
28
- --components-navSide-compact-palette-selected-bg: var(--palettes-primary-700);
29
- --components-navSide-compact-palette-selected-text: var(--colors-white-color);
30
- --components-navSide-compact-palette-hovered-bg: var(--palettes-navigation-700);
31
- --components-navSide-compact-palette-hovered-text: var(--colors-white-color);
32
- --components-navSide-compact-palette-alert-color: var(--palettes-primary-200);
33
- --components-navSide-compact-palette-alert-text: var(--palettes-primary-800);
34
- --components-navSide-compact-palette-selected-alert-color: var(--palettes-primary-700);
35
- --components-navSide-compact-palette-selected-alert-text: var(--colors-white-color);
36
- --components-navSide-compact-font-size: 0.875rem;
37
-
38
- --components-navSide-bottom-section-palette-bg-color: transparent;
39
- --components-navSide-bottom-section-palette-text: var(--colors-white-color);
40
- --components-navSide-bottom-section-palette-selected-bg: #9299b0;
41
- --components-navSide-bottom-section-palette-selected-text: var(--colors-white-color);
42
- --components-navSide-bottom-section-palette-hovered-bg: #31395e;
43
- --components-navSide-bottom-section-palette-hovered-text: var(--colors-white-color);
44
- --components-navSide-bottom-section-palette-alert-color: #9299b0;
45
- --components-navSide-bottom-section-palette-alert-text: var(--colors-white-color);
46
- --components-navSide-bottom-section-palette-selected-alert-color: #9299b0;
47
- --components-navSide-bottom-section-palette-selected-alert-text: var(--colors-white-color);
48
- --components-navSide-bottom-section-height: 3.1rem;
49
-
50
- --components-navSide-scrollbar-width: var(--spacings-XS);
51
- --components-navSide-scrollbar-border-radius: 10px;
52
- --components-navSide-scrollbar-bg-color: var(--palettes-primary-800);
53
- --components-navSide-scrollbar-thumb-color: var(--palettes-primary-700);
54
- --components-navSide-scrollbar-arrow-color: var(--colors-white-color);
55
- }
1
+ @mixin vars($atRoot: 'without: rule') {
2
+ @at-root ($atRoot) {
3
+ :root {
4
+ --commons-navSide-width: 15rem;
5
+ --commons-navSide-compact-width: 7.5rem;
6
+ --commons-navSide-mobile-toggle-height: 3.5rem;
7
+ }
8
+ }
9
+
10
+ --components-navSide-offset-top: 0;
11
+ --components-navSide-padding-top: 0;
12
+ --components-navSide-sub-font-size: 0.875rem;
13
+ --components-navSide-submenu-max-height: 33rem;
14
+
15
+ --components-navSide-fullwidth-palette-bg-color: var(--palettes-navigation-800);
16
+ --components-navSide-fullwidth-palette-text: var(--colors-white-color);
17
+ --components-navSide-fullwidth-palette-selected-bg: var(--palettes-primary-700);
18
+ --components-navSide-fullwidth-palette-selected-text: var(--colors-white-color);
19
+ --components-navSide-fullwidth-palette-hovered-bg: var(--palettes-navigation-700);
20
+ --components-navSide-fullwidth-palette-hovered-text: var(--colors-white-color);
21
+ --components-navSide-fullwidth-palette-alert-color: var(--palettes-primary-200);
22
+ --components-navSide-fullwidth-palette-alert-text: var(--palettes-primary-800);
23
+ --components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-primary-700);
24
+ --components-navSide-fullwidth-palette-selected-alert-text: var(--colors-white-color);
25
+
26
+ --components-navSide-compact-palette-bg-color: var(--palettes-navigation-800);
27
+ --components-navSide-compact-palette-text: var(--colors-white-color);
28
+ --components-navSide-compact-palette-selected-bg: var(--palettes-primary-700);
29
+ --components-navSide-compact-palette-selected-text: var(--colors-white-color);
30
+ --components-navSide-compact-palette-hovered-bg: var(--palettes-navigation-700);
31
+ --components-navSide-compact-palette-hovered-text: var(--colors-white-color);
32
+ --components-navSide-compact-palette-alert-color: var(--palettes-primary-200);
33
+ --components-navSide-compact-palette-alert-text: var(--palettes-primary-800);
34
+ --components-navSide-compact-palette-selected-alert-color: var(--palettes-primary-700);
35
+ --components-navSide-compact-palette-selected-alert-text: var(--colors-white-color);
36
+ --components-navSide-compact-font-size: 0.875rem;
37
+
38
+ --components-navSide-bottom-section-palette-bg-color: transparent;
39
+ --components-navSide-bottom-section-palette-text: var(--colors-white-color);
40
+ --components-navSide-bottom-section-palette-selected-bg: #9299b0;
41
+ --components-navSide-bottom-section-palette-selected-text: var(--colors-white-color);
42
+ --components-navSide-bottom-section-palette-hovered-bg: #31395e;
43
+ --components-navSide-bottom-section-palette-hovered-text: var(--colors-white-color);
44
+ --components-navSide-bottom-section-palette-alert-color: #9299b0;
45
+ --components-navSide-bottom-section-palette-alert-text: var(--colors-white-color);
46
+ --components-navSide-bottom-section-palette-selected-alert-color: #9299b0;
47
+ --components-navSide-bottom-section-palette-selected-alert-text: var(--colors-white-color);
48
+ --components-navSide-bottom-section-height: 3.1rem;
49
+
50
+ --components-navSide-scrollbar-width: var(--spacings-XS);
51
+ --components-navSide-scrollbar-border-radius: 10px;
52
+ --components-navSide-scrollbar-bg-color: var(--palettes-primary-800);
53
+ --components-navSide-scrollbar-thumb-color: var(--palettes-primary-700);
54
+ --components-navSide-scrollbar-arrow-color: var(--colors-white-color);
55
+ }
package/src/components/newBadge/component.scss CHANGED
@@ -1,10 +1,10 @@
1
- @mixin component {
2
- display: inline-flex;
3
- font-size: var(--sizes-XS-fontSize);
4
- line-height: var(--sizes-XS-lineHeight);
5
- font-weight: 600;
6
- background-color: var(--palettes-primary-700);
7
- color: var(--palettes-primary-text);
8
- padding: 0 var(--spacings-XXS);
9
- border-radius: var(--commons-borderRadius-M);
10
- }
1
+ @mixin component {
2
+ display: inline-flex;
3
+ font-size: var(--sizes-XS-fontSize);
4
+ line-height: var(--sizes-XS-lineHeight);
5
+ font-weight: 600;
6
+ background-color: var(--palettes-primary-700);
7
+ color: var(--palettes-primary-text);
8
+ padding: 0 var(--spacings-XXS);
9
+ border-radius: var(--commons-borderRadius-M);
10
+ }
package/src/components/newBadge/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/newBadge/index.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use 'exports' as *;
2
-
3
- .newBadge {
4
- @include vars;
5
- @include component;
6
- }
1
+ @use 'exports' as *;
2
+
3
+ .newBadge {
4
+ @include vars;
5
+ @include component;
6
+ }
package/src/components/newBadge/vars.scss CHANGED
@@ -1,2 +1,2 @@
1
- @mixin vars {
2
- }
1
+ @mixin vars {
2
+ }