@lucca-front/scss 20.3.0-rc.3 → 20.3.0-rc.4

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 (128) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/config.scss +0 -5
  4. package/src/commons/core.scss +3 -3
  5. package/src/commons/exports.scss +1 -0
  6. package/src/commons/index.scss +2 -9
  7. package/src/commons/utils/index.scss +478 -480
  8. package/src/commons/utils/reset.scss +1 -1
  9. package/src/components/_sample/index.scss +6 -14
  10. package/src/components/appLayout/index.scss +7 -11
  11. package/src/components/avatar/index.scss +35 -43
  12. package/src/components/box/index.scss +14 -20
  13. package/src/components/breadcrumbs/index.scss +10 -16
  14. package/src/components/button/index.scss +134 -140
  15. package/src/components/button/mods.scss +0 -17
  16. package/src/components/buttonGroup/index.scss +8 -20
  17. package/src/components/calendar/index.scss +44 -56
  18. package/src/components/callout/index.scss +4 -8
  19. package/src/components/calloutDisclosure/index.scss +9 -15
  20. package/src/components/calloutFeedbackList/index.scss +4 -8
  21. package/src/components/calloutPopover/index.scss +12 -18
  22. package/src/components/card/index.scss +24 -28
  23. package/src/components/checkbox/index.scss +30 -36
  24. package/src/components/checkboxField/index.scss +80 -90
  25. package/src/components/chip/index.scss +17 -23
  26. package/src/components/clear/index.scss +17 -23
  27. package/src/components/code/index.scss +4 -8
  28. package/src/components/collapse/index.scss +7 -11
  29. package/src/components/comment/index.scss +20 -30
  30. package/src/components/container/index.scss +25 -29
  31. package/src/components/contentSection/index.scss +2 -4
  32. package/src/components/dataTable/index.scss +52 -68
  33. package/src/components/dataTableSticked/index.scss +24 -32
  34. package/src/components/dateField/index.scss +20 -24
  35. package/src/components/dateRangeField/index.scss +25 -29
  36. package/src/components/dialog/index.scss +36 -40
  37. package/src/components/divider/index.scss +7 -11
  38. package/src/components/dropdown/index.scss +9 -13
  39. package/src/components/emptyState/index.scss +7 -11
  40. package/src/components/errorPage/index.scss +4 -8
  41. package/src/components/fancyBox/index.scss +4 -8
  42. package/src/components/field/index.scss +76 -96
  43. package/src/components/fieldset/index.scss +12 -18
  44. package/src/components/file/index.scss +30 -38
  45. package/src/components/fileEntry/index.scss +18 -24
  46. package/src/components/fileToolbar/index.scss +6 -10
  47. package/src/components/fileUpload/index.scss +31 -37
  48. package/src/components/filterBar/index.scss +13 -17
  49. package/src/components/filterBarDeprecated/index.scss +4 -8
  50. package/src/components/filterPill/index.scss +48 -56
  51. package/src/components/filters/index.scss +8 -14
  52. package/src/components/footer/index.scss +34 -38
  53. package/src/components/form/index.scss +84 -114
  54. package/src/components/form/mods.scss +5 -7
  55. package/src/components/formLabel/index.scss +13 -19
  56. package/src/components/gauge/index.scss +20 -26
  57. package/src/components/grid/index.scss +21 -25
  58. package/src/components/header/index.scss +12 -18
  59. package/src/components/highlightData/index.scss +24 -28
  60. package/src/components/horizontalNavigation/index.scss +36 -42
  61. package/src/components/index.scss +55 -57
  62. package/src/components/indexTable/index.scss +56 -54
  63. package/src/components/inlineMessage/index.scss +12 -18
  64. package/src/components/inputFramed/index.scss +24 -30
  65. package/src/components/label/index.scss +9 -13
  66. package/src/components/layout/index.scss +45 -51
  67. package/src/components/link/index.scss +8 -14
  68. package/src/components/link/mods.scss +1 -1
  69. package/src/components/list/index.scss +11 -15
  70. package/src/components/listboxOption/index.scss +115 -131
  71. package/src/components/listing/index.scss +18 -22
  72. package/src/components/loading/index.scss +23 -27
  73. package/src/components/main/index.scss +15 -21
  74. package/src/components/mainLayout/index.scss +20 -26
  75. package/src/components/mobileHeader/index.scss +4 -8
  76. package/src/components/mobileNavigation/index.scss +2 -4
  77. package/src/components/mobilePush/index.scss +4 -8
  78. package/src/components/multiSelect/index.scss +34 -58
  79. package/src/components/multiSelect/mods.scss +8 -0
  80. package/src/components/multiSelect/states.scss +0 -8
  81. package/src/components/navside/index.scss +56 -78
  82. package/src/components/newBadge/index.scss +4 -8
  83. package/src/components/notchBox/index.scss +13 -17
  84. package/src/components/notchBox/mods.scss +125 -137
  85. package/src/components/numericBadge/index.scss +16 -22
  86. package/src/components/pageHeader/index.scss +22 -26
  87. package/src/components/pagination/index.scss +6 -12
  88. package/src/components/plgPush/index.scss +2 -4
  89. package/src/components/popover/index.scss +2 -4
  90. package/src/components/progress/index.scss +9 -15
  91. package/src/components/radio/index.scss +12 -18
  92. package/src/components/radioButtons/index.scss +9 -15
  93. package/src/components/radioField/index.scss +40 -46
  94. package/src/components/readMore/index.scss +15 -21
  95. package/src/components/richText/index.scss +14 -20
  96. package/src/components/scrollBox/index.scss +10 -14
  97. package/src/components/section/index.scss +12 -16
  98. package/src/components/segmentedControl/index.scss +15 -25
  99. package/src/components/simpleSelect/index.scss +33 -41
  100. package/src/components/skeleton/index.scss +37 -43
  101. package/src/components/skipLinks/index.scss +2 -4
  102. package/src/components/sortableList/index.scss +6 -12
  103. package/src/components/statusBadge/index.scss +4 -8
  104. package/src/components/switch/index.scss +29 -35
  105. package/src/components/switchField/index.scss +16 -22
  106. package/src/components/table/index.scss +64 -78
  107. package/src/components/tableFixed/index.scss +11 -13
  108. package/src/components/tableFixedDeprecated/index.scss +10 -14
  109. package/src/components/tableOfContent/index.scss +24 -28
  110. package/src/components/tableSortable/index.scss +16 -22
  111. package/src/components/tableSticked/index.scss +24 -28
  112. package/src/components/tableSticked/mods.scss +6 -6
  113. package/src/components/tableStickedDeprecated/index.scss +40 -46
  114. package/src/components/tag/index.scss +23 -29
  115. package/src/components/textField/index.scss +22 -30
  116. package/src/components/textField/mods.scss +1 -1
  117. package/src/components/textFlow/index.scss +2 -4
  118. package/src/components/textfields/index.scss +258 -279
  119. package/src/components/timeline/index.scss +66 -72
  120. package/src/components/timepicker/index.scss +15 -21
  121. package/src/components/title/index.scss +30 -43
  122. package/src/components/title/mods.scss +1 -1
  123. package/src/components/titleSection/index.scss +23 -31
  124. package/src/components/toast/index.scss +4 -8
  125. package/src/components/tooltip/index.scss +21 -25
  126. package/src/components/userPopover/index.scss +2 -4
  127. package/src/components/userTile/index.scss +22 -26
  128. package/src/components/verticalNavigation/index.scss +16 -26
