@lucca-front/scss 20.2.0-rc.1 → 20.2.0-rc.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 (124) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/config.scss +0 -5
  4. package/src/commons/core.scss +2 -2
  5. package/src/commons/exports.scss +1 -0
  6. package/src/commons/index.scss +2 -9
  7. package/src/commons/utils/index.scss +478 -480
  8. package/src/commons/utils/reset.scss +1 -1
  9. package/src/components/_sample/index.scss +6 -14
  10. package/src/components/appLayout/index.scss +7 -11
  11. package/src/components/avatar/index.scss +35 -43
  12. package/src/components/box/index.scss +3 -9
  13. package/src/components/breadcrumbs/index.scss +10 -16
  14. package/src/components/button/index.scss +125 -119
  15. package/src/components/button/mods.scss +1 -18
  16. package/src/components/button/states.scss +18 -0
  17. package/src/components/buttonGroup/component.scss +17 -0
  18. package/src/components/buttonGroup/index.scss +8 -20
  19. package/src/components/calendar/index.scss +44 -56
  20. package/src/components/callout/index.scss +4 -8
  21. package/src/components/calloutDisclosure/index.scss +9 -15
  22. package/src/components/card/index.scss +20 -26
  23. package/src/components/checkbox/index.scss +30 -36
  24. package/src/components/checkboxField/index.scss +55 -61
  25. package/src/components/chip/index.scss +17 -23
  26. package/src/components/clear/index.scss +17 -23
  27. package/src/components/code/index.scss +4 -8
  28. package/src/components/collapse/index.scss +7 -11
  29. package/src/components/comment/index.scss +20 -30
  30. package/src/components/container/index.scss +25 -29
  31. package/src/components/contentSection/index.scss +2 -4
  32. package/src/components/dataTable/index.scss +50 -66
  33. package/src/components/dataTable/mods.scss +2 -2
  34. package/src/components/dataTableSticked/index.scss +24 -32
  35. package/src/components/dateField/index.scss +20 -24
  36. package/src/components/dateRangeField/index.scss +25 -29
  37. package/src/components/dialog/index.scss +33 -37
  38. package/src/components/divider/index.scss +7 -11
  39. package/src/components/dropdown/index.scss +6 -12
  40. package/src/components/emptyState/component.scss +3 -0
  41. package/src/components/emptyState/index.scss +7 -11
  42. package/src/components/errorPage/index.scss +4 -8
  43. package/src/components/fancyBox/index.scss +4 -8
  44. package/src/components/field/index.scss +76 -96
  45. package/src/components/fieldset/index.scss +12 -18
  46. package/src/components/file/index.scss +30 -38
  47. package/src/components/fileEntry/index.scss +18 -24
  48. package/src/components/fileToolbar/index.scss +6 -10
  49. package/src/components/fileUpload/index.scss +31 -37
  50. package/src/components/filterBar/index.scss +13 -17
  51. package/src/components/filterBarDeprecated/index.scss +4 -8
  52. package/src/components/filterPill/index.scss +48 -56
  53. package/src/components/filters/index.scss +8 -14
  54. package/src/components/footer/index.scss +34 -38
  55. package/src/components/form/index.scss +84 -114
  56. package/src/components/form/mods.scss +5 -7
  57. package/src/components/formLabel/index.scss +13 -19
  58. package/src/components/gauge/index.scss +7 -11
  59. package/src/components/grid/index.scss +21 -25
  60. package/src/components/header/index.scss +12 -18
  61. package/src/components/highlightData/index.scss +24 -28
  62. package/src/components/horizontalNavigation/index.scss +36 -42
  63. package/src/components/index.scss +55 -57
  64. package/src/components/indexTable/index.scss +56 -54
  65. package/src/components/inlineMessage/index.scss +12 -18
  66. package/src/components/inputFramed/index.scss +24 -30
  67. package/src/components/label/index.scss +9 -13
  68. package/src/components/layout/index.scss +45 -51
  69. package/src/components/link/index.scss +8 -14
  70. package/src/components/link/mods.scss +1 -1
  71. package/src/components/list/index.scss +11 -15
  72. package/src/components/listing/index.scss +18 -22
  73. package/src/components/loading/index.scss +23 -27
  74. package/src/components/main/index.scss +15 -21
  75. package/src/components/mainLayout/index.scss +20 -26
  76. package/src/components/mobileHeader/index.scss +4 -8
  77. package/src/components/mobileNavigation/index.scss +2 -4
  78. package/src/components/navside/index.scss +56 -78
  79. package/src/components/newBadge/index.scss +4 -8
  80. package/src/components/notchBox/index.scss +13 -17
  81. package/src/components/notchBox/mods.scss +3 -3
  82. package/src/components/numericBadge/index.scss +16 -22
  83. package/src/components/pageHeader/index.scss +22 -26
  84. package/src/components/pagination/index.scss +6 -12
  85. package/src/components/plgPush/index.scss +2 -4
  86. package/src/components/popover/index.scss +2 -4
  87. package/src/components/progress/index.scss +9 -15
  88. package/src/components/radio/index.scss +12 -18
  89. package/src/components/radioButtons/index.scss +9 -15
  90. package/src/components/radioField/index.scss +40 -46
  91. package/src/components/readMore/index.scss +15 -21
  92. package/src/components/richText/index.scss +14 -20
  93. package/src/components/scrollBox/index.scss +10 -14
  94. package/src/components/section/index.scss +12 -16
  95. package/src/components/segmentedControl/index.scss +15 -23
  96. package/src/components/skeleton/index.scss +37 -43
  97. package/src/components/skipLinks/index.scss +2 -4
  98. package/src/components/sortableList/index.scss +6 -12
  99. package/src/components/statusBadge/index.scss +4 -8
  100. package/src/components/switch/index.scss +29 -35
  101. package/src/components/switchField/index.scss +16 -22
  102. package/src/components/table/index.scss +64 -78
  103. package/src/components/tableFixed/index.scss +11 -13
  104. package/src/components/tableFixedDeprecated/index.scss +10 -14
  105. package/src/components/tableOfContent/index.scss +24 -28
  106. package/src/components/tableSortable/index.scss +16 -22
  107. package/src/components/tableSticked/index.scss +24 -28
  108. package/src/components/tableSticked/mods.scss +6 -6
  109. package/src/components/tableStickedDeprecated/index.scss +40 -46
  110. package/src/components/tag/index.scss +12 -16
  111. package/src/components/textField/index.scss +22 -30
  112. package/src/components/textField/mods.scss +1 -1
  113. package/src/components/textFlow/index.scss +2 -4
  114. package/src/components/textfields/index.scss +258 -279
  115. package/src/components/timeline/index.scss +66 -72
  116. package/src/components/timepicker/index.scss +15 -21
  117. package/src/components/title/index.scss +27 -33
  118. package/src/components/title/mods.scss +1 -1
  119. package/src/components/titleSection/index.scss +21 -25
  120. package/src/components/toast/index.scss +4 -8
  121. package/src/components/tooltip/index.scss +21 -25
  122. package/src/components/userPopover/index.scss +2 -4
  123. package/src/components/userTile/index.scss +22 -26
  124. package/src/components/verticalNavigation/index.scss +16 -26
