@lucca-front/scss 21.1.0-split.0 → 21.1.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 (56) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +3 -3
  3. package/src/commons/core.scss +24 -6
  4. package/src/commons/utils/media.scss +12 -1
  5. package/src/components/_sample/index.scss +0 -2
  6. package/src/components/appLayout/component.scss +1 -0
  7. package/src/components/appLayout/index.scss +5 -0
  8. package/src/components/appLayout/mods.scss +4 -0
  9. package/src/components/bubbleIcon/vars.scss +1 -1
  10. package/src/components/callout/component.scss +0 -1
  11. package/src/components/clear/index.scss +1 -2
  12. package/src/components/dataTable/index.scss +1 -1
  13. package/src/components/dialog/component.scss +1 -1
  14. package/src/components/dialog/index.scss +4 -0
  15. package/src/components/dialog/mods.scss +5 -0
  16. package/src/components/dialog/vars.scss +2 -2
  17. package/src/components/dropdown/index.scss +5 -5
  18. package/src/components/errorPage/component.scss +42 -58
  19. package/src/components/errorPage/index.scss +4 -0
  20. package/src/components/errorPage/mods.scss +38 -0
  21. package/src/components/fieldset/component.scss +5 -0
  22. package/src/components/fieldset/index.scss +7 -0
  23. package/src/components/fieldset/mods.scss +4 -0
  24. package/src/components/fieldset/vars.scss +1 -0
  25. package/src/components/filterPill/component.scss +12 -1
  26. package/src/components/form/component.scss +1 -1
  27. package/src/components/form/index.scss +6 -3
  28. package/src/components/highlightData/component.scss +2 -0
  29. package/src/components/highlightData/mods.scss +3 -2
  30. package/src/components/highlightData/vars.scss +3 -2
  31. package/src/components/index.scss +2 -0
  32. package/src/components/inputFramed/component.scss +16 -11
  33. package/src/components/inputFramed/mods.scss +0 -1
  34. package/src/components/inputFramed/vars.scss +0 -1
  35. package/src/components/mainLayout/component.scss +2 -2
  36. package/src/components/multiSelect/mods.scss +1 -1
  37. package/src/components/navside/component.scss +4 -0
  38. package/src/components/pageHeader/component.scss +1 -1
  39. package/src/components/presentation/component.scss +53 -0
  40. package/src/components/presentation/exports.scss +4 -0
  41. package/src/components/presentation/index.scss +12 -0
  42. package/src/components/presentation/mods.scss +0 -0
  43. package/src/components/presentation/states.scss +0 -0
  44. package/src/components/presentation/vars.scss +4 -0
  45. package/src/components/simpleSelect/component.scss +2 -0
  46. package/src/components/simpleSelect/mods.scss +1 -1
  47. package/src/components/simpleSelect/states.scss +2 -2
  48. package/src/components/softwareIcon/component.scss +18 -0
  49. package/src/components/softwareIcon/exports.scss +4 -0
  50. package/src/components/softwareIcon/index.scss +30 -0
  51. package/src/components/softwareIcon/mods.scss +15 -0
  52. package/src/components/softwareIcon/states.scss +8 -0
  53. package/src/components/softwareIcon/vars.scss +3 -0
  54. package/src/components/timepicker/component.scss +8 -6
  55. package/src/components/timepicker/mods.scss +4 -3
  56. package/src/components/timepicker/vars.scss +5 -3
package/src/components/pageHeader/component.scss CHANGED
@@ -62,7 +62,7 @@
62
62
  .pageHeader-description {
63
63
  max-inline-size: var(--components-pageHeader-description-max-width);
64
64
  margin-block-start: var(--pr-t-spacings-100);
65
- color: var(--palettes-neutral-700);
65
+ color: var(--pr-t-color-text);
66
66
  }
67
67
 
