@lucca-front/scss 18.3.1 → 18.3.3

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 (17) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/base.scss +22 -8
  4. package/src/components/checkboxField/index.scss +24 -0
  5. package/src/components/emptyState/component.scss +2 -1
  6. package/src/components/form/index.scss +11 -1
  7. package/src/components/form/mods.scss +1 -1
  8. package/src/components/indexTable/component.scss +2 -19
  9. package/src/components/indexTable/index.scss +1 -0
  10. package/src/components/indexTable/mods.scss +4 -2
  11. package/src/components/indexTable/vars.scss +2 -1
  12. package/src/components/navside/component.scss +2 -2
  13. package/src/components/table/mods.scss +4 -0
  14. package/src/components/tableFixedDeprecated/index.scss +8 -2
  15. package/src/components/tableFixedDeprecated/mods.scss +5 -1
  16. package/src/components/textField/component.scss +5 -0
  17. package/src/components/userTile/component.scss +8 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "18.3.1",
3
+ "version": "18.3.3",
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": "18.3.1"
26
+ "@lucca-front/icons": "18.3.3"
27
27
  }
28
28
  }
package/src/commons/base.scss CHANGED
@@ -26,7 +26,8 @@
26
26
  @if config.$fontFamily != 'Source Sans Pro' {
27
27
  @font-face {
28
28
  font-family: '#{config.$fontFamily}';
29
- src: url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/regular.woff2') format('woff2'),
29
+ src:
30
+ url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/regular.woff2') format('woff2'),
30
31
  url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/regular.woff') format('woff');
31
32
  font-weight: 400;
32
33
  font-style: normal;
@@ -35,7 +36,8 @@
35
36
 
36
37
  @font-face {
37
38
  font-family: '#{config.$fontFamily}';
38
- src: url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/semibold.woff2') format('woff2'),
39
+ src:
40
+ url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/semibold.woff2') format('woff2'),
39
41
  url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/semibold.woff') format('woff');
40
42
  font-weight: 600;
41
43
  font-style: normal;
@@ -44,7 +46,8 @@
44
46
 
45
47
  @font-face {
46
48
  font-family: '#{config.$fontFamily}';
47
- src: url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/bold.woff2') format('woff2'),
49
+ src:
50
+ url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/bold.woff2') format('woff2'),
48
51
  url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/bold.woff') format('woff');
49
52
  font-weight: 700;
50
53
  font-style: normal;
@@ -53,7 +56,8 @@
53
56
 
54
57
  @font-face {
55
58
  font-family: '#{config.$fontFamily}';
56
- src: url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/black.woff2') format('woff2'),
59
+ src:
60
+ url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/black.woff2') format('woff2'),
57
61
  url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/black.woff') format('woff');
58
62
  font-weight: 900;
59
63
  font-style: normal;
@@ -62,7 +66,8 @@
62
66
  } @else {
63
67
  @font-face {
64
68
  font-family: 'Source Sans Pro';
65
- src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-regular.woff2') format('woff2'),
69
+ src:
70
+ url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-regular.woff2') format('woff2'),
66
71
  url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-regular.woff') format('woff');
67
72
  font-weight: 400;
68
73
  font-style: normal;
@@ -71,7 +76,8 @@
71
76
 
72
77
  @font-face {
73
78
  font-family: 'Source Sans Pro';
74
- src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-semibold.woff2') format('woff2'),
79
+ src:
80
+ url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-semibold.woff2') format('woff2'),
75
81
  url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-semibold.woff') format('woff');
76
82
  font-weight: 600;
77
83
  font-style: normal;
@@ -80,7 +86,8 @@
80
86
 
81
87
  @font-face {
82
88
  font-family: 'Source Sans Pro';
83
- src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-bold.woff2') format('woff2'),
89
+ src:
90
+ url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-bold.woff2') format('woff2'),
84
91
  url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-bold.woff') format('woff');
85
92
  font-weight: 700;
86
93
  font-style: normal;
@@ -89,7 +96,8 @@
89
96
 
90
97
  @font-face {
91
98
  font-family: 'Source Sans Pro';
92
- src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-black.woff2') format('woff2'),
99
+ src:
100
+ url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-black.woff2') format('woff2'),
93
101
  url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-black.woff') format('woff');
94
102
  font-weight: 900;
95
103
  font-style: normal;
@@ -147,6 +155,12 @@
147
155
  }
148
156
  }
149
157
 
158
+ button {
159
+ &:focus-visible {
160
+ @include a11y.focusVisible();
161
+ }
162
+ }
163
+
150
164
  strong,
151
165
  b {
152
166
  font-weight: 600;
package/src/components/checkboxField/index.scss CHANGED
@@ -21,25 +21,49 @@
21
21
 
22
22
  &:hover {
23
23
  @include hover;
24
+
25
+ &[aria-checked='mixed'] {
26
+ @include checkedHover;
27
+ }
24
28
  }
25
29
 
26
30
  &:active {
27
31
  @include active;
32
+
33
+ &[aria-checked='mixed'] {
34
+ @include checkedActive;
35
+ }
28
36
  }
29
37
 
30
38
  &:disabled {
31
39
  @include disabled;
40
+
41
+ &[aria-checked='mixed'] {
42
+ @include checkedDisabled;
43
+ }
32
44
  }
33
45
 
34
46
  &[aria-invalid='true'] {
35
47
  @include invalid;
36
48
 
49
+ &[aria-checked='mixed'] {
50
+ @include checkedInvalid;
51
+ }
52
+
37
53
  &:hover {
38
54
  @include invalidHover;
55
+
56
+ &[aria-checked='mixed'] {
57
+ @include checkedInvalidHover;
58
+ }
39
59
  }
40
60
 
41
61
  &:active {
42
62
  @include invalidActive;
63
+
64
+ &[aria-checked='mixed'] {
65
+ @include checkedInvalidActive;
66
+ }
43
67
  }
44
68
  }
45
69
 
package/src/components/emptyState/component.scss CHANGED
@@ -56,8 +56,9 @@
56
56
  .emptyState-actions {
57
57
  display: flex;
58
58
  flex-wrap: wrap;
59
+ align-items: center;
59
60
  margin-top: var(--pr-t-spacings-200);
60
- gap: var(--pr-t-spacings-100);
61
+ gap: var(--pr-t-spacings-200);
61
62
 
62
63
  .button {
63
64
  margin: 0;
package/src/components/form/index.scss CHANGED
@@ -56,7 +56,9 @@
56
56
  }
57
57
 
58
58
  &:has(.textField-input-value[aria-invalid='true']),
59
- &:has(.timePicker-fieldset-group-textfield-input[aria-invalid='true']) {
59
+ &:has(.timePicker-fieldset-group-textfield-input[aria-invalid='true']),
60
+ &:has(.simpleSelect-input[aria-invalid='true']),
61
+ &:has(.multipleSelect-displayer-search[aria-invalid='true']) {
60
62
  @include invalid;
61
63
  }
62
64
 
@@ -71,6 +73,14 @@
71
73
  @include inlineMessage.disabled;
72
74
  }
73
75
  }
76
+
77
+ &.mod-withArrow {
78
+ @include withArrow;
79
+
80
+ &.mod-S {
81
+ @include withArrowS;
82
+ }
83
+ }
74
84
  }
75
85
 
76
86
  // deprecated
package/src/components/form/mods.scss CHANGED
@@ -101,7 +101,7 @@
101
101
 
102
102
  @mixin withArrow {
103
103
  padding-bottom: var(--pr-t-spacings-200);
104
- margin-block: 0;
104
+ margin-block-end: 0;
105
105
 
106
106
  .form-field-arrow {
107
107
  @include box.arrow;
package/src/components/indexTable/component.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  z-index: 3;
64
64
 
65
65
  &:not(:first-child) {
66
- padding-right: var(--components-indexTable-cell-padding);
66
+ padding-right: var(--components-indexTable-cell-paddingInline);
67
67
  }
68
68
  }
69
69
 
@@ -71,23 +71,7 @@
71
71
  .indexTable-body-row-cell,
72
72
  .indexTable-foot-row-cell {
73
73
  vertical-align: top;
74
-
75
- // Because outlined cell apparence can be cropped we need a bigger padding-right. To compensate we also need a smaller padding-left
76
- padding: var(--components-indexTable-cell-padding);
77
- padding-left: var(--components-indexTable-cell-padding-left, var(--components-indexTable-cell-padding));
78
- padding-right: var(--components-indexTable-cell-padding-right, var(--components-indexTable-cell-padding));
79
-
80
- --components-indexTable-cell-padding-right: calc(var(--components-indexTable-cell-padding) + 4px);
81
-
82
- ~ .indexTable-head-row-cell,
83
- ~ .indexTable-body-row-cell,
84
- ~ .indexTable-foot-row-cell {
85
- --components-indexTable-cell-padding-left: calc(var(--components-indexTable-cell-padding) - 4px);
86
- }
87
-
88
- &:last-child {
89
- --components-indexTable-cell-padding-right: var(--components-indexTable-cell-padding);
90
- }
74
+ padding: var(--components-indexTable-cell-paddingBlock) var(--components-indexTable-cell-paddingInline);
91
75
  }
92
76
 
93
77
  .indexTable-body-row {
@@ -118,7 +102,6 @@
118
102
  .indexTable-body-row-cell {
119
103
  position: relative;
120
104
  z-index: var(--components-indexTable-cell-z-index, 1);
121
- border-radius: var(--components-table-cardList-cell-border-radius);
122
105
  border: var(--commons-divider-width) 0 solid transparent;
123
106
 
124
107
  // Apparence of the first cell with a card apparence.
package/src/components/indexTable/index.scss CHANGED
@@ -34,6 +34,7 @@
34
34
 
35
35
  .indexTable-head-row-cell,
36
36
  .indexTable-body-row-cell,
37
+ .indexTable-body-row-transparentCell,
37
38
  .indexTable-foot-row-cell {
38
39
  &.mod-alignRight {
39
40
  @include alignRight;
package/src/components/indexTable/mods.scss CHANGED
@@ -146,9 +146,10 @@
146
146
 
147
147
  // We only need one ::before for the card apparence and one ::after for the possible outline
148
148
  .indexTable-body-row-cell {
149
+ --components-indexTable-cell-paddingBlock: 0;
150
+
149
151
  position: static;
150
152
  grid-column-start: 1;
151
- padding: 0 var(--components-indexTable-cell-padding);
152
153
 
153
154
  &::before {
154
155
  --components-indexTable-cell-border-radius-left: var(--components-indexTable-cell-border-radius);
@@ -328,9 +329,10 @@
328
329
  padding: var(--pr-t-spacings-50);
329
330
  border-radius: var(--commons-borderRadius-L);
330
331
  font-size: var(--sizes-S-fontSize);
331
- line-height: var(--sizes-S-line-height);
332
+ line-height: var(--sizes-S-lineHeight);
332
333
  color: var(--palettes-neutral-800);
333
334
  background-color: var(--pr-t-elevation-surface-default);
335
+
334
336
  .button {
335
337
  @include button.text;
336
338
  @include button.S;
package/src/components/indexTable/vars.scss CHANGED
@@ -6,7 +6,8 @@
6
6
  // on responsive, row spacing is increased
7
7
  --components-indexTable-row-spacing-responsive: 8px;
8
8
 
9
- --components-indexTable-cell-padding: var(--pr-t-spacings-100);
9
+ --components-indexTable-cell-paddingInline: var(--pr-t-spacings-150);
10
+ --components-indexTable-cell-paddingBlock: var(--pr-t-spacings-100);
10
11
  --components-indexTable-cell-border-radius: var(--commons-borderRadius-L);
11
12
  --components-indexTable-cell-background-color-default: var(--palettes-neutral-0);
12
13
  // shadows
package/src/components/navside/component.scss CHANGED
@@ -213,14 +213,14 @@
213
213
  }
214
214
 
215
215
  &::before {
216
- background-color: color.transparentize(var(--palettes-neutral-900), 0.15);
216
+ background-color: var(--palettes-navigation-700);
217
217
  border-radius: 1em;
218
218
  height: 1em;
219
219
  width: 1em;
220
220
  }
221
221
 
222
222
  &::after {
223
- @include loading.gradient;
223
+ @include loading.gradient($color: var(--palettes-navigation-700));
224
224
 
225
225
  border-radius: var(--commons-borderRadius-M);
226
226
  flex: 1 1 auto;
package/src/components/table/mods.scss CHANGED
@@ -117,6 +117,10 @@
117
117
  &:last-child {
118
118
  padding-right: var(--components-table-card-padding);
119
119
  }
120
+
121
+ &.mod-actions {
122
+ padding-right: var(--pr-t-spacings-100);
123
+ }
120
124
  }
121
125
  }
122
126
 
package/src/components/tableFixedDeprecated/index.scss CHANGED
@@ -2,18 +2,24 @@
2
2
  @use '@lucca-front/scss/src/commons/utils/media';
3
3
  @use 'exports' as *;
4
4
 
5
+ .table {
6
+ &.mod-layoutFixed {
7
+ @include layoutFixed;
8
+ }
9
+ }
10
+
5
11
  .table-head-row-cell,
6
12
  .table-body-row-cell,
7
13
  .table-foot-row-cell {
8
14
  @for $i from 2 through 20 {
9
15
  &.mod-layoutFixed-#{$i} {
10
- @include layoutFixed($i);
16
+ @include layoutFixedCell($i);
11
17
  }
12
18
 
13
19
  @each $breakpoint, $value in config.$breakpoints {
14
20
  @include media.min($breakpoint) {
15
21
  &.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
16
- @include layoutFixed($i);
22
+ @include layoutFixedCell($i);
17
23
  }
18
24
  }
19
25
  }
package/src/components/tableFixedDeprecated/mods.scss CHANGED
@@ -1,4 +1,8 @@
1
- @mixin layoutFixed($i) {
1
+ @mixin layoutFixed {
2
+ table-layout: fixed;
3
+ }
4
+
5
+ @mixin layoutFixedCell($i) {
2
6
  min-width: $i * 1rem;
3
7
  max-width: $i * 1rem;
4
8
  width: $i * 1rem;
package/src/components/textField/component.scss CHANGED
@@ -87,6 +87,10 @@
87
87
  &:not([rows]) {
88
88
  height: calc(3lh + var(--component-textField-padding) * 2);
89
89
  }
90
+
91
+ &[rows='1'] {
92
+ min-height: calc(1lh + var(--component-textField-padding) * 2);
93
+ }
90
94
  }
91
95
  }
92
96
 
@@ -118,6 +122,7 @@
118
122
  font-size: var(--component-textField-fontSize);
119
123
  border-top-left-radius: var(--commons-borderRadius-M);
120
124
  border-bottom-left-radius: var(--commons-borderRadius-M);
125
+ flex-shrink: 0;
121
126
 
122
127
  ~ .textField-input {
123
128
  border-top-left-radius: 0;
package/src/components/userTile/component.scss CHANGED
@@ -10,10 +10,17 @@
10
10
  display: flex;
11
11
  align-self: start;
12
12
  align-items: center;
13
- height: calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight));
14
13
  min-height: var(--components-avatar-size);
15
14
  }
16
15
 
16
+ // .user-tile-label is deprecated
17
+ &:has(.userTile-content-info, .user-tile-label) {
18
+ // Apply height to avatar (calculed on title & info height) to avoid img overflow
19
+ .avatar {
20
+ height: calc(var(--components-userTile-title-lineHeight) + var(--components-userTile-info-lineHeight));
21
+ }
22
+ }
23
+
17
24
  @at-root ($atRoot) {
18
25
  // .user-info is deprecated
19
26
  .userTile-content,