Skip to content

Commit 4e60ee7

Browse files
author
mrmrs
committed
Update source for css packages.
1 parent 316bbd1 commit 4e60ee7

8 files changed

+122
-25
lines changed

‎src/css/_box-shadow.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
2+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
3+
@custom-media --breakpoint-large screen and (min-width: 64em);
4+
5+
/*
6+
7+
BOX-SHADOW
8+
9+
Media Query Extensions:
10+
-ns = not-small
11+
-m = medium
12+
-l = large
13+
14+
*/
15+
16+
.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
17+
.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
18+
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
19+
.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
20+
.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
21+
22+
@media (--breakpoint-not-small) {
23+
.shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
24+
.shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
25+
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
26+
.shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
27+
.shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
28+
}
29+
30+
@media (--breakpoint-medium) {
31+
.shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
32+
.shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
33+
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
34+
.shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
35+
.shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
36+
}
37+
38+
@media (--breakpoint-large) {
39+
.shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
40+
.shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
41+
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
42+
.shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
43+
.shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
44+
}

‎src/css/_box-sizing.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@ dl,
2222
dt,
2323
dd,
2424
textarea,
25-
input[type="text"],
26-
input[type="tel"],
2725
input[type="email"],
28-
input[type="url"],
26+
input[type="number"],
2927
input[type="password"],
28+
input[type="tel"],
29+
input[type="text"],
30+
input[type="url"],
3031
.border-box {
3132
box-sizing: border-box;
3233
}

‎src/css/_floats.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,19 @@
3737
.fn { float: none; }
3838

3939
@media (--breakpoint-not-small) {
40-
.fl-ns { float: left; display: inline; }
41-
.fr-ns { float: right; display: inline; }
40+
.fl-ns { float: left; display: inline; }
41+
.fr-ns { float: right;display: inline; }
4242
.fn-ns { float: none; }
4343
}
4444

4545
@media (--breakpoint-medium) {
46-
.fl-m { float: left; display: inline; }
47-
.fr-m { float: right; display: inline; }
46+
.fl-m { float: left; display: inline; }
47+
.fr-m { float: right; display: inline; }
4848
.fn-m { float: none; }
4949
}
5050

5151
@media (--breakpoint-large) {
52-
.fl-l { float: left; display: inline; }
53-
.fr-l { float: right; display: inline; }
52+
.fl-l { float: left; display: inline; }
53+
.fr-l { float: right; display: inline; }
5454
.fn-l { float: none; }
5555
}

‎src/css/_hovers.css

+26-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
/*
3030
31-
Hide child on hover:
31+
Hide child & reveal on hover:
3232
3333
Put the hide-child class on a parent element and any nested element with the
3434
child class will be hidden and displayed on hover or focus.
@@ -57,3 +57,28 @@
5757
text-decoration: underline;
5858
}
5959

60+
/* Can combine this with overflow-hidden to make background images grow on hover
61+
* even if you are using background-size: cover */
62+
63+
.grow {
64+
transition: transform .2s;
65+
}
66+
67+
.grow:hover {
68+
transform: scale(1.05);
69+
}
70+
71+
.grow-large {
72+
transition: transform .2s;
73+
}
74+
75+
.grow-large:hover {
76+
transform: scale(1.2);
77+
}
78+
79+
/* Add pointer on hover */
80+
81+
.pointer:hover {
82+
cursor: pointer;
83+
}
84+

‎src/css/_opacity.css

+1
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@
1616
.o-10 { opacity: .1; }
1717
.o-05 { opacity: .05; }
1818
.o-025 { opacity: .025; }
19+
.o-0 { opacity: 0; }

‎src/css/_typography.css

+14-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@
3232
margin-bottom: 0;
3333
}
3434

35-
/* Combine this class with a width to truncate text */
35+
.small-caps {
36+
font-variant: small-caps;
37+
}
38+
39+
/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
3640

3741
.truncate {
3842
white-space: nowrap;
@@ -55,6 +59,9 @@
5559
margin-top: 0;
5660
margin-bottom: 0;
5761
}
62+
.small-caps-ns {
63+
font-variant: small-caps;
64+
}
5865
.truncate-ns {
5966
white-space: nowrap;
6067
overflow: hidden;
@@ -77,6 +84,9 @@
7784
margin-top: 0;
7885
margin-bottom: 0;
7986
}
87+
.small-caps-m {
88+
font-variant: small-caps;
89+
}
8090
.truncate-m {
8191
white-space: nowrap;
8292
overflow: hidden;
@@ -99,6 +109,9 @@
99109
margin-top: 0;
100110
margin-bottom: 0;
101111
}
112+
.small-caps-l {
113+
font-variant: small-caps;
114+
}
102115
.truncate-l {
103116
white-space: nowrap;
104117
overflow: hidden;

‎src/css/_utilities.css

+17-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@
44
55
*/
66

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+
720
.aspect-ratio {
821
height: 0;
922
position: relative;
@@ -14,13 +27,13 @@
1427
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
1528

1629
.aspect-ratio--object {
17-
bottom: 0;
18-
height: 100%;
19-
left: 0;
2030
position: absolute;
21-
right: 0;
2231
top: 0;
32+
right: 0;
33+
bottom: 0;
34+
left: 0;
2335
width: 100%;
36+
height: 100%;
2437
z-index: 100;
2538
}
2639

‎src/css/tachyons.css

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
/*
2-
3-
TACHYONS
4-
5-
*/
1+
/* TACHYONS v4.0.0-beta.34| github.com/tachyons-css/tachyons */
62

3+
/* External Library Includes */
4+
@import './_normalize';
75

86
/* Variables */
9-
10-
@import './_normalize';
11-
@import './_media-queries';
127
@import './_colors';
138

149
/* Modules */
15-
1610
@import './_box-sizing';
1711
@import './_background-size';
1812
@import './_borders';
1913
@import './_border-colors';
2014
@import './_border-radius';
2115
@import './_border-style';
2216
@import './_border-widths';
17+
@import './_box-shadow';
2318
@import './_code';
2419
@import './_coordinates';
2520
@import './_clears';
@@ -54,8 +49,13 @@
5449
@import './_hovers';
5550
@import './_styles';
5651

52+
/* Import media queries at end as this will allow you to customize them
53+
* and override what is currently declared in each module.
54+
*/
55+
@import './_media-queries';
5756

57+
/* DEBUGGING */
5858
@import './_debug_children';
5959

60-
/* Uncomment out this line if you want to debug your layout */
60+
/* Uncomment out this line and rebuild if you want to debug your layout.*/
6161
/* @import './_debug'; */

0 commit comments

Comments
 (0)