@lucca-front/scss 15.1.3 → 15.2.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 (23) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/core.scss +1 -1
  4. package/src/components/actionIcon/component.scss +1 -1
  5. package/src/components/button/component.scss +1 -1
  6. package/src/components/callout/component.scss +41 -6
  7. package/src/components/callout/index.scss +0 -8
  8. package/src/components/callout/mods.scss +5 -59
  9. package/src/components/callout/vars.scss +0 -3
  10. package/src/components/card/component.scss +1 -1
  11. package/src/components/card/mods.scss +1 -1
  12. package/src/components/card/vars.scss +1 -1
  13. package/src/components/checkbox/component.scss +4 -3
  14. package/src/components/checkbox/mods.scss +12 -9
  15. package/src/components/checkbox/vars.scss +0 -4
  16. package/src/components/form/index.scss +1 -0
  17. package/src/components/menu/component.scss +4 -2
  18. package/src/components/radioButtons/component.scss +3 -1
  19. package/src/components/table/mods.scss +6 -4
  20. package/src/components/textfield/index.scss +8 -0
  21. package/src/components/textfield/mods.scss +33 -11
  22. package/src/components/textfield/states.scss +5 -0
  23. package/src/components/util/index.scss +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "15.1.3",
3
+ "version": "15.2.0",
4
4
  "description": "A Sass framework for Lucca products.",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
@@ -23,6 +23,6 @@
23
23
  "normalize.css": "^8.0.0"
24
24
  },
25
25
  "peerDependencies": {
26
- "@lucca-front/icons": "v15.1.3"
26
+ "@lucca-front/icons": "v15.2.0"
27
27
  }
28
28
  }
package/src/commons/core.scss CHANGED
@@ -28,7 +28,7 @@ $whiteSpace: 'normal', 'nowrap';
28
28
  $float: 'left', 'right';
29
29
  $verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom';
30
30
  $position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
31
- $decoration: 'underline', 'line-trough', 'none';
31
+ $decoration: 'underline', 'line-through', 'none';
32
32
 
33
33
  @mixin cssvars($name, $properties, $after: '') {
34
34
  @each $key, $value in $properties {
package/src/components/actionIcon/component.scss CHANGED
@@ -36,6 +36,6 @@
36
36
  }
37
37
 
38
38
  .lucca-icon {
39
- font-size: 1.2rem;
39
+ font-size: 1.25rem;
40
40
  }
41
41
  }
package/src/components/button/component.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  gap: var(--components-button-gap);
17
17
  position: relative;
18
18
  text-decoration: none;
19
- vertical-align: baseline;
19
+ vertical-align: middle;
20
20
  white-space: nowrap;
21
21
  text-align: center;
22
22
  background-color: var(--palettes-700, var(--palettes-primary-700));
package/src/components/callout/component.scss CHANGED
@@ -1,12 +1,17 @@
1
+ @use '@lucca-front/icons/src/commons/utils/icon';
2
+ @use '@lucca-front/scss/src/commons/utils/reset';
3
+
1
4
  @mixin component($atRoot: 'without: rule') {
5
+ align-items: flex-start;
2
6
  border-radius: var(--commons-borderRadius-M);
3
- background-color: var(--palettes-100, var(--components-callout-background));
7
+ background-color: var(--palettes-100, var(--palettes-grey-100));
4
8
  color: var(--palettes-grey-800);
5
- margin: var(--components-callout-margin);
6
- padding: var(--components-callout-padding);
9
+ display: flex;
7
10
  border-color: var(--palettes-200, var(--palettes-grey-200));
8
- border-width: var(--commons-divider-width);
9
11
  border-style: solid;
12
+ border-width: var(--commons-divider-width);
13
+ gap: .75rem;
14
+ padding: var(--spacings-XS) var(--spacings-S);
10
15
  position: relative;
11
16
 
12
17
  a,
@@ -20,9 +25,39 @@
20
25
  }
21
26
 
