UNPKG

2.03 kBCSSView Raw
1/* https://readymag.com/artemtiunov/RingUILanguage/colours/ */
2
3/*
4Unit shouldn't be CSS custom property because it is not intended to change
5Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
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/* To be used at large sizes */
55/* As close as possible to Helvetica Neue Thin (to replace Gotham) */
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; /* Renders Helvetica Neue UltraLight on OS X */
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/* Note: footer also has top margin which isn't taken into account here */
75@value footer-height: calc(unit * 8);
76
77/* Media breakpoints (minimal values) */
78@value breakpoint-small: 640px;
79@value breakpoint-middle: 960px;
80@value breakpoint-large: 1200px;
81
82/* Media queries */
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);