@lucca-front/scss 20.3.0-rc.10 → 20.3.0-rc.11

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