@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
@@ -1,113 +1,109 @@
1
- @layer components {
2
-
3
- /*! minimo - Snackbar */
4
-
5
- /* purgecss start ignore */
6
-
7
- .snackbarOuter {
8
- position: fixed;
9
- inset-block: auto var(--size-md);
10
- /* inset-inline: 0 auto; */
11
- z-index: var(--z-index-snackbar);
12
- inline-size: 20dvw;
13
- min-inline-size: min(100%, 37ch);
14
- padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
15
- margin-inline: auto;
16
- background-color: var(--snackbar-outer-background-color);
17
- border: var(--snackbar-outer-border);
18
- border-radius: var(--snackbar-outer-border-radius);
19
- box-shadow: var(--snackbar-outer-drop-shadow);
20
- animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
21
-
22
- &.isHiding {
23
- animation: slide-out .25s ease-in forwards;
24
- }
1
+ /*! minimo - Snackbar */
2
+
3
+ /* purgecss start ignore */
4
+
5
+ .snackbarOuter {
6
+ position: fixed;
7
+ inset-block: auto var(--size-md);
8
+ /* inset-inline: 0 auto; */
9
+ z-index: var(--z-index-snackbar);
10
+ inline-size: 20dvw;
11
+ min-inline-size: min(100%, 37ch);
12
+ padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
13
+ margin-inline: auto;
14
+ background-color: var(--snackbar-outer-background-color);
15
+ border: var(--snackbar-outer-border);
16
+ border-radius: var(--snackbar-outer-border-radius);
17
+ box-shadow: var(--snackbar-outer-drop-shadow);
18
+ animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
19
+
20
+ &.isHiding {
21
+ animation: slide-out .25s ease-in forwards;
22
+ }
23
+
24
+ }
25
25
 
26
+ .snackbar {
27
+ display: flex;
28
+ gap: var(--size-xs);
29
+ align-items: center;
30
+ justify-content: space-between;
31
+ padding: var(--size-xs) var(--size-sm);
32
+ font-size: var(--snackbar-font-size);
33
+ color: var(--snackbar-text-color);
34
+ background-color: var(--snackbar-background-color);
35
+ border-radius: var(--snackbar-border-radius);
36
+
37
+ &::backdrop {
38
+ display: none;
26
39
  }
27
40
 
28
- .snackbar {
29
- display: flex;
30
- gap: var(--size-xs);
31
- align-items: center;
32
- justify-content: space-between;
33
- padding: var(--size-xs) var(--size-sm);
34
- font-size: var(--snackbar-font-size);
35
- color: var(--snackbar-text-color);
36
- background-color: var(--snackbar-background-color);
37
- border-radius: var(--snackbar-border-radius);
38
-
39
- &::backdrop {
40
- display: none;
41
- }
42
-
43
- * {
44
- overflow-wrap: break-word;
45
- }
41
+ * {
42
+ overflow-wrap: break-word;
46
43
  }
44
+ }
47
45
 
48
- /* .text {} */
46
+ /* .text {} */
49
47
 
50
- .action {
51
- margin-inline-start: auto;
52
- }
53
- .closeBtn {
54
- --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */
48
+ .action {
49
+ margin-inline-start: auto;
50
+ }
51
+ .closeBtn {
52
+ --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */
55
53
 
56
- --btn-close-background-color: var(--snackbar-btn-close-background-color);
57
- --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
58
- --btn-close-icon-bar-size: 2px;
59
- --btn-close-border-color: var(--snackbar-btn-close-border-color);
60
- --btn-close-border-width: var(--snackbar-btn-close-border-width);
61
- --btn-close-border-radius: var(--snackbar-btn-close-border-radius);
54
+ --btn-close-background-color: var(--snackbar-btn-close-background-color);
55
+ --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
56
+ --btn-close-icon-bar-size: 2px;
57
+ --btn-close-border-color: var(--snackbar-btn-close-border-color);
58
+ --btn-close-border-width: var(--snackbar-btn-close-border-width);
59
+ --btn-close-border-radius: var(--snackbar-btn-close-border-radius);
62
60
 
63
- --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
64
- --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
65
- --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);
61
+ --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
62
+ --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
63
+ --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);
66
64
 
67
- --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
68
- --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
69
- --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);
65
+ --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
66
+ --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
67
+ --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);
70
68
 
71
- --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
72
- --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);
69
+ --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
70
+ --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);
73
71
 
