@lucca-front/scss 19.2.1 → 19.2.2

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 (15) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/components/avatar/component.scss +1 -2
  4. package/src/components/avatar/index.scss +3 -1
  5. package/src/components/avatar/mods.scss +2 -0
  6. package/src/components/avatar/vars.scss +1 -0
  7. package/src/components/filterPill/component.scss +2 -2
  8. package/src/components/indexTable/component.scss +7 -0
  9. package/src/components/indexTable/mods.scss +11 -10
  10. package/src/components/multiSelect/component.scss +5 -0
  11. package/src/components/multiSelect/index.scss +4 -0
  12. package/src/components/multiSelect/mods.scss +1 -1
  13. package/src/components/simpleSelect/mods.scss +1 -1
  14. package/src/components/simpleSelect/states.scss +0 -4
  15. package/src/components/tableSortable/component.scss +2 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "19.2.1",
3
+ "version": "19.2.2",
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": "19.2.1"
26
+ "@lucca-front/icons": "19.2.2"
27
27
  }
28
28
  }
package/src/components/avatar/component.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  display: flex;
43
43
  flex-wrap: wrap;
44
44
  align-content: flex-start;
45
+ row-gap: var(--components-avatarWrapper-rowGap);
45
46
 
46
47
  .avatar {
47
48
  box-shadow: 0 0 0 var(--components-avatar-border) var(--components-avatar-background);
@@ -49,8 +50,6 @@
49
50
  }
50
51
 