package/src/components/notchBox/mods.scss CHANGED
@@ -1,149 +1,140 @@
1
1
  // stylelint-disable custom-property-empty-line-before -- Complex code with visual grouping of declarations.
2
2
 
3
3
  %commons {
4
- @layer mods {
5
- --smooth: 1px;
6
- --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
7
- --component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
8
- --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
9
- --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
10
- var(--component-notchbox-notch-radius-inner);
11
- --component-notchbox-badge-anchor: calc(
12
- var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
13
- );
14
- }
4
+ --smooth: 1px;
5
+ --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
6
+ --component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
7
+ --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
8
+ --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
9
+ var(--component-notchbox-notch-radius-inner);
10
+ --component-notchbox-badge-anchor: calc(
11
+ var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
12
+ );
15
13
  }
16
14
 
17
15
  %mod-vertical {
18
- @layer mods {
19
- @extend %commons;
20
-
21
- --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
22
- --component-notchbox-notch-gradient1-ref1: 100%;
23
- --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
24
-
25
- --component-notchbox-notch-gradient2-anchor: left;
26
- --component-notchbox-notch-gradient2-ref1: calc(
27
- var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
28
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
29
- );
30
- --component-notchbox-notch-gradient2-ref2: 100%;
31
-
32
- --component-notchbox-notch-gradient3-anchor: right;
33
- --component-notchbox-notch-gradient3-ref1: calc(
34
- 100% -
35
- (
36
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
37
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
38
- )
39
- );
40
- --component-notchbox-notch-gradient3-ref2: 100%;
41
-
42
- --component-notchbox-notch-gradient4-x: calc(
43
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
44
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
45
- );
46
-
47
- --component-notchbox-notch-gradient5-x: calc(
48
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
49
- var(--smooth)
50
- );
51
- --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
52
-
53
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
54
- --component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
55
- --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
56
-
57
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
58
- --component-notchbox-notch-gradient7-ref1: calc(
59
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
60
- );
61
- --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
62
-
63
- --component-notchbox-notch-gradient8-x: calc(
64
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
65
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
66
- );
67
-
68
- --component-notchbox-notch-gradient9-x: calc(
69
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
70
- var(--smooth) * 2
71
- );
72
- --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
73
-
74
- // badge
75
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
76
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
77
- --component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
78
- }
16
+ @extend %commons;
17
+ --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
18
+ --component-notchbox-notch-gradient1-ref1: 100%;
19
+ --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
20
+
21
+ --component-notchbox-notch-gradient2-anchor: left;
22
+ --component-notchbox-notch-gradient2-ref1: calc(
23
+ var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
24
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
25
+ );
26
+ --component-notchbox-notch-gradient2-ref2: 100%;
27
+
28
+ --component-notchbox-notch-gradient3-anchor: right;
29
+ --component-notchbox-notch-gradient3-ref1: calc(
30
+ 100% -
31
+ (
32
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
33
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
34
+ )
35
+ );
36
+ --component-notchbox-notch-gradient3-ref2: 100%;
37
+
38
+ --component-notchbox-notch-gradient4-x: calc(
39
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
40
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
41
+ );
42
+
43
+ --component-notchbox-notch-gradient5-x: calc(
44
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
45
+ var(--smooth)
46
+ );
47
+ --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
48
+
49
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
50
+ --component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
51
+ --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
52
+
53
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
54
+ --component-notchbox-notch-gradient7-ref1: calc(
55
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
56
+ );
57
+ --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
58
+
59
+ --component-notchbox-notch-gradient8-x: calc(
60
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
61
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
62
+ );
63
+
64
+ --component-notchbox-notch-gradient9-x: calc(
65
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
66
+ var(--smooth) * 2
67
+ );
68
+ --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
69
+
70
+ /** badge */
71
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
72
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
73
+ --component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
79
74
  }
