@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
package/src/css/grid.css CHANGED
@@ -1,83 +1,79 @@
1
- @layer base {
2
-
3
- /* TODO unificare regole comuni flex e grid */
1
+ /* TODO unificare regole comuni flex e grid */
2
+
3
+ .grid {
4
+ --_cols: 1;
5
+ /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
6
+
7
+ display: grid;
8
+ /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
9
+ grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
10
+ grid-auto-flow: row;
11
+ gap: var(--flex-grid-gap);
12
+ /* align-items: center; */
13
+ /* justify-items: start; */
14
+
15
+ &.justify-content-end {
16
+ justify-content: end;
17
+ }
4
18
 
5
- .grid {
6
- --_cols: 1;
7
- /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
8
19
 
9
- display: grid;
10
- /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
11
- grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
12
- grid-auto-flow: row;
13
- gap: var(--flex-grid-gap);
14
- /* align-items: center; */
15
- /* justify-items: start; */
20
+ @media (--media-medium-viewport-up) {
21
+ --_cols: 2;
16
22
 
17
- &.justify-content-end {
18
- justify-content: end;
23
+ > .span-2, > .span-3, > .span-4 {
24
+ grid-column-end: span 2;
19
25
  }
26
+ }
20
27
 
28
+ @media (--media-large-viewport-up) {
29
+ --_cols: 4;
21
30
 
22
- @media (--media-medium-viewport-up) {
31
+ /* versione a 3, 5, 6, 8 colonne */
32
+ &.grid-2 {
23
33
  --_cols: 2;
24
-
25
- > .span-2, > .span-3, > .span-4 {
26
- grid-column-start: span 2;
27
- }
28
34
  }
29
-
30
- @media (--media-large-viewport-up) {
31
- --_cols: 4;
32
-
33
- /* versione a 3, 5, 6, 8 colonne */
34
- &.grid-2 {
35
- --_cols: 2;
36
- }
37
- &.grid-3 {
38
- --_cols: 3;
39
- }
40
- &.grid-5 {
41
- --_cols: 5;
42
- }
43
- &.grid-6 {
44
- --_cols: 6;
45
- }
46
- &.grid-8 {
47
- --_cols: 8;
48
- }
49
-
50
- > .span-2 {
51
- grid-column-start: span 2;
52
- }
53
- > .span-3 {
54
- grid-column-start: span 3;
55
- }
56
-
57
- > .span-4 {
58
- grid-column-start: span 4;
59
- }
60
- } /* end @media */
61
-
62
- /* grid items */
63
- > .grid-item-last {
64
- grid-column: -2 / -1;
35
+ &.grid-3 {
36
+ --_cols: 3;
37
+ }
38
+ &.grid-5 {
39
+ --_cols: 5;
40
+ }
41
+ &.grid-6 {
42
+ --_cols: 6;
65
43
  }
66
- > .grid-full-row {
67
- grid-column: 1 / -1;
44
+ &.grid-8 {
45
+ --_cols: 8;
68
46
  }
69
47
 
70
- }
48
+ > .span-2 {
49
+ grid-column-end: span 2;
50
+ }
51
+ > .span-3 {
52
+ grid-column-end: span 3;
53
+ }
71
54
 
72
- .grid-new-row {
73
- grid-column-start: 1;
74
- }
55
+ > .span-4 {
56
+ grid-column-end: span 4;
57
+ }
58
+ } /* end @media */
75
59
 
76
- .justify-self-end {
77
- justify-self: end;
60
+ /* grid items */
61
+ > .grid-item-last {
62
+ grid-column: -2 / -1;
78
63
  }
79
- .justify-self-start {
80
- justify-self: start;
64
+ > .grid-full-row {
65
+ grid-column: 1 / -1;
81
66
  }
82
67
 
83
68
  }
69
+
70
+ .grid-new-row {
71
+ grid-column-start: 1;
72
+ }
73
+
74
+ .justify-self-end {
75
+ justify-self: end;
76
+ }
77
+ .justify-self-start {
78
+ justify-self: start;
79
+ }
package/src/css/headings.css CHANGED
@@ -1,39 +1,35 @@
1
- @layer base {
2
1
 
2
+ h1, h2, h3, .h3, h4, .h4 {
3
+ line-height: 1.2;
4
+ color: var(--headings-color);
5
+ text-align: var(--headings-text-align);
6
+ }
3
7
 
4
- h1, h2, h3, .h3, h4, .h4 {
5
- line-height: 1.2;
6
- color: var(--headings-color);
7
- text-align: var(--headings-text-align);
8
- }
9
-
10
- h1 {
11
- margin: 0 0 var(--font-size-xl);
12
- font-size: var(--headings-h1-font-size);
13
- font-weight: var(--headings-h1-font-weight);
14
-
15
- small {
16
- display: block;
17
- font-size: .85em;
18
- color: var(--text-muted);
19
- }
20
- }
8
+ h1 {
9
+ margin: 0 0 var(--font-size-xl);
10
+ font-size: var(--headings-h1-font-size);
11
+ font-weight: var(--headings-h1-font-weight);
21
12
 
22
- h2, h3, .h3, h4, .h4 {
23
- font-weight: var(--headings-font-weight);
24
- }
25
- h2 {
26
- margin: var(--font-size-xl) 0 var(--font-size-md);
27
- font-size: var(--headings-h2-font-size);
13
+ small {
14
+ display: block;
15
+ font-size: .85em;
16
+ color: var(--text-muted);
28
17
  }
18
+ }
29
19
 
30
- h3, .h3 {
31
- margin: var(--font-size-lg) 0 var(--font-size-base);
32
- font-size: var(--headings-h3-font-size);
33
- }
34
- h4, .h4 {
35
- margin: var(--font-size-base) 0 var(--font-size-sm);
36
- font-size: var(--headings-h4-font-size);
37
- }
20
+ h2, h3, .h3, h4, .h4 {
21
+ font-weight: var(--headings-font-weight);
22
+ }
23
+ h2 {
24
+ margin: var(--font-size-xl) 0 var(--font-size-md);
25
+ font-size: var(--headings-h2-font-size);
26
+ }
38
27
 
28
+ h3, .h3 {
29
+ margin: var(--font-size-lg) 0 var(--font-size-base);
30
+ font-size: var(--headings-h3-font-size);
31
+ }
32
+ h4, .h4 {
33
+ margin: var(--font-size-base) 0 var(--font-size-sm);
34
+ font-size: var(--headings-h4-font-size);
39
35
  }
package/src/css/icons.css CHANGED
@@ -1,79 +1,73 @@
1
- @layer base {
1
+ .icon {
2
+ position: relative;
3
+ display: inline-block;
4
+ width: 1em;
5
+ aspect-ratio: 1;
2
6
 
7
+ fill: currentColor;
8
+ stroke: none;
3
9
 
4
- .icon {
5
- position: relative;
6
- display: inline-block;
7
- width: 1em;
8
- aspect-ratio: 1;
9
-
10
- fill: currentColor;
11
- stroke: none;
12
-
13
- /* fill: none;
14
- stroke: currentColor;
15
- stroke-linecap: round;
16
- stroke-linejoin: round;
17
- stroke-width: 4px; */
18
-
19
- /* &.icon-bold{
20
- stroke-width: 8px;
21
- } */
22
-
23
- &.icon-lg {
24
- width: 1.2em;
25
- height: 1.2em;
26
- }
27
- &.icon-xl {
28
- width: 1.4em;
29
- height: 1.4em;
30
- }
31
- &.icon-xxl {
32
- width: 2em;
33
- height: 2em;
34
- }
35
- &.icon-4xl {
36
- width: 8em;
37
- height: 8em;
38
- }
10
+ /* fill: none;
11
+ stroke: currentColor;
12
+ stroke-linecap: round;
13
+ stroke-linejoin: round;
14
+ stroke-width: 4px; */
39
15
 
40
- /* &.fill-icon {
41
- fill: currentColor;
42
- stroke: none;
43
- } */
16
+ /* &.icon-bold{
17
+ stroke-width: 8px;
18
+ } */
44
19
 
45
- /* &.ratio3x4 {
46
- height: auto;
47
- aspect-ratio: 3 / 4;
20
+ &.icon-lg {
21
+ width: 1.2em;
22
+ height: 1.2em;
23
+ }
24
+ &.icon-xl {
25
+ width: 1.4em;
26
+ height: 1.4em;
27
+ }
28
+ &.icon-xxl {
29
+ width: 2em;
30
+ height: 2em;
48
31
  }
49
- &.ratio3x5 {
50
- height: auto;
51
- aspect-ratio: 3 / 5;
52
- } */
53
- &.baseline-shift-20 {
54
- translate: 0 20%;
55
- }
56
- &.baseline-shift-30 {
57
- translate: 0 30%;
58
- }
59
- &.baseline-negative-shift-20 {
60
- translate: 0 -20%;
61
- }
32
+ &.icon-4xl {
33
+ width: 8em;
34
+ height: 8em;
62
35
  }
63
36
 
64
- /* .duotone-light, .duotone-medium, .duotone-dark {
37
+ /* &.fill-icon {
65
38
  fill: currentColor;
66
39
  stroke: none;
40
+ } */
41
+
42
+ /* &.ratio3x4 {
43
+ height: auto;
44
+ aspect-ratio: 3 / 4;
45
+ }
46
+ &.ratio3x5 {
47
+ height: auto;
48
+ aspect-ratio: 3 / 5;
49
+ } */
50
+ &.baseline-shift-20 {
51
+ translate: 0 20%;
52
+ }
53
+ &.baseline-shift-30 {
54
+ translate: 0 30%;
55
+ }
56
+ &.baseline-negative-shift-20 {
57
+ translate: 0 -20%;
58
+ }
59
+ }
60
+
61
+ /* .duotone-light, .duotone-medium, .duotone-dark {
62
+ fill: currentColor;
63
+ stroke: none;
67
64
  }
68
65
  .duotone-light {
69
- fill-opacity: .2;
66
+ fill-opacity: .2;
70
67
  }
71
68
  .duotone-medium {
72
- fill-opacity: .4;
69
+ fill-opacity: .4;
73
70
  }
74
71
  .duotone-dark {
75
- fill-opacity: .7;
72
+ fill-opacity: .7;
76
73
  } */
77
-
78
-
79
- }
package/src/css/layout-base.css CHANGED
@@ -1,18 +1,16 @@
1
- @layer base {
2
1
 
3
- html, body {
4
- /* height: 100%; */
5
- padding: 0;
6
- margin: 0;
7
- scroll-behavior: smooth;
8
- font-family: var(--font-family);
9
- font-size: var(--font-size-base);
10
- font-style: var(--font-style-base);
11
- line-height: var(--line-height-base);
12
- color: var(--text-color);
13
- accent-color: var(--accent);
14
- background-color: var(--body-background-color);
15
-
16
- }
2
+ html, body {
3
+ /* height: 100%; */
4
+ padding: 0;
5
+ margin: 0;
6
+ scroll-behavior: smooth;
7
+ font-family: var(--font-family);
8
+ font-size: var(--font-size-base);
9
+ font-style: var(--font-style-base);
10
+ line-height: var(--line-height-base);
11
+ color: var(--text-color);
12
+ accent-color: var(--accent);
13
+ background-color: var(--body-background-color);
17
14
 
18
15
  }
16
+
package/src/css/links.css CHANGED
@@ -1,49 +1,46 @@
1
- @layer base {
2
1
 
3
- /* TODO rivedere e completare */
2
+ /* TODO rivedere e completare */
4
3
 
5
- a:link, .btn-link {
6
- /* TODO rivedere, forse più complicato del necessario */
7
- &:not(.btn) {
8
- font-weight: var(--link-font-weight);
9
- color: var(--link-color);
10
- text-decoration: var(--link-text-decoration);
11
- }
4
+ a:link, .btn-link {
5
+ /* TODO rivedere, forse più complicato del necessario */
6
+ &:not(.btn) {
7
+ font-weight: var(--link-font-weight);
8
+ color: var(--link-color);
9
+ text-decoration: var(--link-text-decoration);
12
10
  }
11
+ }
13
12
 
14
- a:not(.btn) {
15
- text-decoration: none;
16
- &:link {
17
- color: var(--link-color);
18
- }
19
- &:visited {
20
- color: var(--link-visited-color);
21
- }
13
+ a:not(.btn) {
14
+ text-decoration: none;
15
+ &:link {
16
+ color: var(--link-color);
22
17
  }
18
+ &:visited {
19
+ color: var(--link-visited-color);
20
+ }
21
+ }
23
22
 
24
- a:not(.btn), .btn-link {
25
- &:focus {
26
- outline: none;
27
- }
23
+ a:not(.btn), .btn-link {
24
+ &:focus {
25
+ outline: none;
26
+ }
28
27
 
29
- &:focus-visible {
30
- outline: var(--link-focus-outline-width) solid color-mix(in srgb, var(--link-focus-outline-color) 60%, transparent);
31
- outline-offset: var(--link-focus-outline-offset);
32
- }
33
- @media (hover: hover) {
34
- &:hover {
35
- color: var(--link-hover-color);
36
- text-decoration: var(--link-hover-text-decoration);
37
- text-underline-offset: var(--link-hover-text-underline-offset);
38
- }
39
- }
40
- &:active {
41
- /* TODO rivedere, sostituire con colori specifici da custom props */
42
- /* stylelint-disable-next-line declaration-no-important */
43
- color: var(--link-active-color) !important;
44
- background-color: var(--link-active-background-color);
45
- offset: 0;
28
+ &:focus-visible {
29
+ outline: var(--link-focus-outline-width) solid color-mix(in srgb, var(--link-focus-outline-color) 60%, transparent);
30
+ outline-offset: var(--link-focus-outline-offset);
31
+ }
32
+ @media (hover: hover) {
33
+ &:hover {
34
+ color: var(--link-hover-color);
35
+ text-decoration: var(--link-hover-text-decoration);
36
+ text-underline-offset: var(--link-hover-text-underline-offset);
46
37
  }
47
38
  }
48
-
39
+ &:active {
40
+ /* TODO rivedere, sostituire con colori specifici da custom props */
41
+ /* stylelint-disable-next-line declaration-no-important */
42
+ color: var(--link-active-color) !important;
43
+ background-color: var(--link-active-background-color);
44
+ offset: 0;
45
+ }
49
46
  }