// // Utility classes // -------------------------------------------------- // Floats .clearfix { @include clearfix(); } .center-block { @include center-block(); } .pull-right { float: right !important; } .pull-left { float: left !important; } // Inverse .inverse { color: $gray-lighter; background-color: $gray-dark; } // Spacing .p-a { padding: $spacer; } .p-h { padding-right: $spacer; padding-left: $spacer; } .p-v { padding-top: $spacer; padding-bottom: $spacer; } // Positioning .pos-f-t { position: fixed; top: 0; right: 0; left: 0; z-index: $zindex-navbar-fixed; } // Always hide an element with the `hidden` HTML attribute (from PureCSS). [hidden] { display: none !important; } .invisible { visibility: hidden; } .text-hide { @include text-hide(); } // For Affix plugin .affix { position: fixed; } // Alignment .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-nowrap { white-space: nowrap; } .text-truncate { @include text-truncate; } // Transformation .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } // Contextual colors .text-muted { color: $text-muted; } @include text-emphasis-variant('.text-primary', $brand-primary); @include text-emphasis-variant('.text-success', $state-success-text); @include text-emphasis-variant('.text-info', $state-info-text); @include text-emphasis-variant('.text-warning', $state-warning-text); @include text-emphasis-variant('.text-danger', $state-danger-text); // Contextual backgrounds // For now we'll leave these alongside the text classes until v4 when we can // safely shift things around (per SemVer rules). .bg-primary { // Given the contrast here, this is the only class to have its color inverted // automatically. color: #fff; } @include bg-variant('.bg-primary', $brand-primary); @include bg-variant('.bg-success', $state-success-bg); @include bg-variant('.bg-info', $state-info-bg); @include bg-variant('.bg-warning', $state-warning-bg); @include bg-variant('.bg-danger', $state-danger-bg);