1 | @import "mixins/components.typography";
|
2 |
|
3 | .c-text {
|
4 | color: $text-color;
|
5 | font-family: $text-font-family;
|
6 | font-weight: $text-font-weight;
|
7 | line-height: $text-line-height;
|
8 | }
|
9 |
|
10 | .c-text--mono {
|
11 | font-family: $text-font-family-mono;
|
12 | }
|
13 |
|
14 | .c-text--highlight {
|
15 | @include text--highlight;
|
16 | }
|
17 |
|
18 | .c-text--quiet {
|
19 | color: $color-quiet;
|
20 | }
|
21 |
|
22 | .c-text--loud {
|
23 | font-weight: $text-font-weight-heavy;
|
24 | }
|
25 |
|
26 | .c-text--help[title] {
|
27 | border-bottom: $help-border-bottom;
|
28 | cursor: help;
|
29 | }
|
30 |
|
31 | .c-pre {
|
32 | margin: 0;
|
33 | }
|
34 |
|
35 | .c-code {
|
36 | @include code;
|
37 | }
|
38 |
|
39 | .c-code--multiline {
|
40 | display: block;
|
41 | padding: $spacing-small $spacing-medium;
|
42 | border-radius: $border-radius;
|
43 | white-space: pre;
|
44 | word-wrap: normal;
|
45 | overflow-x: auto;
|
46 | }
|
47 |
|
48 | .c-kbd {
|
49 | @include code($keyboard-color, $keyboard-background-color);
|
50 | border-bottom: $keyboard-border;
|
51 | border-radius: $keyboard-border-radius;
|
52 | }
|
53 |
|
54 | .c-blockquote {
|
55 | @include quotation--color;
|
56 | display: block;
|
57 | margin: $quotation-margin;
|
58 | padding: $quotation-padding;
|
59 | font-family: $quotation-font-family;
|
60 | }
|
61 |
|
62 | .c-blockquote--brand {
|
63 | @include quotation--color($quotation-brand-border-color);
|
64 | }
|
65 |
|
66 | .c-blockquote--info {
|
67 | @include quotation--color($quotation-info-border-color);
|
68 | }
|
69 |
|
70 | .c-blockquote--warning {
|
71 | @include quotation--color($quotation-warning-border-color);
|
72 | }
|
73 |
|
74 | .c-blockquote--success {
|
75 | @include quotation--color($quotation-success-border-color);
|
76 | }
|
77 |
|
78 | .c-blockquote--error {
|
79 | @include quotation--color($quotation-error-border-color);
|
80 | }
|
81 |
|
82 | .c-blockquote__body {
|
83 | @include paragraph;
|
84 | font-size: $quotation-font-size;
|
85 | }
|
86 |
|
87 | .c-blockquote__footer {
|
88 | @include paragraph;
|
89 | color: $quotation-footer-color;
|
90 | font-style: $quotation-footer-font-style;
|
91 | }
|
92 |
|
93 | .c-paragraph {
|
94 | @include paragraph;
|
95 | }
|