@lucca-front/scss 21.1.0-rc.1 → 21.1.0-rc.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 (34) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +3 -2
  3. package/src/components/appLayout/component.scss +0 -1
  4. package/src/components/appLayout/index.scss +0 -5
  5. package/src/components/appLayout/mods.scss +0 -4
  6. package/src/components/callout/component.scss +1 -0
  7. package/src/components/clear/index.scss +2 -1
  8. package/src/components/dialog/index.scss +0 -4
  9. package/src/components/dialog/mods.scss +0 -4
  10. package/src/components/dialog/vars.scss +1 -1
  11. package/src/components/errorPage/component.scss +58 -42
  12. package/src/components/errorPage/index.scss +0 -4
  13. package/src/components/errorPage/mods.scss +0 -38
  14. package/src/components/fieldset/component.scss +0 -4
  15. package/src/components/filterPill/component.scss +1 -12
  16. package/src/components/form/component.scss +1 -1
  17. package/src/components/highlightData/component.scss +0 -1
  18. package/src/components/highlightData/mods.scss +2 -3
  19. package/src/components/highlightData/vars.scss +2 -3
  20. package/src/components/index.scss +0 -1
  21. package/src/components/inputFramed/component.scss +11 -16
  22. package/src/components/mainLayout/component.scss +2 -2
  23. package/src/components/multiSelect/mods.scss +1 -1
  24. package/src/components/navside/component.scss +0 -4
  25. package/src/components/simpleSelect/mods.scss +1 -1
  26. package/src/components/timepicker/component.scss +6 -8
  27. package/src/components/timepicker/mods.scss +3 -4
  28. package/src/components/timepicker/vars.scss +3 -5
  29. package/src/components/presentation/component.scss +0 -20
  30. package/src/components/presentation/exports.scss +0 -4
  31. package/src/components/presentation/index.scss +0 -14
  32. package/src/components/presentation/mods.scss +0 -3
  33. package/src/components/presentation/states.scss +0 -0
  34. package/src/components/presentation/vars.scss +0 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "21.1.0-rc.1",
3
+ "version": "21.1.0-rc.2",
4
4
  "description": "A Sass framework for Lucca products.",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
@@ -23,6 +23,7 @@
23
23
  "normalize.css": "^8.0.0"
24
24
  },
25
25
  "peerDependencies": {
26
- "@lucca-front/icons": "21.1.0-rc.1"
26
+ "@lucca-front/icons": "21.1.0-rc.2",
27
+ "@lucca/prisme": "21.1.0-rc.2"
27
28
  }
28
29
  }
package/src/components/appLayout/component.scss CHANGED
@@ -19,7 +19,6 @@
19
19
  }
20
20
 
21
21
  .appLayout-navSide {
22
- min-inline-size: 0;
23
22
  grid-area: navSide;
24
23
  overflow-y: var(--components-appLayout-navSide-overflowX);
25
24
  overflow-x: var(--components-appLayout-navSide-overflowY);
package/src/components/appLayout/index.scss CHANGED
@@ -17,10 +17,5 @@
17
17
  @include mobileNavSideBottom;
18
18
  }
19
19
  }
20
-
21
- &:has(.appLayout-banner:empty),
22
- &:not(:has(.appLayout-banner)) {
23
- @include withNoBanner;
24
- }
25
20
  }
26
21
  }
package/src/components/appLayout/mods.scss CHANGED
@@ -13,7 +13,3 @@
13
13
  --components-appLayout-navSide-overflowX: visible;
14
14
  --components-appLayout-navSide-overflowY: visible;
15
15
  }
16
-
17
- @mixin withNoBanner {
18
- --commons-banner-height: 0px;
19
- }
package/src/components/callout/component.scss CHANGED
@@ -45,6 +45,7 @@
45
45
  justify-content: space-between;
46
46
  gap: var(--pr-t-spacings-150);
47
47
  align-items: flex-start;
48
+
48
49
  }
49
50
 
50
51
  .callout-content-description-actions {
package/src/components/clear/index.scss CHANGED
@@ -25,7 +25,8 @@
25
25
  .filterPill[disabled] &,
26
26
  .filterPill:not(.is-filled) &,
27
27
  .textfield-input[disabled] &,
28
- .textfield-input:not(.is-filled) & {
28
+ .textfield-input:not(.is-filled) &,
29
+ .textfield-input:not(.is-selected) & {
29
30
  @include hidden;
30
31
  }
31
32
 
package/src/components/dialog/index.scss CHANGED
@@ -61,10 +61,6 @@
61
61
  @include withCloseButton;
62
62
  }
63
63
 
64
- &:has(.dialog-inside-header-actionOptional:not(:empty)) {
65
- @include withAction;
66
- }
67
-
68
64
  &.mod-stacked {
69
65
  @include stacked;
70
66
  }
package/src/components/dialog/mods.scss CHANGED
@@ -90,10 +90,6 @@
90
90
  }
