aboutsummaryrefslogtreecommitdiffstats
path: root/src/css/imports/_heights.css
blob: 68487ab491392b30a5650974d4801f0fb5c2a7eb (plain)
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.h1 { height: var(--spacing-medium); }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }

/* Height Percentages - Based off of height of parent */

.h-25 {  height:  25%; }
.h-50 {  height:  50%; }
.h-75 {  height:  75%; }
.h-100 { height: 100%; }

.min-h-100 { min-height: 100%; }

/* Screen Height Percentage */

.vh-25 {  height:  25vh; }
.vh-50 {  height:  50vh; }
.vh-75 {  height:  75vh; }
.vh-100 { height: 100vh; }

.min-vh-100 { min-height: 100vh; }


/* String Properties */

.h-auto {     height: auto; }
.h-inherit {  height: inherit; }

@media (--breakpoint-not-small) {
  .h1-ns {  height: var(--spacing-medium); }
  .h2-ns {  height: 2rem; }
  .h3-ns {  height: 4rem; }
  .h4-ns {  height: 8rem; }
  .h5-ns {  height: 16rem; }
  .h-25-ns { height: 25%; }
  .h-50-ns { height: 50%; }
  .h-75-ns { height: 75%; }
  .h-100-ns { height: 100%; }
  .min-h-100-ns { min-height: 100%; }
  .vh-25-ns {  height:  25vh; }
  .vh-50-ns {  height:  50vh; }
  .vh-75-ns {  height:  75vh; }
  .vh-100-ns { height: 100vh; }
  .min-vh-100-ns { min-height: 100vh; }
  .h-auto-ns { height: auto; }
  .h-inherit-ns { height: inherit; }
}

@media (--breakpoint-medium) {
  .h1-m { height: var(--spacing-medium); }
  .h2-m { height: 2rem; }
  .h3-m { height: 4rem; }
  .h4-m { height: 8rem; }
  .h5-m { height: 16rem; }
  .h-25-m { height: 25%; }
  .h-50-m { height: 50%; }
  .h-75-m { height: 75%; }
  .h-100-m { height: 100%; }
  .min-h-100-ns { min-height: 100%; }
  .vh-25-m {  height:  25vh; }
  .vh-50-m {  height:  50vh; }
  .vh-75-m {  height:  75vh; }
  .vh-100-m { height: 100vh; }
  .min-vh-100-m { min-height: 100vh; }
  .h-auto-m { height: auto; }
  .h-inherit-m { height: inherit; }
}

@media (--breakpoint-large) {
  .h1-l { height: var(--spacing-medium); }
  .h2-l { height: 2rem; }
  .h3-l { height: 4rem; }
  .h4-l { height: 8rem; }
  .h5-l { height: 16rem; }
  .h-25-l { height: 25%; }
  .h-50-l { height: 50%; }
  .h-75-l { height: 75%; }
  .h-100-l { height: 100%; }
  .min-h-100-l { min-height: 100%; }
  .vh-25-l {  height:  25vh; }
  .vh-50-l {  height:  50vh; }
  .vh-75-l {  height:  75vh; }
  .vh-100-l { height: 100vh; }
  .min-vh-100-l { min-height: 100vh; }
  .h-auto-l { height: auto; }
  .h-inherit-l { height: inherit; }
}