package/src/components/notchBox/index.scss CHANGED
@@ -1,26 +1,22 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .notchBox {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-notchTop {
11
- @include notchTop;
12
- }
7
+ &.mod-notchTop {
8
+ @include notchTop;
9
+ }
13
10
 
14
- &.mod-notchLeft {
15
- @include notchLeft;
16
- }
11
+ &.mod-notchLeft {
12
+ @include notchLeft;
13
+ }
17
14
 
18
- &.mod-notchRight {
19
- @include notchRight;
20
- }
15
+ &.mod-notchRight {
16
+ @include notchRight;
17
+ }
21
18
 
22
- &.mod-notchBottom {
23
- @include notchBottom;
24
- }
19
+ &.mod-notchBottom {
20
+ @include notchBottom;
25
21
  }
26
22
  }
package/src/components/notchBox/mods.scss CHANGED
@@ -67,7 +67,7 @@
67
67
  );
68
68
  --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
69
69
 
70
- // badge
70
+ /** badge */
71
71
  --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
72
72
  --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
73
73
  --component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
@@ -127,7 +127,7 @@
127
127
  var(--smooth) * 2
128
128
  );
129
129
 
130
- // badge
130
+ /** badge */
131
131
  --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
132
132
  --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
133
133
  --component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
@@ -188,7 +188,7 @@
188
188
  --component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
