Skip to content

Instantly share code, notes, and snippets.

@adamwathan

adamwathan/utilities.less Secret

Created Aug 1, 2020
Embed
What would you like to do?
Utility classes from Digest
.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
You can’t perform that action at this time.