68
68
  .pageHeader-description-paragraph {
package/src/components/presentation/component.scss ADDED
@@ -0,0 +1,53 @@
1
+ @use '@lucca-front/scss/src/commons/utils/namespace';
2
+ @use '@lucca-front/scss/src/commons/utils/a11y';
3
+
4
+ @mixin component($atRoot: namespace.$defaultAtRoot) {
5
+ @at-root ($atRoot) {
6
+ .presentation-description {
7
+ margin: 0;
8
+ }
9
+
10
+ .presentation-description-term {
11
+ font: var(--pr-t-font-body-S);
12
+ color: var(--pr-t-color-text-subtle);
13
+ display: flex;
14
+ align-items: center;
15
+ }
16
+
17
+ .presentation-description-term-info {
18
+ position: relative;
19
+
20
+ .lucca-icon {
21
+ color: inherit;
22
+ font-size: inherit;
23
+ line-height: inherit;
24
+ margin-inline-start: var(--pr-t-spacings-25);
25
+ position: relative;
26
+ inset-block-end: 1px;
27
+ }
28
+
29
+ &:focus-visible {
30
+ outline: none;
31
+
32
+ .lucca-icon {
33
+ &::after {
34
+ content: '';
35
+ position: absolute;
36
+ inline-size: 0.875rem;
37
+ block-size: 0.875rem;
38
+ border-radius: 50%;
39
+ inset-block-end: var(--pr-t-spacings-25);
40
+ inset-inline-end: 0;
41
+
42
+ @include a11y.focusVisible($offset: 0);
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+ .presentation-description-definition {
49
+ display: var(--components-presentation-description-definition-display);
50
+ margin: 0;
51
+ }
52
+ }
53
+ }
package/src/components/presentation/exports.scss ADDED
@@ -0,0 +1,4 @@
1
+ @forward 'vars';
2
+ @forward 'mods';
3
+ @forward 'states';
4
+ @forward 'component';
package/src/components/presentation/index.scss ADDED
@@ -0,0 +1,12 @@
1
+ @use 'exports' as *;
2
+
3
+ .presentation {
4
+ @layer components {
5
+ @include vars;
6
+ @include component;
7
+ }
8
+
9
+ @layer mods {
10
+
11
+ }
12
+ }
package/src/components/presentation/mods.scss ADDED
File without changes
package/src/components/presentation/states.scss ADDED
File without changes
package/src/components/presentation/vars.scss ADDED
@@ -0,0 +1,4 @@
1
+ @mixin vars {
2
+ --components-presentation-description-child-display: block;
3
+ --components-presentation-description-term-display: var(--components-presentation-description-child-display);
4
+ }
package/src/components/simpleSelect/component.scss CHANGED
@@ -23,6 +23,8 @@
23
23
  }
24
24
 
25
25
  .simpleSelect-field-prefix {
26
+ display: none;
27
+
26
28
  &:not(:empty) {
27
29
  display: flex;
28
30
  margin-inline-end: var(--pr-t-spacings-50);
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
  }
package/src/components/simpleSelect/states.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  @mixin selected {
41
41
  .simpleSelect-field-input {
42
42
  &::placeholder {
43
- color: transparent;
43
+ opacity: 0;
44
44
  }
45
45
  }
46
46
  }
@@ -48,7 +48,7 @@
48
48
  @mixin selectedSearchFilled {
49
49
  .simpleSelect-field-input {
50
50
  &::placeholder {
51
- color: transparent;
51
+ opacity: 0;
52
52
  }
53
53
  }
54
54
 
package/src/components/softwareIcon/component.scss ADDED
@@ -0,0 +1,18 @@
1
+
2
+ @use '@lucca-front/scss/src/commons/utils/namespace';
3
+
4
+ @mixin component($atRoot: namespace.$defaultAtRoot) {
5
+ display: inline-block;
6
+ inline-size: var(--components-softwareIcon-size);
7
+ block-size: var(--components-softwareIcon-size);
8
+
9
+ svg {
10
+ display: block;
11
+ inline-size: 100%;
12
+ block-size: 100%;
13
+ }
14
+
15
+ @at-root ($atRoot) {
16
+
17
+ }
18
+ }
package/src/components/softwareIcon/exports.scss ADDED
@@ -0,0 +1,4 @@
1
+ @forward 'vars';
2
+ @forward 'mods';
3
+ @forward 'states';
4
+ @forward 'component';
package/src/components/softwareIcon/index.scss ADDED
@@ -0,0 +1,30 @@
1
+ @use 'exports' as *;
2
+
3
+ .softwareIcon {
4
+ @layer components {
5
+ @include vars;
6
+ @include component;
7
+ }
8
+
9
+ @layer mods {
10
+ &.mod-XXS {
11
+ @include XXS;
12
+ }
13
+
14
+ &.mod-XS {
15
+ @include XS;
16
+ }
17
+
18
+ &.mod-S {
19
+ @include S;
20
+ }
21
+
22
+ &.mod-L {
23
+ @include L;
24
+ }
25
+
26
+ &.is-disabled {
27
+ @include disabled;
28
+ }
29
+ }
30
+ }
package/src/components/softwareIcon/mods.scss ADDED
@@ -0,0 +1,15 @@
1
+ @mixin XXS {
2
+ --components-softwareIcon-size: var(--pr-t-spacings-200);
3
+ }
4
+
5
+ @mixin XS {
6
+ --components-softwareIcon-size: var(--pr-t-spacings-300);
7
+ }
8
+
9
+ @mixin S {
10
+ --components-softwareIcon-size: var(--pr-t-spacings-400);
11
+ }
12
+
13
+ @mixin L {
14
+ --components-softwareIcon-size: var(--pr-t-spacings-600);
15
+ }
package/src/components/softwareIcon/states.scss ADDED
@@ -0,0 +1,8 @@
1
+ @mixin disabled {
2
+ --components-softwareIcon-disabled-100: var(--palettes-neutral-100);
3
+ --components-softwareIcon-disabled-200: var(--palettes-neutral-200);
4
+ --components-softwareIcon-disabled-300: var(--palettes-neutral-300);
5
+ --components-softwareIcon-disabled-400: var(--palettes-neutral-400);
6
+ --components-softwareIcon-disabled-500: var(--palettes-neutral-500);
7
+ --components-softwareIcon-disabled-600: var(--palettes-neutral-600);
8
+ }
package/src/components/softwareIcon/vars.scss ADDED
@@ -0,0 +1,3 @@
1
+ @mixin vars {
2
+ --components-softwareIcon-size: var(--pr-t-spacings-500);
3
+ }
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: var(--components-timepicker-input-width);
63
+ inline-size: calc(var(--components-timepicker-input-minInlineSize) + var(--components-timepicker-input-digits, 2) * 1ch);
64
64
  outline: none;
65
65
  color: inherit;
66
66
  background-color: transparent;
67
67
  text-align: center;
68
- padding-block: var(--components-timepicker-paddingInput-inline);
69
- padding-inline: var(--components-timepicker-paddingInput-block);
68
+ padding-block: var(--components-timepicker-input-padding-block);
69
+ padding-inline: var(--components-timepicker-input-padding-inline);
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-paddingInput-inline) var(--components-timepicker-paddingInput-block);
86
+ inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
87
87
  border-radius: var(--pr-t-border-radius-50);
88
88
  pointer-events: none;
89
89
  display: grid;
@@ -133,7 +133,9 @@
133
133
  }
134
134
 
135
135
  .timePicker-fieldset-meridiem {
136
- inline-size: calc(var(--components-timepicker-input-width) + var(--components-timepicker-paddingInput-block) * 2);
136
+ box-sizing: content-box;
137
+ inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
138
+ padding-inline: var(--components-timepicker-display-padding-block);
137
139
  position: relative;
138
140
  align-self: stretch;
139
141
  margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -141,7 +143,7 @@
141
143
  &::after {
142
144
  content: '';
143
145
  position: absolute;
144
- inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
146
+ inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
145
147
  border-radius:var(--pr-t-border-radius-50);
146
148
  display: grid;
147
149
  place-items: center;
package/src/components/timepicker/mods.scss CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  @mixin S {
4
4
  --components-timepicker-font: var(--pr-t-font-body-S);
5
- --components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);
6
- --components-timepicker-paddingInput-block: var(--pr-t-spacings-75);
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);
7
9
  --components-timepicker-input-height: 1.75rem;
8
- --components-timepicker-input-width: 1.25rem;
9
10
  --components-timepicker-separator-left: 1.875rem;
10
11
  }
11
12
 
package/src/components/timepicker/vars.scss CHANGED
@@ -4,9 +4,11 @@
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-width: 1.5rem;
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);
8
10
  --components-timepicker-padding: 0;
9
- --components-timepicker-paddingInput-inline: var(--pr-t-spacings-50);
10
- --components-timepicker-paddingInput-block: var(--pr-t-spacings-100);
11
+ --components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
12
+ --components-timepicker-display-padding-block: var(--pr-t-spacings-100);
11
13
  --components-timepicker-separator-left: 2.375rem;
12
14
  }