Skip to content

Commit 125afbd

Browse files
author
mrmrs
committed
Update source code to 4.6.0
1 parent ecf793c commit 125afbd

12 files changed

+687
-148
lines changed

‎src/css/_aspect-ratios.css

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/*
2+
3+
ASPECT RATIOS
4+
5+
*/
6+
7+
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
8+
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
9+
* Make sure there are no height and width attributes on the embedded media.
10+
* Adapted from: https://github.com/suitcss/components-flex-embed
11+
*
12+
* Example:
13+
*
14+
* <div class="aspect-ratio aspect-ratio--16x9">
15+
* <iframe class="aspect-ratio--object"></iframe>
16+
* </div>
17+
*
18+
* */
19+
20+
.aspect-ratio {
21+
height: 0;
22+
position: relative;
23+
}
24+
25+
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
26+
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
27+
28+
.aspect-ratio--4x3 { padding-bottom: 75%; }
29+
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
30+
31+
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
32+
.aspect-ratio--4x6 { padding-bottom: 150%; }
33+
34+
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
35+
.aspect-ratio--5x8 { padding-bottom: 160%; }
36+
37+
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
38+
.aspect-ratio--5x7 { padding-bottom: 140%; }
39+
40+
.aspect-ratio--1x1 { padding-bottom: 100%; }
41+
42+
.aspect-ratio--object {
43+
position: absolute;
44+
top: 0;
45+
right: 0;
46+
bottom: 0;
47+
left: 0;
48+
width: 100%;
49+
height: 100%;
50+
z-index: 100;
51+
}
52+
53+
@media (--breakpoint-not-small){
54+
.aspect-ratio-ns {
55+
height: 0;
56+
position: relative;
57+
}
58+
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
59+
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
60+
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
61+
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
62+
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
63+
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
64+
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
65+
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
66+
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
67+
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
68+
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
69+
.aspect-ratio--object-ns {
70+
position: absolute;
71+
top: 0;
72+
right: 0;
73+
bottom: 0;
74+
left: 0;
75+
width: 100%;
76+
height: 100%;
77+
z-index: 100;
78+
}
79+
}
80+
81+
@media (--breakpoint-medium){
82+
.aspect-ratio-m {
83+
height: 0;
84+
position: relative;
85+
}
86+
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
87+
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
88+
.aspect-ratio--4x3-m { padding-bottom: 75%; }
89+
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
90+
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
91+
.aspect-ratio--4x6-m { padding-bottom: 150%; }
92+
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
93+
.aspect-ratio--5x8-m { padding-bottom: 160%; }
94+
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
95+
.aspect-ratio--5x7-m { padding-bottom: 140%; }
96+
.aspect-ratio--1x1-m { padding-bottom: 100%; }
97+
.aspect-ratio--object-m {
98+
position: absolute;
99+
top: 0;
100+
right: 0;
101+
bottom: 0;
102+
left: 0;
103+
width: 100%;
104+
height: 100%;
105+
z-index: 100;
106+
}
107+
}
108+
109+
@media (--breakpoint-large){
110+
.aspect-ratio-l {
111+
height: 0;
112+
position: relative;
113+
}
114+
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
115+
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
116+
.aspect-ratio--4x3-l { padding-bottom: 75%; }
117+
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
118+
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
119+
.aspect-ratio--4x6-l { padding-bottom: 150%; }
120+
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
121+
.aspect-ratio--5x8-l { padding-bottom: 160%; }
122+
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
123+
.aspect-ratio--5x7-l { padding-bottom: 140%; }
124+
.aspect-ratio--1x1-l { padding-bottom: 100%; }
125+
.aspect-ratio--object-l {
126+
position: absolute;
127+
top: 0;
128+
right: 0;
129+
bottom: 0;
130+
left: 0;
131+
width: 100%;
132+
height: 100%;
133+
z-index: 100;
134+
}
135+
}

‎src/css/_border-radius.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@
109109
.br-100-l { border-radius: 100%; }
110110
.br-pill-l { border-radius: 9999px; }
111111
.br--bottom-l {
112-
border-radius-top-left: 0;
113-
border-radius-top-right: 0;
112+
border-top-left-radius: 0;
113+
border-top-right-radius: 0;
114114
}
115115
.br--top-l {
116116
border-bottom-left-radius: 0;

‎src/css/_box-sizing.css

+7
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ footer,
1414
header,
1515
form,
1616
fieldset,
17+
legend,
1718
pre,
1819
code,
20+
a,
21+
h1,h2,h3,h4,h5,h6,
1922
p,
2023
ul,
2124
ol,
@@ -24,6 +27,10 @@ dl,
2427
dt,
2528
dd,
2629
textarea,
30+
table,
31+
td,
32+
th,
33+
tr,
2734
input[type="email"],
2835
input[type="number"],
2936
input[type="password"],

‎src/css/_hovers.css

+31-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
Docs: http://tachyons.io/docs/themes/hovers/
55
66
- Dim
7+
- Glow
78
- Hide Child
89
- Underline text
910
- Grow
@@ -30,6 +31,20 @@
3031
opacity: .8; transition: opacity .15s ease-out;
3132
}
3233

34+
/*
35+
36+
Animate opacity to 100% on hover by adding the glow class.
37+
38+
*/
39+
.glow {
40+
transition: opacity .15s ease-in;
41+
}
42+
.glow:hover,
43+
.glow:focus {
44+
opacity: 1;
45+
transition: opacity .15s ease-in;
46+
}
47+
3348
/*
3449
3550
Hide child & reveal on hover:
@@ -109,10 +124,23 @@
109124
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
110125
*/
111126

127+
.shadow-hover {
128+
cursor: pointer;
129+
position: relative;
130+
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
131+
}
132+
112133
.shadow-hover::after {
113-
box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 );
134+
content: '';
135+
box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
114136
opacity: 0;
115-
transition: opacity .25s ease-in-out;
137+
position: absolute;
138+
top: 0;
139+
left: 0;
140+
width: 100%;
141+
height: 100%;
142+
z-index: -1;
143+
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
116144
}
117145

118146
.shadow-hover:hover::after,
@@ -121,7 +149,7 @@
121149
}
122150

123151
/* Combine with classes in skins and skins-pseudo for
124-
* thousands of different transition possibilities. */
152+
* many different transition possibilities. */
125153

126154
.bg-animate,
127155
.bg-animate:hover,

0 commit comments

Comments
 (0)