Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1441 ariadna 1
// Utilities
2
 
3
$utilities: () !default;
4
// stylelint-disable-next-line scss/dollar-variable-default
5
$utilities: map-merge(
6
  (
7
    // scss-docs-start utils-vertical-align
8
    "align": (
9
      property: vertical-align,
10
      class: align,
11
      values: baseline top middle bottom text-bottom text-top
12
    ),
13
    // scss-docs-end utils-vertical-align
14
    // scss-docs-start utils-float
15
    "float": (
16
      responsive: true,
17
      property: float,
18
      values: (
19
        start: left,
20
        end: right,
21
        none: none,
22
      )
23
    ),
24
    // scss-docs-end utils-float
25
    // Object Fit utilities
26
    // scss-docs-start utils-object-fit
27
    "object-fit": (
28
      responsive: true,
29
      property: object-fit,
30
      values: (
31
        contain: contain,
32
        cover: cover,
33
        fill: fill,
34
        scale: scale-down,
35
        none: none,
36
      )
37
    ),
38
    // scss-docs-end utils-object-fit
39
    // Opacity utilities
40
    // scss-docs-start utils-opacity
41
    "opacity": (
42
      property: opacity,
43
      values: (
44
        0: 0,
45
        25: .25,
46
        50: .5,
47
        75: .75,
48
        100: 1,
49
      )
50
    ),
51
    // scss-docs-end utils-opacity
52
    // scss-docs-start utils-overflow
53
    "overflow": (
54
      property: overflow,
55
      values: auto hidden visible scroll,
56
    ),
57
    "overflow-x": (
58
      property: overflow-x,
59
      values: auto hidden visible scroll,
60
    ),
61
    "overflow-y": (
62
      property: overflow-y,
63
      values: auto hidden visible scroll,
64
    ),
65
    // scss-docs-end utils-overflow
66
    // scss-docs-start utils-display
67
    "display": (
68
      responsive: true,
69
      print: true,
70
      property: display,
71
      class: d,
72
      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
73
    ),
74
    // scss-docs-end utils-display
75
    // scss-docs-start utils-shadow
76
    "shadow": (
77
      property: box-shadow,
78
      class: shadow,
79
      values: (
80
        null: var(--#{$prefix}box-shadow),
81
        sm: var(--#{$prefix}box-shadow-sm),
82
        lg: var(--#{$prefix}box-shadow-lg),
83
        none: none,
84
      )
85
    ),
86
    // scss-docs-end utils-shadow
87
    // scss-docs-start utils-focus-ring
88
    "focus-ring": (
89
      css-var: true,
90
      css-variable-name: focus-ring-color,
91
      class: focus-ring,
92
      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
93
    ),
94
    // scss-docs-end utils-focus-ring
95
    // scss-docs-start utils-position
96
    "position": (
97
      property: position,
98
      values: static relative absolute fixed sticky
99
    ),
100
    "top": (
101
      property: top,
102
      values: $position-values
103
    ),
104
    "bottom": (
105
      property: bottom,
106
      values: $position-values
107
    ),
108
    "start": (
109
      property: left,
110
      class: start,
111
      values: $position-values
112
    ),
113
    "end": (
114
      property: right,
115
      class: end,
116
      values: $position-values
117
    ),
118
    "translate-middle": (
119
      property: transform,
120
      class: translate-middle,
121
      values: (
122
        null: translate(-50%, -50%),
123
        x: translateX(-50%),
124
        y: translateY(-50%),
125
      )
126
    ),
127
    // scss-docs-end utils-position
128
    // scss-docs-start utils-borders
129
    "border": (
130
      property: border,
131
      values: (
132
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
133
        0: 0,
134
      )
135
    ),
136
    "border-top": (
137
      property: border-top,
138
      values: (
139
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
140
        0: 0,
141
      )
142
    ),
143
    "border-end": (
144
      property: border-right,
145
      class: border-end,
146
      values: (
147
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
148
        0: 0,
149
      )
150
    ),
151
    "border-bottom": (
152
      property: border-bottom,
153
      values: (
154
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
155
        0: 0,
156
      )
157
    ),
158
    "border-start": (
159
      property: border-left,
160
      class: border-start,
161
      values: (
162
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
163
        0: 0,
164
      )
165
    ),
166
    "border-color": (
167
      property: border-color,
168
      class: border,
169
      local-vars: (
170
        "border-opacity": 1
171
      ),
172
      values: $utilities-border-colors
173
    ),
174
    "subtle-border-color": (
175
      property: border-color,
176
      class: border,
177
      values: $utilities-border-subtle
178
    ),
179
    "border-width": (
180
      property: border-width,
181
      class: border,
182
      values: $border-widths
183
    ),
184
    "border-opacity": (
185
      css-var: true,
186
      class: border-opacity,
187
      values: (
188
        10: .1,
189
        25: .25,
190
        50: .5,
191
        75: .75,
192
        100: 1
193
      )
194
    ),
195
    // scss-docs-end utils-borders
196
    // Sizing utilities
197
    // scss-docs-start utils-sizing
198
    "width": (
199
      property: width,
200
      class: w,
201
      values: (
202
        25: 25%,
203
        50: 50%,
204
        75: 75%,
205
        100: 100%,
206
        auto: auto
207
      )
208
    ),
209
    "max-width": (
210
      property: max-width,
211
      class: mw,
212
      values: (100: 100%)
213
    ),
214
    "viewport-width": (
215
      property: width,
216
      class: vw,
217
      values: (100: 100vw)
218
    ),
219
    "min-viewport-width": (
220
      property: min-width,
221
      class: min-vw,
222
      values: (100: 100vw)
223
    ),
224
    "height": (
225
      property: height,
226
      class: h,
227
      values: (
228
        25: 25%,
229
        50: 50%,
230
        75: 75%,
231
        100: 100%,
232
        auto: auto
233
      )
234
    ),
235
    "max-height": (
236
      property: max-height,
237
      class: mh,
238
      values: (100: 100%)
239
    ),
240
    "viewport-height": (
241
      property: height,
242
      class: vh,
243
      values: (100: 100vh)
244
    ),
245
    "min-viewport-height": (
246
      property: min-height,
247
      class: min-vh,
248
      values: (100: 100vh)
249
    ),
250
    // scss-docs-end utils-sizing
251
    // Flex utilities
252
    // scss-docs-start utils-flex
253
    "flex": (
254
      responsive: true,
255
      property: flex,
256
      values: (fill: 1 1 auto)
257
    ),
258
    "flex-direction": (
259
      responsive: true,
260
      property: flex-direction,
261
      class: flex,
262
      values: row column row-reverse column-reverse
263
    ),
264
    "flex-grow": (
265
      responsive: true,
266
      property: flex-grow,
267
      class: flex,
268
      values: (
269
        grow-0: 0,
270
        grow-1: 1,
271
      )
272
    ),
273
    "flex-shrink": (
274
      responsive: true,
275
      property: flex-shrink,
276
      class: flex,
277
      values: (
278
        shrink-0: 0,
279
        shrink-1: 1,
280
      )
281
    ),
282
    "flex-wrap": (
283
      responsive: true,
284
      property: flex-wrap,
285
      class: flex,
286
      values: wrap nowrap wrap-reverse
287
    ),
288
    "justify-content": (
289
      responsive: true,
290
      property: justify-content,
291
      values: (
292
        start: flex-start,
293
        end: flex-end,
294
        center: center,
295
        between: space-between,
296
        around: space-around,
297
        evenly: space-evenly,
298
      )
299
    ),
300
    "align-items": (
301
      responsive: true,
302
      property: align-items,
303
      values: (
304
        start: flex-start,
305
        end: flex-end,
306
        center: center,
307
        baseline: baseline,
308
        stretch: stretch,
309
      )
310
    ),
311
    "align-content": (
312
      responsive: true,
313
      property: align-content,
314
      values: (
315
        start: flex-start,
316
        end: flex-end,
317
        center: center,
318
        between: space-between,
319
        around: space-around,
320
        stretch: stretch,
321
      )
322
    ),
323
    "align-self": (
324
      responsive: true,
325
      property: align-self,
326
      values: (
327
        auto: auto,
328
        start: flex-start,
329
        end: flex-end,
330
        center: center,
331
        baseline: baseline,
332
        stretch: stretch,
333
      )
334
    ),
335
    "order": (
336
      responsive: true,
337
      property: order,
338
      values: (
339
        first: -1,
340
        0: 0,
341
        1: 1,
342
        2: 2,
343
        3: 3,
344
        4: 4,
345
        5: 5,
346
        last: 6,
347
      ),
348
    ),
349
    // scss-docs-end utils-flex
350
    // Margin utilities
351
    // scss-docs-start utils-spacing
352
    "margin": (
353
      responsive: true,
354
      property: margin,
355
      class: m,
356
      values: map-merge($spacers, (auto: auto))
357
    ),
358
    "margin-x": (
359
      responsive: true,
360
      property: margin-right margin-left,
361
      class: mx,
362
      values: map-merge($spacers, (auto: auto))
363
    ),
364
    "margin-y": (
365
      responsive: true,
366
      property: margin-top margin-bottom,
367
      class: my,
368
      values: map-merge($spacers, (auto: auto))
369
    ),
370
    "margin-top": (
371
      responsive: true,
372
      property: margin-top,
373
      class: mt,
374
      values: map-merge($spacers, (auto: auto))
375
    ),
376
    "margin-end": (
377
      responsive: true,
378
      property: margin-right,
379
      class: me,
380
      values: map-merge($spacers, (auto: auto))
381
    ),
382
    "margin-bottom": (
383
      responsive: true,
384
      property: margin-bottom,
385
      class: mb,
386
      values: map-merge($spacers, (auto: auto))
387
    ),
388
    "margin-start": (
389
      responsive: true,
390
      property: margin-left,
391
      class: ms,
392
      values: map-merge($spacers, (auto: auto))
393
    ),
394
    // Negative margin utilities
395
    "negative-margin": (
396
      responsive: true,
397
      property: margin,
398
      class: m,
399
      values: $negative-spacers
400
    ),
401
    "negative-margin-x": (
402
      responsive: true,
403
      property: margin-right margin-left,
404
      class: mx,
405
      values: $negative-spacers
406
    ),
407
    "negative-margin-y": (
408
      responsive: true,
409
      property: margin-top margin-bottom,
410
      class: my,
411
      values: $negative-spacers
412
    ),
413
    "negative-margin-top": (
414
      responsive: true,
415
      property: margin-top,
416
      class: mt,
417
      values: $negative-spacers
418
    ),
419
    "negative-margin-end": (
420
      responsive: true,
421
      property: margin-right,
422
      class: me,
423
      values: $negative-spacers
424
    ),
425
    "negative-margin-bottom": (
426
      responsive: true,
427
      property: margin-bottom,
428
      class: mb,
429
      values: $negative-spacers
430
    ),
431
    "negative-margin-start": (
432
      responsive: true,
433
      property: margin-left,
434
      class: ms,
435
      values: $negative-spacers
436
    ),
437
    // Padding utilities
438
    "padding": (
439
      responsive: true,
440
      property: padding,
441
      class: p,
442
      values: $spacers
443
    ),
444
    "padding-x": (
445
      responsive: true,
446
      property: padding-right padding-left,
447
      class: px,
448
      values: $spacers
449
    ),
450
    "padding-y": (
451
      responsive: true,
452
      property: padding-top padding-bottom,
453
      class: py,
454
      values: $spacers
455
    ),
456
    "padding-top": (
457
      responsive: true,
458
      property: padding-top,
459
      class: pt,
460
      values: $spacers
461
    ),
462
    "padding-end": (
463
      responsive: true,
464
      property: padding-right,
465
      class: pe,
466
      values: $spacers
467
    ),
468
    "padding-bottom": (
469
      responsive: true,
470
      property: padding-bottom,
471
      class: pb,
472
      values: $spacers
473
    ),
474
    "padding-start": (
475
      responsive: true,
476
      property: padding-left,
477
      class: ps,
478
      values: $spacers
479
    ),
480
    // Gap utility
481
    "gap": (
482
      responsive: true,
483
      property: gap,
484
      class: gap,
485
      values: $spacers
486
    ),
487
    "row-gap": (
488
      responsive: true,
489
      property: row-gap,
490
      class: row-gap,
491
      values: $spacers
492
    ),
493
    "column-gap": (
494
      responsive: true,
495
      property: column-gap,
496
      class: column-gap,
497
      values: $spacers
498
    ),
499
    // scss-docs-end utils-spacing
500
    // Text
501
    // scss-docs-start utils-text
502
    "font-family": (
503
      property: font-family,
504
      class: font,
505
      values: (monospace: var(--#{$prefix}font-monospace))
506
    ),
507
    "font-size": (
508
      rfs: true,
509
      property: font-size,
510
      class: fs,
511
      values: $font-sizes
512
    ),
513
    "font-style": (
514
      property: font-style,
515
      class: fst,
516
      values: italic normal
517
    ),
518
    "font-weight": (
519
      property: font-weight,
520
      class: fw,
521
      values: (
522
        lighter: $font-weight-lighter,
523
        light: $font-weight-light,
524
        normal: $font-weight-normal,
525
        medium: $font-weight-medium,
526
        semibold: $font-weight-semibold,
527
        bold: $font-weight-bold,
528
        bolder: $font-weight-bolder
529
      )
530
    ),
531
    "line-height": (
532
      property: line-height,
533
      class: lh,
534
      values: (
535
        1: 1,
536
        sm: $line-height-sm,
537
        base: $line-height-base,
538
        lg: $line-height-lg,
539
      )
540
    ),
541
    "text-align": (
542
      responsive: true,
543
      property: text-align,
544
      class: text,
545
      values: (
546
        start: left,
547
        end: right,
548
        center: center,
549
      )
550
    ),
551
    "text-decoration": (
552
      property: text-decoration,
553
      values: none underline line-through
554
    ),
555
    "text-transform": (
556
      property: text-transform,
557
      class: text,
558
      values: lowercase uppercase capitalize
559
    ),
560
    "white-space": (
561
      property: white-space,
562
      class: text,
563
      values: (
564
        wrap: normal,
565
        nowrap: nowrap,
566
      )
567
    ),
568
    "word-wrap": (
569
      property: word-wrap word-break,
570
      class: text,
571
      values: (break: break-word),
572
      rtl: false
573
    ),
574
    // scss-docs-end utils-text
575
    // scss-docs-start utils-color
576
    "color": (
577
      property: color,
578
      class: text,
579
      local-vars: (
580
        "text-opacity": 1
581
      ),
582
      values: map-merge(
583
        $utilities-text-colors,
584
        (
585
          "muted": var(--#{$prefix}secondary-color), // deprecated
586
          "black-50": rgba($black, .5), // deprecated
587
          "white-50": rgba($white, .5), // deprecated
588
          "body-secondary": var(--#{$prefix}secondary-color),
589
          "body-tertiary": var(--#{$prefix}tertiary-color),
590
          "body-emphasis": var(--#{$prefix}emphasis-color),
591
          "reset": inherit,
592
        )
593
      )
594
    ),
595
    "text-opacity": (
596
      css-var: true,
597
      class: text-opacity,
598
      values: (
599
        25: .25,
600
        50: .5,
601
        75: .75,
602
        100: 1
603
      )
604
    ),
605
    "text-color": (
606
      property: color,
607
      class: text,
608
      values: $utilities-text-emphasis-colors
609
    ),
610
    // scss-docs-end utils-color
611
    // scss-docs-start utils-links
612
    "link-opacity": (
613
      css-var: true,
614
      class: link-opacity,
615
      state: hover,
616
      values: (
617
        10: .1,
618
        25: .25,
619
        50: .5,
620
        75: .75,
621
        100: 1
622
      )
623
    ),
624
    "link-offset": (
625
      property: text-underline-offset,
626
      class: link-offset,
627
      state: hover,
628
      values: (
629
        1: .125em,
630
        2: .25em,
631
        3: .375em,
632
      )
633
    ),
634
    "link-underline": (
635
      property: text-decoration-color,
636
      class: link-underline,
637
      local-vars: (
638
        "link-underline-opacity": 1
639
      ),
640
      values: map-merge(
641
        $utilities-links-underline,
642
        (
643
          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
644
        )
645
      )
646
    ),
647
    "link-underline-opacity": (
648
      css-var: true,
649
      class: link-underline-opacity,
650
      state: hover,
651
      values: (
652
        0: 0,
653
        10: .1,
654
        25: .25,
655
        50: .5,
656
        75: .75,
657
        100: 1
658
      ),
659
    ),
660
    // scss-docs-end utils-links
661
    // scss-docs-start utils-bg-color
662
    "background-color": (
663
      property: background-color,
664
      class: bg,
665
      local-vars: (
666
        "bg-opacity": 1
667
      ),
668
      values: map-merge(
669
        $utilities-bg-colors,
670
        (
671
          "transparent": transparent,
672
          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
673
          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
674
        )
675
      )
676
    ),
677
    "bg-opacity": (
678
      css-var: true,
679
      class: bg-opacity,
680
      values: (
681
        10: .1,
682
        25: .25,
683
        50: .5,
684
        75: .75,
685
        100: 1
686
      )
687
    ),
688
    "subtle-background-color": (
689
      property: background-color,
690
      class: bg,
691
      values: $utilities-bg-subtle
692
    ),
693
    // scss-docs-end utils-bg-color
694
    "gradient": (
695
      property: background-image,
696
      class: bg,
697
      values: (gradient: var(--#{$prefix}gradient))
698
    ),
699
    // scss-docs-start utils-interaction
700
    "user-select": (
701
      property: user-select,
702
      values: all auto none
703
    ),
704
    "pointer-events": (
705
      property: pointer-events,
706
      class: pe,
707
      values: none auto,
708
    ),
709
    // scss-docs-end utils-interaction
710
    // scss-docs-start utils-border-radius
711
    "rounded": (
712
      property: border-radius,
713
      class: rounded,
714
      values: (
715
        null: var(--#{$prefix}border-radius),
716
        0: 0,
717
        1: var(--#{$prefix}border-radius-sm),
718
        2: var(--#{$prefix}border-radius),
719
        3: var(--#{$prefix}border-radius-lg),
720
        4: var(--#{$prefix}border-radius-xl),
721
        5: var(--#{$prefix}border-radius-xxl),
722
        circle: 50%,
723
        pill: var(--#{$prefix}border-radius-pill)
724
      )
725
    ),
726
    "rounded-top": (
727
      property: border-top-left-radius border-top-right-radius,
728
      class: rounded-top,
729
      values: (
730
        null: var(--#{$prefix}border-radius),
731
        0: 0,
732
        1: var(--#{$prefix}border-radius-sm),
733
        2: var(--#{$prefix}border-radius),
734
        3: var(--#{$prefix}border-radius-lg),
735
        4: var(--#{$prefix}border-radius-xl),
736
        5: var(--#{$prefix}border-radius-xxl),
737
        circle: 50%,
738
        pill: var(--#{$prefix}border-radius-pill)
739
      )
740
    ),
741
    "rounded-end": (
742
      property: border-top-right-radius border-bottom-right-radius,
743
      class: rounded-end,
744
      values: (
745
        null: var(--#{$prefix}border-radius),
746
        0: 0,
747
        1: var(--#{$prefix}border-radius-sm),
748
        2: var(--#{$prefix}border-radius),
749
        3: var(--#{$prefix}border-radius-lg),
750
        4: var(--#{$prefix}border-radius-xl),
751
        5: var(--#{$prefix}border-radius-xxl),
752
        circle: 50%,
753
        pill: var(--#{$prefix}border-radius-pill)
754
      )
755
    ),
756
    "rounded-bottom": (
757
      property: border-bottom-right-radius border-bottom-left-radius,
758
      class: rounded-bottom,
759
      values: (
760
        null: var(--#{$prefix}border-radius),
761
        0: 0,
762
        1: var(--#{$prefix}border-radius-sm),
763
        2: var(--#{$prefix}border-radius),
764
        3: var(--#{$prefix}border-radius-lg),
765
        4: var(--#{$prefix}border-radius-xl),
766
        5: var(--#{$prefix}border-radius-xxl),
767
        circle: 50%,
768
        pill: var(--#{$prefix}border-radius-pill)
769
      )
770
    ),
771
    "rounded-start": (
772
      property: border-bottom-left-radius border-top-left-radius,
773
      class: rounded-start,
774
      values: (
775
        null: var(--#{$prefix}border-radius),
776
        0: 0,
777
        1: var(--#{$prefix}border-radius-sm),
778
        2: var(--#{$prefix}border-radius),
779
        3: var(--#{$prefix}border-radius-lg),
780
        4: var(--#{$prefix}border-radius-xl),
781
        5: var(--#{$prefix}border-radius-xxl),
782
        circle: 50%,
783
        pill: var(--#{$prefix}border-radius-pill)
784
      )
785
    ),
786
    // scss-docs-end utils-border-radius
787
    // scss-docs-start utils-visibility
788
    "visibility": (
789
      property: visibility,
790
      class: null,
791
      values: (
792
        visible: visible,
793
        invisible: hidden,
794
      )
795
    ),
796
    // scss-docs-end utils-visibility
797
    // scss-docs-start utils-zindex
798
    "z-index": (
799
      property: z-index,
800
      class: z,
801
      values: $zindex-levels,
802
    )
803
    // scss-docs-end utils-zindex
804
  ),
805
  $utilities
806
);