@lucca-front/scss 16.4.3 → 16.5.0

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 (62) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/config.scss +1 -1
  4. package/src/commons/core.scss +6 -6
  5. package/src/components/button/component.scss +14 -6
  6. package/src/components/button/index.scss +0 -4
  7. package/src/components/button/mods.scss +12 -8
  8. package/src/components/button/states.scss +4 -4
  9. package/src/components/callout/component.scss +7 -3
  10. package/src/components/calloutAccordion/component.scss +52 -0
  11. package/src/components/calloutAccordion/exports.scss +4 -0
  12. package/src/components/calloutAccordion/index.scss +14 -0
  13. package/src/components/calloutAccordion/mods.scss +29 -0
  14. package/src/components/calloutAccordion/states.scss +5 -0
  15. package/src/components/calloutAccordion/vars.scss +2 -0
  16. package/src/components/calloutDisclosure/component.scss +65 -0
  17. package/src/components/calloutDisclosure/exports.scss +4 -0
  18. package/src/components/calloutDisclosure/index.scss +18 -0
  19. package/src/components/calloutDisclosure/mods.scss +35 -0
  20. package/src/components/calloutDisclosure/states.scss +5 -0
  21. package/src/components/calloutDisclosure/vars.scss +3 -0
  22. package/src/components/calloutFeedbackList/component.scss +27 -0
  23. package/src/components/calloutFeedbackList/exports.scss +4 -0
  24. package/src/components/calloutFeedbackList/index.scss +10 -0
  25. package/src/components/calloutFeedbackList/mods.scss +10 -0
  26. package/src/components/calloutFeedbackList/states.scss +0 -0
  27. package/src/components/calloutFeedbackList/vars.scss +2 -0
  28. package/src/components/calloutPopover/component.scss +59 -0
  29. package/src/components/calloutPopover/exports.scss +4 -0
  30. package/src/components/calloutPopover/index.scss +24 -0
  31. package/src/components/calloutPopover/mods.scss +49 -0
  32. package/src/components/calloutPopover/states.scss +0 -0
  33. package/src/components/calloutPopover/vars.scss +8 -0
  34. package/src/components/card/component.scss +2 -4
  35. package/src/components/card/mods.scss +9 -6
  36. package/src/components/chip/component.scss +28 -19
  37. package/src/components/chip/mods.scss +14 -8
  38. package/src/components/chip/vars.scss +2 -0
  39. package/src/components/clear/component.scss +47 -28
  40. package/src/components/clear/mods.scss +10 -10
  41. package/src/components/clear/states.scss +2 -2
  42. package/src/components/clear/vars.scss +4 -2
  43. package/src/components/index.scss +3 -0
  44. package/src/components/menu/states.scss +4 -4
  45. package/src/components/navside/component.scss +7 -7
  46. package/src/components/navside/states.scss +3 -2
  47. package/src/components/newBadge/component.scss +2 -2
  48. package/src/components/numericBadge/index.scss +2 -2
  49. package/src/components/numericBadge/mods.scss +7 -2
  50. package/src/components/numericBadge/states.scss +4 -0
  51. package/src/components/radioButtons/component.scss +6 -6
  52. package/src/components/radioButtons/states.scss +7 -1
  53. package/src/components/table/mods.scss +2 -2
  54. package/src/components/tag/component.scss +1 -0
  55. package/src/components/textfields/mods.scss +48 -36
  56. package/src/components/textfields/states.scss +3 -2
  57. package/src/components/textfields/vars.scss +0 -6
  58. package/src/components/util/index.scss +4 -1
  59. package/src/components/verticalNavigation/component.scss +1 -0
  60. package/src/components/verticalNavigation/states.scss +3 -3
  61. package/.jenkins/npmrc +0 -1
  62. /package/{dockerRegistry-514df42c-5e08-4017-8742-cea13d9a7985.env → dockerRegistry-71c4b9c3-ba54-48aa-a0b5-7b08b9aea561.env} +0 -0
@@ -1,5 +1,6 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/form';
2
2
  @use '@lucca-front/icons/src/commons/utils/icon';
3
+ @use '@lucca-front/scss/src/components/clear/exports' as clear;
3
4
 
