resources/tools/dash/app/pal/static/sass/bootstrap/_utilities.scss

   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     // Opacity utilities
  26     // scss-docs-start utils-opacity
  27     "opacity": (
  28       property: opacity,
  29       values: (
  30         0: 0,
  31         25: .25,
  32         50: .5,
  33         75: .75,
  34         100: 1,
  35       )
  36     ),
  37     // scss-docs-end utils-opacity
  38     // scss-docs-start utils-overflow
  39     "overflow": (
  40       property: overflow,
  41       values: auto hidden visible scroll,
  42     ),
  43     // scss-docs-end utils-overflow
  44     // scss-docs-start utils-display
  45     "display": (
  46       responsive: true,
  47       print: true,
  48       property: display,
  49       class: d,
  50       values: inline inline-block block grid table table-row table-cell flex inline-flex none
  51     ),
  52     // scss-docs-end utils-display
  53     // scss-docs-start utils-shadow
  54     "shadow": (
  55       property: box-shadow,
  56       class: shadow,
  57       values: (
  58         null: $box-shadow,
  59         sm: $box-shadow-sm,
  60         lg: $box-shadow-lg,
  61         none: none,
  62       )
  63     ),
  64     // scss-docs-end utils-shadow
  65     // scss-docs-start utils-position
  66     "position": (
  67       property: position,
  68       values: static relative absolute fixed sticky
  69     ),
  70     "top": (
  71       property: top,
  72       values: $position-values
  73     ),
  74     "bottom": (
  75       property: bottom,
  76       values: $position-values
  77     ),
  78     "start": (
  79       property: left,
  80       class: start,
  81       values: $position-values
  82     ),
  83     "end": (
  84       property: right,
  85       class: end,
  86       values: $position-values
  87     ),
  88     "translate-middle": (
  89       property: transform,
  90       class: translate-middle,
  91       values: (
  92         null: translate(-50%, -50%),
  93         x: translateX(-50%),
  94         y: translateY(-50%),
  95       )
  96     ),
  97     // scss-docs-end utils-position
  98     // scss-docs-start utils-borders
  99     "border": (
 100       property: border,
 101       values: (
 102         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
 103         0: 0,
 104       )
 105     ),
 106     "border-top": (
 107       property: border-top,
 108       values: (
 109         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
 110         0: 0,
 111       )
 112     ),
 113     "border-end": (
 114       property: border-right,
 115       class: border-end,
 116       values: (
 117         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
 118         0: 0,
 119       )
 120     ),
 121     "border-bottom": (
 122       property: border-bottom,
 123       values: (
 124         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
 125         0: 0,
 126       )
 127     ),
 128     "border-start": (
 129       property: border-left,
 130       class: border-start,
 131       values: (
 132         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
 133         0: 0,
 134       )
 135     ),
 136     "border-color": (
 137       property: border-color,
 138       class: border,
 139       local-vars: (
 140         "border-opacity": 1
 141       ),
 142       values: $utilities-border-colors
 143     ),
 144     "border-width": (
 145       css-var: true,
 146       css-variable-name: border-width,
 147       class: border,
 148       values: $border-widths
 149     ),
 150     "border-opacity": (
 151       css-var: true,
 152       class: border-opacity,
 153       values: (
 154         10: .1,
 155         25: .25,
 156         50: .5,
 157         75: .75,
 158         100: 1
 159       )
 160     ),
 161     // scss-docs-end utils-borders
 162     // Sizing utilities
 163     // scss-docs-start utils-sizing
 164     "width": (
 165       property: width,
 166       class: w,
 167       values: (
 168         25: 25%,
 169         50: 50%,
 170         75: 75%,
 171         100: 100%,
 172         auto: auto
 173       )
 174     ),
 175     "max-width": (
 176       property: max-width,
 177       class: mw,
 178       values: (100: 100%)
 179     ),
 180     "viewport-width": (
 181       property: width,
 182       class: vw,
 183       values: (100: 100vw)
 184     ),
 185     "min-viewport-width": (
 186       property: min-width,
 187       class: min-vw,
 188       values: (100: 100vw)
 189     ),
 190     "height": (
 191       property: height,
 192       class: h,
 193       values: (
 194         25: 25%,
 195         50: 50%,
 196         75: 75%,
 197         100: 100%,
 198         auto: auto
 199       )
 200     ),
 201     "max-height": (
 202       property: max-height,
 203       class: mh,
 204       values: (100: 100%)
 205     ),
 206     "viewport-height": (
 207       property: height,
 208       class: vh,
 209       values: (100: 100vh)
 210     ),
 211     "min-viewport-height": (
 212       property: min-height,
 213       class: min-vh,
 214       values: (100: 100vh)
 215     ),
 216     // scss-docs-end utils-sizing
 217     // Flex utilities
 218     // scss-docs-start utils-flex
 219     "flex": (
 220       responsive: true,
 221       property: flex,
 222       values: (fill: 1 1 auto)
 223     ),
 224     "flex-direction": (
 225       responsive: true,
 226       property: flex-direction,
 227       class: flex,
 228       values: row column row-reverse column-reverse
 229     ),
 230     "flex-grow": (
 231       responsive: true,
 232       property: flex-grow,
 233       class: flex,
 234       values: (
 235         grow-0: 0,
 236         grow-1: 1,
 237       )
 238     ),
 239     "flex-shrink": (
 240       responsive: true,
 241       property: flex-shrink,
 242       class: flex,
 243       values: (
 244         shrink-0: 0,
 245         shrink-1: 1,
 246       )
 247     ),
 248     "flex-wrap": (
 249       responsive: true,
 250       property: flex-wrap,
 251       class: flex,
 252       values: wrap nowrap wrap-reverse
 253     ),
 254     "justify-content": (
 255       responsive: true,
 256       property: justify-content,
 257       values: (
 258         start: flex-start,
 259         end: flex-end,
 260         center: center,
 261         between: space-between,
 262         around: space-around,
 263         evenly: space-evenly,
 264       )
 265     ),
 266     "align-items": (
 267       responsive: true,
 268       property: align-items,
 269       values: (
 270         start: flex-start,
 271         end: flex-end,
 272         center: center,
 273         baseline: baseline,
 274         stretch: stretch,
 275       )
 276     ),
 277     "align-content": (
 278       responsive: true,
 279       property: align-content,
 280       values: (
 281         start: flex-start,
 282         end: flex-end,
 283         center: center,
 284         between: space-between,
 285         around: space-around,
 286         stretch: stretch,
 287       )
 288     ),
 289     "align-self": (
 290       responsive: true,
 291       property: align-self,
 292       values: (
 293         auto: auto,
 294         start: flex-start,
 295         end: flex-end,
 296         center: center,
 297         baseline: baseline,
 298         stretch: stretch,
 299       )
 300     ),
 301     "order": (
 302       responsive: true,
 303       property: order,
 304       values: (
 305         first: -1,
 306         0: 0,
 307         1: 1,
 308         2: 2,
 309         3: 3,
 310         4: 4,
 311         5: 5,
 312         last: 6,
 313       ),
 314     ),
 315     // scss-docs-end utils-flex
 316     // Margin utilities
 317     // scss-docs-start utils-spacing
 318     "margin": (
 319       responsive: true,
 320       property: margin,
 321       class: m,
 322       values: map-merge($spacers, (auto: auto))
 323     ),
 324     "margin-x": (
 325       responsive: true,
 326       property: margin-right margin-left,
 327       class: mx,
 328       values: map-merge($spacers, (auto: auto))
 329     ),
 330     "margin-y": (
 331       responsive: true,
 332       property: margin-top margin-bottom,
 333       class: my,
 334       values: map-merge($spacers, (auto: auto))
 335     ),
 336     "margin-top": (
 337       responsive: true,
 338       property: margin-top,
 339       class: mt,
 340       values: map-merge($spacers, (auto: auto))
 341     ),
 342     "margin-end": (
 343       responsive: true,
 344       property: margin-right,
 345       class: me,
 346       values: map-merge($spacers, (auto: auto))
 347     ),
 348     "margin-bottom": (
 349       responsive: true,
 350       property: margin-bottom,
 351       class: mb,
 352       values: map-merge($spacers, (auto: auto))
 353     ),
 354     "margin-start": (
 355       responsive: true,
 356       property: margin-left,
 357       class: ms,
 358       values: map-merge($spacers, (auto: auto))
 359     ),
 360     // Negative margin utilities
 361     "negative-margin": (
 362       responsive: true,
 363       property: margin,
 364       class: m,
 365       values: $negative-spacers
 366     ),
 367     "negative-margin-x": (
 368       responsive: true,
 369       property: margin-right margin-left,
 370       class: mx,
 371       values: $negative-spacers
 372     ),
 373     "negative-margin-y": (
 374       responsive: true,
 375       property: margin-top margin-bottom,
 376       class: my,
 377       values: $negative-spacers
 378     ),
 379     "negative-margin-top": (
 380       responsive: true,
 381       property: margin-top,
 382       class: mt,
 383       values: $negative-spacers
 384     ),
 385     "negative-margin-end": (
 386       responsive: true,
 387       property: margin-right,
 388       class: me,
 389       values: $negative-spacers
 390     ),
 391     "negative-margin-bottom": (
 392       responsive: true,
 393       property: margin-bottom,
 394       class: mb,
 395       values: $negative-spacers
 396     ),
 397     "negative-margin-start": (
 398       responsive: true,
 399       property: margin-left,
 400       class: ms,
 401       values: $negative-spacers
 402     ),
 403     // Padding utilities
 404     "padding": (
 405       responsive: true,
 406       property: padding,
 407       class: p,
 408       values: $spacers
 409     ),
 410     "padding-x": (
 411       responsive: true,
 412       property: padding-right padding-left,
 413       class: px,
 414       values: $spacers
 415     ),
 416     "padding-y": (
 417       responsive: true,
 418       property: padding-top padding-bottom,
 419       class: py,
 420       values: $spacers
 421     ),
 422     "padding-top": (
 423       responsive: true,
 424       property: padding-top,
 425       class: pt,
 426       values: $spacers
 427     ),
 428     "padding-end": (
 429       responsive: true,
 430       property: padding-right,
 431       class: pe,
 432       values: $spacers
 433     ),
 434     "padding-bottom": (
 435       responsive: true,
 436       property: padding-bottom,
 437       class: pb,
 438       values: $spacers
 439     ),
 440     "padding-start": (
 441       responsive: true,
 442       property: padding-left,
 443       class: ps,
 444       values: $spacers
 445     ),
 446     // Gap utility
 447     "gap": (
 448       responsive: true,
 449       property: gap,
 450       class: gap,
 451       values: $spacers
 452     ),
 453     // scss-docs-end utils-spacing
 454     // Text
 455     // scss-docs-start utils-text
 456     "font-family": (
 457       property: font-family,
 458       class: font,
 459       values: (monospace: var(--#{$prefix}font-monospace))
 460     ),
 461     "font-size": (
 462       rfs: true,
 463       property: font-size,
 464       class: fs,
 465       values: $font-sizes
 466     ),
 467     "font-style": (
 468       property: font-style,
 469       class: fst,
 470       values: italic normal
 471     ),
 472     "font-weight": (
 473       property: font-weight,
 474       class: fw,
 475       values: (
 476         light: $font-weight-light,
 477         lighter: $font-weight-lighter,
 478         normal: $font-weight-normal,
 479         bold: $font-weight-bold,
 480         semibold: $font-weight-semibold,
 481         bolder: $font-weight-bolder
 482       )
 483     ),
 484     "line-height": (
 485       property: line-height,
 486       class: lh,
 487       values: (
 488         1: 1,
 489         sm: $line-height-sm,
 490         base: $line-height-base,
 491         lg: $line-height-lg,
 492       )
 493     ),
 494     "text-align": (
 495       responsive: true,
 496       property: text-align,
 497       class: text,
 498       values: (
 499         start: left,
 500         end: right,
 501         center: center,
 502       )
 503     ),
 504     "text-decoration": (
 505       property: text-decoration,
 506       values: none underline line-through
 507     ),
 508     "text-transform": (
 509       property: text-transform,
 510       class: text,
 511       values: lowercase uppercase capitalize
 512     ),
 513     "white-space": (
 514       property: white-space,
 515       class: text,
 516       values: (
 517         wrap: normal,
 518         nowrap: nowrap,
 519       )
 520     ),
 521     "word-wrap": (
 522       property: word-wrap word-break,
 523       class: text,
 524       values: (break: break-word),
 525       rtl: false
 526     ),
 527     // scss-docs-end utils-text
 528     // scss-docs-start utils-color
 529     "color": (
 530       property: color,
 531       class: text,
 532       local-vars: (
 533         "text-opacity": 1
 534       ),
 535       values: map-merge(
 536         $utilities-text-colors,
 537         (
 538           "muted": $text-muted,
 539           "black-50": rgba($black, .5), // deprecated
 540           "white-50": rgba($white, .5), // deprecated
 541           "reset": inherit,
 542         )
 543       )
 544     ),
 545     "text-opacity": (
 546       css-var: true,
 547       class: text-opacity,
 548       values: (
 549         25: .25,
 550         50: .5,
 551         75: .75,
 552         100: 1
 553       )
 554     ),
 555     // scss-docs-end utils-color
 556     // scss-docs-start utils-bg-color
 557     "background-color": (
 558       property: background-color,
 559       class: bg,
 560       local-vars: (
 561         "bg-opacity": 1
 562       ),
 563       values: map-merge(
 564         $utilities-bg-colors,
 565         (
 566           "transparent": transparent
 567         )
 568       )
 569     ),
 570     "bg-opacity": (
 571       css-var: true,
 572       class: bg-opacity,
 573       values: (
 574         10: .1,
 575         25: .25,
 576         50: .5,
 577         75: .75,
 578         100: 1
 579       )
 580     ),
 581     // scss-docs-end utils-bg-color
 582     "gradient": (
 583       property: background-image,
 584       class: bg,
 585       values: (gradient: var(--#{$prefix}gradient))
 586     ),
 587     // scss-docs-start utils-interaction
 588     "user-select": (
 589       property: user-select,
 590       values: all auto none
 591     ),
 592     "pointer-events": (
 593       property: pointer-events,
 594       class: pe,
 595       values: none auto,
 596     ),
 597     // scss-docs-end utils-interaction
 598     // scss-docs-start utils-border-radius
 599     "rounded": (
 600       property: border-radius,
 601       class: rounded,
 602       values: (
 603         null: var(--#{$prefix}border-radius),
 604         0: 0,
 605         1: var(--#{$prefix}border-radius-sm),
 606         2: var(--#{$prefix}border-radius),
 607         3: var(--#{$prefix}border-radius-lg),
 608         4: var(--#{$prefix}border-radius-xl),
 609         5: var(--#{$prefix}border-radius-2xl),
 610         circle: 50%,
 611         pill: var(--#{$prefix}border-radius-pill)
 612       )
 613     ),
 614     "rounded-top": (
 615       property: border-top-left-radius border-top-right-radius,
 616       class: rounded-top,
 617       values: (null: var(--#{$prefix}border-radius))
 618     ),
 619     "rounded-end": (
 620       property: border-top-right-radius border-bottom-right-radius,
 621       class: rounded-end,
 622       values: (null: var(--#{$prefix}border-radius))
 623     ),
 624     "rounded-bottom": (
 625       property: border-bottom-right-radius border-bottom-left-radius,
 626       class: rounded-bottom,
 627       values: (null: var(--#{$prefix}border-radius))
 628     ),
 629     "rounded-start": (
 630       property: border-bottom-left-radius border-top-left-radius,
 631       class: rounded-start,
 632       values: (null: var(--#{$prefix}border-radius))
 633     ),
 634     // scss-docs-end utils-border-radius
 635     // scss-docs-start utils-visibility
 636     "visibility": (
 637       property: visibility,
 638       class: null,
 639       values: (
 640         visible: visible,
 641         invisible: hidden,
 642       )
 643     )
 644     // scss-docs-end utils-visibility
 645   ),
 646   $utilities
 647 );