@lucca-front/scss 21.0.1 → 21.0.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 (25) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/components/appLayout/component.scss +1 -0
  4. package/src/components/appLayout/index.scss +5 -0
  5. package/src/components/appLayout/mods.scss +4 -0
  6. package/src/components/callout/component.scss +0 -1
  7. package/src/components/clear/index.scss +1 -2
  8. package/src/components/dialog/index.scss +4 -0
  9. package/src/components/dialog/mods.scss +4 -0
  10. package/src/components/dialog/vars.scss +1 -1
  11. package/src/components/errorPage/component.scss +42 -58
  12. package/src/components/errorPage/index.scss +4 -0
  13. package/src/components/errorPage/mods.scss +38 -0
  14. package/src/components/fieldset/component.scss +4 -0
  15. package/src/components/filterPill/component.scss +12 -1
  16. package/src/components/filterPill/mods.scss +0 -1
  17. package/src/components/form/component.scss +1 -1
  18. package/src/components/highlightData/component.scss +1 -0
  19. package/src/components/highlightData/mods.scss +3 -2
  20. package/src/components/highlightData/vars.scss +3 -2
  21. package/src/components/inputFramed/component.scss +16 -11
  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 +4 -0
  25. package/src/components/simpleSelect/mods.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "21.0.1",
3
+ "version": "21.0.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": "21.0.1"
26
+ "@lucca-front/icons": "21.0.3"
27
27
  }
28
28
  }
package/src/components/appLayout/component.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  }
20
20
 
21
21
  .appLayout-navSide {
22
+ min-inline-size: 0;
22
23
  grid-area: navSide;
23
24
  overflow-y: var(--components-appLayout-navSide-overflowX);
24
25
  overflow-x: var(--components-appLayout-navSide-overflowY);
package/src/components/appLayout/index.scss CHANGED
@@ -17,5 +17,10 @@
17
17
  @include mobileNavSideBottom;
18
18
  }
19
19
  }
20
+
21
+ &:has(.appLayout-banner:empty),
22
+ &:not(:has(.appLayout-banner)) {
23
+ @include withNoBanner;
24
+ }
20
25
  }
21
26
  }
package/src/components/appLayout/mods.scss CHANGED
@@ -13,3 +13,7 @@
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,7 +45,6 @@
45
45
  justify-content: space-between;
46
46
  gap: var(--pr-t-spacings-150);
47
47
  align-items: flex-start;
48
-
49
48
  }
50
49
 
51
50
  .callout-content-description-actions {
package/src/components/clear/index.scss CHANGED
@@ -25,8 +25,7 @@
25
25
  .filterPill[disabled] &,
26
26
  .filterPill:not(.is-filled) &,
27
27
  .textfield-input[disabled] &,
28
- .textfield-input:not(.is-filled) &,
29
- .textfield-input:not(.is-selected) & {
28
+ .textfield-input:not(.is-filled) & {
30
29
  @include hidden;
31
30
  }
32
31
 
package/src/components/dialog/index.scss CHANGED
@@ -61,6 +61,10 @@
61
61
  @include withCloseButton;
62
62
  }
63
63
 
64
+ &:has(.dialog-inside-header-actionOptional:not(:empty)) {
65
+ @include withAction;
66
+ }
67
+
64
68
  &.mod-stacked {
65
69
  @include stacked;
66
70
  }
package/src/components/dialog/mods.scss CHANGED
@@ -90,6 +90,10 @@
90
90
  }
91
91
  }
92
92
 
93
+ @mixin withAction {
94
+ --components-dialog-insideHeaderAreas: 'container action close';
95
+ }
96
+
93
97
  @mixin stacked {
94
98
 
95
99
  }
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 action close';
11
+ --components-dialog-insideHeaderAreas: 'container 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,66 +1,50 @@
1
- @mixin component {
1
+ @use '@lucca-front/scss/src/commons/utils/namespace';
2
+
3
+ @mixin component($atRoot: namespace.$defaultAtRoot) {
2
4
  background-color: var(--components-errorPage-background);
3
5
  block-size: 100vh;
4
6
  inline-size: 100vw;
5
7
  line-height: 1.2;
6
8
  overflow: hidden;
7
9
 
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;
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
+ }
65
49
  }
