@massimo-cassandro/minimo 1.21.2 → 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 (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 +84 -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 -2
  52. package/src/utilities/dom-builder-helpers/form-tags.js +21 -6
  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/flex.css CHANGED
@@ -1,47 +1,43 @@
1
- @layer base {
2
-
3
- .flex {
4
- display: flex;
5
- flex-flow: row wrap;
6
- gap: var(--flex-grid-gap);
7
- align-content: flex-start;
8
- align-items: flex-start;
9
- justify-content: flex-start;
10
-
11
- &.align-items-center {
12
- align-items: center;
13
- }
14
-
15
- &.gap-0 {
16
- gap: 0;
17
- }
18
-
19
- &.gap-2 {
20
- gap: calc(var(--flex-grid-gap) * 2);
21
- }
22
- &.column-gap-2 {
23
- column-gap: calc(var(--flex-grid-gap) * 2);
24
- }
25
-
26
- &.justify-content-space-between {
27
- justify-content: space-between;
28
- }
29
- &.justify-content-flex-end {
30
- justify-content: flex-end;
31
- }
32
- &.justify-content-center {
33
- justify-content: center;
34
- }
1
+ .flex {
2
+ display: flex;
3
+ flex-flow: row wrap;
4
+ gap: var(--flex-grid-gap);
5
+ align-content: flex-start;
6
+ align-items: flex-start;
7
+ justify-content: flex-start;
8
+
9
+ &.align-items-center {
10
+ align-items: center;
11
+ }
35
12
 
13
+ &.gap-0 {
14
+ gap: 0;
36
15
  }
37
16
 
38
- /* utilizzata anche da grid */
17
+ &.gap-2 {
18
+ gap: calc(var(--flex-grid-gap) * 2);
19
+ }
20
+ &.column-gap-2 {
21
+ column-gap: calc(var(--flex-grid-gap) * 2);
22
+ }
39
23
 
40
- .align-self-center {
41
- align-self: center;
24
+ &.justify-content-space-between {
25
+ justify-content: space-between;
26
+ }
27
+ &.justify-content-flex-end {
28
+ justify-content: flex-end;
42
29
  }
43
- .align-self-end {
44
- align-self: end;
30
+ &.justify-content-center {
31
+ justify-content: center;
45
32
  }
46
33
 
47
34
  }
35
+
36
+ /* utilizzata anche da grid */
37
+
38
+ .align-self-center {
39
+ align-self: center;
40
+ }
41
+ .align-self-end {
42
+ align-self: end;
43
+ }
package/src/css/forms/fieldset.css CHANGED
@@ -1,83 +1,80 @@
1
- @layer base {
2
1
 
3
2
 
4
- /* TODO da verificare
3
+ /* TODO da verificare
5
4
  fieldset.form-group, fieldset.form-collection-fset {
6
5
 
7
- &, legend {
8
- padding: 0;
9
- background: transparent;
10
- border: none;
11
- }
6
+ &, legend {
7
+ padding: 0;
8
+ background: transparent;
9
+ border: none;
10
+ }
12
11
 
13
- legend {
14
- position: static;
15
- text-transform: none;
16
- }
12
+ legend {
13
+ position: static;
14
+ text-transform: none;
15
+ }
17
16
 
18
- .form-check {
19
- label {
20
- font-weight: var(--font-weight-regular);
21
- }
17
+ .form-check {
18
+ label {
19
+ font-weight: var(--font-weight-regular);
22
20
  }
21
+ }
23
22
 
24
23
  }
25
24
  */
26
25
 
27
26
 
28
- .fset {
29
- position: relative;
30
- padding: 3rem 1rem 1rem;
31
- margin: 1rem 0 2rem;
32
- background: transparent;
33
- border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
34
- border-radius: var(--btn-border-radius);
27
+ .fset {
28
+ position: relative;
29
+ padding: 3rem 1rem 1rem;
30
+ margin: 1rem 0 2rem;
31
+ background: transparent;
32
+ border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
33
+ border-radius: var(--btn-border-radius);
35
34
 
36
- &, > legend {
37
- border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
38
- }
39
-
40
- > legend {
41
- position: absolute;
42
- top: -.5rem;
43
- left: calc(-1 * var(--form-fieldset-border-width));
44
- z-index: 1;
45
- padding: .4rem .8rem;
46
- font-size: .9rem;
47
- font-weight: var(--font-weight-semibold);
48
- line-height: 1.2;
49
- color: var(--form-legend-color);
50
- background-color: var(--form-legend-background-color);
51
- border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
52
- }
35
+ &, > legend {
36
+ border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
37
+ }
53
38
 
39
+ > legend {
40
+ position: absolute;
41
+ top: -.5rem;
42
+ left: calc(-1 * var(--form-fieldset-border-width));
43
+ z-index: 1;
44
+ padding: .4rem .8rem;
45
+ font-size: .9rem;
46
+ font-weight: var(--font-weight-semibold);
47
+ line-height: 1.2;
48
+ color: var(--form-legend-color);
49
+ background-color: var(--form-legend-background-color);
50
+ border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
51
+ }
54
52
 
55
- .fset { /* :not(.fupl-wrapper):not(.form-group) { */
56
- padding-top: 2rem;
57
- margin-bottom: .5rem;
58
- border: none;
59
53
 
60
- &:first-of-type {
61
- margin-top: 0;
62
- }
54
+ .fset { /* :not(.fupl-wrapper):not(.form-group) { */
55
+ padding-top: 2rem;
56
+ margin-bottom: .5rem;
57
+ border: none;
63
58
 
64
- > legend {
65
- padding-right: 0;
66
- padding-left: 0;
67
- font-size: .9rem;
68
- background: transparent;
69
- border-bottom: 1px solid var(--form-control-border-color);
70
- }
59
+ &:first-of-type {
60
+ margin-top: 0;
71
61
  }
72
62
 
73
- &[disabled] {
74
- font-style: italic;
75
- opacity: .6;
63
+ > legend {
64
+ padding-right: 0;
65
+ padding-left: 0;
66
+ font-size: .9rem;
67
+ background: transparent;
68
+ border-bottom: 1px solid var(--form-control-border-color);
76
69
  }
70
+ }
77
71
 
78
- &:has(.table-responsive) {
79
- min-width: 0;
80
- }
72
+ &[disabled] {
73
+ font-style: italic;
74
+ opacity: .6;
81
75
  }
82
76
 
77
+ &:has(.table-responsive) {
78
+ min-width: 0;
79
+ }
83
80
  }
package/src/css/forms/form-collections.css CHANGED
@@ -1,21 +1,17 @@
1
- @layer base {
1
+ .form-collection-fset { /* fieldset */
2
+ padding: 0;
3
+ border: none;
2
4
 
3
- .form-collection-fset { /* fieldset */
4
- padding: 0;
5
- border: none;
5
+ .form-collection {
6
+ display: flex;
7
+ flex-flow: column nowrap;
8
+ gap: var(--size-xs);
9
+ align-items: flex-start;
10
+ justify-content: flex-start;
6
11
 
7
- .form-collection {
8
- display: flex;
9
- flex-flow: column nowrap;
10
- gap: var(--size-xs);
11
- align-items: flex-start;
12
- justify-content: flex-start;
13
-
14
- &.form-collection-inline {
15
- flex-flow: row wrap;
16
- gap: var(--size-md);
17
- }
12
+ &.form-collection-inline {
13
+ flex-flow: row wrap;
14
+ gap: var(--size-md);
18
15
  }
19
16
  }
20
-
21
17
  }
package/src/css/forms/form-disabled-readonly.css CHANGED
@@ -1,44 +1,41 @@
1
- @layer base {
2
1
 
2
+ .form-control {
3
3
 
4
- .form-control {
4
+ &[disabled] {
5
+ color: var(--form-control-disabled-color);
6
+ cursor: not-allowed;
7
+ background-color: var(--form-control-disabled-background-color);
5
8
 
6
- &[disabled] {
7
- color: var(--form-control-disabled-color);
8
- cursor: not-allowed;
9
- background-color: var(--form-control-disabled-background-color);
10
-
11
- &, &::placeholder {
12
- font-style: var(--form-control-disabled-font-style);
13
- }
14
- }
15
-
16
- &[readonly] {
17
- color: var(--form-control-readonly-color);
18
- pointer-events: none;
19
- user-select: none;
20
- background-color: var(--form-control-readonly-background-color);
9
+ &, &::placeholder {
10
+ font-style: var(--form-control-disabled-font-style);
21
11
  }
12
+ }
22
13
 
14
+ &[readonly] {
15
+ color: var(--form-control-readonly-color);
16
+ pointer-events: none;
17
+ user-select: none;
18
+ background-color: var(--form-control-readonly-background-color);
23
19
  }
24
20
 
25
- .form-group {
26
- &:has([disabled]) {
27
- opacity: var(--form-control-disabled-opacity);
28
- .form-label {
29
- font-style: var(--form-control-disabled-font-style);
30
- color: var(--form-control-disabled-color);
31
- }
32
- }
21
+ }
33
22
 
34
- &:has([readonly]) {
35
- opacity: var(--form-control-readonly-opacity);
36
- .form-label {
37
- font-style: var(--form-control-readonly-font-style);
38
- color: var(--form-control-readonly-color);
39
- }
23
+ .form-group {
24
+ &:has([disabled]) {
25
+ opacity: var(--form-control-disabled-opacity);
26
+ .form-label {
27
+ font-style: var(--form-control-disabled-font-style);
28
+ color: var(--form-control-disabled-color);
40
29
  }
30
+ }
41
31
 
32
+ &:has([readonly]) {
33
+ opacity: var(--form-control-readonly-opacity);
34
+ .form-label {
35
+ font-style: var(--form-control-readonly-font-style);
36
+ color: var(--form-control-readonly-color);
37
+ }
42
38
  }
43
39
 
44
40
  }
41
+
package/src/css/forms/form-group.css CHANGED
@@ -1,22 +1,17 @@
1
- @layer base {
1
+ .form-group {
2
+ display: flex;
3
+ flex-flow: column nowrap;
4
+ gap: var(--size-xxs);
5
+ align-content: flex-start; /* multiline container */
6
+ align-items: flex-start;
7
+ justify-content: stretch;
8
+ padding-block: var(--form-group-padding-block);
2
9
 
10
+ /* &:has(textarea) {
11
+ height: 100%;
12
+ } */
3
13
 
4
- .form-group {
5
- display: flex;
6
- flex-flow: column nowrap;
7
- gap: var(--size-xxs);
8
- align-content: flex-start; /* multiline container */
9
- align-items: flex-start;
10
- justify-content: stretch;
11
- padding-block: var(--form-group-padding-block);
12
-
13
- /* &:has(textarea) {
14
- height: 100%;
15
- } */
16
-
17
- .grid & {
18
- padding-block-end: 0;
19
- }
14
+ .grid & {
15
+ padding-block-end: 0;
20
16
  }
21
-
22
17
  }
package/src/css/forms/form-utilities.css CHANGED
@@ -1,48 +1,43 @@
1
- @layer base {
1
+ /* blocco finale con le info sull'utente che h salvato il form */
2
2
 
3
-
4
- /* blocco finale con le info sull'utente che h salvato il form */
5
-
6
- /*
3
+ /*
7
4
  <div class="form-end">
8
5
 
9
- <button ...>Registra</button>
6
+ <button ...>Registra</button>
10
7
 
11
- <div class="form-user-info" title="Ultima modifica effettuata da Gino Bianchi il xxxx">
12
- [icon]
13
- <span>13 Aug 2025 <small>11:54</small></span>
14
- <span>Gino Bianchi</span>
15
- </div>
8
+ <div class="form-user-info" title="Ultima modifica effettuata da Gino Bianchi il xxxx">
9
+ [icon]
10
+ <span>13 Aug 2025 <small>11:54</small></span>
11
+ <span>Gino Bianchi</span>
12
+ </div>
16
13
  </div>
17
14
  */
18
15
 
19
- .form-end {
20
- display: flex;
21
- flex-flow: row wrap;
22
- gap: var(--size-base);
23
- align-content: center;
24
- align-items: center;
25
- justify-content: space-between;
26
- margin-block: var(--form-end-margin-block-start) var(--form-end-margin-block-end);
27
- }
28
-
29
- .form-user-info {
30
- display: flex;
31
- flex-flow: row wrap;
32
- gap: var(--size-xs);
33
- align-items: center;
34
- justify-content: flex-end;
35
- font-size: var(--form-user-info-font-size);
36
- color: var(--form-user-info-color);
37
- }
38
-
39
-
40
- /* ---------------------------------------------------------------- */
41
- /* testo di aiuto sotto il controllo */
42
-
43
- .form-help-text {
44
- font-size: var(--font-size-xs);
45
- color: var(--text-muted);
46
- }
16
+ .form-end {
17
+ display: flex;
18
+ flex-flow: row wrap;
19
+ gap: var(--size-base);
20
+ align-content: center;
21
+ align-items: center;
22
+ justify-content: space-between;
23
+ margin-block: var(--form-end-margin-block-start) var(--form-end-margin-block-end);
24
+ }
25
+
26
+ .form-user-info {
27
+ display: flex;
28
+ flex-flow: row wrap;
29
+ gap: var(--size-xs);
30
+ align-items: center;
31
+ justify-content: flex-end;
32
+ font-size: var(--form-user-info-font-size);
33
+ color: var(--form-user-info-color);
34
+ }
35
+
36
+
37
+ /* ---------------------------------------------------------------- */
38
+ /* testo di aiuto sotto il controllo */
47
39
 
40
+ .form-help-text {
41
+ font-size: var(--font-size-xs);
42
+ color: var(--text-muted);
48
43
  }