/
_trumps.typography.scss
67 lines (48 loc) · 1.59 KB
/
_trumps.typography.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*------------------------------------*\
#TYPOGRAPHY
\*------------------------------------*/
/**
* Headings.
*
* Redefine our heading styles against utility classes. This gives us a double
* stranded heading hierarchy whereby we can style one heading as another, e.g.:
*
<h4 class="u-h1">I am an H4 that is the same size as an H1</h4>
*
*/
@if (variable-exists(heading-size-1)) {
.u-h1 { @include font-size($heading-size-1, auto, important); }
.u-h2 { @include font-size($heading-size-2, auto, important); }
.u-h3 { @include font-size($heading-size-3, auto, important); }
.u-h4 { @include font-size($heading-size-4, auto, important); }
.u-h5 { @include font-size($heading-size-5, auto, important); }
.u-h6 { @include font-size($heading-size-6, auto, important); }
} @else {
@warn "You need to include `_elements.headings.scss`.";
}
/**
* Adjustments.
*
* ‘Can you just make that text a little bigger?’
*
* Sure! Use these utilities to adjust the size of a span of text by a little
* bit more, or a little bit less, e.g.:
*
<p class="u-text++">A little bit bigger.</p>
*
*/
.u-text\+\+ { font-size: larger !important; }
.u-text-- { font-size: smaller !important; }
/**
* Alignments.
*/
.u-text-right { text-align: right !important; }
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-justify { text-align: justify !important; }
/**
* Truncation.
*
* Cause long spans of text to truncate after running out of horizontal space.
*/
.u-text-truncate { @include truncate(100%, important); }