@massimo-cassandro/minimo 1.21.2 → 1.21.4

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 (54) hide show
  1. package/package.json +1 -1
  2. package/src/components/autocomplete/autocomplete.css +116 -118
  3. package/src/components/inner-nav/inner-nav.css +10 -13
  4. package/src/components/modal-alert/modal-alert.module.css +156 -159
  5. package/src/components/modal-popup/modal-popup.module.css +85 -88
  6. package/src/components/overlay/overlay.css +10 -14
  7. package/src/components/sf-macro/sf-macro.css +68 -72
  8. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +90 -94
  9. package/src/components/snackbar/snackbar.module.css +89 -93
  10. package/src/components/spinner/spinner-circle-basic.css +14 -18
  11. package/src/components/spinner/spinner.module.css +4 -8
  12. package/src/components/unsplash-page/unsplash-page.module.css +255 -260
  13. package/src/css/alerts.css +81 -85
  14. package/src/css/badge.css +13 -15
  15. package/src/css/buttons/btn-close.css +53 -56
  16. package/src/css/buttons/buttons-primary.css +34 -37
  17. package/src/css/buttons/buttons-secondary.css +34 -37
  18. package/src/css/buttons/buttons.css +80 -83
  19. package/src/css/buttons/status-buttons.css +87 -90
  20. package/src/css/container.css +5 -8
  21. package/src/css/data-formats.css +24 -28
  22. package/src/css/details.css +13 -17
  23. package/src/css/dimensions.css +9 -12
  24. package/src/css/display.css +37 -41
  25. package/src/css/flex.css +35 -39
  26. package/src/css/forms/fieldset.css +56 -59
  27. package/src/css/forms/form-collections.css +12 -16
  28. package/src/css/forms/form-disabled-readonly.css +28 -31
  29. package/src/css/forms/form-group.css +13 -18
  30. package/src/css/forms/form-utilities.css +34 -39
  31. package/src/css/forms/forms.css +132 -136
  32. package/src/css/forms/input-group.css +43 -47
  33. package/src/css/forms/switch.css +75 -78
  34. package/src/css/forms/validation.css +22 -26
  35. package/src/css/grid.css +62 -66
  36. package/src/css/headings.css +28 -32
  37. package/src/css/icons.css +57 -63
  38. package/src/css/layout-base.css +13 -15
  39. package/src/css/links.css +36 -39
  40. package/src/css/margin-padding-bootstrap-media.css +1832 -1835
  41. package/src/css/margin-padding-bootstrap.css +440 -443
  42. package/src/css/margin-padding-media.css +1832 -1835
  43. package/src/css/margin-padding.css +440 -443
  44. package/src/css/overflow.css +3 -7
  45. package/src/css/position.css +1 -6
  46. package/src/css/reset.css +46 -48
  47. package/src/css/svg.css +2 -5
  48. package/src/css/table.css +61 -63
  49. package/src/css/text.css +95 -98
  50. package/src/css/visibility.css +42 -45
  51. package/src/minimo.css +3 -3
  52. package/src/utilities/dom-builder-helpers/form-tags.js +24 -8
  53. package/src/web-components/s-datatable-component/s-datatable-component.module.css +172 -175
  54. 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
- }
package/src/minimo.css CHANGED
@@ -1,9 +1,9 @@
1
- /* see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
2
- @layer reset, base, components, utilities, project, overrides;
1
+ /* decomment if you want to use layers. see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
2
+ /* @layer reset, base, components, utilities, project, overrides; */
3
3
 
4
4
  /* @import '@src/fonts.css'; */
5
5
  /* @import '@src/css/custom-media.css'; */ /* managed by postcss */
6
- /* @import '@src/custom-properties.css'; */ /* managed by postcss-jit-props */
6
+ /* @import '@src/custom-properties.css' layer('base'); */ /* managed by postcss-jit-props */
7
7
 
8
8
  @import '@minimo/css/reset.css';
9
9
  @import '@minimo/css/layout-base.css';