/// Utility classes /// /// Pattern strategies: /// /// [ ] "!important" keyword → «using a sledgehammer to hit a nail /// in the wall» /// [x] rule precedence based on higher selector (ie. "#id") /// [ ] adding an extra cascade layer → not fully browser compliant /// /// /// @https://sebastiandedeyne.com/why-we-use-important-with-tailwind/ /// @https://css-tricks.com/css-cascade-layers/ #app, #portal { /// Width $widths: auto, inherit, min-content, max-content, fit-content; @each $value in $widths { .w-#{$value} { width: $value; } } @for $i from 0 through 10 { .w-#{$i} { width: space-x($i) } } .w-0 { width: 0; } .w-fluid, .w-100 { width: 100%; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333333%; } .w-2\/3 { width: 66.666667%; } .w-1\/4 { width: 25%; } .w-2\/4 { width: 50%; } .w-3\/4 { width: 75%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .w-4\/5 { width: 80%; } .w-1\/6 { width: 16.666667%; } .w-2\/6 { width: 33.333333%; } .w-3\/6 { width: 50%; } .w-4\/6 { width: 66.666667%; } .w-5\/6 { width: 83.333333%; } .w-1\/12 { width: 8.333333%; } .w-2\/12 { width: 16.666667%; } .w-3\/12 { width: 25%; } .w-4\/12 { width: 33.333333%; } .w-5\/12 { width: 41.666667%; } .w-6\/12 { width: 50%; } .w-7\/12 { width: 58.333333%; } .w-8\/12 { width: 66.666667%; } .w-9\/12 { width: 75%; } .w-10\/12 { width: 83.333333%; } .w-11\/12 { width: 91.666667%; } /// Height .h-auto { height: auto; } .h-fluid, .h-100 { height: 100%; } .h-inherit { height: inherit; } @for $i from 0 through 10 { .h-#{$i} { height: space-x($i) } } /// Margin .ml-auto, .mx-auto { margin-left: auto; } .mr-auto, .mx-auto { margin-right: auto; } @for $i from 0 through 10 { .m-#{$i} { margin: space-x($i); } .mt-#{$i} { margin-top: space-x($i); } .mr-#{$i} { margin-right: space-x($i); } .mb-#{$i} { margin-bottom: space-x($i); } .ml-#{$i} { margin-left: space-x($i); } .mx-#{$i} { margin-left: space-x($i); margin-right: space-x($i); } .my-#{$i} { margin-top: space-x($i); margin-bottom: space-x($i); } .m-#{$i}\.5 { margin: space-x($i + .5); } .mt-#{$i}\.5 { margin-top: space-x($i + .5); } .mr-#{$i}\.5 { margin-right: space-x($i + .5); } .mb-#{$i}\.5 { margin-bottom: space-x($i + .5); } .ml-#{$i}\.5 { margin-left: space-x($i + .5); } .mx-#{$i}\.5 { margin-left: space-x($i + .5); margin-right: space-x($i + .5); } .my-#{$i}\.5 { margin-top: space-x($i + .5); margin-bottom: space-x($i + .5); } } /// Padding @for $i from 0 through 10 { .p-#{$i} { padding: space-x($i); } .pt-#{$i} { padding-top: space-x($i); } .pr-#{$i} { padding-right: space-x($i); } .pb-#{$i} { padding-bottom: space-x($i); } .pl-#{$i} { padding-left: space-x($i); } .px-#{$i} { padding-left: space-x($i); padding-right: space-x($i); } .py-#{$i} { padding-top: space-x($i); padding-bottom: space-x($i); } } /// Display $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex; @each $value in $displays { .d-#{$value} { display: $value; } } /// Position $positions: static, relative, absolute, fixed, sticky; @each $value in $positions { .position-#{$value} { position: $value; } } /// Placement $placements: top, right, bottom, left; @each $value in $placements { .#{$value}-0 { #{$value}: 0; } } // Overflow $overflows: auto, hidden; @each $value in $overflows { .overflow-#{$value} { overflow: $value; } } /// Typography .text-bold { font-weight: bold; } .text-italic { font-style: italic; } .text-justify { text-align: justify; } .text-wrap { white-space: normal; } .text-nowrap { white-space: nowrap; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-decoration-none { text-decoration: none; } .text-decoration-underline { text-decoration: underline; } /// Font-size @for $unit from 1 through 40 { .font-size-#{$unit * 5} { font-size: #{$unit * 5%}; } } /// Line-height $line-heights: normal, inherit; @each $value in $line-heights { .line-height-#{$value} { line-height: normal; } } @for $unit from 1 through 20 { .line-height-#{$unit + 0} { line-height: #{$unit * + 0}; } } /// Vertical Alignment $vertical-aligns: baseline, top, middle, bottom, text-bottom, text-top; @each $value in $vertical-aligns { .vertical-align-#{$value} { vertical-align: $value; } } /// Color (keep ".text" classes for Bootstrap legacy) .text-white, .color-white { color: $white; } .text-black, .color-black { color: $black; } @each $theme, $value in $palette-semantic { .text-#{$theme}, .color-#{$theme} { color: $value; } } @each $theme, $value in $palette-gray { .text-gray-#{$theme}, .color-gray-#{$theme} { color: $value; } } @each $theme, $value in $palette-pastel { .text-pastel-#{$theme}, .color-pastel-#{$theme} { color: $value; } } /// Background .bg-white { background-color: $white; } .bg-black { background-color: $black; } .bg-transparent { background-color: transparent; } @each $theme, $value in $palette-semantic { .bg-#{$theme} { background-color: $value; } } @each $theme, $value in $palette-gray { .bg-gray-#{$theme} { background-color: $value; } } @each $theme, $value in $palette-pastel { .bg-pastel-#{$theme} { background-color: $value; } } /// Border .border-0 { border: 0; } .border-top-0 { border-top: 0; } .border-right-0 { border-right: 0; } .border-bottom-0 { border-bottom: 0; } .border-left-0 { border-left: 0; } @each $theme, $value in $palette-semantic { .border-#{$theme} { border-color: $value;} } @each $theme, $value in $palette-gray { .border-gray-#{$theme} { border-color: $value;} } @each $theme, $value in $palette-pastel { .border-pastel-#{$theme} { border-color: $value;} } /// Border radius .rounded-circle { border-radius: 50%; } .rounded-0 { border-radius: 0; } /// Clearfix .clearfix { @include clearfix; } /// Flex .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-fill { flex: 1 1 auto; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } .justify-content-start { justify-content: start; } .justify-content-end { justify-content: end; } .justify-content-flex-start { justify-content: flex-start; } .justify-content-flex-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .align-items-start { align-items: start; } .align-items-end { align-items: end; } .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-baseline { align-items: baseline; } .align-items-stretch { align-items: stretch; } .align-content-start { align-content: start; } .align-content-end { align-content: end; } .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } .align-self-auto { align-self: auto; } .align-self-start { align-self: start; } .align-self-end { align-self: end; } .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-baseline { align-self: baseline; } .align-self-stretch { align-self: stretch; } @for $i from 0 through 10 { .gap-#{$i} { gap: space-x($i); } .column-gap-#{$i} { column-gap: space-x($i); } .row-gap-#{$i} { row-gap: space-x($i); } } /// Float .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } /// Visibility .visible { visibility: visible; } .hidden { visibility: hidden; } /// Cursor $cursors: crosshair, text, move, grab, grabbing, not-allowed, all-scroll, ew-resize, ns-resize, pointer; @each $value in $cursors { .cursor-#{$value} { cursor: $value; } } /// Content helpers .virtual-space { &::after { content: "\200B"; } } }