-
Notifications
You must be signed in to change notification settings - Fork 1
/
grid.css
109 lines (98 loc) · 2.78 KB
/
grid.css
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* .....................................
Fonts
..................................... */
/* .....................................
Sets
..................................... */
/* .....................................
Media Query Ranges
..................................... */
/* .....................................
Colors - Grays
..................................... */
/* .....................................
Colors - Teals
..................................... */
/* .....................................
Colors - Red
..................................... */
/* .....................................
Colors - Navy
..................................... */
/* .....................................
Colors - Brand Palette
..................................... */
/* .....................................
Colors - Vimeo Brand Palette
..................................... */
/* .....................................
Colors - External Palette
..................................... */
/* helper function for margin and padding
......................................*/
/*.....................................
Foundation Grid Extensions
......................................*/
html {
min-height: 100%;
height: 100%; }
.relative {
position: relative; }
.absolute {
position: absolute; }
.pull {
float: left; }
.push {
float: right; }
/* containers
......................................*/
.standard-width-container {
padding: 0px 20px;
position: relative;
margin: 0 auto;
max-width: 1320px; }
@media only screen and (min-width: lower-bound(40.063em, 64em)) {
.standard-width-container {
padding: 0px 35px; } }
.full-width-container {
position: relative;
width: 100%; }
.media, .media-vertical {
display: table !important;
width: 100%; }
.media:after, .media-vertical:after {
clear: both; }
.media:before, .media-vertical:before, .media:after, .media-vertical:after {
content: " ";
display: table; }
.media .media-nowrap, .media-vertical .media-nowrap {
white-space: nowrap; }
.media .media-fill, .media-vertical .media-fill {
width: 100%; }
/* horizontal
.....................................*/
.media .media-unit {
display: table-cell;
vertical-align: middle; }
.media .media-unit i {
display: block; }
/* vertical
.....................................*/
.media-vertical .media-unit {
display: block; }
.media-vertical .media-unit i {
display: inline-block; }
.flex-vertical-middle {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; }
.flex-vertical-middle.flex-row {
flex-direction: row; }
.flex-horizontal-middle {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row; }
.flex-horizontal-middle.text-left {
justify-content: initial; }