@massimo-cassandro/minimo 1.21.10 → 1.22.1
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.
|
@@ -1,29 +1,56 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
|
|
3
|
-
background: {
|
|
4
|
-
color: {
|
|
5
|
-
$value: '{neutral.100}',
|
|
6
|
-
$type: 'color'
|
|
7
|
-
}
|
|
8
|
-
},
|
|
2
|
+
form: {
|
|
9
3
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
switch: {
|
|
5
|
+
width: {
|
|
6
|
+
$value: '2.25em',
|
|
7
|
+
$type: 'dimension'
|
|
8
|
+
},
|
|
9
|
+
|
|
10
|
+
height: {
|
|
11
|
+
$value: '1.25em',
|
|
12
|
+
$type: 'dimension'
|
|
13
|
+
},
|
|
14
|
+
|
|
15
|
+
thumb: {
|
|
16
|
+
inset: {
|
|
17
|
+
$value: '.125em',
|
|
18
|
+
$type: 'dimension'
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
transition: {
|
|
23
|
+
duration: {
|
|
24
|
+
$value: '.2s',
|
|
25
|
+
$type: 'duration'
|
|
26
|
+
},
|
|
16
27
|
},
|
|
17
|
-
},
|
|
18
28
|
|
|
19
|
-
checked: {
|
|
20
29
|
background: {
|
|
21
30
|
color: {
|
|
22
|
-
$value: '{
|
|
31
|
+
$value: '{neutral.100}',
|
|
23
32
|
$type: 'color'
|
|
24
33
|
}
|
|
25
34
|
},
|
|
26
|
-
}
|
|
27
35
|
|
|
36
|
+
cursor: {
|
|
37
|
+
background: {
|
|
38
|
+
color: {
|
|
39
|
+
$value: '{body.background.color}',
|
|
40
|
+
$type: 'color'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
checked: {
|
|
46
|
+
background: {
|
|
47
|
+
color: {
|
|
48
|
+
$value: '{primary.100}',
|
|
49
|
+
$type: 'color'
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
}
|
|
28
55
|
}
|
|
29
56
|
};
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3'",
|
|
29
29
|
"python server": "python3 -m http.server 8000 # --directory __dirname__ # 8000 = default port",
|
|
30
30
|
"php server": "php -S localhost:8000 # -t root_dir/",
|
|
31
|
-
"symfony server": "symfony serve --port=
|
|
31
|
+
"symfony server": "symfony serve --port=810X --listen-ip=0.0.0.0 # http://192.168.1.135:810X # -d (deamon): rimane aperto anche dopo la chiusura del terminale, terminare con `symfony server:stop`",
|
|
32
32
|
"node server": "node serve # richiede ‘npm i serve’",
|
|
33
33
|
"build tokens": "npx buildTokens --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",
|
|
34
34
|
"check unresolved props": "npx checkUnresolvedProps --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",
|
package/package.json
CHANGED
package/src/css/forms/switch.css
CHANGED
|
@@ -1,106 +1,110 @@
|
|
|
1
|
+
/* TODO aggiungere esempi di uso */
|
|
2
|
+
/* TODO valutare versione con label a sinistra (form-check-reverse) */
|
|
1
3
|
|
|
2
|
-
/*
|
|
4
|
+
/*
|
|
5
|
+
Markup (come bootstrap 5, con l'aggiunta dell'attributo nativo `switch`):
|
|
3
6
|
|
|
7
|
+
<div class="form-check form-switch">
|
|
8
|
+
<input class="form-check-input" type="checkbox" role="switch" switch id="my-switch">
|
|
9
|
+
<label class="form-check-label" for="my-switch">Abilita notifiche</label>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
L'attributo `switch` (per ora solo WebKit) fa sì che il browser generi un vero
|
|
13
|
+
controllo switch nativo, modellabile con gli pseudo-elementi `::track` e `::thumb`.
|
|
14
|
+
Dove non è supportato (o dove l'attributo è assente) si applica il fallback
|
|
15
|
+
`appearance: none` con la pallina disegnata come background-image.
|
|
16
|
+
*/
|
|
4
17
|
|
|
5
18
|
.form-switch {
|
|
6
|
-
padding-left: $form-switch-padding-start;
|
|
7
19
|
|
|
8
|
-
|
|
9
|
-
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
|
|
20
|
+
--_switch-thumb-size: calc(var(--form-switch-height) - var(--form-switch-thumb-inset) * 2);
|
|
10
21
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@include transition($form-switch-transition);
|
|
22
|
+
/* annulla il layout con float di `.form-check` */
|
|
23
|
+
display: flex;
|
|
24
|
+
column-gap: var(--size-sm);
|
|
25
|
+
align-items: center;
|
|
26
|
+
padding-left: 0;
|
|
17
27
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
.form-check-input {
|
|
29
|
+
float: none;
|
|
30
|
+
flex: none;
|
|
31
|
+
width: var(--form-switch-width);
|
|
32
|
+
height: var(--form-switch-height);
|
|
33
|
+
margin: 0;
|
|
34
|
+
appearance: none;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
background-color: var(--form-switch-background-color);
|
|
37
|
+
background-image: radial-gradient(
|
|
38
|
+
circle closest-side,
|
|
39
|
+
var(--form-switch-cursor-background-color) 98%,
|
|
40
|
+
transparent
|
|
41
|
+
);
|
|
42
|
+
background-repeat: no-repeat;
|
|
43
|
+
background-position: var(--form-switch-thumb-inset) center;
|
|
44
|
+
background-size: var(--_switch-thumb-size) var(--_switch-thumb-size);
|
|
45
|
+
border: none;
|
|
46
|
+
border-radius: var(--form-switch-height);
|
|
47
|
+
|
|
48
|
+
/* annulla lo `scale` applicato a tutti i checkbox */
|
|
49
|
+
scale: none;
|
|
50
|
+
|
|
51
|
+
&:checked {
|
|
52
|
+
background-color: var(--form-switch-checked-background-color);
|
|
53
|
+
background-position: calc(100% - var(--form-switch-thumb-inset)) center;
|
|
54
|
+
}
|
|
21
55
|
|
|
22
|
-
|
|
23
|
-
|
|
56
|
+
&:focus {
|
|
57
|
+
outline: none;
|
|
58
|
+
}
|
|
24
59
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
|
|
60
|
+
&:focus-visible {
|
|
61
|
+
outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
|
|
62
|
+
outline-offset: var(--form-control-focus-outline-offset);
|
|
29
63
|
}
|
|
30
64
|
}
|
|
31
|
-
}
|
|
32
65
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
.form-check-input {
|
|
38
|
-
margin-right: $form-switch-padding-start * -1;
|
|
39
|
-
margin-left: 0;
|
|
66
|
+
.form-check-label {
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
user-select: none;
|
|
40
69
|
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
*/
|
|
46
70
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<input type="checkbox">
|
|
50
|
-
<span class="switch-track"></span>
|
|
51
|
-
<label>Abilita notifiche</label>
|
|
52
|
-
</div>
|
|
53
|
-
*/
|
|
71
|
+
&:has(.form-check-input:disabled) {
|
|
72
|
+
opacity: var(--form-control-disabled-opacity);
|
|
54
73
|
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.switch input {
|
|
62
|
-
position: absolute;
|
|
63
|
-
width: 0;
|
|
64
|
-
height: 0;
|
|
65
|
-
opacity: 0;
|
|
74
|
+
.form-check-input, .form-check-label {
|
|
75
|
+
cursor: not-allowed;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
66
78
|
}
|
|
67
79
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
transition: background-color .2s;
|
|
80
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
81
|
+
.form-switch .form-check-input {
|
|
82
|
+
transition:
|
|
83
|
+
background-color var(--form-switch-transition-duration) linear,
|
|
84
|
+
background-position var(--form-switch-transition-duration) ease-in-out;
|
|
85
|
+
}
|
|
75
86
|
}
|
|
76
87
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
88
|
+
/* switch nativo: si lascia il rendering al browser e si interviene sui suoi pseudo-elementi */
|
|
89
|
+
/* stylelint-disable selector-pseudo-element-no-unknown */
|
|
90
|
+
@supports selector(input[switch]::thumb) {
|
|
81
91
|
|
|
82
|
-
.switch-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
width: 2em;
|
|
87
|
-
height: 2em;
|
|
88
|
-
content: '';
|
|
89
|
-
background: var(--switch-cursor-background-color);
|
|
90
|
-
border-radius: 50%;
|
|
91
|
-
transition: translate .2s;
|
|
92
|
-
}
|
|
92
|
+
.form-switch .form-check-input[switch] {
|
|
93
|
+
appearance: auto;
|
|
94
|
+
background: none;
|
|
95
|
+
border-radius: 0; /* gestito da ::track */
|
|
93
96
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
+
&::track {
|
|
98
|
+
background-color: var(--form-switch-background-color);
|
|
99
|
+
}
|
|
97
100
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
+
&::thumb {
|
|
102
|
+
background-color: var(--form-switch-cursor-background-color);
|
|
103
|
+
}
|
|
101
104
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
105
|
+
&:checked::track {
|
|
106
|
+
background-color: var(--form-switch-checked-background-color);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
106
109
|
}
|
|
110
|
+
/* stylelint-enable selector-pseudo-element-no-unknown */
|
|
@@ -193,6 +193,13 @@
|
|
|
193
193
|
--form-label-font-weight: var(--font-weight-semibold);
|
|
194
194
|
--form-legend-background-color: transparent;
|
|
195
195
|
--form-legend-color: var(--text-color);
|
|
196
|
+
--form-switch-background-color: var(--neutral-100);
|
|
197
|
+
--form-switch-checked-background-color: var(--primary-100);
|
|
198
|
+
--form-switch-cursor-background-color: var(--body-background-color);
|
|
199
|
+
--form-switch-height: 1.25em;
|
|
200
|
+
--form-switch-thumb-inset: .125em;
|
|
201
|
+
--form-switch-transition-duration: .2s;
|
|
202
|
+
--form-switch-width: 2.25em;
|
|
196
203
|
--form-user-info-color: var(--text-muted);
|
|
197
204
|
--form-user-info-font-size: var(--font-size-xs);
|
|
198
205
|
--form-validation-outline-offset: -3px;
|
|
@@ -284,10 +291,10 @@
|
|
|
284
291
|
--mpopup-header-color: var(--text-color);
|
|
285
292
|
--mpopup-header-font-size: var(--font-size-xl);
|
|
286
293
|
--mpopup-header-padding: var(--size-xs);
|
|
287
|
-
--mpopup-height:
|
|
294
|
+
--mpopup-height: fit-content;
|
|
288
295
|
--mpopup-max-height: 90dvh;
|
|
289
296
|
--mpopup-max-width: 70dvw;
|
|
290
|
-
--mpopup-min-height:
|
|
297
|
+
--mpopup-min-height: 40dvw;
|
|
291
298
|
--mpopup-min-width: 400px;
|
|
292
299
|
--mpopup-width: max-content;
|
|
293
300
|
|
|
@@ -380,10 +387,6 @@
|
|
|
380
387
|
--status-warning-color: #fc0;
|
|
381
388
|
--status-warning-fg: #4f2900;
|
|
382
389
|
|
|
383
|
-
--switch-background-color: var(--neutral-100);
|
|
384
|
-
--switch-checked-background-color: var(--primary-100);
|
|
385
|
-
--switch-cursor-background-color: var(--body-background-color);
|
|
386
|
-
|
|
387
390
|
--table-body-border-width: 1px;
|
|
388
391
|
--table-body-tr-alt-bg-color: #efefef;
|
|
389
392
|
--table-body-tr-hover-bg-color: #cbcbcb;
|
package/src/minimo.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
@import '@minimo/css/forms/form-disabled-readonly.css';
|
|
18
18
|
@import '@minimo/css/forms/validation.css';
|
|
19
19
|
@import '@minimo/css/forms/form-utilities.css';
|
|
20
|
+
@import '@minimo/css/forms/switch.css';
|
|
20
21
|
|
|
21
22
|
@import '@minimo/css/buttons/buttons.css';
|
|
22
23
|
@import '@minimo/css/buttons/buttons-primary.css';
|
package/types/classes.d.ts
CHANGED
|
@@ -59,6 +59,7 @@ export type MinimoClass =
|
|
|
59
59
|
| 'font-semibold'
|
|
60
60
|
| 'form-check'
|
|
61
61
|
| 'form-check-input'
|
|
62
|
+
| 'form-check-label'
|
|
62
63
|
| 'form-check-top-label'
|
|
63
64
|
| 'form-collection'
|
|
64
65
|
| 'form-collection-fset'
|
|
@@ -70,6 +71,7 @@ export type MinimoClass =
|
|
|
70
71
|
| 'form-group'
|
|
71
72
|
| 'form-help-text'
|
|
72
73
|
| 'form-label'
|
|
74
|
+
| 'form-switch'
|
|
73
75
|
| 'form-user-info'
|
|
74
76
|
| 'fset'
|
|
75
77
|
| 'gap-0'
|
|
@@ -1378,8 +1380,6 @@ export type MinimoClass =
|
|
|
1378
1380
|
| 'span-3'
|
|
1379
1381
|
| 'span-4'
|
|
1380
1382
|
| 'spinner'
|
|
1381
|
-
| 'switch'
|
|
1382
|
-
| 'switch-track'
|
|
1383
1383
|
| 'table'
|
|
1384
1384
|
| 'table-bordered'
|
|
1385
1385
|
| 'table-responsive'
|