22
27
  @at-root ($atRoot) {
23
- .callout-title {
28
+ .callout-content {
29
+ flex: 1;
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: var(--spacings-XS);
33
+ }
34
+
35
+ .callout-content-title {
24
36
  font-weight: 600;
25
- margin-bottom: var(--spacings-XXS);
37
+ }
38
+
39
+ .callout-icon {
40
+ color: var(--palettes-700, var(--palettes-grey-700));
41
+
42
+ .lucca-icon {
43
+ font-size: 1.25rem;
44
+ }
45
+ }
46
+
47
+ .callout-kill {
48
+ @include reset.button;
49
+ color: currentColor;
50
+ transition-duration: var(--commons-animations-durations-fast);
51
+ transition-property: background-color;
52
+ width: auto;
53
+
54
+ &::before {
55
+ @include icon.generate('cross');
56
+ }
57
+
58
+ &:hover {
59
+ opacity: 1;
60
+ }
26
61
  }
27
62
  }
28
63
  }
package/src/components/callout/index.scss CHANGED
@@ -4,15 +4,7 @@
4
4
  @include vars;
5
5
  @include component;
6
6
 
7
- &.mod-icon {
8
- @include icon;
9
- }
10
-
11
7
  &.mod-S {
12
8
  @include S;
13
9
  }
14
-
15
- &.mod-killable {
16
- @include killable;
17
- }
18
10
  }
package/src/components/callout/mods.scss CHANGED
@@ -1,69 +1,15 @@
1
1
  @use '@lucca-front/icons/src/commons/utils/icon';
2
2
 