80
75
 
81
76
  %mod-horizontal {
82
- @layer mods {
83
- @extend %commons;
84
-
85
- --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
86
- --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
87
- --component-notchbox-notch-gradient1-ref2: 100%;
88
-
89
- --component-notchbox-notch-gradient2-anchor: top;
90
- --component-notchbox-notch-gradient2-ref1: 100%;
91
- --component-notchbox-notch-gradient2-ref2: calc(
92
- var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
93
- );
94
-
95
- --component-notchbox-notch-gradient3-anchor: bottom;
96
- --component-notchbox-notch-gradient3-ref1: 100%;
97
- --component-notchbox-notch-gradient3-ref2: calc(
98
- 100% -
99
- (
100
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
101
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
102
- )
103
- );
104
-
105
- --component-notchbox-notch-gradient4-y: calc(
106
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
107
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
108
- );
109
-
110
- --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
111
- --component-notchbox-notch-gradient5-y: calc(
112
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
113
- var(--smooth)
114
- );
115
-
116
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
117
- --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
118
- --component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
119
-
120
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
121
- --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
122
- --component-notchbox-notch-gradient7-ref2: calc(
123
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
124
- );
125
-
126
- --component-notchbox-notch-gradient8-y: calc(
127
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
128
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
129
- );
130
-
131
- --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
132
- --component-notchbox-notch-gradient9-y: calc(
133
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
134
- var(--smooth) * 2
135
- );
136
-
137
- // badge
138
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
139
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
140
- --component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
141
- }
77
+ @extend %commons;
78
+ --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
79
+ --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
80
+ --component-notchbox-notch-gradient1-ref2: 100%;
81
+
82
+ --component-notchbox-notch-gradient2-anchor: top;
83
+ --component-notchbox-notch-gradient2-ref1: 100%;
84
+ --component-notchbox-notch-gradient2-ref2: calc(
85
+ var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
86
+ );
87
+
88
+ --component-notchbox-notch-gradient3-anchor: bottom;
89
+ --component-notchbox-notch-gradient3-ref1: 100%;
90
+ --component-notchbox-notch-gradient3-ref2: calc(
91
+ 100% -
92
+ (
93
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
94
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
95
+ )
96
+ );
97
+
98
+ --component-notchbox-notch-gradient4-y: calc(
99
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
100
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
101
+ );
102
+
103
+ --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
104
+ --component-notchbox-notch-gradient5-y: calc(
105
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
106
+ var(--smooth)
107
+ );
108
+
109
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
110
+ --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
111
+ --component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
112
+
113
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
114
+ --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
115
+ --component-notchbox-notch-gradient7-ref2: calc(
116
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
117
+ );
118
+
119
+ --component-notchbox-notch-gradient8-y: calc(
120
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
121
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
122
+ );
123
+
124
+ --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
125
+ --component-notchbox-notch-gradient9-y: calc(
126
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
127
+ var(--smooth) * 2
128
+ );
129
+
130
+ /** badge */
131
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
132
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
133
+ --component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
142
134
  }