189
189
  }
190
190
 
191
- // pre configured with DS parameters
191
+ /** pre configured with DS parameters **/
192
192
  @mixin notchTop {
193
193
  @include top;
194
194
  }
package/src/components/numericBadge/index.scss CHANGED
@@ -1,36 +1,30 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .numericBadge {
4
- @layer components {
5
- @include vars;
6
- @include component;
4
+ @include vars;
5
+ @include component;
6
+
7
+ &.mod-S {
8
+ @include S;
9
+ }
10
+
11
+ &.mod-XS {
12
+ @include XS;
7
13
  }
8
14
 
9
- @layer mods {
15
+ &.is-loading {
16
+ @include loading;
17
+
10
18
  &.mod-S {
11
- @include S;
19
+ @include loadingS;
12
20
  }
13
21
 
14
22
  &.mod-XS {
15
- @include XS;
23
+ @include loadingXS;
16
24
  }
17
25
  }
18
26
 
19
- @layer states {
20
- &.is-loading {
21
- @include loading;
22
-
23
- &.mod-S {
24
- @include loadingS;
25
- }
26
-
27
- &.mod-XS {
28
- @include loadingXS;
29
- }
30
- }
31
-
32
- &:focus-within {
33
- @include focusVisible;
34
- }
27
+ &:focus-within {
28
+ @include focusVisible;
35
29
  }
36
30
  }
package/src/components/pageHeader/index.scss CHANGED
@@ -2,38 +2,34 @@
2
2
  @use '@lucca-front/scss/src/commons/utils/media';
3
3
 
4
4
  .pageHeader {
5
- @layer components {
6
- @include vars;
7
- @include component;
8
- }
5
+ @include vars;
6
+ @include component;
9
7
 
10
- @layer mods {
11
- // .mod-withMenu is deprecated
12
- &.mod-withHorizontalNavigation,
13
- &:has(.horizontalNavigation),
14
- &.mod-withMenu {
15
- @include horizontalNavigation;
16
- }
8
+ // .mod-withMenu is deprecated
9
+ &.mod-withHorizontalNavigation,
10
+ &:has(.horizontalNavigation),
11
+ &.mod-withMenu {
12
+ @include horizontalNavigation;
13
+ }
17
14
 
18
- &:has(.breadcrumbs),
19
- &.mod-withBreadcrumbs {
20
- @include breadcrumbs;
21
- }
15
+ &:has(.breadcrumbs),
16
+ &.mod-withBreadcrumbs {
17
+ @include breadcrumbs;
18
+ }
22
19
 
23
- &.mod-sticky {
24
- @include sticky;
25
-
26
- @include media.min('S') {
27
- @include stickyWide;
28
- }
29
- }
20
+ &.mod-sticky {
21
+ @include sticky;
30
22
 
31
23
  @include media.min('S') {
32
- @include wide;
24
+ @include stickyWide;
33
25
  }
26
+ }
34
27
 
35
- &:has(.pageHeader-containerOptional) {
36
- @include withContainer;
37
- }
28
+ @include media.min('S') {
29
+ @include wide;
30
+ }
31
+
32
+ &:has(.pageHeader-containerOptional) {
33
+ @include withContainer;
38
34
  }
39
35
  }
package/src/components/pagination/index.scss CHANGED
@@ -1,22 +1,16 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .pagination {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer components {
10
- &.mod-mods {
11
- @include compact;
12
- }
7
+ &.mod-compact {
8
+ @include compact;
13
9
  }
14
10
  }
15
11
 
16
12
  .pagination-navigation-item {
17
- @layer states {
18
- &:is(.is-ellipsis, .ellipsis) {
19
- @include ellipsis;
20
- }
13
+ &:is(.is-ellipsis, .ellipsis) {
14
+ @include ellipsis;
21
15
  }
22
16
  }
package/src/components/plgPush/index.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .plgPush {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
  }
package/src/components/popover/index.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .popover {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
  }
package/src/components/progress/index.scss CHANGED
@@ -1,24 +1,18 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .progress {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-indeterminate {
11
- @include indeterminate;
12
- }
7
+ &.mod-indeterminate {
8
+ @include indeterminate;
13
9
  }
14
10
 
15
- @layer states {
16
- &:is(.is-success, .success, .palette-success) {
17
- @include success;
18
- }
11
+ &:is(.is-success, .success, .palette-success) {
12
+ @include success;
13
+ }
19
14
 
20
- &:is(.is-error, .error, .palette-error) {
21
- @include error;
22
- }
15
+ &:is(.is-error, .error, .palette-error) {
16
+ @include error;
23
17
  }
24
18
  }
package/src/components/radio/index.scss CHANGED
@@ -1,31 +1,25 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .radio {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-inline {
11
- @include inline;
12
- }
7
+ &.mod-inline {
8
+ @include inline;
9
+ }
13
10
 
14
- &.mod-S {
15
- @include S;
16
- }
11
+ &.mod-S {
12
+ @include S;
17
13
  }
18
14
  }
19
15
 
20
16
  .radio-input {
21
- @layer states {
22
- &[disabled],
23
- &[read-only] {
24
- @include disabled;
17
+ &[disabled],
18
+ &[read-only] {
19
+ @include disabled;
25
20
 
26
- &:checked {
27
- @include disabledChecked;
28
- }
21
+ &:checked {
22
+ @include disabledChecked;
29
23
  }
30
24
  }
31
25
  }
package/src/components/radioButtons/index.scss CHANGED
@@ -1,26 +1,20 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .radioButtons {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
7
+ &.mod-S {
8
+ @include S;
9
+ }
13
10
 
14
- &.mod-XS {
15
- @include XS;
16
- }
11
+ &.mod-XS {
12
+ @include XS;
17
13
  }
18
14
  }
19
15
 
20
16
  .radioButtons-item-input {
21
- @layer states {
22
- &:is(:disabled, .is-disabled, .disabled) {
23
- @include disabled;
24
- }
17
+ &:is(:disabled, .is-disabled, .disabled) {
18
+ @include disabled;
25
19
  }
26
20
  }
package/src/components/radioField/index.scss CHANGED
@@ -1,76 +1,70 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .radioField {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
7
+ &.mod-S {
8
+ @include S;
13
9
  }
14
10
  }
15
11
 
16
12
  .radioField-input {
17
- @layer states {
18
- &:focus-visible {
19
- @include focusVisible;
20
- }
13
+ &:focus-visible {
14
+ @include focusVisible;
15
+ }
16
+
17
+ &:hover {
18
+ @include hover;
19
+ }
20
+
21
+ &:active {
22
+ @include active;
23
+ }
24
+
25
+ &[aria-invalid='true'] {
26
+ @include invalid;
21
27
 
22
28
  &:hover {
23
- @include hover;
29
+ @include invalidHover;
24
30
  }
25
31
 
26
32
  &:active {
27
- @include active;
33
+ @include invalidActive;
28
34
  }
35
+ }
29
36
 
30
- &[aria-invalid='true'] {
31
- @include invalid;
37
+ &:disabled {
38
+ &,
39
+ &:hover {
40
+ @include disabled;
41
+ }
42
+ }
32
43
 
33
- &:hover {
34
- @include invalidHover;
35
- }
44
+ &:checked {
45
+ @include checked;
36
46
 
37
- &:active {
38
- @include invalidActive;
39
- }
47
+ &:hover {
48
+ @include checkedHover;
49
+ }
50
+
51
+ &:active {
52
+ @include checkedActive;
40
53
  }
41
54
 
42
55
  &:disabled {
43
- &,
44
- &:hover {
45
- @include disabled;
46
- }
56
+ @include checkedDisabled;
47
57
  }
48
58
 
49
- &:checked {
50
- @include checked;
59
+ &[aria-invalid='true'] {
60
+ @include checkedInvalid;
51
61
 
52
62
  &:hover {
53
- @include checkedHover;
63
+ @include checkedInvalidHover;
54
64
  }
55
65
 
56
66
  &:active {
57
- @include checkedActive;
58
- }
59
-
60
- &:disabled {
61
- @include checkedDisabled;
62
- }
63
-
64
- &[aria-invalid='true'] {
65
- @include checkedInvalid;
66
-
67
- &:hover {
68
- @include checkedInvalidHover;
69
- }
70
-
71
- &:active {
72
- @include checkedInvalidActive;
73
- }
67
+ @include checkedInvalidActive;
74
68
  }
75
69
  }
76
70
  }
package/src/components/readMore/index.scss CHANGED
@@ -1,34 +1,28 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .readMore {
4
- @layer components {
5
- @include vars;
6
- @include component;
4
+ @include vars;
5
+ @include component;
6
+
7
+ &:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
8
+ @include expanded;
7
9
  }
8
10
 
9
- @layer states {
10
- &:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
11
- @include expanded;
12
- }
11
+ &.is-disabled {
12
+ @include disabled;
13
+ }
13
14
 
14
- &.is-disabled {
15
+ &.mod-openOnly {
16
+ &:has(.readMore-link[aria-expanded='true']) {
15
17
  @include disabled;
16
18
  }
17
19
  }
18
20
 
19
- @layer mods {
20
- &.mod-openOnly {
21
- &:has(.readMore-link[aria-expanded='true']) {
22
- @include disabled;
23
- }
24
- }
25
-
26
- &.mod-default {
27
- @include default;
28
- }
21
+ &.mod-default {
22
+ @include default;
23
+ }
29
24
 
30
- &.mod-sunken {
31
- @include sunken;
32
- }
25
+ &.mod-sunken {
26
+ @include sunken;
33
27
  }
34
28
  }
package/src/components/richText/index.scss CHANGED
@@ -1,32 +1,26 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .richTextField {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer states {
10
- &:hover {
11
- @include hover;
12
- }
7
+ &:hover {
8
+ @include hover;
9
+ }
13
10
 
14
- &:has(.richTextField-content[aria-invalid='true']) {
15
- @include error;
11
+ &.mod-autoResize {
12
+ @include autoResize;
13
+ }
16
14
 
17
- &:hover {
18
- @include errorHover;
19
- }
20
- }
15
+ &:has(.richTextField-content[aria-invalid='true']) {
16
+ @include error;
21
17
 
22
- &.is-disabled {
23
- @include disabled;
18
+ &:hover {
19
+ @include errorHover;
24
20
  }
25
21
  }
26
22
 
27
- @layer mods {
28
- &.mod-autoResize {
29
- @include autoResize;
30
- }
23
+ &.is-disabled {
24
+ @include disabled;
31
25
  }
32
26
  }
package/src/components/scrollBox/index.scss CHANGED
@@ -1,22 +1,18 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .scrollBox {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer states {
10
- &.is-firstVisible {
11
- @include firstVisible;
12
- }
7
+ &.is-firstVisible {
8
+ @include firstVisible;
9
+ }
13
10
 
14
- &.is-lastVisible {
15
- @include lastVisible;
16
- }
11
+ &.is-lastVisible {
12
+ @include lastVisible;
13
+ }
17
14
 
18
- &.is-disabled {
19
- @include disabled;
20
- }
15
+ &.is-disabled {
16
+ @include disabled;
21
17
  }
22
18
  }
package/src/components/section/index.scss CHANGED
@@ -2,24 +2,20 @@
2
2
  @use 'exports' as *;
3
3
 
4
4
  .section {
5
- @layer components {
6
- @include vars;
7
- @include component;
8
- }
5
+ @include vars;
6
+ @include component;
9
7
 
10
- @layer mods {
11
- // .mod-grey is deprecated
12
- &.mod-neutral,
13
- &.mod-grey {
14
- @include neutral;
15
- }
8
+ // .mod-grey is deprecated
9
+ &.mod-neutral,
10
+ &.mod-grey {
11
+ @include neutral;
12
+ }
16
13
 
17
- @include media.max('S') {
18
- @include S;
19
- }
14
+ @include media.max('S') {
15
+ @include S;
16
+ }
20
17
 
21
- @include media.max('XS') {
22
- @include XS;
23
- }
18
+ @include media.max('XS') {
19
+ @include XS;
24
20
  }
25
21
  }