91
91
  }
92
92
 
93
- @mixin withAction {
94
- --components-dialog-insideHeaderAreas: 'container action close';
95
- }
96
-
97
93
  @mixin stacked {
98
94
 
99
95
  }
package/src/components/dialog/vars.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --components-dialog-borderRadius: var(--pr-t-border-radius-structure);
9
9
  --components-dialog-inset: 0;
10
10
  --components-dialog-animationOpening: scaleIn;
11
- --components-dialog-insideHeaderAreas: 'container close';
11
+ --components-dialog-insideHeaderAreas: 'container action close';
12
12
  --components-dialog-insideHeaderTitleAlign: left;
13
13
  --components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
14
14
  --components-dialog-insideHeaderButtonDisplay: flex;
package/src/components/errorPage/component.scss CHANGED
@@ -1,50 +1,66 @@
1
- @use '@lucca-front/scss/src/commons/utils/namespace';
2
-
3
- @mixin component($atRoot: namespace.$defaultAtRoot) {
1
+ @mixin component {
4
2
  background-color: var(--components-errorPage-background);
5
3
  block-size: 100vh;
6
4
  inline-size: 100vw;
7
5
  line-height: 1.2;
8
6
  overflow: hidden;
9
7
 
10
- @at-root ($atRoot) {
11
- .errorPage-section {
12
- block-size: 100%;
13
- max-inline-size: 1200px;
14
- padding-block: 0;
15
- padding-inline: var(--pr-t-spacings-400);
16
- inline-size: 100vw;
17
- margin-block: 0;
18
- margin-inline: auto;
19
- display: flex;
20
- justify-content: space-between;
21
- align-items: center;
22
- }
23
-
24
- .errorPage-section-info {
25
- margin-block-start: 10vh;
26
- max-inline-size: 90vw;
27
- inline-size: 450px;
28
- padding-inline-end: var(--pr-t-spacings-400);
29
- }
30
-
31
- .errorPage-section-info-title {
32
- font: var(--pr-t-font-heading-1);
33
- margin-block-end: var(--pr-t-spacings-50);
34
- }
35
-
36
- .errorPage-section-info-text {
37
- font-size: var(--pr-t-font-body-1-fontSize);
38
- line-height: var(--pr-t-font-body-1-lineHeight);
39
- margin-block-end: var(--pr-t-spacings-150);
40
- }
41
-
42
- .errorPage-section-image {
43
- margin-block-start: 10vh;
44
- inline-size: 50%;
45
- max-inline-size: 580px;
46
- min-inline-size: 350px;
47
- block-size: auto;
48
- }
8
+ .errorPage-section {
9
+ block-size: 100%;
10
+ max-inline-size: 1200px;
11
+ padding-block: 0;
12
+ padding-inline: var(--pr-t-spacings-400);
13
+ inline-size: 100vw;
14
+ margin-block: 0;
15
+ margin-inline: auto;
16
+ display: flex;
17
+ justify-content: space-between;
18
+ align-items: center;
19
+ }
20
+
21
+ .errorPage-section-info {
22
+ margin-block-start: 10vh;
23
+ max-inline-size: 90vw;
24
+ inline-size: 450px;
25
+ padding-inline-end: var(--pr-t-spacings-400);
26
+ }
27
+
28
+ .errorPage-section-info-title {
29
+ font: var(--pr-t-font-heading-1);
30
+ margin-block-end: var(--pr-t-spacings-50);
31
+ }
32
+
33
+ .errorPage-section-info-text {
34
+ font-size: var(--pr-t-font-body-1-fontSize);
35
+ line-height: var(--pr-t-font-body-1-lineHeight);
36
+ margin-block-end: var(--pr-t-spacings-150);
37
+ }
38
+
39
+ .errorPage-section-image {
40
+ margin-block-start: 10vh;
41
+ inline-size: 50%;
42
+ max-inline-size: 580px;
43
+ min-inline-size: 350px;
44
+ block-size: auto;
45
+ }
46
+ }
47
+
48
+ @mixin compact {
49
+ overflow-y: auto;
50
+
51
+ .errorPage-section {
52
+ flex-direction: column;
53
+ justify-content: center;
54
+ }
55
+
56
+ .errorPage-section-info {
57
+ margin-block: var(--pr-t-spacings-400);
58
+ order: 1;
59
+ padding: 0;
60
+ }
61
+
62
+ .errorPage-section-image {
63
+ margin-block-start: var(--pr-t-spacings-400);
64
+ order: 0;
49
65
  }
50
66
  }
package/src/components/errorPage/index.scss CHANGED
@@ -11,9 +11,5 @@
11
11
  @include media.max('S') {
12
12
  @include compact;
13
13
  }
14
-
15
- .appLayout & {
16
- @include inAppLayout;
17
- }
18
14
  }
19
15
  }