4
5
  @mixin password {
5
6
  .textfield-suffix {
@@ -32,36 +33,33 @@
32
33
  right: var(--spacings-XS);
33
34
  }
34
35
 
35
- .textfield-actionClear { // deprecated
36
+ .textfield-actionClear {
37
+ // deprecated
36
38
  text-align: center;
37
39
  position: absolute;
38
- bottom: .75rem;
40
+ bottom: 0.75rem;
39
41
  right: var(--spacings-XS);
40
42
  width: 1rem;
41
43
  height: 1rem;
42
44
  padding: 0;
43
45
  line-height: 0;
44
- background-color: var(--palettes-grey-700);
45
46
  border-radius: 50%;
46
47
 
47
48
  .lucca-icon {
48
49
  font-size: var(--sizes-XS-lineHeight);
49
50
  color: white;
50
51
  }
51
-
52
- &:hover {
53
- background-color: var(--palettes-grey-600) !important;
54
- }
55
52
  }
56
53
  }
57
54
 
58
55
  @mixin clearableS {
59
56
  .textfield-clear {
60
- bottom: var(--spacings-XXS);
57
+ bottom: var(--spacings-XS);
61
58
  right: var(--spacings-XXS);
62
59
  }
63
60
 
64
- .textfield-actionClear { // deprecated
61
+ .textfield-actionClear {
62
+ // deprecated
65
63
  bottom: var(--spacings-XXS);
66
64
  right: var(--spacings-XXS);
67
65
  }
@@ -73,7 +71,8 @@
73
71
  right: var(--spacings-XXS);
74
72
  }
75
73
 
76
- .textfield-actionClear { // deprecated
74
+ .textfield-actionClear {
75
+ // deprecated
77
76
  bottom: var(--spacings-XXS);
78
77
  right: var(--spacings-XXS);
79
78
  height: 1rem;
@@ -90,7 +89,8 @@
90
89
  padding-right: var(--components-textfield-suffix-padding-right);
91
90
  }
92
91
 
93
- .textfield-actionClear { // deprecated
92
+ .textfield-actionClear {
93
+ // deprecated
94
94
  right: 2rem;
95
95
  }
96
96
  }
@@ -223,16 +223,17 @@
223
223
  }
224
224
 
225
225
  .textfield-input {
226
- padding-right: var(--spacings-L);
226
+ padding-right: 2.5rem;
227
227
 
228
- &[type='search']:is(:hover, :focus) {
228
+ &[type='search'] {
229
229
  &::-webkit-search-cancel-button {
230
230
  display: none;
231
231
  }
232
232
  }
233
233
  }
234
234
 
235
- .textfield-actionClear { // deprecated
235
+ .textfield-actionClear {
236
+ // deprecated
236
237
  right: 2.5rem;
237
238
  }
238
239
  }
@@ -246,7 +247,8 @@
246
247
  right: 2.5rem;
247
248
  }
248
249
 
249
- .textfield-actionClear { // deprecated
250
+ .textfield-actionClear {
251
+ // deprecated
250
252
  right: 2.5rem;
251
253
  }
252
254
  }
@@ -259,14 +261,19 @@
259
261
  right: 0.375rem;
260
262
  }
261
263
 
262
- .textfield-actionClear { // deprecated
264
+ .textfield-input {
265
+ padding-right: 2rem;
266
+ }
267
+
268
+ .textfield-actionClear {
269
+ // deprecated
263
270
  right: 2.125rem;
264
- bottom: .625rem;
265
- width: .75rem;
266
- height: .75rem;
271
+ bottom: 0.625rem;
272
+ width: 0.75rem;
273
+ height: 0.75rem;
267
274
 
268
275
  .lucca-icon {
269
- font-size: .75rem;
276
+ font-size: 0.75rem;
270
277
  }
271
278
  }
272
279
  }
@@ -277,16 +284,16 @@
277
284
  }
278
285
 
279
286
  .textfield-clear {
280
- --components-clear-size: 0.75rem;
281
- --components-clear-icon-size: 0.75rem;
287
+ @include clear.S;
282
288
 
283
289
  right: 2.125rem;
284
290
  bottom: 0.625rem;
285
291
  }
286
292
 
287
- .textfield-actionClear { // deprecated
293
+ .textfield-actionClear {
294
+ // deprecated
288
295
  right: 2.125rem;
289
- bottom: .625rem;
296
+ bottom: 0.625rem;
290
297
  }
291
298
  }
292
299
 
@@ -298,14 +305,19 @@
298
305
  right: var(--spacings-XXS);
299
306
  }
300
307
 
301
- .textfield-actionClear { // deprecated
308
+ .textfield-input {
309
+ padding-right: 1.5rem;
310
+ }
311
+
312
+ .textfield-actionClear {
313
+ // deprecated
302
314
  right: 1.75rem;
303
- bottom: .375rem;
304
- width: .75rem;
305
- height: .75rem;
315
+ bottom: 0.375rem;
316
+ width: 0.75rem;
317
+ height: 0.75rem;
306
318
 
307
319
  .lucca-icon {
308
- font-size: .75rem;
320
+ font-size: 0.75rem;
309
321
  }
310
322
  }
311
323
  }