51
52
  .avatarWrapper-item {
52
- margin-block: calc(var(--components-avatarWrapper-overlap) / 2);
53
-
54
53
  &:not(:last-child) {
55
54
  margin-inline-end: calc(var(--components-avatarWrapper-overlap) * -1);
56
55
  }
package/src/components/avatar/index.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use 'exports' as *;
2
2
 
3
- .avatar, .lu-user-picture { // lu-user-picture is deprecated
3
+ .avatar,
4
+ .lu-user-picture {
5
+ // lu-user-picture is deprecated
4
6
  @include vars;
5
7
  @include component;
6
8
 
package/src/components/avatar/mods.scss CHANGED
@@ -53,6 +53,7 @@
53
53
 
54
54
  @mixin wrapperS {
55
55
  --components-avatarWrapper-overlap: var(--pr-t-spacings-50);
56
+ --components-avatarWrapper-rowGap: var(--pr-t-spacings-25);
56
57
 
57
58
  .avatar,
58
59
  .avatarWrapper-item-action {
@@ -62,6 +63,7 @@
62
63
 
63
64
  @mixin wrapperXS {
64
65
  --components-avatarWrapper-overlap: var(--pr-t-spacings-50);
66
+ --components-avatarWrapper-rowGap: var(--pr-t-spacings-25);
65
67
 
66
68
  .avatar,
67
69
  .avatarWrapper-item-action {
package/src/components/avatar/vars.scss CHANGED
@@ -12,4 +12,5 @@
12
12
 
13
13
  --components-avatarWrapper-fontSize: var(--sizes-M-fontSize);
14
14
  --components-avatarWrapper-overlap: var(--pr-t-spacings-100);
15
+ --components-avatarWrapper-rowGap: var(--pr-t-spacings-50);
15
16
  }
package/src/components/filterPill/component.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  line-height: var(--sizes-S-lineHeight);
23
23
  box-shadow: var(--components-filterPill-shadow);
24
24
  position: relative;
25
- max-width: 18rem;
25
+ max-inline-size: 18rem;
26
26
  white-space: nowrap;
27
27
  transition-property: box-shadow;
28
28
  transition-duration: var(--commons-animations-durations-fast);
@@ -71,6 +71,7 @@
71
71
  text-overflow: ellipsis;
72
72
  outline: none;
73
73
  text-align: center;
74
+ flex-shrink: 0;
74
75
 
75
76
  &::before {
76
77
  content: '';
@@ -124,7 +125,6 @@
124
125
  display: flex;
125
126
  align-items: center;
126
127
  gap: var(--pr-t-spacings-50);
127
- flex-shrink: 0;
128
128
 
129
129
  &:focus-visible {
130
130
  outline: none;
package/src/components/indexTable/component.scss CHANGED
@@ -273,4 +273,11 @@
273
273
  }
274
274
  }
275
275
  }
276
+
277
+ .statusBadge,
278
+ .tag,
279
+ .avatar {
280
+ display: flex;
281
+ width: fit-content;
282
+ }
276
283
  }
package/src/components/indexTable/mods.scss CHANGED
@@ -28,12 +28,12 @@
28
28
  .indexTable-body-row {
29
29
  &.mod-stack2,
30
30
  &.mod-stack3 {
31
- --components-indexTable-row-stack-border-block-end: var(--components-indexTable-stack2-row-spacing);
31
+ --components-indexTable-row-stack-border-bottom: var(--components-indexTable-stack2-row-spacing);
32
32
  --components-indexTable-row-stack2-background-image: var(--components-indexTable-stack-svg);
33
33
  }
34
34
 
35
35
  &.mod-stack3 {
36
- --components-indexTable-row-stack-border-block-end: var(--components-indexTable-stack3-row-spacing);
36
+ --components-indexTable-row-stack-border-bottom: var(--components-indexTable-stack3-row-spacing);
37
37
  --components-indexTable-row-stack3-background-image: var(--components-indexTable-stack-svg);
38
38
  }
39
39
  }
@@ -42,10 +42,10 @@
42
42
  // because we can't set an individual spacing for each row, transparent border are used for this
43
43
  border-block-end: var(--components-indexTable-row-stack-border-bottom) solid transparent;
44
44
  // stack apparence
45
- background-image: var(--components-indexTable-row-stack2-background-image, none),
46
- var(--components-indexTable-row-stack3-background-image, none);
47
- background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
48
- var(--components-indexTable-row-stack3-background-position, 0 0);
45
+ background-image:
46
+ var(--components-indexTable-row-stack2-background-image, none), var(--components-indexTable-row-stack3-background-image, none);
47
+ background-position:
48
+ var(--components-indexTable-row-stack2-background-position, 0 0), var(--components-indexTable-row-stack3-background-position, 0 0);
49
49
  background-repeat: no-repeat, no-repeat;
50
50
  transition-property: background-image, background-position;
51
51
  transition-duration: var(--commons-animations-durations-fast);
@@ -178,6 +178,7 @@
178
178
  display: flex;
179
179
  flex-direction: column;
180
180
  margin-block-start: var(--pr-t-spacings-50);
181
+
181
182
  &::before {
182
183
  content: attr(data-label);
183
184
  font-weight: 600;
@@ -229,10 +230,10 @@
229
230
  position: absolute;
230
231
  inset-block-start: 0;
231
232
  inset-block-end: calc((var(--components-indexTable-row-spacing-responsive) + var(--components-indexTable-stack3-row-spacing)) * -1);
232
- background-image: var(--components-indexTable-row-stack2-background-image, none),
233
- var(--components-indexTable-row-stack3-background-image, none);
234
- background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
235
- var(--components-indexTable-row-stack3-background-position, 0 0);
233
+ background-image:
234
+ var(--components-indexTable-row-stack2-background-image, none), var(--components-indexTable-row-stack3-background-image, none);
235
+ background-position:
236
+ var(--components-indexTable-row-stack2-background-position, 0 0), var(--components-indexTable-row-stack3-background-position, 0 0);
236
237
  background-repeat: no-repeat, no-repeat;
237
238
  transition-property: background-image, background-position;
238
239
  transition-duration: var(--commons-animations-durations-fast);
package/src/components/multiSelect/component.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/reset';
2
2
  @use '@lucca-front/scss/src/commons/utils/a11y';
3
+ @use '@lucca-front/scss/src/commons/utils/text';
3
4
  @use '@lucca-front/icons/src/icon/exports' as icon;
4
5
  @use '@lucca-front/scss/src/commons/utils/namespace';
5
6
 
@@ -81,6 +82,10 @@
81
82
  display: none;
82
83
  }
83
84
 
85
+ .multipleSelect-pill-displayer-chip {
86
+ @include text.ellipsis;
87
+ }
88
+
84
89
  .multipleSelect-pill-displayer-label {
85
90
  font-weight: 600;
86
91
  }
package/src/components/multiSelect/index.scss CHANGED
@@ -42,6 +42,10 @@
42
42
  }
43
43
  }
44
44
 
45
+ .multipleSelect-displayer-filter {
46
+ min-inline-size: 0;
47
+ }
48
+
45
49
  .multipleSelect-displayer {
46
50
  &.mod-filter {
47
51
  @include displayerFilter;
package/src/components/multiSelect/mods.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  gap: 0;
70
70
 
71
71
  width: 21rem;
72
- max-width: calc(100vw - 2.5rem);
72
+ max-inline-size: calc(100vw - 2.5rem);
73
73
 
74
74
  &:has(.multipleSelect-displayer-search:focus-visible) {
75
75
  outline: none;
package/src/components/simpleSelect/mods.scss CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  @mixin filterPill {
49
49
  width: 21rem;
50
- max-width: calc(100vw - 2.5rem);
50
+ max-inline-size: calc(100vw - 2.5rem);
51
51
 
52
52
  .simpleSelect-field {
53
53
  position: relative;
package/src/components/simpleSelect/states.scss CHANGED
@@ -43,10 +43,6 @@
43
43
  color: transparent;
44
44
  }
45
45
  }
46
-
47
- .simpleSelect-field-value {
48
- display: flex;
49
- }
50
46
  }
51
47
 
52
48
  @mixin selectedSearchFilled {
package/src/components/tableSortable/component.scss CHANGED
@@ -3,17 +3,14 @@
3
3
  @use '@lucca-front/scss/src/commons/utils/namespace';
4
4
 
5
5
  @mixin component($atRoot: namespace.$defaultAtRoot) {
6
- @include button.withIcon;
7
-
8
- --components-button-padding: 0 var(--pr-t-spacings-50);
9
- --components-button-gap: var(--pr-t-spacings-25);
10
-
11
6
  user-select: none;
12
7
  font-weight: var(--components-sortable-fontWeight);
13
8
  vertical-align: top;
14
9
  align-items: flex-end;
15
10
  white-space: wrap;
16
11
  inset-inline-start: var(--components-sortable-offset);
12
+ padding: 0 var(--pr-t-spacings-50);
13
+ gap: var(--pr-t-spacings-25);
17
14
  text-align: inherit;
18
15
  flex-direction: var(--components-sortable-direction);
19
16
  font-size: var(--components-sortable-fontSize);