package/src/components/errorPage/mods.scss CHANGED
@@ -1,38 +0,0 @@
1
- @mixin compact {
2
- overflow-y: auto;
3
-
4
- .errorPage-section {
5
- flex-direction: column;
6
- justify-content: center;
7
- }
8
-
9
- .errorPage-section-info {
10
- margin-block: var(--pr-t-spacings-400);
11
- order: 1;
12
- padding: 0;
13
- }
14
-
15
- .errorPage-section-image {
16
- margin-block-start: var(--pr-t-spacings-400);
17
- order: 0;
18
- }
19
- }
20
-
21
- @mixin inAppLayout {
22
- &,
23
- .errorPage-section {
24
- block-size: 100%;
25
- inline-size: 100%;
26
- }
27
-
28
- .errorPage-section {
29
- gap: var(--pr-t-spacings-400);
30
- }
31
-
32
- .errorPage-section-image,
33
- .errorPage-section-info {
34
- margin-block-start: 0;
35
- padding: 0;
36
- max-inline-size: 100%;
37
- }
38
- }
package/src/components/fieldset/component.scss CHANGED
@@ -17,10 +17,6 @@
17
17
  inline-size: 100%;
18
18
  min-block-size: var(--pr-t-spacings-300);
19
19
  display: contents;
20
-
21
- &:has(.fieldset-title-content-text:empty) {
22
- display: none;
23
- }
24
20
  }
25
21
 