3
- @mixin icon($atRoot: 'without: rule') {
4
- padding-left: var(--spacings-XL);
5
-
6
- @at-root ($atRoot) {
7
- .callout-icon {
8
- top: 0.4rem;
9
- left: 0.75rem;
10
- width: 2rem;
11
- border-radius: 50%;
12
- position: absolute;
13
- margin: auto;
14
- text-align: center;
15
- color: var(--palettes-700, var(--palettes-grey-700));
16
-
17
- .lucca-icon {
18
- font-size: 1.2rem;
19
- vertical-align: middle;
20
- }
21
- }
22
- }
23
- }
24
-
25
3
  @mixin S {
26
4
  font-size: var(--sizes-S-fontSize);
27
5
  line-height: var(--sizes-S-lineHeight);
6
+ gap: var(--spacings-XS);
28
7
 
29
- &.mod-icon {
30
- padding-left: 2.8rem;
31
-
32
- .callout-icon {
33
- top: 0.4rem;
34
-
35
- .lucca-icon {
36
- font-size: var(--sizes-M-fontSize);
37
- }
38
- }
39
- }
40
- }
41
-
42
- @mixin killable($atRoot: 'without: rule') {
43
- padding-right: 2.5rem;
44
-
45
- @at-root ($atRoot) {
46
- .callout-kill {
47
- right: var(--spacings-S);
48
- background-color: transparent;
49
- color: currentColor;
50
- position: absolute;
51
- height: 1.5rem;
52
- border: 0;
53
- padding: 0;
54
- top: var(--spacings-XS);
55
- transition-duration: 150ms;
56
- transition-property: background-color;
57
- width: 1rem;
58
- cursor: pointer;
59
-
60
- &::before {
61
- @include icon.generate('cross');
62
- }
8
+ .callout-icon {
9
+ line-height: var(--sizes-XS-lineHeight);
63
10
 
64
- &:hover {
65
- opacity: 1;
66
- }
11
+ .lucca-icon {
12
+ font-size: 1rem;
67
13
  }
68
14
  }
69
15
  }
package/src/components/callout/vars.scss CHANGED
@@ -1,5 +1,2 @@
1
1
  @mixin vars {
2
- --components-callout-margin: 0 0 var(--spacings-S);
3
- --components-callout-padding: var(--spacings-XS) var(--spacings-S);
4
- --components-callout-background: var(--palettes-grey-100);
5
2
  }
package/src/components/card/component.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin component($atRoot: 'without: rule') {
2
- background-color: var(--colors-white-color);
2
+ background-color: var(--components-card-background);
3
3
  border-radius: var(--commons-borderRadius-L);
4
4
  border-color: var(--commons-divider-color);
5
5
  border-width: 1px;
package/src/components/card/mods.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin grey {
2
- background-color: var(--components-card-mod-grey);
2
+ --components-card-background: var(--palettes-grey-50);
3
3
  }
4
4
 
5
5
  @mixin clickable {
package/src/components/card/vars.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin vars {
2
2
  --components-card-content-padding: var(--spacings-M);
3
3
  --components-card-footer-padding: 0.33rem var(--spacings-M);
4
- --components-card-mod-grey: var(--commons-background-base);
4
+ --components-card-background: var(--colors-white-color);
5
5
  --components-card-border-radius: var(--commons-borderRadius-L);
6
6
  --components-card-border-color: var(--commons-divider-color);
7
7
  --components-card-hover-border: var(--palettes-grey-400);
package/src/components/checkbox/component.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  @mixin component($atRoot: 'without: rule') {
5
5
  display: block;
6
6
  position: relative;
7
+ line-height: var(--sizes-M-lineHeight);
7
8
 
8
9
  @at-root ($atRoot) {
9
10
  .checkbox-label {
@@ -12,6 +13,7 @@
12
13
  display: inline-flex;
13
14
  align-items: flex-start;
14
15
  cursor: pointer;
16
+ gap: var(--spacings-XS);
15
17
 
16
18
  &::before {
17
19
  @include icon.generate('tick');
@@ -19,13 +21,11 @@
19
21
  background-color: var(--colors-white-color);
20
22
  width: var(--components-checkbox-input-size);
21
23
  height: var(--components-checkbox-input-size);
22
- margin-right: var(--components-checkbox-input-margin-right);
23
- margin-top: var(--components-checkbox-input-margin-top);
24
24
  border-radius: var(--components-checkbox-input-border-radius);
25
25
  transition-duration: var(--commons-animations-durations-fast);
26
26
  transition-property: all;
27
27
  border: 2px solid var(--components-checkbox-input-border-color);
28
- line-height: 0.85;
28
+ line-height: .75rem;
29
29
  font-size: var(--sizes-M-fontSize);
30
30
  flex-grow: 0;
31
31
  flex-shrink: 0;
@@ -34,6 +34,7 @@
34
34
  display: block;
35
35
  text-align: center;
36
36
  text-indent: -0.1rem;
37
+ margin-top: var(--spacings-XXS);
37
38
  }
38
39
 
39
40
  &:hover {
package/src/components/checkbox/mods.scss CHANGED
@@ -5,28 +5,31 @@
5
5
  }
6
6
 
7
7
  @mixin L {
8
- .checkbox-label {
9
- line-height: 1.75rem;
8
+ line-height: var(--sizes-L-lineHeight);
10
9
 
10
+ .checkbox-label {
11
11
  &::before {
12
- font-size: 1.1rem;
13
12
  height: 1.25rem;
14
13
  width: 1.25rem;
15
- margin-top: 1px;
14
+ font-size: 1.25rem;
15
+ line-height: 1rem;
16
+ margin-top: .125rem;
16
17
  }
17
18
  }
18
19
  }
19
20
 
20
21
  @mixin S {
22
+ line-height: var(--sizes-S-lineHeight);
23
+
21
24
  .checkbox-label {
22
25
  font-size: var(--sizes-S-fontSize);
23
- line-height: var(--sizes-S-lineHeight);
24
26
 
25
27
  &::before {
26
- width: var(--sizes-S-fontSize);
27
- height: var(--sizes-S-fontSize);
28
- font-size: var(--sizes-XS-fontSize);
29
- margin-top: var(--components-checkbox-S-input-top);
28
+ width: .875rem;
29
+ height: .875rem;
30
+ font-size: .875rem;
31
+ line-height: .65rem;
32
+ margin-top: .125rem;
30
33
  }
31
34
  }
32
35
  }
package/src/components/checkbox/vars.scss CHANGED
@@ -9,11 +9,7 @@
9
9
  --components-checkbox-default-palette-700: var(--palettes-primary-700);
10
10
  --components-checkbox-default-palette-800: var(--palettes-primary-800);
11
11
  --components-checkbox-default-palette-900: var(--palettes-primary-900);
12
- --components-checkbox-label-line-height: var(--sizes-M-lineHeight);
13
12
  --components-checkbox-label-padding: 0 0 0 var(--spacings-M);
14
- --components-checkbox-input-margin-top: var(--spacings-XXS);
15
- --components-checkbox-S-input-top: 1px;
16
- --components-checkbox-input-margin-right: var(--spacings-XS);
17
13
  --components-checkbox-input-size: 1rem;
18
14
  --components-checkbox-input-border-radius: var(--commons-borderRadius-M);
19
15
  --components-checkbox-input-border-color: var(--palettes-grey-700);
package/src/components/form/index.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use 'exports' as *;
4
4
 
5
5
  .form {
6
+ @include vars;
6
7
  }
7
8
 
8
9
  .form-group {
package/src/components/menu/component.scss CHANGED
@@ -43,12 +43,14 @@
43
43
  padding: var(--components-menu-padding);
44
44
  border-radius: var(--commons-borderRadius-M);
45
45
  color: var(--palettes-grey-700);
46
+ display: inline-flex;
47
+ align-items: center;
48
+ text-align: center;
49
+ gap: var(--spacings-XS);
46
50
  transition-duration: var(--commons-animations-durations-fast);
47
51
  transition-property: color;
48
52
  position: relative;
49
53
  text-decoration: none;
50
- text-align: center;
51
- display: block;
52
54
  width: auto;
53
55
 
54
56
  &::after {
package/src/components/radioButtons/component.scss CHANGED
@@ -34,6 +34,9 @@
34
34
  }
35
35
 
36
36
  .radioButtons-item-label {
37
+ display: inline-flex;
38
+ align-items: center;
39
+ gap: var(--spacings-XS);
37
40
  background-color: var(--colors-white-color);
38
41
  padding: var(--spacings-XS) var(--spacings-S);
39
42
  font-size: var(--components-radioButtons-font-size, var(--sizes-M-fontSize));
@@ -42,7 +45,6 @@
42
45
  box-shadow: inset 0 0 0 1px var(--palettes-grey-200);
43
46
  transition-duration: var(--commons-animations-durations-fast);
44
47
  transition-property: all;
45
- display: block;
46
48
  overflow: hidden;
47
49
  position: relative;
48
50
  height: 100%;
package/src/components/table/mods.scss CHANGED
@@ -53,10 +53,7 @@
53
53
  @mixin card {
54
54
  border-top: 0;
55
55
 
56
- .table-body-row,
57
- .table-foot-row {
58
- background-color: transparent;
59
-
56
+ .table-body, .table-foot {
60
57
  &:last-child {
61
58
  .table-body-row-cell,
62
59
  .table-foot-row-cell {
@@ -65,6 +62,11 @@
65
62
  }
66
63
  }
67
64
 
65
+ .table-body-row,
66
+ .table-foot-row {
67
+ background-color: transparent;
68
+ }
69
+
68
70
  .table-head-row-cell,
69
71
  .table-body-row-cell,
70
72
  .table-foot-row-cell {
package/src/components/textfield/index.scss CHANGED
@@ -38,10 +38,18 @@
38
38
 
39
39
  &.mod-S {
40
40
  @include searchS;
41
+
42
+ &.mod-clearable {
43
+ @include searchClearableS;
44
+ }
41
45
  }
42
46
 
43
47
  &.mod-XS {
44
48
  @include searchXS;
49
+
50
+ &.mod-clearable {
51
+ @include searchClearableXS;
52
+ }
45
53
  }
46
54
 
47
55
  &.mod-outlined {
package/src/components/textfield/mods.scss CHANGED
@@ -29,30 +29,42 @@
29
29
  .textfield-actionClear {
30
30
  text-align: center;
31
31
  position: absolute;
32
- bottom: 0.7rem;
32
+ bottom: .5rem;
33
33
  right: var(--spacings-XS);
34
- width: 1rem;
35
- height: 1rem;
34
+ width: 1.5rem;
35
+ height: 1.5rem;
36
36
  padding: 0;
37
37
  line-height: 0;
38
+ }
38
39
 
39
- .lucca-icon {
40
- font-size: var(--sizes-M-fontSize);
40
+ &:not(.mod-outlined) {
41
+ .textfield-actionClear {
42
+ color: var(--palettes-700, var(--palettes-primary-700));
43
+
44
+ &:hover {
45
+ background: var(--palettes-100, var(--palettes-primary-100));
46
+ }
41
47
  }
42
48
  }
43
49
  }
44
50
 
45
51
  @mixin clearableS {
46
52
  .textfield-actionClear {
47
- bottom: var(--spacings-XS);
48
- right: 1.4rem;
53
+ bottom: var(--spacings-XXS);
54
+ right: var(--spacings-XXS);
49
55
  }
50
56
  }
51
57
 
52
58
  @mixin clearableXS {
53
59
  .textfield-actionClear {
54
60
  bottom: var(--spacings-XXS);
55
- right: 1.25rem;
61
+ right: var(--spacings-XXS);
62
+ height: 1rem;
63
+ width: 1rem;
64
+
65
+ .lucca-icon {
66
+ font-size: 1rem;
67
+ }
56
68
  }
57
69
  }
58
70
 
@@ -178,8 +190,6 @@
178
190
  color: var(--palettes-primary-600);
179
191
  position: absolute;
180
192
  pointer-events: none;
181
- font-size: 1.2rem;
182
- line-height: 1.4rem;
183
193
  bottom: var(--spacings-XS);
184
194
  right: 0.33rem;
185
195
  }
@@ -207,7 +217,7 @@
207
217
  }
208
218
 
209
219
  .textfield-actionClear {
210
- right: 1.8rem;
220
+ right: 1.5rem;
211
221
  }
212
222
  }
213
223
 
@@ -218,6 +228,12 @@
218
228
  }
219
229
  }
220
230
 
231
+ @mixin searchClearableS {
232
+ .textfield-actionClear {
233
+ right: 1.5rem;
234
+ }
235
+ }
236
+
221
237
  @mixin searchXS {
222
238
  &::after {
223
239
  line-height: var(--sizes-XS-lineHeight);
@@ -226,6 +242,12 @@
226
242
  }
227
243
  }
228
244
 
245
+ @mixin searchClearableXS {
246
+ .textfield-actionClear {
247
+ right: 1.25rem;
248
+ }
249
+ }
250
+
229
251
  @mixin radio {
230
252
  display: inline-block;
231
253
  margin-left: var(--spacings-XXS);
package/src/components/textfield/states.scss CHANGED
@@ -27,6 +27,11 @@
27
27
  &::placeholder {
28
28
  color: var(--commons-disabled-placeholder);
29
29
  }
30
+
31
+ ~ .textfield-actionClear {
32
+ color: var(--palettes-grey-500) !important;
33
+ pointer-events: none;
34
+ }
30
35
  }
31
36
 
32
37
  @mixin whiteInputFocus {
package/src/components/util/index.scss CHANGED
@@ -151,6 +151,16 @@
151
151
  font-weight: 600 !important;
152
152
  }
153
153
 
154
+ .u-noSpinButtons {
155
+ &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
156
+ -webkit-appearance: none;
157
+ }
158
+
159
+ &[type="number"] {
160
+ -moz-appearance: textfield;
161
+ }
162
+ }
163
+
154
164
  [data-content-before] {
155
165
  &::before {
156
166
  content: attr(data-content-before);