@massimo-cassandro/minimo 1.21.1 → 1.21.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 (57) hide show
  1. package/design-tokens/tokens-config-sample.mjs +1 -1
  2. package/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/autocomplete/autocomplete.css +116 -118
  5. package/src/components/inner-nav/inner-nav.css +10 -13
  6. package/src/components/modal-alert/modal-alert.module.css +156 -159
  7. package/src/components/modal-popup/modal-popup.module.css +84 -88
  8. package/src/components/overlay/overlay.css +10 -14
  9. package/src/components/sf-macro/sf-macro.css +68 -72
  10. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +90 -94
  11. package/src/components/snackbar/snackbar.module.css +89 -93
  12. package/src/components/spinner/spinner-circle-basic.css +14 -18
  13. package/src/components/spinner/spinner.module.css +4 -8
  14. package/src/components/unsplash-page/unsplash-page.module.css +255 -260
  15. package/src/css/alerts.css +81 -85
  16. package/src/css/badge.css +13 -15
  17. package/src/css/buttons/btn-close.css +53 -56
  18. package/src/css/buttons/buttons-primary.css +34 -37
  19. package/src/css/buttons/buttons-secondary.css +34 -37
  20. package/src/css/buttons/buttons.css +80 -83
  21. package/src/css/buttons/status-buttons.css +87 -90
  22. package/src/css/container.css +5 -8
  23. package/src/css/data-formats.css +24 -28
  24. package/src/css/details.css +13 -17
  25. package/src/css/dimensions.css +9 -12
  26. package/src/css/display.css +37 -41
  27. package/src/css/flex.css +35 -39
  28. package/src/css/forms/fieldset.css +56 -59
  29. package/src/css/forms/form-collections.css +12 -16
  30. package/src/css/forms/form-disabled-readonly.css +28 -31
  31. package/src/css/forms/form-group.css +13 -18
  32. package/src/css/forms/form-utilities.css +34 -39
  33. package/src/css/forms/forms.css +132 -136
  34. package/src/css/forms/input-group.css +43 -47
  35. package/src/css/forms/switch.css +75 -78
  36. package/src/css/forms/validation.css +22 -26
  37. package/src/css/grid.css +62 -66
  38. package/src/css/headings.css +28 -32
  39. package/src/css/icons.css +57 -63
  40. package/src/css/layout-base.css +13 -15
  41. package/src/css/links.css +36 -39
  42. package/src/css/margin-padding-bootstrap-media.css +1832 -1835
  43. package/src/css/margin-padding-bootstrap.css +440 -443
  44. package/src/css/margin-padding-media.css +1832 -1835
  45. package/src/css/margin-padding.css +440 -443
  46. package/src/css/overflow.css +3 -7
  47. package/src/css/position.css +1 -6
  48. package/src/css/reset.css +46 -48
  49. package/src/css/svg.css +2 -5
  50. package/src/css/table.css +61 -63
  51. package/src/css/text.css +95 -98
  52. package/src/css/visibility.css +42 -45
  53. package/src/custom-properties.css +439 -442
  54. package/src/minimo.css +3 -2
  55. package/src/utilities/dom-builder-helpers/form-tags.js +90 -3
  56. package/src/web-components/s-datatable-component/s-datatable-component.module.css +172 -175
  57. package/types/classes.d.ts +1 -0
