@massimo-cassandro/minimo 1.16.1 → 1.16.2

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,102 +1,462 @@
1
- /* stylelint-disable declaration-no-important */
1
+ /* stylelint-disable declaration-no-important, selector-class-pattern */
2
2
 
3
- /* TODO produzione utilities in automatico o con funzione css */
4
- /* TODO produrre anche un versione con il naming bootstrap per facilitare eventuali migrazioni */
3
+ /* AUTO-GENERATED FILE — do not edit by hand.
4
+ Generated by `node scripts/build-margin-padding-css.mjs`.
5
+ Edit the `sizes` / `classes` / `media` maps there instead.
5
6
 
6
- .mbs-xxs {
7
- margin-block-start: var(--size-xxs) !important;
7
+ Responsive variants live in `margin-padding-media.css`. */
8
+
9
+ .m-0 {
10
+ margin: 0 !important;
11
+ }
12
+ .m-auto {
13
+ margin: auto !important;
14
+ }
15
+ .m-3xl {
16
+ margin: var(--size-3xl) !important;
17
+ }
18
+ .m-2xl {
19
+ margin: var(--size-2xl) !important;
20
+ }
21
+ .m {
22
+ margin: var(--size-base) !important;
23
+ }
24
+ .m-lg {
25
+ margin: var(--size-lg) !important;
26
+ }
27
+ .m-md {
28
+ margin: var(--size-md) !important;
29
+ }
30
+ .m-sm {
31
+ margin: var(--size-sm) !important;
32
+ }
33
+ .m-xl {
34
+ margin: var(--size-xl) !important;
35
+ }
36
+ .m-xs {
37
+ margin: var(--size-xs) !important;
38
+ }
39
+ .m-xxs {
40
+ margin: var(--size-xxs) !important;
41
+ }
42
+
43
+ .mb-0 {
44
+ margin-block: 0 !important;
45
+ }
46
+ .mb-auto {
47
+ margin-block: auto !important;
48
+ }
49
+ .mb-3xl {
50
+ margin-block: var(--size-3xl) !important;
51
+ }
52
+ .mb-2xl {
53
+ margin-block: var(--size-2xl) !important;
54
+ }
55
+ .mb {
56
+ margin-block: var(--size-base) !important;
8
57
  }
58
+ .mb-lg {
59
+ margin-block: var(--size-lg) !important;
60
+ }
61
+ .mb-md {
62
+ margin-block: var(--size-md) !important;
63
+ }
64
+ .mb-sm {
65
+ margin-block: var(--size-sm) !important;
66
+ }
67
+ .mb-xl {
68
+ margin-block: var(--size-xl) !important;
69
+ }
70
+ .mb-xs {
71
+ margin-block: var(--size-xs) !important;
72
+ }
73
+ .mb-xxs {
74
+ margin-block: var(--size-xxs) !important;
75
+ }
76
+
9
77
  .mbs-0 {
10
78
  margin-block-start: 0 !important;
11
79
  }
80
+ .mbs-auto {
81
+ margin-block-start: auto !important;
82
+ }
83
+ .mbs-3xl {
84
+ margin-block-start: var(--size-3xl) !important;
85
+ }
86
+ .mbs-2xl {
87
+ margin-block-start: var(--size-2xl) !important;
88
+ }
12
89
  .mbs {
13
90
  margin-block-start: var(--size-base) !important;
14
91
  }
15
92
  .mbs-lg {
16
93
  margin-block-start: var(--size-lg) !important;
17
94
  }
95
+ .mbs-md {
96
+ margin-block-start: var(--size-md) !important;
97
+ }
98
+ .mbs-sm {
99
+ margin-block-start: var(--size-sm) !important;
100
+ }
18
101
  .mbs-xl {
19
102
  margin-block-start: var(--size-xl) !important;
20
103
  }
