mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Cleanup text styles.
This commit is contained in:
Jonathan Reinink
parent
f7329739fa
commit
1f6e2d0955
@ -1,76 +1,76 @@
|
||||
@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-family-base: "proxima-nova", @system-font-stack;
|
||||
@font-family-mono: "Roboto Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
@font-family-base: @system-font-stack;
|
||||
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
|
||||
@line-height: 1.5;
|
||||
|
||||
@font-size-xs: (12rem / 16rem); // 12px
|
||||
@font-size-sm: (14rem / 16rem); // 14px
|
||||
@font-size-base: 1rem; // 16px
|
||||
@font-size-lg: (18rem / 16rem); // 18px
|
||||
@font-size-xl: (22rem / 16rem); // 22px
|
||||
@font-size-2xl: (30rem / 16rem); // 30px
|
||||
@font-size-3xl: (40rem / 16rem); // 40px
|
||||
@font-size-xs: (12rem / 16rem); // 12px
|
||||
@font-size-sm: (14rem / 16rem); // 14px
|
||||
@font-size-base: 1rem; // 16px
|
||||
@font-size-lg: (18rem / 16rem); // 18px
|
||||
@font-size-xl: (22rem / 16rem); // 22px
|
||||
@font-size-2xl: (30rem / 16rem); // 30px
|
||||
@font-size-3xl: (40rem / 16rem); // 40px
|
||||
|
||||
@font-weight-hairline: 200;
|
||||
@font-weight-thin: 300;
|
||||
@font-weight-regular: 400;
|
||||
@font-weight-medium: 600;
|
||||
@font-weight-bold: 700;
|
||||
@font-weight-thin: 300;
|
||||
@font-weight-regular: 400;
|
||||
@font-weight-medium: 600;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
.text-xs { font-size: @font-size-xs; }
|
||||
.text-sm { font-size: @font-size-sm; }
|
||||
// Sizes
|
||||
.text-xs { font-size: @font-size-xs; }
|
||||
.text-sm { font-size: @font-size-sm; }
|
||||
.text-base { font-size: @font-size-base; }
|
||||
.text-lg { font-size: @font-size-lg; }
|
||||
.text-xl { font-size: @font-size-xl; }
|
||||
.text-2xl { font-size: @font-size-2xl; }
|
||||
.text-3xl { font-size: @font-size-3xl; }
|
||||
.text-lg { font-size: @font-size-lg; }
|
||||
.text-xl { font-size: @font-size-xl; }
|
||||
.text-2xl { font-size: @font-size-2xl; }
|
||||
.text-3xl { font-size: @font-size-3xl; }
|
||||
|
||||
// Weights
|
||||
.text-hairline { font-weight: @font-weight-hairline; }
|
||||
.text-thin { font-weight: @font-weight-thin; }
|
||||
.text-regular { font-weight: @font-weight-regular; }
|
||||
.text-medium { font-weight: @font-weight-medium; }
|
||||
.text-bold { font-weight: @font-weight-bold; }
|
||||
.text-thin { font-weight: @font-weight-thin; }
|
||||
.text-regular { font-weight: @font-weight-regular; }
|
||||
.text-medium { font-weight: @font-weight-medium; }
|
||||
.text-bold { font-weight: @font-weight-bold; }
|
||||
|
||||
.text-light { color: @text-light; }
|
||||
.text-light-soft { color: @text-light-soft; }
|
||||
// Colors
|
||||
.text-light { color: @text-light; }
|
||||
.text-light-soft { color: @text-light-soft; }
|
||||
.text-light-softer { color: @text-light-softer; }
|
||||
.text-light-softest { color: @text-light-softest; }
|
||||
.hover-text-light { &:hover { .text-light; } }
|
||||
.text-light-softest { color: @text-light-softest; }
|
||||
|
||||
.text-dark { color: @text-dark; }
|
||||
.text-dark-soft { color: @text-dark-soft; }
|
||||
.text-dark { color: @text-dark; }
|
||||
.text-dark-soft { color: @text-dark-soft; }
|
||||
.text-dark-softer { color: @text-dark-softer; }
|
||||
.text-dark-softest { color: @text-dark-softest; }
|
||||
.text-dark-softest { color: @text-dark-softest; }
|
||||
|
||||
.text-brand { color: @text-brand; }
|
||||
.text-brand { color: @text-brand; }
|
||||
.text-danger { color: @text-danger; }
|
||||
|
||||
.text-em { font-style: italic; }
|
||||
.text-underline { text-decoration: underline; }
|
||||
|
||||
// Line heights
|
||||
.leading-none { line-height: 1; }
|
||||
.leading-tight { line-height: 1.25; }
|
||||
.leading-normal { line-height: 1.5; }
|
||||
.leading-loose { line-height: 2; }
|
||||
|
||||
// Horizontal alignment
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.responsive({
|
||||
&text-center { .text-center; }
|
||||
&text-left { .text-left; }
|
||||
&text-right { .text-right; }
|
||||
});
|
||||
// Vertical alignment
|
||||
.align-baseline { vertical-align: baseline; }
|
||||
.align-top { vertical-align: top; }
|
||||
.align-middle { vertical-align: middle; }
|
||||
.align-bottom { vertical-align: bottom; }
|
||||
.align-text-top { vertical-align: text-top; }
|
||||
.align-text-bottom { vertical-align: text-bottom; }
|
||||
|
||||
// Styles
|
||||
.text-em { font-style: italic; }
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-underline { text-decoration: underline; }
|
||||
.text-break { white-space: pre-line; }
|
||||
.text-no-wrap { white-space: nowrap; }
|
||||
.text-force-wrap { word-wrap: break-word; }
|
||||
@ -78,5 +78,59 @@
|
||||
.text-spaced { letter-spacing: 0.05em; }
|
||||
.text-strike { text-decoration: line-through; }
|
||||
.text-shadow-solid { text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
|
||||
|
||||
.text-mono { font-family: @font-family-mono; }
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.responsive({
|
||||
&text-xs { .text-xs; }
|
||||
&text-sm { .text-sm; }
|
||||
&text-base { .text-base; }
|
||||
&text-lg { .text-lg; }
|
||||
&text-xl { .text-xl; }
|
||||
&text-2xl { .text-2xl; }
|
||||
&text-3xl { .text-3xl; }
|
||||
&text-hairline { .text-hairline; }
|
||||
&text-thin { .text-thin; }
|
||||
&text-regular { .text-regular; }
|
||||
&text-medium { .text-medium; }
|
||||
&text-bold { .text-bold; }
|
||||
&text-light { .text-light; }
|
||||
&text-light-soft { .text-light-soft; }
|
||||
&text-light-softer { .text-light-softer; }
|
||||
&text-light-softest { .text-light-softest; }
|
||||
&text-dark { .text-dark; }
|
||||
&text-dark-soft { .text-dark-soft; }
|
||||
&text-dark-softer { .text-dark-softer; }
|
||||
&text-dark-softest { .text-dark-softest; }
|
||||
&text-brand { .text-brand; }
|
||||
&text-danger { .text-danger; }
|
||||
&leading-none { .leading-none; }
|
||||
&leading-tight { .leading-tight; }
|
||||
&leading-normal { .leading-normal; }
|
||||
&leading-loose { .leading-loose; }
|
||||
&text-center { .text-center; }
|
||||
&text-left { .text-left; }
|
||||
&text-right { .text-right; }
|
||||
&align-baseline { .align-baseline; }
|
||||
&align-top { .align-top; }
|
||||
&align-middle { .align-middle; }
|
||||
&align-bottom { .align-bottom; }
|
||||
&align-text-top { .align-text-top; }
|
||||
&align-text-bottom { .align-text-bottom; }
|
||||
&text-em { .text-em; }
|
||||
&text-uppercase { .text-uppercase; }
|
||||
&text-underline { .text-underline; }
|
||||
&text-break { .text-break; }
|
||||
&text-no-wrap { .text-no-wrap; }
|
||||
&text-force-wrap { .text-force-wrap; }
|
||||
&text-smooth { .text-smooth; }
|
||||
&text-spaced { .text-spaced; }
|
||||
&text-strike { .text-strike; }
|
||||
&text-shadow-solid { .text-shadow-solid; }
|
||||
&text-mono { .text-mono; }
|
||||
&text-ellipsis { .text-ellipsis; }
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user