@@ -1,8 +1,4 @@
1
- @layer base {
2
-
3
- .overflow-hidden {
4
- overflow: hidden;
5
- }
6
-
7
-
1
+ .overflow-hidden {
2
+ overflow: hidden;
8
3
  }
4
+
@@ -1,8 +1,3 @@
1
- @layer base {
2
-
3
- /* .position-relative {
1
+ .position-relative {
4
2
  position: relative;
5
- } */
6
-
7
-
8
3
  }
package/src/css/reset.css CHANGED
@@ -1,62 +1,60 @@
1
1
  /*
2
- Josh's Custom CSS Reset
3
- https://www.joshwcomeau.com/css/custom-css-reset/
2
+ Josh's Custom CSS Reset
3
+ https://www.joshwcomeau.com/css/custom-css-reset/
4
4
  */
5
5
  /* 1. Use a more-intuitive box-sizing model */
6
- @layer reset {
7
6
 
8
- *, *::before, *::after {
9
- box-sizing: border-box;
10
- }
7
+ *, *::before, *::after {
8
+ box-sizing: border-box;
9
+ }
11
10
 
12
- /* 2. Remove default margin */
13
- * {
14
- margin: 0;
15
- }
11
+ /* 2. Remove default margin */
12
+ * {
13
+ margin: 0;
14
+ }
16
15
 
17
- /* 3. Enable keyword animations */
18
- @media (prefers-reduced-motion: no-preference) {
19
- html {
20
- interpolate-size: allow-keywords;
21
- }
16
+ /* 3. Enable keyword animations */
17
+ @media (prefers-reduced-motion: no-preference) {
18
+ html {
19
+ interpolate-size: allow-keywords;
22
20
  }
21
+ }
23
22
 
24
- body {
25
- /* 4. Add accessible line-height */
26
- line-height: 1.5;
27
- /* 5. Improve text rendering */
28
- -webkit-font-smoothing: antialiased;
29
- }
23
+ body {
24
+ /* 4. Add accessible line-height */
25
+ line-height: 1.5;
26
+ /* 5. Improve text rendering */
27
+ -webkit-font-smoothing: antialiased;
28
+ }
30
29
 
31
- /* 6. Improve media defaults */
32
- img, picture, video, canvas, svg {
33
- display: block;
34
- max-width: 100%;
35
- }
30
+ /* 6. Improve media defaults */
31
+ img, picture, video, canvas, svg {
32
+ display: block;
33
+ max-width: 100%;
34
+ }
36
35
 
37
- /* 7. Inherit fonts for form controls */
38
- input, button, textarea, select {
39
- font: inherit;
40
- }
36
+ /* 7. Inherit fonts for form controls */
37
+ input, button, textarea, select {
38
+ font: inherit;
39
+ }
41
40
 
42
- /* 8. Avoid text overflows */
43
- p, h1, h2, h3, h4, h5, h6 {
44
- overflow-wrap: break-word;
45
- }
41
+ /* 8. Avoid text overflows */
42
+ p, h1, h2, h3, h4, h5, h6 {
43
+ overflow-wrap: break-word;
44
+ }
46
45
 
47
- /* 9. Improve line wrapping */
48
- p {
49
- text-wrap: pretty;
50
- }
51
- h1, h2, h3, h4, h5, h6 {
52
- text-wrap: balance;
53
- }
46
+ /* 9. Improve line wrapping */
47
+ p {
48
+ text-wrap: pretty;
49
+ }
50
+ h1, h2, h3, h4, h5, h6 {
51
+ text-wrap: balance;
52
+ }
54
53
 
55
- /*
56
- 10. Create a root stacking context
57
- */
58
- /* stylelint-disable-next-line selector-id-pattern, selector-max-id */
59
- #root, #__next {
60
- isolation: isolate;
61
- }
54
+ /*
55
+ 10. Create a root stacking context
56
+ */
57
+ /* stylelint-disable-next-line selector-id-pattern, selector-max-id */
58
+ #root, #__next {
59
+ isolation: isolate;
62
60
  }
package/src/css/svg.css CHANGED
@@ -1,7 +1,4 @@
1
- @layer base {
2
-
3
- svg {
4
- fill: currentColor;
5
- }
6
1
 
2
+ svg {
3
+ fill: currentColor;
7
4
  }
package/src/css/table.css CHANGED
@@ -1,93 +1,91 @@
1
- @layer base {
2
1
 
3
- /* wrapper per le tabelle per evitare che superino la larghezza dello spazio disponibile */
2
+ /* wrapper per le tabelle per evitare che superino la larghezza dello spazio disponibile */
4
3
 
5
- /* purgecss start ignore */
4
+ /* purgecss start ignore */
6
5
 
7
- .table-responsive {
8
- max-width: 100%;
9
- overflow-x: auto;
10
- }
6
+ .table-responsive {
7
+ max-width: 100%;
8
+ overflow-x: auto;
9
+ }
11
10
 
12
- /* TODO opzione per attivare/disattuvare alternate color */
13
- .table {
11
+ /* TODO opzione per attivare/disattuvare alternate color */
12
+ .table {
14
13
 
15
- --_alternate-row-bg: var(--table-body-tr-alt-bg-color);
16
- --_hover-row-bg: var(--table-body-tr-hover-bg-color);
17
- --_border-color: var(--table-border-color);
18
- --_border: 1px solid var(--_border-color);
14
+ --_alternate-row-bg: var(--table-body-tr-alt-bg-color);
15
+ --_hover-row-bg: var(--table-body-tr-hover-bg-color);
16
+ --_border-color: var(--table-border-color);
17
+ --_border: 1px solid var(--_border-color);
19
18
 
20
- width: 100%;
21
- margin: 1rem 0;
22
- border-collapse: collapse;
19
+ width: 100%;
20
+ margin: 1rem 0;
21
+ border-collapse: collapse;
23
22
 
24
- tr {
25
- border-bottom: var(--_border);
26
- }
23
+ tr {
24
+ border-bottom: var(--_border);
25
+ }
27
26
 
28
- thead {
29
- background-color: var(--table-thead-background-color);
30
- tr:last-child {
31
- border-width: var(--table-thead-border-width);
32
- }
27
+ thead {
28
+ background-color: var(--table-thead-background-color);
29
+ tr:last-child {
30
+ border-width: var(--table-thead-border-width);
33
31
  }
32
+ }
34
33
 
35
- tfoot {
36
- background-color: var(--table-tfoot-background-color);
37
- tr:first-child {
38
- border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
39
- }
40
- th, td {
41
- font-weight: var(--table-tfoot-font-weight);
42
- }
34
+ tfoot {
35
+ background-color: var(--table-tfoot-background-color);
36
+ tr:first-child {
37
+ border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
38
+ }
39
+ th, td {
40
+ font-weight: var(--table-tfoot-font-weight);
43
41
  }
42
+ }
44
43
 
45
- tbody {
46
- tr:nth-child(even) {
47
- background-color: var(--_alternate-row-bg);
48
- }
44
+ tbody {
45
+ tr:nth-child(even) {
46
+ background-color: var(--_alternate-row-bg);
47
+ }
49
48
 
50
- @media (hover: hover) {
51
- tr:hover {
52
- background-color: var(--_hover-row-bg);
53
- }
49
+ @media (hover: hover) {
50
+ tr:hover {
51
+ background-color: var(--_hover-row-bg);
54
52
  }
55
53
  }
54
+ }
56
55
 
57
56
 
58
- th, td {
59
- padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
60
- line-height: var(--table-cell-line-height);
61
- vertical-align: top;
62
- text-align: start;
57
+ th, td {
58
+ padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
59
+ line-height: var(--table-cell-line-height);
60
+ vertical-align: top;
61
+ text-align: start;
63
62
 
64
- .valign-middle &, &.valign-middle {
65
- vertical-align: middle;
66
- }
63
+ .valign-middle &, &.valign-middle {
64
+ vertical-align: middle;
67
65
  }
66
+ }
68
67
 
69
- &.table-bordered {
70
- border: var(--_border);
68
+ &.table-bordered {
69
+ border: var(--_border);
71
70
 
72
- th, td {
73
- &:not(:first-child) {
74
- border-inline-start: var(--_border);
75
- }
71
+ th, td {
72
+ &:not(:first-child) {
73
+ border-inline-start: var(--_border);
76
74
  }
77
75
  }
78
-
79
76
  }
80
77
 
81
- /*
78
+ }
79
+
80
+ /*
82
81
  @media (prefers-color-scheme: dark) {
83
- .table {
84
- --_border-color: var(--_stone-8);
85
- --_alternate-row-bg: color-mix(in srgb, var(--_stone-12) 60%, transparent);
86
- --_hover-row-bg: color-mix(in srgb, var(--_blue-12) 60%, transparent);
87
- }
82
+ .table {
83
+ --_border-color: var(--_stone-8);
84
+ --_alternate-row-bg: color-mix(in srgb, var(--_stone-12) 60%, transparent);
85
+ --_hover-row-bg: color-mix(in srgb, var(--_blue-12) 60%, transparent);
86
+ }
88
87
  }
89
88
  */
90
89
 
91
- /* purgecss end ignore */
90
+ /* purgecss end ignore */
92
91
 
93
- }
package/src/css/text.css CHANGED
@@ -1,111 +1,108 @@
1
- @layer base {
2
1
 
3
- /* stylelint-disable declaration-no-important */
4
- p {
5
- margin: 0 0 var(--size-sm);
6
- }
2
+ /* stylelint-disable declaration-no-important */
3
+ p {
4
+ margin: 0 0 var(--size-sm);
5
+ }
7
6
 
8
- strong, b {
9
- font-weight: 700;
10
- }
11
- em, .italic {
12
- font-style: italic;
13
- }
7
+ strong, b {
8
+ font-weight: 700;
9
+ }
10
+ em, .italic {
11
+ font-style: italic;
12
+ }
14
13
 
15
- .text-center {
16
- text-align: center !important;
17
- }
18
- .text-right, .text-end {
19
- text-align: end !important;
20
- }
21
- .text-nowrap {
22
- white-space: nowrap;
23
- }
14
+ .text-center {
15
+ text-align: center !important;
16
+ }
17
+ .text-right, .text-end {
18
+ text-align: end !important;
19
+ }
20
+ .text-nowrap {
21
+ white-space: nowrap;
22
+ }
24
23
 
25
- .text-monospace {
26
- font-family: var(--font-family-mono);
27
- }
28
- .text-truncate {
29
- overflow: hidden;
30
- text-overflow: ellipsis;
31
- white-space: nowrap;
32
- }
24
+ .text-monospace {
25
+ font-family: var(--font-family-mono);
26
+ }
27
+ .text-truncate {
28
+ overflow: hidden;
29
+ text-overflow: ellipsis;
30
+ white-space: nowrap;
31
+ }
33
32
 
34
- /* .text-nowrap-dskt {
35
- @media (--media-large-viewport-up) {
36
- white-space: nowrap;
37
- }
33
+ /* .text-nowrap-dskt {
34
+ @media (--media-large-viewport-up) {
35
+ white-space: nowrap;
36
+ }
38
37
  } */
39
38
 
40
- .font-italic {
41
- font-style: italic;
42
- }
43
- .font-light {
44
- font-weight: var(--font-weight-light);
45
- }
46
- .font-regular {
47
- font-weight: var(--font-weight-regular);
48
- }
49
- .font-medium {
50
- font-weight: var(--font-weight-medium);
51
- }
52
- .font-semibold {
53
- font-weight: var(--font-weight-semibold);
54
- }
55
- .font-bold {
56
- font-weight: var(--font-weight-bold);
57
- }
58
-
59
- .text-xs {
60
- font-size: var(--font-size-xs);
61
- }
62
- small, .small {
63
- font-size: .9em;
64
- }
65
- .text-sm {
66
- font-size: var(--font-size-sm);
67
- }
68
- .text-md {
69
- font-size: var(--font-size-md);
70
- }
39
+ .font-italic {
40
+ font-style: italic;
41
+ }
42
+ .font-light {
43
+ font-weight: var(--font-weight-light);
44
+ }
45
+ .font-regular {
46
+ font-weight: var(--font-weight-regular);
47
+ }
48
+ .font-medium {
49
+ font-weight: var(--font-weight-medium);
50
+ }
51
+ .font-semibold {
52
+ font-weight: var(--font-weight-semibold);
53
+ }
54
+ .font-bold {
55
+ font-weight: var(--font-weight-bold);
56
+ }
71
57
 
72
- .text-muted {
73
- color: var(--text-muted);
74
- }
58
+ .text-xs {
59
+ font-size: var(--font-size-xs);
60
+ }
61
+ small, .small {
62
+ font-size: .9em;
63
+ }
64
+ .text-sm {
65
+ font-size: var(--font-size-sm);
66
+ }
67
+ .text-md {
68
+ font-size: var(--font-size-md);
69
+ }
75
70
 
76
- ul {
77
- margin: 1rem 0;
78
- list-style-type: disc;
79
- }
80
- li {
81
- margin-left: 1.5rem;
82
- }
71
+ .text-muted {
72
+ color: var(--text-muted);
73
+ }
83
74
 
84
- .text-primary {
85
- color: var(--primary-100);
86
- }
87
- .text-secondary {
88
- color: var(--secondary-100);
89
- }
90
- .text-accent {
91
- color: var(--accent);
92
- }
93
- .text-danger {
94
- color: var(--status-danger-color);
95
- }
96
- .text-warning {
97
- color: var(--status-warning-color);
98
- }
99
- .text-info {
100
- color: var(--status-info-color);
101
- }
102
- .text-success {
103
- color: var(--status-success-color);
104
- }
75
+ ul {
76
+ margin: 1rem 0;
77
+ list-style-type: disc;
78
+ }
79
+ li {
80
+ margin-left: 1.5rem;
81
+ }
105
82
 
106
- .text-numeric {
107
- font-feature-settings: 'lnum', 'tnum';
108
- font-variant-numeric: lining-nums tabular-nums;
109
- }
83
+ .text-primary {
84
+ color: var(--primary-100);
85
+ }
86
+ .text-secondary {
87
+ color: var(--secondary-100);
88
+ }
89
+ .text-accent {
90
+ color: var(--accent);
91
+ }
92
+ .text-danger {
93
+ color: var(--status-danger-color);
94
+ }
95
+ .text-warning {
96
+ color: var(--status-warning-color);
97
+ }
98
+ .text-info {
99
+ color: var(--status-info-color);
100
+ }
101
+ .text-success {
102
+ color: var(--status-success-color);
103
+ }
110
104
 
105
+ .text-numeric {
106
+ font-feature-settings: 'lnum', 'tnum';
107
+ font-variant-numeric: lining-nums tabular-nums;
111
108
  }
@@ -1,54 +1,51 @@
1
- @layer base {
2
1
 
3
- /* stylelint-disable declaration-no-important */
2
+ /* stylelint-disable declaration-no-important */
4
3
 
5
- /* purgecss start ignore */
6
- .visually-hidden {
7
- display: block;
8
- width: 1px !important;
9
- height: 1px !important;
10
- padding: 0 !important;
11
- margin: -1px !important;
12
- overflow: hidden !important;
13
- white-space: nowrap !important;
14
- border: 0 !important;
15
- clip-path: rect(0 0 0 0) !important;
16
- }
17
- .visibility-hidden {
18
- visibility: hidden;
19
- }
20
- /* purgecss end ignore */
4
+ /* purgecss start ignore */
5
+ .visually-hidden {
6
+ display: block;
7
+ width: 1px !important;
8
+ height: 1px !important;
9
+ padding: 0 !important;
10
+ margin: -1px !important;
11
+ overflow: hidden !important;
12
+ white-space: nowrap !important;
13
+ border: 0 !important;
14
+ clip-path: rect(0 0 0 0) !important;
15
+ }
16
+ .visibility-hidden {
17
+ visibility: hidden;
18
+ }
19
+ /* purgecss end ignore */
21
20
 
22
21
 
23
- /* TODO da rivedere */
24
- /* @media (--media-xlarge-viewport-up) {
25
- .xlg-visually-hidden {
26
- display: block;
27
- width: 1px !important;
28
- height: 1px !important;
29
- padding: 0 !important;
30
- margin: -1px !important;
31
- overflow: hidden !important;
32
- white-space: nowrap !important;
33
- border: 0 !important;
34
- clip-path: rect(0 0 0 0) !important;
35
- }
22
+ /* TODO da rivedere */
23
+ /* @media (--media-xlarge-viewport-up) {
24
+ .xlg-visually-hidden {
25
+ display: block;
26
+ width: 1px !important;
27
+ height: 1px !important;
28
+ padding: 0 !important;
29
+ margin: -1px !important;
30
+ overflow: hidden !important;
31
+ white-space: nowrap !important;
32
+ border: 0 !important;
33
+ clip-path: rect(0 0 0 0) !important;
34
+ }
36
35
  }
37
36
  @media (--media-large-viewport-up) {
38
- .lg-visually-hidden {
39
- display: block;
40
- width: 1px !important;
41
- height: 1px !important;
42
- padding: 0 !important;
43
- margin: -1px !important;
44
- overflow: hidden !important;
45
- white-space: nowrap !important;
46
- border: 0 !important;
47
- clip-path: rect(0 0 0 0) !important;
48
- }
37
+ .lg-visually-hidden {
38
+ display: block;
39
+ width: 1px !important;
40
+ height: 1px !important;
41
+ padding: 0 !important;
42
+ margin: -1px !important;
43
+ overflow: hidden !important;
44
+ white-space: nowrap !important;
45
+ border: 0 !important;
46
+ clip-path: rect(0 0 0 0) !important;
47
+ }
49
48
  }
50
49
 
51
- */
52
-
50
+ */
53
51
 
54
- }