_utilities.scss 10.50 KiB
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    "float": (
      responsive: true,
      property: float,
      values: left right none
    "overflow": (
      property: overflow,
      values: auto hidden,
    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: none inline inline-block block table table-row table-cell flex inline-flex
    "shadow": (
      property: box-shadow,
      class: shadow,
      values: (
        sm: $box-shadow-sm,
        null: $box-shadow,
        lg: $box-shadow-lg,
        none: none,
    "position": (
      property: position,
      values: static relative absolute fixed sticky
    "border": (
      property: border,
      values: (
        null: $border-width solid $border-color,
        0: 0,
    "border-top": (
      property: border-top,
      values: (
        null: $border-width solid $border-color,
        0: 0,
    "border-right": (
      property: border-right,
      values: (
        null: $border-width solid $border-color,
        0: 0,
    "border-bottom": (
      property: border-bottom,
      values: (
        null: $border-width solid $border-color,
        0: 0,
    "border-left": (
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
property: border-left, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-color": ( property: border-color, class: border, values: map-merge($theme-colors, ("white": $white)) ), // Sizing utilities "width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-width": ( property: max-width, class: mw, values: (100: 100%) ), "viewport-width": ( property: width, class: vw, values: (100: 100vw) ), "min-viewport-width": ( property: min-width, class: min-vw, values: (100: 100vw) ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-height": ( property: max-height, class: mh, values: (100: 100%) ), "viewport-height": ( property: height, class: vh, values: (100: 100vh) ), "min-viewport-height": ( property: min-height, class: min-vh, values: (100: 100vh) ), // Flex utilities "flex": ( responsive: true, property: flex, values: (fill: 1 1 auto) ),
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
"flex-direction": ( responsive: true, property: flex-direction, class: flex, values: row column row-reverse column-reverse ), "flex-grow": ( responsive: true, property: flex-grow, class: flex, values: ( grow-0: 0, grow-1: 1, ) ), "flex-shrink": ( responsive: true, property: flex-shrink, class: flex, values: ( shrink-0: 0, shrink-1: 1, ) ), "flex-wrap": ( responsive: true, property: flex-wrap, class: flex, values: wrap nowrap wrap-reverse ), "justify-content": ( responsive: true, property: justify-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, ) ), "align-items": ( responsive: true, property: align-items, values: ( start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "align-content": ( responsive: true, property: align-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch, ) ), "align-self": ( responsive: true, property: align-self, values: ( auto: auto, start: flex-start,
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "order": ( responsive: true, property: order, values: ( first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6, ), ), // Margin utilities "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: map-merge($spacers, (auto: auto)) ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: map-merge($spacers, (auto: auto)) ), "margin-top": ( responsive: true, property: margin-top, class: mt, values: map-merge($spacers, (auto: auto)) ), "margin-right": ( responsive: true, property: margin-right, class: mr, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-left": ( responsive: true, property: margin-left, class: ml, values: map-merge($spacers, (auto: auto)) ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, values: $negative-spacers ),
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
"negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: $negative-spacers ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: $negative-spacers ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, values: $negative-spacers ), "negative-margin-right": ( responsive: true, property: margin-right, class: mr, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-left": ( responsive: true, property: margin-left, class: ml, values: $negative-spacers ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, values: $spacers ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, values: $spacers ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, values: $spacers ), "padding-top": ( responsive: true, property: padding-top, class: pt, values: $spacers ), "padding-right": ( responsive: true, property: padding-right, class: pr, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom,
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
class: pb, values: $spacers ), "padding-left": ( responsive: true, property: padding-left, class: pl, values: $spacers ), // Text "font-weight": ( property: font-weight, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "text-align": ( responsive: true, property: text-align, class: text, values: left right center justify ), "color": ( property: color, class: text, values: map-merge( $theme-colors, ( "white": $white, "body": $body-color, "muted": $text-muted, "black-50": rgba($black, .5), "white-50": rgba($white, .5), "reset": inherit, ) ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "background-color": ( property: background-color, class: bg, values: map-merge( $theme-colors, ( "body": $body-bg, "white": $white, "transparent": transparent ) ) ), "white-space": ( property: white-space,
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "font-style": ( property: font-style, class: font, values: italic ), "overflow-wrap": ( property: overflow-wrap word-break, // word-break for IE & < Edge 18 class: text, values: (break: break-word) ), "font-family": ( property: font-family, class: font, values: (monospace: $font-family-monospace) ), "rounded": ( property: border-radius, class: rounded, values: ( null: $border-radius, sm: $border-radius-sm, lg: $border-radius-lg, circle: 50%, pill: $rounded-pill, 0: 0, ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: $border-radius) ), "rounded-right": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-right, values: (null: $border-radius) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: $border-radius) ), "rounded-left": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-left, values: (null: $border-radius) ), "visibility": ( property: visibility, class: null, values: ( visible: visible, invisible: hidden, ) ) ), $utilities );