74
- flex-shrink: 0;
75
- border: none;
72
+ flex-shrink: 0;
73
+ border: none;
76
74
 
77
- &:active {
78
- scale: .6;
79
- }
75
+ &:active {
76
+ scale: .6;
80
77
  }
78
+ }
81
79
 
82
- @keyframes slide-in {
83
- from {
84
- opacity: 0;
85
- translate: 0 calc(100% + var(--size-md));
86
- }
87
- to {
88
- opacity: 1;
89
- translate: 0 0;
90
- }
80
+ @keyframes slide-in {
81
+ from {
82
+ opacity: 0;
83
+ translate: 0 calc(100% + var(--size-md));
91
84
  }
92
-
93
- @keyframes slide-out {
94
- from {
95
- opacity: 1;
96
- translate: 0 0;
97
- }
98
- to {
99
- opacity: 0;
100
- translate: 0 calc(100% + var(--size-md));
101
- }
85
+ to {
86
+ opacity: 1;
87
+ translate: 0 0;
102
88
  }
89
+ }
103
90
 
104
- @media (prefers-reduced-motion: reduce) {
105
- .snackbarOuter,
106
- .snackbarOuter.isHiding {
107
- animation: none;
108
- }
91
+ @keyframes slide-out {
92
+ from {
93
+ opacity: 1;
94
+ translate: 0 0;
109
95
  }
96
+ to {
97
+ opacity: 0;
98
+ translate: 0 calc(100% + var(--size-md));
99
+ }
100
+ }
110
101
 
111
- /* purgecss end ignore */
112
-
102
+ @media (prefers-reduced-motion: reduce) {
103
+ .snackbarOuter,
104
+ .snackbarOuter.isHiding {
105
+ animation: none;
106
+ }
113
107
  }
108
+
109
+ /* purgecss end ignore */
@@ -1,20 +1,16 @@
1
- @layer components {
2
-
3
- .spinner {
4
- display: block;
5
- width: var(--spinner-size);
6
- height: var(--spinner-size);
7
- margin: .5rem auto;
8
- color: var(--spinner-color);
9
- text-indent: -99999em;
10
- border: var(--spinner-stroke-width) solid;
11
- border-color: currentColor currentColor transparent;
12
- border-radius: 50%;
13
- animation: spinner-border .7s linear infinite;
14
- }
15
-
16
- @keyframes spinner-border {
17
- to { transform: rotate(360deg); }
18
- }
1
+ .spinner {
2
+ display: block;
3
+ width: var(--spinner-size);
4
+ height: var(--spinner-size);
5
+ margin: .5rem auto;
6
+ color: var(--spinner-color);
7
+ text-indent: -99999em;
8
+ border: var(--spinner-stroke-width) solid;
9
+ border-color: currentColor currentColor transparent;
10
+ border-radius: 50%;
11
+ animation: spinner-border .7s linear infinite;
12
+ }
19
13
 
14
+ @keyframes spinner-border {
15
+ to { transform: rotate(360deg); }
20
16
  }
@@ -1,9 +1,5 @@
1
- @layer components {
2
-
3
- .spinnerWrapper {
4
- display: grid;
5
- place-content: center;
6
- padding: 2rem;
7
- }
8
-
1
+ .spinnerWrapper {
2
+ display: grid;
3
+ place-content: center;
4
+ padding: 2rem;
9
5
  }