207 lines
2.7 KiB
SCSS
207 lines
2.7 KiB
SCSS
// Text utils
|
|
// ===
|
|
|
|
|
|
// Font-Family
|
|
// ---
|
|
|
|
.u-text-family {
|
|
font-family: $font-family;
|
|
}
|
|
|
|
.u-text-family-header {
|
|
font-family: $header-font-family;
|
|
|
|
// Added with webfontloader. See loadFonts() in app/container.js
|
|
.wf-active & {
|
|
font-family: $loaded-header-font-family;
|
|
}
|
|
}
|
|
|
|
.u-text-family-loaded {
|
|
font-family: $loaded-header-font-family;
|
|
}
|
|
|
|
|
|
// Weights & Style
|
|
// ---
|
|
|
|
.u-text-weight-thin {
|
|
font-weight: $thin-font-weight;
|
|
}
|
|
|
|
.u-text-weight-extra-light {
|
|
font-weight: $extra-light-font-weight;
|
|
}
|
|
|
|
.u-text-weight-light {
|
|
font-weight: $light-font-weight;
|
|
}
|
|
|
|
.u-text-weight-regular {
|
|
font-weight: $regular-font-weight;
|
|
}
|
|
|
|
.u-text-weight-medium {
|
|
font-weight: $medium-font-weight;
|
|
}
|
|
|
|
.u-text-weight-semi-bold {
|
|
font-weight: $semi-bold-font-weight;
|
|
}
|
|
|
|
.u-text-weight-bold {
|
|
font-weight: $bold-font-weight;
|
|
}
|
|
|
|
.u-text-style-italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.u-text-quiet {
|
|
color: $neutral-50;
|
|
font-size: $small-font-size;
|
|
|
|
fill: $neutral-50;
|
|
}
|
|
|
|
|
|
// Size
|
|
// ---
|
|
|
|
.u-text-size-smaller {
|
|
font-size: $smaller-font-size;
|
|
}
|
|
|
|
.u-text-size-small {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.u-text-size-base {
|
|
font-size: $font-size;
|
|
}
|
|
|
|
.u-text-size-big {
|
|
font-size: $big-font-size;
|
|
}
|
|
|
|
.u-text-size-bigger {
|
|
font-size: $bigger-font-size;
|
|
}
|
|
|
|
.u-text-size-huge {
|
|
font-size: $huge-font-size;
|
|
}
|
|
|
|
|
|
// Line Height
|
|
// ---
|
|
|
|
.u-text-height-0 {
|
|
line-height: 0;
|
|
}
|
|
|
|
.u-text-height-tiny {
|
|
line-height: $tiny-line-height;
|
|
}
|
|
|
|
.u-text-height-smaller {
|
|
line-height: $smaller-line-height;
|
|
}
|
|
|
|
.u-text-height-small {
|
|
line-height: $small-line-height;
|
|
}
|
|
|
|
.u-text-height-base {
|
|
line-height: $line-height;
|
|
}
|
|
|
|
.u-text-height-big {
|
|
line-height: $big-line-height;
|
|
}
|
|
|
|
.u-text-height-bigger {
|
|
line-height: $bigger-line-height;
|
|
}
|
|
|
|
.u-text-height-huge {
|
|
line-height: $huge-line-height;
|
|
}
|
|
|
|
|
|
// Letter Spacing
|
|
// ---
|
|
|
|
.u-text-letter-spacing-small {
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.u-text-letter-spacing-normal {
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
|
|
// Text Alignment
|
|
// ---
|
|
|
|
.u-text-align-start {
|
|
text-align: left;
|
|
}
|
|
|
|
.u-text-align-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.u-text-align-end {
|
|
text-align: right;
|
|
}
|
|
|
|
.u-text-align-middle {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.u-text-align-baseline {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
|
|
// All Caps
|
|
// ---
|
|
//
|
|
// Set text uppercase, letterspaced for legibility.
|
|
|
|
.u-text-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
// Capitalize Text
|
|
// ---
|
|
//
|
|
// Capitalize first letter of string.
|
|
|
|
.u-text-capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
|
|
// Lowercase Text
|
|
// ---
|
|
//
|
|
// Lowercase all text in string.
|
|
|
|
.u-text-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
|
|
// Strikethrough Text
|
|
// ---
|
|
//
|
|
// Strikethrough all text in string.
|
|
|
|
.u-text-strikethrough {
|
|
text-decoration: line-through;
|
|
}
|