66
50
  }
package/src/components/errorPage/index.scss CHANGED
@@ -11,5 +11,9 @@
11
11
  @include media.max('S') {
12
12
  @include compact;
13
13
  }
14
+
15
+ .appLayout & {
16
+ @include inAppLayout;
17
+ }
14
18
  }
15
19
  }
package/src/components/errorPage/mods.scss CHANGED
@@ -0,0 +1,38 @@
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,6 +17,10 @@
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
+ }
20
24
  }
21
25
 
22
26
  .fieldset-title-content {
package/src/components/filterPill/component.scss CHANGED
@@ -40,7 +40,18 @@
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-50);
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
+ }
44
55
 
45
56
  &:hover {
46
57
  background-color: var(--palettes-neutral-50);
package/src/components/filterPill/mods.scss CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  @mixin checkbox {
4
4
  --components-filterPill-gap: var(--pr-t-spacings-100);
5
- --components-filterPill-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);
6
5
  --components-filterPill-label-maxInlineSize: 15rem;
7
6
  }
8
7
 
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 {
9
+ .divider:not(.mod-vertical) {
10
10
  margin-block: var(--pr-t-spacings-300);
11
11
  }
12
12
 
package/src/components/highlightData/component.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  }
36
36
 
37
37
  .highlightData-content-subText {
38
+ grid-area: subtext;
38
39
  font: var(--pr-t-font-body-XS);
39
40
  color: var(--pr-t-color-text-subtle);
40
41
  margin-block-start: var(--pr-t-spacings-100) !important; // Override list reset
package/src/components/highlightData/mods.scss CHANGED
@@ -7,8 +7,9 @@
7
7
  }
8
8
 
9
9
  @mixin valueFirst {
10
- --components-highlightData-grid : 'value action'
11
- 'title action';
10
+ --components-highlightData-grid : 'value action'
11
+ 'title action'
12
+ 'subtext action';
12
13
  }
13
14
 
14
15
  @mixin valueFirstIllustrations {
package/src/components/highlightData/vars.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @mixin vars {
2
2
  --components-highlightData-display: grid;
3
- --components-highlightData-grid: 'title action'
4
- 'value action';
3
+ --components-highlightData-grid: 'title action'
4
+ 'value action'
5
+ 'subtext action';
5
6
  --components-highlightData-alignItem: center;
6
7
  --components-highlightData-background: var(--pr-t-elevation-surface-raised);
7
8
  --components-highlightData-padding-inline: var(--pr-t-spacings-200);
package/src/components/inputFramed/component.scss CHANGED
@@ -13,18 +13,12 @@
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
 
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
- }
16
+ .formLabel-info {
17
+ position: relative;
18
+ z-index: 1;
19
+ }
27
20
 
21
+ @at-root ($atRoot) {
28
22
  .inputFramed-header-field {
29
23
  flex: 1;
30
24
 
@@ -48,6 +42,17 @@
48
42
  align-content: flex-start;
49
43
  gap: var(--pr-t-spacings-100);
50
44
  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
+ }
51
56
  }
52
57
 
53
58
  .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
- &:first-of-type {
78
+ &:not(& + &) {
79
79
  margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
80
80
  }
81
81
 
82
- &:last-of-type {
82
+ &:not(:has(+ &)) {
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-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
64
+ margin: var(--pr-t-spacings-75) 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,6 +116,10 @@
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
+
119
123
  .navSide-item-link-badgesOptional {
120
124
  display: flex;
121
125
  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-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
65
+ margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
66
66
  }
67
67
  }