26
22
  .fieldset-title-content {
package/src/components/filterPill/component.scss CHANGED
@@ -40,18 +40,7 @@
40
40
 
41
41
  .filterPill_popover-content-option {
42
42
  padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
43
- border-radius: var(--pr-t-border-radius-default);
44
- position: relative;
45
-
46
- .formLabel {
47
- position: static;
48
-
49
- &::before {
50
- content: '';
51
- position: absolute;
52
- inset: 0;
53
- }
54
- }
43
+ border-radius: var(--pr-t-border-radius-50);
55
44
 
56
45
  &:hover {
57
46
  background-color: var(--palettes-neutral-50);
package/src/components/form/component.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @mixin component($atRoot: namespace.$defaultAtRoot) {
7
7
  display: block;
8
8
 
9
- .divider:not(.mod-vertical) {
9
+ .divider {
10
10
  margin-block: var(--pr-t-spacings-300);
11
11
  }
12
12
 
package/src/components/highlightData/component.scss CHANGED
@@ -35,7 +35,6 @@
35
35
  }
36
36
 
37
37
  .highlightData-content-subText {
38
- grid-area: subtext;
39
38
  font: var(--pr-t-font-body-XS);
40
39
  color: var(--pr-t-color-text-subtle);
41
40
  margin-block-start: var(--pr-t-spacings-100) !important; // Override list reset
package/src/components/highlightData/mods.scss CHANGED
@@ -7,9 +7,8 @@
7
7
  }
8
8
 
9
9
  @mixin valueFirst {
10
- --components-highlightData-grid : 'value action'
11
- 'title action'
12
- 'subtext action';
10
+ --components-highlightData-grid : 'value action'
11
+ 'title action';
13
12
  }
14
13
 
15
14
  @mixin valueFirstIllustrations {
package/src/components/highlightData/vars.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  @mixin vars {
2
2
  --components-highlightData-display: grid;
3
- --components-highlightData-grid: 'title action'
4
- 'value action'
5
- 'subtext action';
3
+ --components-highlightData-grid: 'title action'
4
+ 'value action';
6
5
  --components-highlightData-alignItem: center;
7
6
  --components-highlightData-background: var(--pr-t-elevation-surface-raised);
8
7
  --components-highlightData-padding-inline: var(--pr-t-spacings-200);
package/src/components/index.scss CHANGED
@@ -110,7 +110,6 @@
110
110
  @forward 'listboxOption';
111
111
  @forward 'suggestion';
112
112
  @forward 'resourceCard';
113
- @forward 'presentation';
114
113
  @forward 'color';
115
114
  @forward 'bubbleIllustration';
116
115
  @forward 'bubbleIcon';
package/src/components/inputFramed/component.scss CHANGED
@@ -13,12 +13,18 @@
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
 
16
- .formLabel-info {
17
- position: relative;
18
- z-index: 1;
19
- }
20
-
21
16
  @at-root ($atRoot) {
17
+ .inputFramed-header-label.formLabel {
18
+ position: static;
19
+ font-weight: var(--components-inputFramed-header-label-fontWeight);
20
+
21
+ &::after {
22
+ content: '';
23
+ position: absolute;
24
+ inset: calc(var(--pr-t-spacings-50) * -1);
25
+ }
26
+ }
27
+
22
28
  .inputFramed-header-field {
23
29
  flex: 1;
24
30
 
@@ -42,17 +48,6 @@
42
48
  align-content: flex-start;
43
49
  gap: var(--pr-t-spacings-100);
44
50
  align-items: var(--components-inputFramed-header-alignItems);
45
-
46
- .inputFramed-header-label.formLabel {
47
- position: static;
48
- font-weight: var(--components-inputFramed-header-label-fontWeight);
49
-
50
- &::after {
51
- content: '';
52
- position: absolute;
53
- inset: calc(var(--pr-t-spacings-50) * -1);
54
- }
55
- }
56
51
  }
57
52
 
58
53
  .inputFramed-header-illustration {
package/src/components/mainLayout/component.scss CHANGED
@@ -75,11 +75,11 @@
75
75
  --components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-300);
76
76
  }
77
77
 
78
- &:not(& + &) {
78
+ &:first-of-type {
79
79
  margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
80
80
  }
81
81
 
82
- &:not(:has(+ &)) {
82
+ &:last-of-type {
83
83
  margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
84
84
  }
85
85
 
package/src/components/multiSelect/mods.scss CHANGED
@@ -61,7 +61,7 @@
61
61
  border-radius: 0;
62
62
  background-color: transparent;
63
63
  padding: var(--pr-t-spacings-50);
64
- margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
64
+ margin: var(--pr-t-spacings-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
65
65
 
66
66
  lu-simple-select-default-option.pr-u-ellipsis {
67
67
  white-space: normal !important;
package/src/components/navside/component.scss CHANGED
@@ -116,10 +116,6 @@
116
116
  font-weight: var(--pr-t-font-fontWeight-semibold);
117
117
  }
118
118
 
119
- .navSide-item-link-title {
120
- overflow-wrap: anywhere;
121
- }
122
-
123
119
  .navSide-item-link-badgesOptional {
124
120
  display: flex;
125
121
  column-gap: var(--pr-t-spacings-150);
package/src/components/simpleSelect/mods.scss CHANGED
@@ -62,6 +62,6 @@
62
62
  border-radius: 0;
63
63
  background-color: transparent;
64
64
  padding: var(--pr-t-spacings-50);
65
- margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
65
+ margin: var(--pr-t-spacings-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
66
66
  }
67
67
  }
package/src/components/timepicker/component.scss CHANGED
@@ -60,13 +60,13 @@
60
60
  justify-content: center;
61
61
  border: 0;
62
62
  block-size: var(--components-timepicker-input-height);
63
- inline-size: calc(var(--components-timepicker-input-minInlineSize) + var(--components-timepicker-input-digits, 2) * 1ch);
63
+ inline-size: var(--components-timepicker-input-width);
64
64
  outline: none;
65
65
  color: inherit;
66
66
  background-color: transparent;
67
67
  text-align: center;
68
- padding-block: var(--components-timepicker-input-padding-block);
69
- padding-inline: var(--components-timepicker-input-padding-inline);
68
+ padding-block: var(--components-timepicker-paddingInput-inline);
69
+ padding-inline: var(--components-timepicker-paddingInput-block);
70
70
  box-sizing: content-box;
71
71
  opacity: 0.0001;
72
72
 
@@ -83,7 +83,7 @@
83
83
 
84
84
  .timePicker-fieldset-group-textfield-display {
85
85
  position: absolute;
86
- inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
86
+ inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
87
87
  border-radius: var(--pr-t-border-radius-50);
88
88
  pointer-events: none;
89
89
  display: grid;
@@ -133,9 +133,7 @@
133
133
  }
134
134
 
135
135
  .timePicker-fieldset-meridiem {
136
- box-sizing: content-box;
137
- inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
138
- padding-inline: var(--components-timepicker-display-padding-block);
136
+ inline-size: calc(var(--components-timepicker-input-width) + var(--components-timepicker-paddingInput-block) * 2);
139
137
  position: relative;
140
138
  align-self: stretch;
141
139
  margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -143,7 +141,7 @@
143
141
  &::after {
144
142
  content: '';
145
143
  position: absolute;
146
- inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
144
+ inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
147
145
  border-radius:var(--pr-t-border-radius-50);
148
146
  display: grid;
149
147
  place-items: center;
package/src/components/timepicker/mods.scss CHANGED
@@ -2,11 +2,10 @@
2
2
 
3
3
  @mixin S {
4
4
  --components-timepicker-font: var(--pr-t-font-body-S);
5
- --components-timepicker-display-padding-inline: var(--pr-t-spacings-25);
6
- --components-timepicker-display-padding-block: var(--pr-t-spacings-75);
7
- --components-timepicker-input-padding-inline: var(--pr-t-spacings-75);
8
- --components-timepicker-input-padding-block: var(--pr-t-spacings-25);
5
+ --components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);
6
+ --components-timepicker-paddingInput-block: var(--pr-t-spacings-75);
9
7
  --components-timepicker-input-height: 1.75rem;
8
+ --components-timepicker-input-width: 1.25rem;
10
9
  --components-timepicker-separator-left: 1.875rem;
11
10
  }
12
11
 
package/src/components/timepicker/vars.scss CHANGED
@@ -4,11 +4,9 @@
4
4
  --components-timepicker-color: var(--pr-t-color-input-text);
5
5
  --components-timepicker-font: var(--pr-t-font-body-M);
6
6
  --components-timepicker-input-height: 2rem;
7
- --components-timepicker-input-minInlineSize: 0.5rem;
8
- --components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
9
- --components-timepicker-input-padding-block: var(--pr-t-spacings-50);
7
+ --components-timepicker-input-width: 1.5rem;
10
8
  --components-timepicker-padding: 0;
11
- --components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
12
- --components-timepicker-display-padding-block: var(--pr-t-spacings-100);
9
+ --components-timepicker-paddingInput-inline: var(--pr-t-spacings-50);
10
+ --components-timepicker-paddingInput-block: var(--pr-t-spacings-100);
13
11
  --components-timepicker-separator-left: 2.375rem;
14
12
  }
package/src/components/presentation/component.scss DELETED
@@ -1,20 +0,0 @@
1
- @use '@lucca-front/scss/src/commons/utils/namespace';
2
-
3
- @mixin component($atRoot: namespace.$defaultAtRoot) {
4
- @at-root ($atRoot) {
5
- .presentation-description {
6
- margin: 0;
7
- }
8
-
9
- .presentation-description-term {
10
- font: var(--pr-t-font-body-S);
11
- color: var(--pr-t-color-text-subtle);
12
- display: var(--components-presentation-description-term-display);
13
- }
14
-
15
- .presentation-description-definition {
16
- display: var(--components-presentation-description-definition-display);
17
- margin: 0;
18
- }
19
- }
20
- }
package/src/components/presentation/exports.scss DELETED
@@ -1,4 +0,0 @@
1
- @forward 'vars';
2
- @forward 'mods';
3
- @forward 'states';
4
- @forward 'component';
package/src/components/presentation/index.scss DELETED
@@ -1,14 +0,0 @@
1
- @use 'exports' as *;
2
-
3
- .presentation {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
8
-
9
- @layer mods {
10
- &.mod-checkable{
11
- @include checkable;
12
- }
13
- }
14
- }
package/src/components/presentation/mods.scss DELETED
@@ -1,3 +0,0 @@
1
- @mixin checkable {
2
- --components-presentation-description-child-display: inline-block
3
- }
package/src/components/presentation/states.scss DELETED
File without changes
package/src/components/presentation/vars.scss DELETED
@@ -1,5 +0,0 @@
1
- @mixin vars {
2
- --components-presentation-description-child-display: block;
3
- --components-presentation-description-term-display: var(--components-presentation-description-child-display);
4
- --components-presentation-description-definition-display: var(--components-presentation-description-child-display);
5
- }