UNPKG

3.12 kBCSSView Raw
1/*
2
3 HEIGHTS
4 Docs: http://tachyons.io/docs/layout/heights/
5
6 Base:
7 h = height
8 min-h = min-height
9 min-vh = min-height vertical screen height
10 vh = vertical screen height
11
12 Modifiers
13 1 = 1st step in height scale
14 2 = 2nd step in height scale
15 3 = 3rd step in height scale
16 4 = 4th step in height scale
17 5 = 5th step in height scale
18
19 -25 = literal value 25%
20 -50 = literal value 50%
21 -75 = literal value 75%
22 -100 = literal value 100%
23
24 -auto = string value of auto
25 -inherit = string value of inherit
26
27 Media Query Extensions:
28 -ns = not-small
29 -m = medium
30 -l = large
31
32*/
33
34/* Height Scale */
35
36.h1 { height: var(--height-1); }
37.h2 { height: var(--height-2); }
38.h3 { height: var(--height-3); }
39.h4 { height: var(--height-4); }
40.h5 { height: var(--height-5); }
41
42/* Height Percentages - Based off of height of parent */
43
44.h-25 { height: 25%; }
45.h-50 { height: 50%; }
46.h-75 { height: 75%; }
47.h-100 { height: 100%; }
48
49.min-h-100 { min-height: 100%; }
50
51/* Screen Height Percentage */
52
53.vh-25 { height: 25vh; }
54.vh-50 { height: 50vh; }
55.vh-75 { height: 75vh; }
56.vh-100 { height: 100vh; }
57
58.min-vh-100 { min-height: 100vh; }
59
60
61/* String Properties */
62
63.h-auto { height: auto; }
64.h-inherit { height: inherit; }
65
66@media (--breakpoint-not-small) {
67 .h1-ns { height: var(--height-1); }
68 .h2-ns { height: var(--height-2); }
69 .h3-ns { height: var(--height-3); }
70 .h4-ns { height: var(--height-4); }
71 .h5-ns { height: var(--height-5); }
72 .h-25-ns { height: 25%; }
73 .h-50-ns { height: 50%; }
74 .h-75-ns { height: 75%; }
75 .h-100-ns { height: 100%; }
76 .min-h-100-ns { min-height: 100%; }
77 .vh-25-ns { height: 25vh; }
78 .vh-50-ns { height: 50vh; }
79 .vh-75-ns { height: 75vh; }
80 .vh-100-ns { height: 100vh; }
81 .min-vh-100-ns { min-height: 100vh; }
82 .h-auto-ns { height: auto; }
83 .h-inherit-ns { height: inherit; }
84}
85
86@media (--breakpoint-medium) {
87 .h1-m { height: var(--height-1); }
88 .h2-m { height: var(--height-2); }
89 .h3-m { height: var(--height-3); }
90 .h4-m { height: var(--height-4); }
91 .h5-m { height: var(--height-5); }
92 .h-25-m { height: 25%; }
93 .h-50-m { height: 50%; }
94 .h-75-m { height: 75%; }
95 .h-100-m { height: 100%; }
96 .min-h-100-m { min-height: 100%; }
97 .vh-25-m { height: 25vh; }
98 .vh-50-m { height: 50vh; }
99 .vh-75-m { height: 75vh; }
100 .vh-100-m { height: 100vh; }
101 .min-vh-100-m { min-height: 100vh; }
102 .h-auto-m { height: auto; }
103 .h-inherit-m { height: inherit; }
104}
105
106@media (--breakpoint-large) {
107 .h1-l { height: var(--height-1); }
108 .h2-l { height: var(--height-2); }
109 .h3-l { height: var(--height-3); }
110 .h4-l { height: var(--height-4); }
111 .h5-l { height: var(--height-5); }
112 .h-25-l { height: 25%; }
113 .h-50-l { height: 50%; }
114 .h-75-l { height: 75%; }
115 .h-100-l { height: 100%; }
116 .min-h-100-l { min-height: 100%; }
117 .vh-25-l { height: 25vh; }
118 .vh-50-l { height: 50vh; }
119 .vh-75-l { height: 75vh; }
120 .vh-100-l { height: 100vh; }
121 .min-vh-100-l { min-height: 100vh; }
122 .h-auto-l { height: auto; }
123 .h-inherit-l { height: inherit; }
124}