1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @value unit: 8px;
|
8 |
|
9 | .clearfix {
|
10 | &::after {
|
11 | display: block;
|
12 | clear: both;
|
13 |
|
14 | content: '';
|
15 | }
|
16 | }
|
17 |
|
18 | .font {
|
19 | font-family: var(--ring-font-family);
|
20 | font-size: var(--ring-font-size);
|
21 | line-height: var(--ring-line-height);
|
22 | }
|
23 |
|
24 | .font-lower {
|
25 | composes: font;
|
26 |
|
27 | line-height: var(--ring-line-height-lower);
|
28 | }
|
29 |
|
30 | .font-smaller {
|
31 | composes: font-lower;
|
32 |
|
33 | font-size: var(--ring-font-size-smaller);
|
34 | }
|
35 |
|
36 | .font-smaller-lower {
|
37 | composes: font-smaller;
|
38 |
|
39 | line-height: var(--ring-line-height-lowest);
|
40 | }
|
41 |
|
42 | .font-larger-lower {
|
43 | composes: font-lower;
|
44 |
|
45 | font-size: var(--ring-font-size-larger);
|
46 | }
|
47 |
|
48 | .font-larger {
|
49 | composes: font-larger-lower;
|
50 |
|
51 | line-height: var(--ring-line-height-taller);
|
52 | }
|
53 |
|
54 |
|
55 |
|
56 | .thin-font {
|
57 | font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
58 | font-size: var(--ring-font-size);
|
59 | font-weight: 100;
|
60 | }
|
61 |
|
62 | .monospace-font {
|
63 | font-family: var(--ring-font-family-monospace);
|
64 | font-size: var(--ring-font-size-smaller);
|
65 | }
|
66 |
|
67 | .ellipsis {
|
68 | overflow: hidden;
|
69 |
|
70 | white-space: nowrap;
|
71 | text-overflow: ellipsis;
|
72 | }
|
73 |
|
74 |
|
75 | @value footer-height: calc(unit * 8);
|
76 |
|
77 |
|
78 | @value breakpoint-small: 640px;
|
79 | @value breakpoint-middle: 960px;
|
80 | @value breakpoint-large: 1200px;
|
81 |
|
82 |
|
83 | @value extra-small-screen-media: (max-width: calc(breakpoint-small - 1px));
|
84 | @value small-screen-media: (min-width: breakpoint-small) and (max-width: calc(breakpoint-middle - 1px));
|
85 | @value middle-screen-media: (min-width: breakpoint-middle) and (max-width: calc(breakpoint-large - 1px));
|
86 | @value large-screen-media: (min-width: breakpoint-large);
|