/// 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 .w-0 { width: 0; } .w-1 { width: space-x(1); } .w-2 { width: space-x(2); } .w-3 { width: space-x(3); } .w-4 { width: space-x(4); } .w-5 { width: space-x(5); } .w-auto { width: auto; } .w-fluid { width: 100%; } .w-inherit { width: inherit; } // Height .h-0 { height: 0; } .h-1 { height: space-x(1); } .h-2 { height: space-x(2); } .h-3 { height: space-x(3); } .h-4 { height: space-x(4); } .h-5 { height: space-x(5); } .h-auto { height: auto; } .h-fluid { height: 100%; } .h-inherit { height: inherit; } // Margin .m-0 { margin: 0; } .m-1 { margin: space-x(1); } .m-2 { margin: space-x(2); } .m-3 { margin: space-x(3); } .m-4 { margin: space-x(4); } .m-5 { margin: space-x(5); } .mt-0 { margin-top: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .mx-0 { margin-left: 0; margin-right: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } .mt-1 { margin-top: space-x(1); } .mr-1 { margin-right: space-x(1); } .mb-1 { margin-bottom: space-x(1); } .ml-1 { margin-left: space-x(1); } .mx-1 { margin-left: space-x(1); margin-right: space-x(1); } .my-1 { margin-top: space-x(1); margin-bottom: space-x(1); } .mt-2 { margin-top: space-x(2); } .mr-2 { margin-right: space-x(2); } .mb-2 { margin-bottom: space-x(2); } .ml-2 { margin-left: space-x(2); } .mx-2 { margin-right: space-x(2); margin-left: space-x(2); } .my-2 { margin-top: space-x(2); margin-bottom: space-x(2); } .mt-3 { margin-top: space-x(3); } .mr-3 { margin-right: space-x(3); } .mb-3 { margin-bottom: space-x(3); } .ml-3 { margin-left: space-x(3); } .mx-3 { margin-right: space-x(3); margin-left: space-x(3); } .my-3 { margin-bottom: space-x(3); margin-top: space-x(3); } .ml-auto, .mx-auto { margin-left: auto; } .mr-auto, .mx-auto { margin-right: auto; } // Padding .p-0 { padding: 0; } .p-1 { padding: space-x(1); } .p-2 { padding: space-x(2); } .p-3 { padding: space-x(3); } .p-4 { padding: space-x(4); } .p-5 { padding: space-x(5); } .pt-0 { padding-top: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .px-0 { padding-left: 0; padding-right: 0; } .py-0 { padding-top: 0; padding-bottom: 0; } .pt-1 { padding-top: space-x(1); } .pr-1 { padding-right: space-x(1); } .pb-1 { padding-bottom: space-x(1); } .pl-1 { padding-left: space-x(1); } .px-1 { padding-left: space-x(1); padding-right: space-x(1); } .py-1 { padding-top: space-x(1); padding-bottom: space-x(1); } .pt-2 { padding-top: space-x(2); } .pr-2 { padding-right: space-x(2); } .pb-2 { padding-bottom: space-x(2); } .pl-2 { padding-left: space-x(2); } .px-2 { padding-right: space-x(2); padding-left: space-x(2); } .py-2 { padding-top: space-x(2); padding-bottom: space-x(2); } .pt-3 { padding-top: space-x(3); } .pr-3 { padding-right: space-x(3); } .pb-3 { padding-bottom: space-x(3); } .pl-3 { padding-left: space-x(3); } .px-3 { padding-right: space-x(3); padding-left: space-x(3); } .py-3 { padding-bottom: space-x(3); padding-top: space-x(3); } // 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; } } // Overflow $overflows: auto, hidden !default; @each $value in $overflows { .overflow-#{$value} { overflow: $value; } } // Typography .text-primary { color: $primary; } .text-secondary { color: $secondary; } .text-info { color: $info; } .text-success { color: $success; } .text-warning { color: $warning; } .text-danger { color: $danger; } .text-dark { color: $dark; } .text-light { color: $light; } .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; } // Align .align-baseline { vertical-align: baseline; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .align-text-bottom { vertical-align: text-bottom; } .align-text-top { vertical-align: text-top; } // Background .bg-white { background-color: $white; } .bg-black { background-color: $black; } .bg-transparent { background-color: transparent; } .bg-primary { background-color: $primary; } .bg-secondary { background-color: $secondary; } .bg-info { background-color: $info; } .bg-success { background-color: $success; } .bg-warning { background-color: $warning; } .bg-danger { background-color: $danger; } .bg-dark { background-color: $dark; } .bg-light { background-color: $light; } // 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; } // 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: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-around { justify-content: space-around; } .align-items-start { align-items: flex-start; } .align-items-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: flex-start; } .align-content-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-between { align-content: space-between; } .align-content-around { align-content: space-around; } .align-content-stretch { align-content: stretch; } .align-self-auto { align-self: auto; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-baseline { align-self: baseline; } .align-self-stretch { align-self: stretch; } // Float .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } // Visibility .visible { visibility: visible; } .hidden { visibility: hidden; } }