21
- .mbs-auto {
22
- margin-block-start: auto !important;
104
+ .mbs-xs {
105
+ margin-block-start: var(--size-xs) !important;
106
+ }
107
+ .mbs-xxs {
108
+ margin-block-start: var(--size-xxs) !important;
23
109
  }
24
- /* @media (--media-large-viewport-up) {
25
-
26
- .mt-dsk-lg {
27
- margin-block-start: var(--size-lg);
28
- }
29
- } */
30
110
 
31
111
  .mbe-0 {
32
112
  margin-block-end: 0 !important;
33
113
  }
114
+ .mbe-auto {
115
+ margin-block-end: auto !important;
116
+ }
117
+ .mbe-3xl {
118
+ margin-block-end: var(--size-3xl) !important;
119
+ }
120
+ .mbe-2xl {
121
+ margin-block-end: var(--size-2xl) !important;
122
+ }
34
123
  .mbe {
35
124
  margin-block-end: var(--size-base) !important;
36
125
  }
37
- .mbe-xs {
38
- margin-block-end: var(--size-xs) !important;
39
- }
40
126
  .mbe-lg {
41
127
  margin-block-end: var(--size-lg) !important;
42
128
  }
129
+ .mbe-md {
130
+ margin-block-end: var(--size-md) !important;
131
+ }
132
+ .mbe-sm {
133
+ margin-block-end: var(--size-sm) !important;
134
+ }
43
135
  .mbe-xl {
44
136
  margin-block-end: var(--size-xl) !important;
45
137
  }
46
- /* @media (--media-large-viewport-up) {
47
-
48
- .mb-dsk-lg {
49
- margin-block-end: var(--size-lg);
50
- }
51
- } */
138
+ .mbe-xs {
139
+ margin-block-end: var(--size-xs) !important;
140
+ }
141
+ .mbe-xxs {
142
+ margin-block-end: var(--size-xxs) !important;
143
+ }
52
144
 
53
- /* .grid-full-row {
54
- grid-column: 1 / -1;
55
- } */
145
+ .mi-0 {
146
+ margin-inline: 0 !important;
147
+ }
148
+ .mi-auto {
149
+ margin-inline: auto !important;
150
+ }
151
+ .mi-3xl {
152
+ margin-inline: var(--size-3xl) !important;
153
+ }
154
+ .mi-2xl {
155
+ margin-inline: var(--size-2xl) !important;
156
+ }
157
+ .mi {
158
+ margin-inline: var(--size-base) !important;
159
+ }
160
+ .mi-lg {
161
+ margin-inline: var(--size-lg) !important;
162
+ }
163
+ .mi-md {
164
+ margin-inline: var(--size-md) !important;
165
+ }
166
+ .mi-sm {
167
+ margin-inline: var(--size-sm) !important;
168
+ }
169
+ .mi-xl {
170
+ margin-inline: var(--size-xl) !important;
171
+ }
172
+ .mi-xs {
173
+ margin-inline: var(--size-xs) !important;
174
+ }
175
+ .mi-xxs {
176
+ margin-inline: var(--size-xxs) !important;
177
+ }
56
178
 
57
- .mis {
58
- margin-inline-start: var(--size-base) !important;
179
+ .mis-0 {
180
+ margin-inline-start: 0 !important;
59
181
  }
60
182
  .mis-auto {
61
183
  margin-inline-start: auto !important;
62
184
  }
185
+ .mis-3xl {
186
+ margin-inline-start: var(--size-3xl) !important;
187
+ }
188
+ .mis-2xl {
189
+ margin-inline-start: var(--size-2xl) !important;
190
+ }
191
+ .mis {
192
+ margin-inline-start: var(--size-base) !important;
193
+ }
194
+ .mis-lg {
195
+ margin-inline-start: var(--size-lg) !important;
196
+ }
197
+ .mis-md {
198
+ margin-inline-start: var(--size-md) !important;
199
+ }
200
+ .mis-sm {
201
+ margin-inline-start: var(--size-sm) !important;
202
+ }
203
+ .mis-xl {
204
+ margin-inline-start: var(--size-xl) !important;
205
+ }
206
+ .mis-xs {
207
+ margin-inline-start: var(--size-xs) !important;
208
+ }
209
+ .mis-xxs {
210
+ margin-inline-start: var(--size-xxs) !important;
211
+ }
63
212
 
64
- .mie {
65
- margin-inline-end: var(--size-base) !important;
213
+ .mie-0 {
214
+ margin-inline-end: 0 !important;
66
215
  }
67
216
  .mie-auto {
68
217
  margin-inline-end: auto !important;
69
218
  }
219
+ .mie-3xl {
220
+ margin-inline-end: var(--size-3xl) !important;
221
+ }
222
+ .mie-2xl {
223
+ margin-inline-end: var(--size-2xl) !important;
224
+ }
225
+ .mie {
226
+ margin-inline-end: var(--size-base) !important;
227
+ }
228
+ .mie-lg {
229
+ margin-inline-end: var(--size-lg) !important;
230
+ }
231
+ .mie-md {
232
+ margin-inline-end: var(--size-md) !important;
233
+ }
234
+ .mie-sm {
235
+ margin-inline-end: var(--size-sm) !important;
236
+ }
237
+ .mie-xl {
238
+ margin-inline-end: var(--size-xl) !important;
239
+ }
70
240
  .mie-xs {
71
241
  margin-inline-end: var(--size-xs) !important;
72
242
  }
243
+ .mie-xxs {
244
+ margin-inline-end: var(--size-xxs) !important;
245
+ }
73
246
 
74
- .mi {
75
- margin-inline: var(--size-base) !important;
247
+ .p-0 {
248
+ padding: 0 !important;
76
249
  }
77
- .mi-0 {
78
- margin-inline: 0 !important;
250
+ .p-3xl {
251
+ padding: var(--size-3xl) !important;
252
+ }
253
+ .p-2xl {
254
+ padding: var(--size-2xl) !important;
255
+ }
256
+ .p {
257
+ padding: var(--size-base) !important;
258
+ }
259
+ .p-lg {
260
+ padding: var(--size-lg) !important;
261
+ }
262
+ .p-md {
263
+ padding: var(--size-md) !important;
264
+ }
265
+ .p-sm {
266
+ padding: var(--size-sm) !important;
267
+ }
268
+ .p-xl {
269
+ padding: var(--size-xl) !important;
270
+ }
271
+ .p-xs {
272
+ padding: var(--size-xs) !important;
273
+ }
274
+ .p-xxs {
275
+ padding: var(--size-xxs) !important;
79
276
  }
80
277
 
81
- .mb {
82
- margin-block: var(--size-base) !important;
278
+ .pb-0 {
279
+ padding-block: 0 !important;
83
280
  }
84
- .mb-0 {
85
- margin-block: 0 !important;
281
+ .pb-3xl {
282
+ padding-block: var(--size-3xl) !important;
283
+ }
284
+ .pb-2xl {
285
+ padding-block: var(--size-2xl) !important;
286
+ }
287
+ .pb {
288
+ padding-block: var(--size-base) !important;
289
+ }
290
+ .pb-lg {
291
+ padding-block: var(--size-lg) !important;
292
+ }
293
+ .pb-md {
294
+ padding-block: var(--size-md) !important;
295
+ }
296
+ .pb-sm {
297
+ padding-block: var(--size-sm) !important;
298
+ }
299
+ .pb-xl {
300
+ padding-block: var(--size-xl) !important;
301
+ }
302
+ .pb-xs {
303
+ padding-block: var(--size-xs) !important;
304
+ }
305
+ .pb-xxs {
306
+ padding-block: var(--size-xxs) !important;
86
307
  }
87
308
 
88
- .mi-lg {
89
- margin-inline: var(--size-lg) !important;
309
+ .pbs-0 {
310
+ padding-block-start: 0 !important;
311
+ }
312
+ .pbs-3xl {
313
+ padding-block-start: var(--size-3xl) !important;
314
+ }
315
+ .pbs-2xl {
316
+ padding-block-start: var(--size-2xl) !important;
317
+ }
318
+ .pbs {
319
+ padding-block-start: var(--size-base) !important;
320
+ }
321
+ .pbs-lg {
322
+ padding-block-start: var(--size-lg) !important;
323
+ }
324
+ .pbs-md {
325
+ padding-block-start: var(--size-md) !important;
326
+ }
327
+ .pbs-sm {
328
+ padding-block-start: var(--size-sm) !important;
329
+ }
330
+ .pbs-xl {
331
+ padding-block-start: var(--size-xl) !important;
332
+ }
333
+ .pbs-xs {
334
+ padding-block-start: var(--size-xs) !important;
335
+ }
336
+ .pbs-xxs {
337
+ padding-block-start: var(--size-xxs) !important;
90
338
  }
91
339
 
92
- .mb-lg {
93
- margin-block: var(--size-lg) !important;
340
+ .pbe-0 {
341
+ padding-block-end: 0 !important;
342
+ }
343
+ .pbe-3xl {
344
+ padding-block-end: var(--size-3xl) !important;
345
+ }
346
+ .pbe-2xl {
347
+ padding-block-end: var(--size-2xl) !important;
348
+ }
349
+ .pbe {
350
+ padding-block-end: var(--size-base) !important;
351
+ }
352
+ .pbe-lg {
353
+ padding-block-end: var(--size-lg) !important;
354
+ }
355
+ .pbe-md {
356
+ padding-block-end: var(--size-md) !important;
357
+ }
358
+ .pbe-sm {
359
+ padding-block-end: var(--size-sm) !important;
360
+ }
361
+ .pbe-xl {
362
+ padding-block-end: var(--size-xl) !important;
363
+ }
364
+ .pbe-xs {
365
+ padding-block-end: var(--size-xs) !important;
366
+ }
367
+ .pbe-xxs {
368
+ padding-block-end: var(--size-xxs) !important;
94
369
  }
95
370
 
96
- .mi-xl {
97
- margin-inline: var(--size-xl) !important;
371
+ .pi-0 {
372
+ padding-inline: 0 !important;
98
373
  }
99
- .mb-xl {
100
- margin-block: var(--size-xl) !important;
374
+ .pi-3xl {
375
+ padding-inline: var(--size-3xl) !important;
376
+ }
377
+ .pi-2xl {
378
+ padding-inline: var(--size-2xl) !important;
379
+ }
380
+ .pi {
381
+ padding-inline: var(--size-base) !important;
382
+ }
383
+ .pi-lg {
384
+ padding-inline: var(--size-lg) !important;
385
+ }
386
+ .pi-md {
387
+ padding-inline: var(--size-md) !important;
388
+ }
389
+ .pi-sm {
390
+ padding-inline: var(--size-sm) !important;
391
+ }
392
+ .pi-xl {
393
+ padding-inline: var(--size-xl) !important;
394
+ }
395
+ .pi-xs {
396
+ padding-inline: var(--size-xs) !important;
397
+ }
398
+ .pi-xxs {
399
+ padding-inline: var(--size-xxs) !important;
400
+ }
401
+
402
+ .pis-0 {
403
+ padding-inline-start: 0 !important;
404
+ }
405
+ .pis-3xl {
406
+ padding-inline-start: var(--size-3xl) !important;
407
+ }
408
+ .pis-2xl {
409
+ padding-inline-start: var(--size-2xl) !important;
410
+ }
411
+ .pis {
412
+ padding-inline-start: var(--size-base) !important;
413
+ }
414
+ .pis-lg {
415
+ padding-inline-start: var(--size-lg) !important;
416
+ }
417
+ .pis-md {
418
+ padding-inline-start: var(--size-md) !important;
419
+ }
420
+ .pis-sm {
421
+ padding-inline-start: var(--size-sm) !important;
422
+ }
423
+ .pis-xl {
424
+ padding-inline-start: var(--size-xl) !important;
425
+ }
426
+ .pis-xs {
427
+ padding-inline-start: var(--size-xs) !important;
428
+ }
429
+ .pis-xxs {
430
+ padding-inline-start: var(--size-xxs) !important;
101
431
  }
102
432
 
433
+ .pie-0 {
434
+ padding-inline-end: 0 !important;
435
+ }
436
+ .pie-3xl {
437
+ padding-inline-end: var(--size-3xl) !important;
438
+ }
439
+ .pie-2xl {
440
+ padding-inline-end: var(--size-2xl) !important;
441
+ }
442
+ .pie {
443
+ padding-inline-end: var(--size-base) !important;
444
+ }
445
+ .pie-lg {
446
+ padding-inline-end: var(--size-lg) !important;
447
+ }
448
+ .pie-md {
449
+ padding-inline-end: var(--size-md) !important;
450
+ }
451
+ .pie-sm {
452
+ padding-inline-end: var(--size-sm) !important;
453
+ }
454
+ .pie-xl {
455
+ padding-inline-end: var(--size-xl) !important;
456
+ }
457
+ .pie-xs {
458
+ padding-inline-end: var(--size-xs) !important;
459
+ }
460
+ .pie-xxs {
461
+ padding-inline-end: var(--size-xxs) !important;
462
+ }
@@ -1,3 +1,15 @@
1
+ /* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
2
+ vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
3
+ che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
4
+ utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
5
+ small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
6
+ "large" = "small desktop") e non si riducono in modo pulito a poche
7
+ categorie semantiche; inoltre il nome è usato in molti file (grid.css,
8
+ display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
9
+ file margin-padding-*-media.css) ed è parte di un template pensato per
10
+ essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
11
+ già in uso nei progetti che lo hanno importato. */
12
+
1
13
  /*
2
14
  90rem : 1440px xxlarge (large desktop)
3
15
  80rem : 1280px xlarge (desktop)
package/src/minimo.css CHANGED
@@ -37,6 +37,11 @@
37
37
  @import '@minimo/css/dimensions.css';
38
38
  @import '@minimo/css/display.css';
39
39
  @import '@minimo/css/margin-padding.css';
40
+ /* @import '@minimo/css/margin-padding-media.css'; responsive verion */
41
+ /* alternative boostrap naming
42
+ @import '@minimo/css/margin-padding-bootstrap.css';
43
+ @import '@minimo/css/margin-padding-bootsrap-media.css';
44
+ */
40
45
  @import '@minimo/css/overflow.css';
41
46
  @import '@minimo/css/position.css';
42
47
  @import '@minimo/css/visibility.css';