Utility classes from Digest

utilities.less

.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;
}