UNPKG

ciser

Version:

Functional CSS, help quickly build and design new UI without writing css.

github.com/lamhieu-vk/ciser

lamhieu-vk/ciser

92 lines (88 loc) • 4.29 kB
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
/* 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 screen and (min-width: 30em) { .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 screen and (min-width: 30em) and (max-width: 60em) { .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 screen and (max-width: 60em) and (orientation: landscape) { .aspect-ratio-ml { height: 0; position: relative; } .aspect-ratio--16x9-ml { padding-bottom: 56.25%; } .aspect-ratio--9x16-ml { padding-bottom: 177.77%; } .aspect-ratio--4x3-ml { padding-bottom: 75%; } .aspect-ratio--3x4-ml { padding-bottom: 133.33%; } .aspect-ratio--6x4-ml { padding-bottom: 66.6%; } .aspect-ratio--4x6-ml { padding-bottom: 150%; } .aspect-ratio--8x5-ml { padding-bottom: 62.5%; } .aspect-ratio--5x8-ml { padding-bottom: 160%; } .aspect-ratio--7x5-ml { padding-bottom: 71.42%; } .aspect-ratio--5x7-ml { padding-bottom: 140%; } .aspect-ratio--1x1-ml { padding-bottom: 100%; } .aspect-ratio--object-ml { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } @media screen and (min-width: 60em) { .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; } }