@massimo-cassandro/minimo 1.20.15 → 1.21.0
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.
- package/design-tokens/_src/link.minimo.tokens.mjs +35 -4
- package/package.json +1 -1
- package/src/components/autocomplete/autocomplete.css +113 -109
- package/src/components/inner-nav/inner-nav.css +13 -9
- package/src/components/modal-alert/modal-alert.js +13 -13
- package/src/components/modal-alert/modal-alert.module.css +157 -153
- package/src/components/modal-popup/modal-popup.module.css +89 -85
- package/src/components/overlay/overlay.css +14 -10
- package/src/components/sf-macro/sf-macro.css +60 -56
- package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +33 -29
- package/src/components/snackbar/snackbar.module.css +93 -89
- package/src/components/spinner/spinner-circle-basic.css +18 -14
- package/src/components/spinner/spinner.module.css +8 -4
- package/src/components/unsplash-page/unsplash-page.module.css +260 -256
- package/src/css/alerts.css +55 -53
- package/src/css/badge.css +16 -12
- package/src/css/buttons/btn-close.css +57 -53
- package/src/css/buttons/buttons-primary.css +38 -34
- package/src/css/buttons/buttons-secondary.css +38 -34
- package/src/css/buttons/buttons.css +84 -80
- package/src/css/buttons/status-buttons.css +66 -63
- package/src/css/container.css +9 -5
- package/src/css/data-formats.css +28 -24
- package/src/css/details.css +17 -13
- package/src/css/dimensions.css +13 -9
- package/src/css/display.css +27 -23
- package/src/css/flex.css +39 -35
- package/src/css/forms/fieldset.css +47 -43
- package/src/css/forms/form-collections.css +16 -12
- package/src/css/forms/form-disabled-readonly.css +31 -27
- package/src/css/forms/form-group.css +15 -11
- package/src/css/forms/form-utilities.css +32 -28
- package/src/css/forms/forms.css +136 -134
- package/src/css/forms/input-group.css +47 -43
- package/src/css/forms/switch.css +50 -46
- package/src/css/forms/validation.css +26 -22
- package/src/css/grid.css +66 -62
- package/src/css/headings.css +32 -28
- package/src/css/icons.css +41 -37
- package/src/css/layout-base.css +16 -12
- package/src/css/links.css +49 -0
- package/src/css/margin-padding-bootstrap-media.css +1836 -1832
- package/src/css/margin-padding-bootstrap.css +445 -441
- package/src/css/margin-padding-media.css +1836 -1832
- package/src/css/margin-padding.css +445 -441
- package/src/css/overflow.css +7 -3
- package/src/css/position.css +5 -1
- package/src/css/reset.css +47 -44
- package/src/css/svg.css +6 -2
- package/src/css/table.css +59 -55
- package/src/css/text.css +96 -92
- package/src/css/visibility.css +23 -19
- package/src/custom-properties.css +9 -3
- package/src/minimo.css +3 -1
- package/src/web-components/s-datatable-component/s-datatable-component.module.css +175 -171
- package/src/css/anchors.css +0 -45
|
@@ -1,26 +1,28 @@
|
|
|
1
|
-
|
|
1
|
+
@layer components {
|
|
2
2
|
|
|
3
|
+
/* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */
|
|
3
4
|
|
|
4
|
-
.sf-macro-wrapper {
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
--btn-close-size: var(--sf-macro-btn-close-size);
|
|
6
|
+
.sf-macro-wrapper {
|
|
8
7
|
|
|
8
|
+
--btn-close-background-color: var(--sf-macro-btn-close-background-color);
|
|
9
|
+
--btn-close-size: var(--sf-macro-btn-close-size);
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
|
|
12
|
+
/* etichette campi righe successive alla prima */
|
|
13
|
+
@media (--media-large-viewport-up) {
|
|
14
|
+
&:not(.always-show-labels) {
|
|
15
|
+
.sf-macro-riga {
|
|
16
|
+
&:not(:first-child) {
|
|
17
|
+
.form-label, label {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
}
|
|
21
|
-
}
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
/*
|
|
24
26
|
// forza la visualizzazione delle etichette in tutte le righe
|
|
25
27
|
// a partire dal breakpont successivo a quello indicato
|
|
26
28
|
@each $brk in (xs, sm, md, lg, xl) {
|
|
@@ -34,66 +36,68 @@
|
|
|
34
36
|
} // end @each
|
|
35
37
|
*/
|
|
36
38
|
|
|
37
|
-
}
|
|
39
|
+
}
|
|
38
40
|
|
|
39
|
-
.sf-macro-riga {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
.sf-macro-riga {
|
|
42
|
+
position: relative;
|
|
43
|
+
padding: var(--sf-macro-rows-padding);
|
|
44
|
+
margin-bottom: var(--sf-macro-rows-margin-block-end);
|
|
45
|
+
border: var(--sf-macro-rows-border);
|
|
46
|
+
border-radius: var(--sf-macro-rows-border-radius);
|
|
45
47
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
&:nth-child(even) {
|
|
49
|
+
background-color: var(--sf-macro-rows-even-background-color);
|
|
50
|
+
}
|
|
49
51
|
|
|
50
52
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
&:hover {
|
|
54
|
+
background-color: var(--sf-macro-rows-hover-background-color);
|
|
55
|
+
}
|
|
54
56
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
+
.form-group {
|
|
58
|
+
margin-bottom: 0;
|
|
57
59
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
+
&:has([type='checkbox']) {
|
|
61
|
+
align-self: center;
|
|
62
|
+
}
|
|
60
63
|
}
|
|
61
|
-
}
|
|
62
64
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
.grid {
|
|
66
|
+
row-gap: .8rem;
|
|
67
|
+
}
|
|
66
68
|
|
|
67
|
-
} /* end .sf-macro-riga */
|
|
69
|
+
} /* end .sf-macro-riga */
|
|
68
70
|
|
|
69
71
|
|
|
70
|
-
.sf-macro-close-btn { /* button */
|
|
72
|
+
.sf-macro-close-btn { /* button */
|
|
71
73
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: var(--sf-macro-btn-close-position-top);
|
|
76
|
+
right: var(--sf-macro-btn-close-position-right);
|
|
77
|
+
bottom: var(--sf-macro-btn-close-position-bottom);
|
|
78
|
+
left: var(--sf-macro-btn-close-position-left);
|
|
77
79
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
z-index: 1;
|
|
81
|
+
display: block;
|
|
80
82
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
&[disabled], [disabled] & {
|
|
84
|
+
cursor: not-allowed;
|
|
85
|
+
opacity: .4;
|
|
86
|
+
transform: skew(-15deg);
|
|
87
|
+
}
|
|
86
88
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
89
|
+
svg {
|
|
90
|
+
width: 100%;
|
|
91
|
+
aspect-ratio: 1;
|
|
92
|
+
}
|
|
90
93
|
}
|
|
91
|
-
}
|
|
92
94
|
|
|
93
|
-
.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
|
|
95
|
+
.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
|
|
94
96
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
97
|
+
outline: 2px dashed var(--status-danger-color);
|
|
98
|
+
.sf-macro-close-btn {
|
|
99
|
+
color: var(--status-danger-color);
|
|
100
|
+
}
|
|
98
101
|
}
|
|
102
|
+
|
|
99
103
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
@layer components {
|
|
2
|
+
|
|
3
|
+
/*! minimo - Slide Up/Down Toggle */
|
|
4
|
+
/*
|
|
3
5
|
* CSS Module for slide-up-down-toggle.js
|
|
4
6
|
*
|
|
5
7
|
* Three modern CSS features work together to animate height without JS measurement:
|
|
@@ -44,37 +46,37 @@
|
|
|
44
46
|
* style="--slide-duration: 300ms"
|
|
45
47
|
*/
|
|
46
48
|
|
|
47
|
-
/* applied to the animation wrapper (generated or the target itself) */
|
|
48
|
-
.slide {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
/* applied to the animation wrapper (generated or the target itself) */
|
|
50
|
+
.slide {
|
|
51
|
+
interpolate-size: allow-keywords;
|
|
52
|
+
/*
|
|
51
53
|
* !important overrides any external display: none (inline or CSS rule without !important).
|
|
52
54
|
* .slide[data-slide='closed'] below has higher specificity (0,2,0 vs 0,1,0) so its
|
|
53
55
|
* display: none !important still wins when the element is collapsed.
|
|
54
56
|
*/
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
57
|
+
/* stylelint-disable-next-line declaration-no-important */
|
|
58
|
+
display: block !important;
|
|
59
|
+
height: auto;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
transition:
|
|
62
|
+
height var(--slide-duration) ease,
|
|
63
|
+
display var(--slide-duration) allow-discrete;
|
|
64
|
+
}
|
|
63
65
|
|
|
64
|
-
/* collapsed state: height animates to 0, then display snaps to none */
|
|
65
|
-
.slide[data-slide='closed'] {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
66
|
+
/* collapsed state: height animates to 0, then display snaps to none */
|
|
67
|
+
.slide[data-slide='closed'] {
|
|
68
|
+
/* stylelint-disable-next-line declaration-no-important */
|
|
69
|
+
display: none !important;
|
|
70
|
+
height: 0;
|
|
71
|
+
}
|
|
70
72
|
|
|
71
|
-
/*
|
|
73
|
+
/*
|
|
72
74
|
* Entry state for the expand transition.
|
|
73
75
|
* When .slide transitions from display:none → display:block, the browser needs
|
|
74
76
|
* a starting value for height. @starting-style provides height:0 so the
|
|
75
77
|
* animation plays from zero to auto instead of snapping instantly.
|
|
76
78
|
*/
|
|
77
|
-
/*
|
|
79
|
+
/*
|
|
78
80
|
* @starting-style targets only [data-slide='open'] — not :not([data-slide='closed']).
|
|
79
81
|
* The broader selector would also match newly inserted wrappers (which have no
|
|
80
82
|
* data-slide attribute), causing an unwanted entry animation from height:0 that
|
|
@@ -82,17 +84,19 @@
|
|
|
82
84
|
* Using [data-slide='open'] restricts this to the expand animation triggered by
|
|
83
85
|
* slideDown(), which always sets data-slide="open" on a previously hidden element.
|
|
84
86
|
*/
|
|
85
|
-
@starting-style {
|
|
86
|
-
|
|
87
|
-
|
|
87
|
+
@starting-style {
|
|
88
|
+
.slide[data-slide='open'] {
|
|
89
|
+
height: 0;
|
|
90
|
+
}
|
|
88
91
|
}
|
|
89
|
-
}
|
|
90
92
|
|
|
91
|
-
/*
|
|
93
|
+
/*
|
|
92
94
|
* FOUC prevention — global, no class required.
|
|
93
95
|
* Hides elements with data-slide="closed" before JS has run and added .slide.
|
|
94
96
|
* Uses :global so CSS Modules does not hash this selector.
|
|
95
97
|
*/
|
|
96
|
-
:global([data-slide='closed']) {
|
|
97
|
-
|
|
98
|
+
:global([data-slide='closed']) {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
98
102
|
}
|
|
@@ -1,109 +1,113 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
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
|
+
}
|
|
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;
|
|
39
26
|
}
|
|
40
27
|
|
|
41
|
-
|
|
42
|
-
|
|
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
|
+
}
|
|
43
46
|
}
|
|
44
|
-
}
|
|
45
47
|
|
|
46
|
-
/* .text {} */
|
|
48
|
+
/* .text {} */
|
|
47
49
|
|
|
48
|
-
.action {
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
.closeBtn {
|
|
52
|
-
|
|
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 */
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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);
|
|
60
62
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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);
|
|
64
66
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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);
|
|
68
70
|
|
|
69
|
-
|
|
70
|
-
|
|
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);
|
|
71
73
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
flex-shrink: 0;
|
|
75
|
+
border: none;
|
|
74
76
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
+
&:active {
|
|
78
|
+
scale: .6;
|
|
79
|
+
}
|
|
77
80
|
}
|
|
78
|
-
}
|
|
79
81
|
|
|
80
|
-
@keyframes slide-in {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
+
}
|
|
84
91
|
}
|
|
85
|
-
to {
|
|
86
|
-
opacity: 1;
|
|
87
|
-
translate: 0 0;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
92
|
|
|
91
|
-
@keyframes slide-out {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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
|
+
}
|
|
95
102
|
}
|
|
96
|
-
to {
|
|
97
|
-
opacity: 0;
|
|
98
|
-
translate: 0 calc(100% + var(--size-md));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
103
|
|
|
102
|
-
@media (prefers-reduced-motion: reduce) {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
@media (prefers-reduced-motion: reduce) {
|
|
105
|
+
.snackbarOuter,
|
|
106
|
+
.snackbarOuter.isHiding {
|
|
107
|
+
animation: none;
|
|
108
|
+
}
|
|
106
109
|
}
|
|
107
|
-
}
|
|
108
110
|
|
|
109
|
-
/* purgecss end ignore */
|
|
111
|
+
/* purgecss end ignore */
|
|
112
|
+
|
|
113
|
+
}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
+
}
|
|
13
19
|
|
|
14
|
-
@keyframes spinner-border {
|
|
15
|
-
to { transform: rotate(360deg); }
|
|
16
20
|
}
|