@@ -316,21 +328,21 @@
316
328
  }
317
329
 
318
330
  .textfield-clear {
319
- --components-clear-size: 0.75rem;
320
- --components-clear-icon-size: 0.75rem;
331
+ @include clear.S;
321
332
 
322
333
  right: 1.75rem;
323
334
  bottom: 0.375rem;
324
335
  }
325
336
 
326
- .textfield-actionClear { // deprecated
337
+ .textfield-actionClear {
338
+ // deprecated
327
339
  right: 1.75rem;
328
- bottom: .375rem;
329
- width: .75rem;
330
- height: .75rem;
340
+ bottom: 0.375rem;
341
+ width: 0.75rem;
342
+ height: 0.75rem;
331
343
 
332
344
  .lucca-icon {
333
- font-size: .75rem;
345
+ font-size: 0.75rem;
334
346
  }
335
347
  }
336
348
  }
@@ -20,11 +20,12 @@
20
20
  }
21
21
 
22
22
  ~ .textfield-clear {
23
- color: var(--palettes-grey-500) !important;
23
+ --components-clear-cross-color: var(--palettes-grey-500) !important;
24
24
  pointer-events: none;
25
25
  }
26
26
 
27
- ~ .textfield-actionClear { // deprecated
27
+ ~ .textfield-actionClear {
28
+ // deprecated
28
29
  color: var(--palettes-grey-500) !important;
29
30
  pointer-events: none;
30
31
  }
@@ -2,12 +2,6 @@
2
2
  --components-textfield-border-radius: 4px;
3
3
  --components-textfield-input-padding-horizontal: var(--spacings-XS);
4
4
  --components-textfield-input-padding-vertical: var(--spacings-XS);
5
- --components-textfield-input-placeholder: var(--palettes-primary-400);
6
- --components-textfield-hover-background: var(--palettes-primary-100);
7
- --components-textfield-hover-placeholder: var(--palettes-primary-400);
8
- --components-textfield-focus-placeholder: var(--palettes-primary-300);
9
- --components-textfield-focus-shadow-color: var(--palettes-primary-200);
10
- --components-textfield-focus-border-color: var(--palettes-primary-600);
11
5
  --components-textfield-disabled-background: var(--commons-disabled-background);
12
6
  --components-textfield-disabled-color: var(--palettes-grey-600);
13
7
  --components-textfield-suffix-top: 1.75rem;
@@ -57,7 +57,10 @@
57
57
  @include core.classes('order', core.$order);
58
58
  @include core.classes('align-self', core.$align);
59
59
  @include core.classes('position', core.$position);
60
- @include core.classes('min-width', core.$contents);
60
+ @include core.classes('width', core.$contents);
61
+ @include core.classes('height', core.$contents);
62
+ @include core.classes('min-width', '0');
63
+ @include core.classes('min-height', '0');
61
64
  @include core.classes('visibility', core.$visibility);
62
65
  @include core.classes('font-weight', core.$fontWeight);
63
66
  @include core.classes('font-style', core.$fontStyle);
@@ -50,6 +50,7 @@
50
50
  .verticalNavigation-list-item-link-arrow {
51
51
  font-size: var(--sizes-M-lineHeight);
52
52
  margin-left: auto;
53
+ transition: transform var(--commons-animations-durations-standard) ease;
53
54
  }
54
55
  }
55
56
  }
@@ -1,13 +1,13 @@
1
1
  @mixin active {
2
- --components-verticalNavigation-link-background: var(--palettes-primary-50);
2
+ --components-verticalNavigation-link-background: var(--palettes-primary-100);
3
3
  color: var(--components-verticalNavigation-link-color);
4
4
 
5
5
  &:hover {
6
- --components-verticalNavigation-link-background: var(--palettes-primary-100);
6
+ --components-verticalNavigation-link-background: var(--palettes-primary-200);
7
7
  }
8
8
 
9
9
  &:active {
10
- --components-verticalNavigation-link-background: var(--palettes-primary-200);
10
+ --components-verticalNavigation-link-background: var(--palettes-primary-300);
11
11
  }
12
12
  }
13
13
 
package/.jenkins/npmrc DELETED
@@ -1 +0,0 @@
1
- //registry.npmjs.org/:_authToken=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