.normal | font-weight: normal; |
.bold | font-weight: bold; |
.italic | font-style: italic; |
.lowercase | text-transform: lowercase; |
.uppercase | text-transform: uppercase; |
.underline | text-decoration: underline; |
.strike-through | text-decoration: line-through; |
.text-right | text-align: right; |
.text-left | text-align: left; |
.text-center | text-align: center; |
.muted | color: $text-muted; // #999 !default |
.heading | font-weight: bold;
display: block;
margin-bottom: rem($heading-mb); // 0.625rem !default
|
| Class | Value | Example |
|---|---|---|
.text-xs | 0.75rem | xs |
.text-sm | 0.875rem | sm |
.text-base | 1rem | base |
.text-lg | 1.25rem | lg |
.text-xl | 1.5rem | xl |
.text-2xl | 1.875rem | 2xl |
.text-3xl | 2rem | 3xl |
$fontSize: (
'xs': 0.75rem,
'sm': 0.875rem,
'base': 1rem,
'lg': 1.25rem,
'xl': 1.5rem,
'2xl': 1.875rem,
'3xl': 2rem,
);
| Class | Value | Example |
|---|---|---|
.text-transparent | transparent | transparent |
.text-black | #000000 | #000000 |
.text-white | #ffffff | #ffffff |
.text-gray-100 | #E4E7EB | #E4E7EB |
.text-gray-200 | #CBD2D9 | #CBD2D9 |
.text-gray-300 | #9AA5B1 | #9AA5B1 |
.text-gray-400 | #7B8794 | #7B8794 |
.text-gray-500 | #616E7C | #616E7C |
.text-gray-600 | #52606D | #52606D |
.text-gray-700 | #3E4C59 | #3E4C59 |
.text-gray-800 | #323F4B | #323F4B |
.text-gray-900 | #1F2933 | #1F2933 |
.text-orange-100 | #FAB38B | #FAB38B |
.text-orange-200 | #EF8E58 | #EF8E58 |
.text-orange-300 | #E67635 | #E67635 |
.text-orange-400 | #D25028 | #D25028 |
.text-orange-500 | #C65D21 | #C65D21 |
.text-orange-600 | #AB4E19 | #AB4E19 |
.text-orange-700 | #8C3D10 | #8C3D10 |
.text-orange-800 | #77340D | #77340D |
.text-orange-900 | #572508 | #572508 |
.text-blue-100 | #D1EEFC | #D1EEFC |
.text-blue-200 | #A7D8F0 | #A7D8F0 |
.text-blue-300 | #7CC1E4 | #7CC1E4 |
.text-blue-400 | #55AAD4 | #55AAD4 |
.text-blue-500 | #3994C1 | #3994C1 |
.text-blue-600 | #2D83AE | #2D83AE |
.text-blue-700 | #1D6F98 | #1D6F98 |
.text-blue-800 | #166086 | #166086 |
.text-blue-900 | #0B4F71 | #0B4F71 |
.text-purple-100 | #CFBCF2 | #CFBCF2 |
.text-purple-200 | #A081D9 | #A081D9 |
.text-purple-300 | #8662C7 | #8662C7 |
.text-purple-400 | #724BB7 | #724BB7 |
.text-purple-500 | #653CAD | #653CAD |
.text-purple-600 | #51279B | #51279B |
.text-purple-700 | #421987 | #421987 |
.text-purple-800 | #34126F | #34126F |
.text-purple-900 | #240754 | #240754 |
.text-green-100 | #C1EAC5 | #C1EAC5 |
.text-green-200 | #A3D9A5 | #A3D9A5 |
.text-green-300 | #7BC47F | #7BC47F |
.text-green-400 | #57AE5B | #57AE5B |
.text-green-500 | #3F9142 | #3F9142 |
.text-green-600 | #2F8132 | #2F8132 |
.text-green-700 | #207227 | #207227 |
.text-green-800 | #0E5814 | #0E5814 |
.text-green-900 | #05400A | #05400A |
.text-red-100 | #FACDCD | #FACDCD |
.text-red-200 | #F29B9B | #F29B9B |
.text-red-300 | #E66A6A | #E66A6A |
.text-red-400 | #D64545 | #D64545 |
.text-red-500 | #BA2525 | #BA2525 |
.text-red-600 | #A61B1B | #A61B1B |
.text-red-700 | #911111 | #911111 |
.text-red-800 | #780A0A | #780A0A |
.text-red-900 | #610404 | #610404 |
$colors: (
"transparent": transparent,
"white": #ffffff,
"black": #000000,
"gray": (
100: #E4E7EB,
200: #CBD2D9,
300: #9AA5B1,
400: #7B8794,
500: #616E7C,
600: #52606D,
700: #3E4C59,
800: #323F4B,
900: #1F2933
),
"orange": (
100: #FAB38B,
200: #EF8E58,
300: #E67635,
400: #D25028,
500: #C65D21,
600: #AB4E19,
700: #8C3D10,
800: #77340D,
900: #572508
),
"blue": (
100: #D1EEFC,
200: #A7D8F0,
300: #7CC1E4,
400: #55AAD4,
500: #3994C1,
600: #2D83AE,
700: #1D6F98,
800: #166086,
900: #0B4F71
),
"purple": (
100: #CFBCF2,
200: #A081D9,
300: #8662C7,
400: #724BB7,
500: #653CAD,
600: #51279B,
700: #421987,
800: #34126F,
900: #240754
),
"green": (
100: #C1EAC5,
200: #A3D9A5,
300: #7BC47F,
400: #57AE5B,
500: #3F9142,
600: #2F8132,
700: #207227,
800: #0E5814,
900: #05400A
),
"red": (
100: #FACDCD,
200: #F29B9B,
300: #E66A6A,
400: #D64545,
500: #BA2525,
600: #A61B1B,
700: #911111,
800: #780A0A,
900: #610404
)
);