first commit

Bud Parr

11.27.2017 98bc281a57874b862e03036beaf17a4ddc6be057

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*
 
   ASPECT RATIOS
 
*/
 
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
 * Make sure there are no height and width attributes on the embedded media.
 * Adapted from: https://github.com/suitcss/components-flex-embed
 *
 * Example:
 *
 * <div class="aspect-ratio aspect-ratio--16x9">
 *  <iframe class="aspect-ratio--object"></iframe>
 * </div>
 *
 * */
 
.aspect-ratio {
  height: 0;
  position: relative;
}
 
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
 
.aspect-ratio--4x3 {  padding-bottom: 75%; }
.aspect-ratio--3x4 {  padding-bottom: 133.33%; }
 
.aspect-ratio--6x4 {  padding-bottom: 66.6%; }
.aspect-ratio--4x6 {  padding-bottom: 150%; }
 
.aspect-ratio--8x5 {  padding-bottom: 62.5%; }
.aspect-ratio--5x8 {  padding-bottom: 160%; }
 
.aspect-ratio--7x5 {  padding-bottom: 71.42%; }
.aspect-ratio--5x7 {  padding-bottom: 140%; }
 
.aspect-ratio--1x1 {  padding-bottom: 100%; }
 
.aspect-ratio--object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
 
@media (--breakpoint-not-small){
    .aspect-ratio-ns {
      height: 0;
      position: relative;
    }
    .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
    .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
    .aspect-ratio--4x3-ns {  padding-bottom: 75%; }
    .aspect-ratio--3x4-ns {  padding-bottom: 133.33%; }
    .aspect-ratio--6x4-ns {  padding-bottom: 66.6%; }
    .aspect-ratio--4x6-ns {  padding-bottom: 150%; }
    .aspect-ratio--8x5-ns {  padding-bottom: 62.5%; }
    .aspect-ratio--5x8-ns {  padding-bottom: 160%; }
    .aspect-ratio--7x5-ns {  padding-bottom: 71.42%; }
    .aspect-ratio--5x7-ns {  padding-bottom: 140%; }
    .aspect-ratio--1x1-ns {  padding-bottom: 100%; }
    .aspect-ratio--object-ns {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    }
}
 
@media (--breakpoint-medium){
    .aspect-ratio-m {
      height: 0;
      position: relative;
    }
    .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
    .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
    .aspect-ratio--4x3-m {  padding-bottom: 75%; }
    .aspect-ratio--3x4-m {  padding-bottom: 133.33%; }
    .aspect-ratio--6x4-m {  padding-bottom: 66.6%; }
    .aspect-ratio--4x6-m {  padding-bottom: 150%; }
    .aspect-ratio--8x5-m {  padding-bottom: 62.5%; }
    .aspect-ratio--5x8-m {  padding-bottom: 160%; }
    .aspect-ratio--7x5-m {  padding-bottom: 71.42%; }
    .aspect-ratio--5x7-m {  padding-bottom: 140%; }
    .aspect-ratio--1x1-m {  padding-bottom: 100%; }
    .aspect-ratio--object-m {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    }
}
 
@media (--breakpoint-large){
    .aspect-ratio-l {
      height: 0;
      position: relative;
    }
    .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
    .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
    .aspect-ratio--4x3-l {  padding-bottom: 75%; }
    .aspect-ratio--3x4-l {  padding-bottom: 133.33%; }
    .aspect-ratio--6x4-l {  padding-bottom: 66.6%; }
    .aspect-ratio--4x6-l {  padding-bottom: 150%; }
    .aspect-ratio--8x5-l {  padding-bottom: 62.5%; }
    .aspect-ratio--5x8-l {  padding-bottom: 160%; }
    .aspect-ratio--7x5-l {  padding-bottom: 71.42%; }
    .aspect-ratio--5x7-l {  padding-bottom: 140%; }
    .aspect-ratio--1x1-l {  padding-bottom: 100%; }
    .aspect-ratio--object-l {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    }
}