[Summary view] [Print] [Text view]

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