143
135
 
144
136
  @mixin top {
145
137
  @extend %mod-vertical;
146
-
147
138
  --component-notchbox-notch-gradient1-anchor: bottom;
148
139
  --component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
149
140
 
@@ -158,7 +149,6 @@
158
149
 
159
150
  @mixin bottom {
160
151
  @extend %mod-vertical;
161
-
162
152
  --component-notchbox-notch-gradient1-anchor: top;
163
153
  --component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
164
154
 
@@ -173,7 +163,6 @@
173
163
 
174
164
  @mixin left {
175
165
  @extend %mod-horizontal;
176
-
177
166
  --component-notchbox-notch-gradient1-anchor: right;
178
167
  --component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
179
168
  --component-notchbox-notch-gradient8-anchor: 0 100%;
@@ -187,7 +176,6 @@
187
176
 
188
177
  @mixin right {
189
178
  @extend %mod-horizontal;
190
-
191
179
  --component-notchbox-notch-gradient1-anchor: left;
192
180
  --component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
193
181
  --component-notchbox-notch-gradient8-anchor: 100% 100%;
@@ -200,7 +188,7 @@
200
188
  --component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
201
189
  }
202
190
 
203
- // pre configured with DS parameters
191
+ /** pre configured with DS parameters **/
204
192
  @mixin notchTop {
205
193
  @include top;
206
194
  }
package/src/components/numericBadge/index.scss CHANGED
@@ -1,36 +1,30 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .numericBadge {
4
- @layer components {
5
- @include vars;
6
- @include component;
4
+ @include vars;
5
+ @include component;
6
+
7
+ &.mod-S {
8
+ @include S;
9
+ }
10
+
11
+ &.mod-XS {
12
+ @include XS;
7
13
  }
8
14
 
9
- @layer mods {
15
+ &.is-loading {
16
+ @include loading;
17
+
10
18
  &.mod-S {
11
- @include S;
19
+ @include loadingS;
12
20
  }
13
21
 
14
22
  &.mod-XS {
15
- @include XS;
23
+ @include loadingXS;
16
24
  }
17
25
  }
18
26
 
19
- @layer mods {
20
- &.is-loading {
21
- @include loading;
22
-
23
- &.mod-S {
24
- @include loadingS;
25
- }
26
-
27
- &.mod-XS {
28
- @include loadingXS;
29
- }
30
- }
31
-
32
- &:focus-within {
33
- @include focusVisible;
34
- }
27
+ &:focus-within {
28
+ @include focusVisible;
35
29
  }
36
30
  }
package/src/components/pageHeader/index.scss CHANGED
@@ -2,38 +2,34 @@
2
2
  @use '@lucca-front/scss/src/commons/utils/media';
3
3
 
4
4
  .pageHeader {
5
- @layer components {
6
- @include vars;
7
- @include component;
8
- }
5
+ @include vars;
6
+ @include component;
9
7
 
10
- @layer mods {
11
- // .mod-withMenu is deprecated
12
- &.mod-withHorizontalNavigation,
13
- &:has(.horizontalNavigation),
14
- &.mod-withMenu {
15
- @include horizontalNavigation;
16
- }
8
+ // .mod-withMenu is deprecated
9
+ &.mod-withHorizontalNavigation,
10
+ &:has(.horizontalNavigation),
11
+ &.mod-withMenu {
12
+ @include horizontalNavigation;
13
+ }
17
14
 
18
- &:has(.breadcrumbs),
19
- &.mod-withBreadcrumbs {
20
- @include breadcrumbs;
21
- }
15
+ &:has(.breadcrumbs),
16
+ &.mod-withBreadcrumbs {
17
+ @include breadcrumbs;
18
+ }
22
19
 
23
- &.mod-sticky {
24
- @include sticky;
25
-
26
- @include media.min('S') {
27
- @include stickyWide;
28
- }
29
- }
20
+ &.mod-sticky {
21
+ @include sticky;
30
22
 
31
23
  @include media.min('S') {
32
- @include wide;
24
+ @include stickyWide;
33
25
  }
26
+ }
34
27
 
35
- &:has(.pageHeader-containerOptional) {
36
- @include withContainer;
37
- }
28
+ @include media.min('S') {
29
+ @include wide;
30
+ }
31
+
32
+ &:has(.pageHeader-containerOptional) {
33
+ @include withContainer;
38
34
  }
39
35
  }
package/src/components/pagination/index.scss CHANGED
@@ -1,22 +1,16 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .pagination {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer components {
10
- &.mod-mods {
11
- @include compact;
12
- }
7
+ &.mod-compact {
8
+ @include compact;
13
9
  }
14
10
  }
15
11
 
16
12
  .pagination-navigation-item {
17
- @layer mods {
18
- &:is(.is-ellipsis, .ellipsis) {
19
- @include ellipsis;
20
- }
13
+ &:is(.is-ellipsis, .ellipsis) {
14
+ @include ellipsis;
21
15
  }
22
16
  }
package/src/components/plgPush/index.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .plgPush {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
  }
package/src/components/popover/index.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .popover {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
  }
package/src/components/progress/index.scss CHANGED
@@ -1,24 +1,18 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .progress {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-indeterminate {
11
- @include indeterminate;
12
- }
7
+ &.mod-indeterminate {
8
+ @include indeterminate;
13
9
  }
14
10
 
15
- @layer mods {
16
- &:is(.is-success, .success, .palette-success) {
17
- @include success;
18
- }
11
+ &:is(.is-success, .success, .palette-success) {
12
+ @include success;
13
+ }
19
14
 
20
- &:is(.is-error, .error, .palette-error) {
21
- @include error;
22
- }
15
+ &:is(.is-error, .error, .palette-error) {
16
+ @include error;
23
17
  }
24
18
  }
package/src/components/radio/index.scss CHANGED
@@ -1,31 +1,25 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .radio {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-inline {
11
- @include inline;
12
- }
7
+ &.mod-inline {
8
+ @include inline;
9
+ }
13
10
 
14
- &.mod-S {
15
- @include S;
16
- }
11
+ &.mod-S {
12
+ @include S;
17
13
  }
18
14
  }
19
15
 
20
16
  .radio-input {
21
- @layer mods {
22
- &[disabled],
23
- &[read-only] {
24
- @include disabled;
17
+ &[disabled],
18
+ &[read-only] {
19
+ @include disabled;
25
20
 
26
- &:checked {
27
- @include disabledChecked;
28
- }
21
+ &:checked {
22
+ @include disabledChecked;
29
23
  }
30
24
  }
31
25
  }
package/src/components/radioButtons/index.scss CHANGED
@@ -1,26 +1,20 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .radioButtons {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
7
+ &.mod-S {
8
+ @include S;
9
+ }
13
10
 
14
- &.mod-XS {
15
- @include XS;
16
- }
11
+ &.mod-XS {
12
+ @include XS;
17
13
  }
18
14
  }
19
15
 
20
16
  .radioButtons-item-input {
21
- @layer mods {
22
- &:is(:disabled, .is-disabled, .disabled) {
23
- @include disabled;
24
- }
17
+ &:is(:disabled, .is-disabled, .disabled) {
18
+ @include disabled;
25
19
  }
26
20
  }