Utility classes from Digest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tab-focus { | |
// Default | |
outline: thin dotted; | |
// WebKit | |
outline: 5px auto -webkit-focus-ring-color; | |
outline-offset: -2px; | |
} | |
.full-height { | |
min-height: 100vh; | |
} | |
.clearfix { | |
&::after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
} | |
// Visibility | |
.invisible { | |
visibility: none; | |
} | |
.faded { | |
opacity: 0.4; | |
} | |
// Useful for hiding things like radio buttons without making them inaccessible | |
// to the keyboard when navigating forms. | |
.pseudo-hidden { | |
position: absolute; | |
opacity: 0; | |
z-index: -1; | |
} | |
// Display | |
.block { display: block; } | |
// Alignment | |
.text-center { text-align: center; } | |
.text-left { text-align: left; } | |
.text-right { text-align: right; } | |
// Margin | |
.mar-t { margin-top: @spacer; } | |
.mar-r { margin-right: @spacer; } | |
.mar-b { margin-bottom: @spacer; } | |
.mar-l { margin-left: @spacer; } | |
.mar-x { .mar-l; .mar-r; } | |
.mar-y { .mar-t; .mar-b; } | |
.mar-a { .mar-x; .mar-y; } | |
.mar { .mar-x; .mar-y; } | |
.mar-t-xs { margin-top: @spacer-xs; } | |
.mar-r-xs { margin-right: @spacer-xs; } | |
.mar-b-xs { margin-bottom: @spacer-xs; } | |
.mar-l-xs { margin-left: @spacer-xs; } | |
.mar-x-xs { .mar-l-xs; .mar-r-xs; } | |
.mar-y-xs { .mar-t-xs; .mar-b-xs; } | |
.mar-a-xs { .mar-x-xs; .mar-y-xs; } | |
.mar-xs { .mar-x-xs; .mar-y-xs; } | |
.mar-t-sm { margin-top: @spacer-sm; } | |
.mar-r-sm { margin-right: @spacer-sm; } | |
.mar-b-sm { margin-bottom: @spacer-sm; } | |
.mar-l-sm { margin-left: @spacer-sm; } | |
.mar-x-sm { .mar-l-sm; .mar-r-sm; } | |
.mar-y-sm { .mar-t-sm; .mar-b-sm; } | |
.mar-a-sm { .mar-x-sm; .mar-y-sm; } | |
.mar-sm { .mar-x-sm; .mar-y-sm; } | |
.mar-t-lg { margin-top: @spacer-lg; } | |
.mar-r-lg { margin-right: @spacer-lg; } | |
.mar-b-lg { margin-bottom: @spacer-lg; } | |
.mar-l-lg { margin-left: @spacer-lg; } | |
.mar-x-lg { .mar-l-lg; .mar-r-lg; } | |
.mar-y-lg { .mar-t-lg; .mar-b-lg; } | |
.mar-a-lg { .mar-x-lg; .mar-y-lg; } | |
.mar-lg { .mar-x-lg; .mar-y-lg; } | |
// Padding | |
.pad-t { padding-top: @spacer; } | |
.pad-r { padding-right: @spacer; } | |
.pad-b { padding-bottom: @spacer; } | |
.pad-l { padding-left: @spacer; } | |
.pad-x { .pad-l; .pad-r; } | |
.pad-y { .pad-t; .pad-b; } | |
.pad-a { .pad-x; .pad-y; } | |
.pad { .pad-x; .pad-y; } | |
.pad-t-xs { padding-top: @spacer-xs; } | |
.pad-r-xs { padding-right: @spacer-xs; } | |
.pad-b-xs { padding-bottom: @spacer-xs; } | |
.pad-l-xs { padding-left: @spacer-xs; } | |
.pad-x-xs { .pad-l-xs; .pad-r-xs; } | |
.pad-y-xs { .pad-t-xs; .pad-b-xs; } | |
.pad-a-xs { .pad-x-xs; .pad-y-xs; } | |
.pad-xs { .pad-x-xs; .pad-y-xs; } | |
.pad-t-sm { padding-top: @spacer-sm; } | |
.pad-r-sm { padding-right: @spacer-sm; } | |
.pad-b-sm { padding-bottom: @spacer-sm; } | |
.pad-l-sm { padding-left: @spacer-sm; } | |
.pad-x-sm { .pad-l-sm; .pad-r-sm; } | |
.pad-y-sm { .pad-t-sm; .pad-b-sm; } | |
.pad-a-sm { .pad-x-sm; .pad-y-sm; } | |
.pad-sm { .pad-x-sm; .pad-y-sm; } | |
.pad-t-lg { padding-top: @spacer-lg; } | |
.pad-r-lg { padding-right: @spacer-lg; } | |
.pad-b-lg { padding-bottom: @spacer-lg; } | |
.pad-l-lg { padding-left: @spacer-lg; } | |
.pad-x-lg { .pad-l-lg; .pad-r-lg; } | |
.pad-y-lg { .pad-t-lg; .pad-b-lg; } | |
.pad-a-lg { .pad-x-lg; .pad-y-lg; } | |
.pad-lg { .pad-x-lg; .pad-y-lg; } | |
.text-jumbo { font-size: @font-size-jumbo !important; } | |
.text-lg { font-size: @font-size-large !important; } | |
.text-base { font-size: @font-size-base !important; } | |
.text-sm { font-size: @font-size-small !important; } | |
.text-xs { font-size: @font-size-tiny !important; } | |
.h1 { font-size: @font-size-h1 !important; } | |
.h2 { font-size: @font-size-h2 !important; } | |
.h3 { font-size: @font-size-h3 !important; } | |
.h4 { font-size: @font-size-h4 !important; } | |
.text-soft { color: @color-gray !important; } | |
.text-brand { color: @color-brand-blue !important; } | |
.wt-light { font-weight: @font-weight-light !important; } | |
.wt-normal { font-weight: @font-weight-normal !important; } | |
.wt-medium { font-weight: @font-weight-medium !important; } | |
.wt-bold { font-weight: @font-weight-bold !important; } | |
.ht-short { line-height: 1 !important; } | |
.flex { | |
display: flex; | |
} | |
.flex-center { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.flex-y-center { | |
display: flex; | |
align-items: center; | |
} | |
.flex-y-end { | |
display: flex; | |
align-items: flex-end; | |
} | |
.flex-spaced { | |
display: flex; | |
justify-content: space-between; | |
} | |
.flex-fill { | |
flex: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment