tachyonscss-rails 4.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.md +33 -0
- data/README.md +42 -0
- data/Rakefile +43 -0
- data/app/assets/stylesheets/scss/_aspect-ratios.scss +142 -0
- data/app/assets/stylesheets/scss/_background-position.scss +133 -0
- data/app/assets/stylesheets/scss/_background-size.scss +41 -0
- data/app/assets/stylesheets/scss/_border-colors.scss +93 -0
- data/app/assets/stylesheets/scss/_border-radius.scss +134 -0
- data/app/assets/stylesheets/scss/_border-style.scss +55 -0
- data/app/assets/stylesheets/scss/_border-widths.scss +81 -0
- data/app/assets/stylesheets/scss/_borders.scss +65 -0
- data/app/assets/stylesheets/scss/_box-shadow.scss +48 -0
- data/app/assets/stylesheets/scss/_box-sizing.scss +49 -0
- data/app/assets/stylesheets/scss/_clears.scss +47 -0
- data/app/assets/stylesheets/scss/_code.scss +18 -0
- data/app/assets/stylesheets/scss/_coordinates.scss +153 -0
- data/app/assets/stylesheets/scss/_debug-children.scss +21 -0
- data/app/assets/stylesheets/scss/_debug-grid.scss +33 -0
- data/app/assets/stylesheets/scss/_debug.scss +127 -0
- data/app/assets/stylesheets/scss/_debug_children.scss +18 -0
- data/app/assets/stylesheets/scss/_display.scss +111 -0
- data/app/assets/stylesheets/scss/_flexbox.scss +257 -0
- data/app/assets/stylesheets/scss/_floats.scss +56 -0
- data/app/assets/stylesheets/scss/_font-family.scss +99 -0
- data/app/assets/stylesheets/scss/_font-style.scss +36 -0
- data/app/assets/stylesheets/scss/_font-weight.scss +87 -0
- data/app/assets/stylesheets/scss/_forms.scss +23 -0
- data/app/assets/stylesheets/scss/_gradients.scss +29 -0
- data/app/assets/stylesheets/scss/_heights.scss +131 -0
- data/app/assets/stylesheets/scss/_hovers.scss +166 -0
- data/app/assets/stylesheets/scss/_images.scss +18 -0
- data/app/assets/stylesheets/scss/_letter-spacing.scss +40 -0
- data/app/assets/stylesheets/scss/_line-height.scss +41 -0
- data/app/assets/stylesheets/scss/_links.scss +34 -0
- data/app/assets/stylesheets/scss/_lists.scss +15 -0
- data/app/assets/stylesheets/scss/_max-widths.scss +105 -0
- data/app/assets/stylesheets/scss/_module-template.scss +29 -0
- data/app/assets/stylesheets/scss/_negative-margins.scss +205 -0
- data/app/assets/stylesheets/scss/_nested.scss +63 -0
- data/app/assets/stylesheets/scss/_normalize.scss +454 -0
- data/app/assets/stylesheets/scss/_opacity.scss +27 -0
- data/app/assets/stylesheets/scss/_outlines.scss +39 -0
- data/app/assets/stylesheets/scss/_overflow.scss +82 -0
- data/app/assets/stylesheets/scss/_position.scss +44 -0
- data/app/assets/stylesheets/scss/_rotations.scss +50 -0
- data/app/assets/stylesheets/scss/_skins-pseudo.scss +243 -0
- data/app/assets/stylesheets/scss/_skins.scss +143 -0
- data/app/assets/stylesheets/scss/_spacing.scss +947 -0
- data/app/assets/stylesheets/scss/_styles.scss +15 -0
- data/app/assets/stylesheets/scss/_tables.scss +42 -0
- data/app/assets/stylesheets/scss/_text-align.scss +53 -0
- data/app/assets/stylesheets/scss/_text-decoration.scss +42 -0
- data/app/assets/stylesheets/scss/_text-transform.scss +53 -0
- data/app/assets/stylesheets/scss/_type-scale.scss +102 -0
- data/app/assets/stylesheets/scss/_typography.scss +129 -0
- data/app/assets/stylesheets/scss/_utilities.scss +57 -0
- data/app/assets/stylesheets/scss/_variables.scss +143 -0
- data/app/assets/stylesheets/scss/_vertical-align.scss +43 -0
- data/app/assets/stylesheets/scss/_visibility.scss +58 -0
- data/app/assets/stylesheets/scss/_white-space.scss +41 -0
- data/app/assets/stylesheets/scss/_widths.scss +150 -0
- data/app/assets/stylesheets/scss/_word-break.scss +43 -0
- data/app/assets/stylesheets/scss/_z-index.scss +60 -0
- data/app/assets/stylesheets/tachyons.scss +94 -0
- data/lib/tachyonscss-rails/engine.rb +11 -0
- data/lib/tachyonscss-rails/version.rb +3 -0
- data/lib/tachyonscss-rails.rb +5 -0
- metadata +113 -0
@@ -0,0 +1,127 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
body { outline: 1px solid #2980B9!important; }
|
10
|
+
article { outline: 1px solid #3498DB!important; }
|
11
|
+
nav { outline: 1px solid #0088C3!important; }
|
12
|
+
aside { outline: 1px solid #33A0CE!important; }
|
13
|
+
section { outline: 1px solid #66B8DA!important; }
|
14
|
+
header { outline: 1px solid #99CFE7!important; }
|
15
|
+
footer { outline: 1px solid #CCE7F3!important; }
|
16
|
+
h1 { outline: 1px solid #162544!important; }
|
17
|
+
h2 { outline: 1px solid #314E6E!important; }
|
18
|
+
h3 { outline: 1px solid #3E5E85!important; }
|
19
|
+
h4 { outline: 1px solid #449BAF!important; }
|
20
|
+
h5 { outline: 1px solid #C7D1CB!important; }
|
21
|
+
h6 { outline: 1px solid #4371D0!important; }
|
22
|
+
main { outline: 1px solid #2F4F90!important; }
|
23
|
+
address { outline: 1px solid #1A2C51!important; }
|
24
|
+
div { outline: 1px solid #036CDB!important; }
|
25
|
+
|
26
|
+
|
27
|
+
p { outline: 1px solid #AC050B!important; }
|
28
|
+
hr { outline: 1px solid #FF063F!important; }
|
29
|
+
pre { outline: 1px solid #850440!important; }
|
30
|
+
blockquote { outline: 1px solid #F1B8E7!important; }
|
31
|
+
ol { outline: 1px solid #FF050C!important; }
|
32
|
+
ul { outline: 1px solid #D90416!important; }
|
33
|
+
li { outline: 1px solid #D90416!important; }
|
34
|
+
dl { outline: 1px solid #FD3427!important; }
|
35
|
+
dt { outline: 1px solid #FF0043!important; }
|
36
|
+
dd { outline: 1px solid #E80174!important; }
|
37
|
+
figure { outline: 1px solid #FF00BB!important; }
|
38
|
+
figcaption { outline: 1px solid #BF0032!important; }
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
table { outline: 1px solid #00CC99!important; }
|
43
|
+
caption { outline: 1px solid #37FFC4!important; }
|
44
|
+
thead { outline: 1px solid #98DACA!important; }
|
45
|
+
tbody { outline: 1px solid #64A7A0!important; }
|
46
|
+
tfoot { outline: 1px solid #22746B!important; }
|
47
|
+
tr { outline: 1px solid #86C0B2!important; }
|
48
|
+
th { outline: 1px solid #A1E7D6!important; }
|
49
|
+
td { outline: 1px solid #3F5A54!important; }
|
50
|
+
col { outline: 1px solid #6C9A8F!important; }
|
51
|
+
colgroup { outline: 1px solid #6C9A9D!important; }
|
52
|
+
|
53
|
+
|
54
|
+
button { outline: 1px solid #DA8301!important; }
|
55
|
+
datalist { outline: 1px solid #C06000!important; }
|
56
|
+
fieldset { outline: 1px solid #D95100!important; }
|
57
|
+
form { outline: 1px solid #D23600!important; }
|
58
|
+
input { outline: 1px solid #FCA600!important; }
|
59
|
+
keygen { outline: 1px solid #B31E00!important; }
|
60
|
+
label { outline: 1px solid #EE8900!important; }
|
61
|
+
legend { outline: 1px solid #DE6D00!important; }
|
62
|
+
meter { outline: 1px solid #E8630C!important; }
|
63
|
+
optgroup { outline: 1px solid #B33600!important; }
|
64
|
+
option { outline: 1px solid #FF8A00!important; }
|
65
|
+
output { outline: 1px solid #FF9619!important; }
|
66
|
+
progress { outline: 1px solid #E57C00!important; }
|
67
|
+
select { outline: 1px solid #E26E0F!important; }
|
68
|
+
textarea { outline: 1px solid #CC5400!important; }
|
69
|
+
|
70
|
+
|
71
|
+
|
72
|
+
details { outline: 1px solid #33848F!important; }
|
73
|
+
summary { outline: 1px solid #60A1A6!important; }
|
74
|
+
command { outline: 1px solid #438DA1!important; }
|
75
|
+
menu { outline: 1px solid #449DA6!important; }
|
76
|
+
|
77
|
+
|
78
|
+
|
79
|
+
del { outline: 1px solid #BF0000!important; }
|
80
|
+
ins { outline: 1px solid #400000!important; }
|
81
|
+
|
82
|
+
|
83
|
+
|
84
|
+
img { outline: 1px solid #22746B!important; }
|
85
|
+
iframe { outline: 1px solid #64A7A0!important; }
|
86
|
+
embed { outline: 1px solid #98DACA!important; }
|
87
|
+
object { outline: 1px solid #00CC99!important; }
|
88
|
+
param { outline: 1px solid #37FFC4!important; }
|
89
|
+
video { outline: 1px solid #6EE866!important; }
|
90
|
+
audio { outline: 1px solid #027353!important; }
|
91
|
+
source { outline: 1px solid #012426!important; }
|
92
|
+
canvas { outline: 1px solid #A2F570!important; }
|
93
|
+
track { outline: 1px solid #59A600!important; }
|
94
|
+
map { outline: 1px solid #7BE500!important; }
|
95
|
+
area { outline: 1px solid #305900!important; }
|
96
|
+
|
97
|
+
|
98
|
+
|
99
|
+
a { outline: 1px solid #FF62AB!important; }
|
100
|
+
em { outline: 1px solid #800B41!important; }
|
101
|
+
strong { outline: 1px solid #FF1583!important; }
|
102
|
+
i { outline: 1px solid #803156!important; }
|
103
|
+
b { outline: 1px solid #CC1169!important; }
|
104
|
+
u { outline: 1px solid #FF0430!important; }
|
105
|
+
s { outline: 1px solid #F805E3!important; }
|
106
|
+
small { outline: 1px solid #D107B2!important; }
|
107
|
+
abbr { outline: 1px solid #4A0263!important; }
|
108
|
+
q { outline: 1px solid #240018!important; }
|
109
|
+
cite { outline: 1px solid #64003C!important; }
|
110
|
+
dfn { outline: 1px solid #B4005A!important; }
|
111
|
+
sub { outline: 1px solid #DBA0C8!important; }
|
112
|
+
sup { outline: 1px solid #CC0256!important; }
|
113
|
+
time { outline: 1px solid #D6606D!important; }
|
114
|
+
code { outline: 1px solid #E04251!important; }
|
115
|
+
kbd { outline: 1px solid #5E001F!important; }
|
116
|
+
samp { outline: 1px solid #9C0033!important; }
|
117
|
+
var { outline: 1px solid #D90047!important; }
|
118
|
+
mark { outline: 1px solid #FF0053!important; }
|
119
|
+
bdi { outline: 1px solid #BF3668!important; }
|
120
|
+
bdo { outline: 1px solid #6F1400!important; }
|
121
|
+
ruby { outline: 1px solid #FF7B93!important; }
|
122
|
+
rt { outline: 1px solid #FF2F54!important; }
|
123
|
+
rp { outline: 1px solid #803E49!important; }
|
124
|
+
span { outline: 1px solid #CC2643!important; }
|
125
|
+
br { outline: 1px solid #DB687D!important; }
|
126
|
+
wbr { outline: 1px solid #DB175B!important; }
|
127
|
+
|
@@ -0,0 +1,111 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/*
|
9
|
+
|
10
|
+
DISPLAY
|
11
|
+
Docs: http://tachyons.io/docs/layout/display
|
12
|
+
|
13
|
+
Base:
|
14
|
+
d = display
|
15
|
+
|
16
|
+
Modifiers:
|
17
|
+
n = none
|
18
|
+
b = block
|
19
|
+
ib = inline-block
|
20
|
+
it = inline-table
|
21
|
+
t = table
|
22
|
+
tc = table-cell
|
23
|
+
tr = table-row
|
24
|
+
tcol = table-column
|
25
|
+
tcolg = table-column-group
|
26
|
+
|
27
|
+
Media Query Extensions:
|
28
|
+
-ns = not-small
|
29
|
+
-m = medium
|
30
|
+
-l = large
|
31
|
+
|
32
|
+
*/
|
33
|
+
|
34
|
+
.dn { display: none; }
|
35
|
+
.di { display: inline; }
|
36
|
+
.db { display: block; }
|
37
|
+
.dib { display: inline-block; }
|
38
|
+
.dit { display: inline-table; }
|
39
|
+
.dt { display: table; }
|
40
|
+
.dtc { display: table-cell; }
|
41
|
+
.dt-row { display: table-row; }
|
42
|
+
.dt-row-group { display: table-row-group; }
|
43
|
+
.dt-column { display: table-column; }
|
44
|
+
.dt-column-group { display: table-column-group; }
|
45
|
+
|
46
|
+
/*
|
47
|
+
This will set table to full width and then
|
48
|
+
all cells will be equal width
|
49
|
+
*/
|
50
|
+
.dt--fixed {
|
51
|
+
table-layout: fixed;
|
52
|
+
width: 100%;
|
53
|
+
}
|
54
|
+
|
55
|
+
@media #{$breakpoint-not-small} {
|
56
|
+
.dn-ns { display: none; }
|
57
|
+
.di-ns { display: inline; }
|
58
|
+
.db-ns { display: block; }
|
59
|
+
.dib-ns { display: inline-block; }
|
60
|
+
.dit-ns { display: inline-table; }
|
61
|
+
.dt-ns { display: table; }
|
62
|
+
.dtc-ns { display: table-cell; }
|
63
|
+
.dt-row-ns { display: table-row; }
|
64
|
+
.dt-row-group-ns { display: table-row-group; }
|
65
|
+
.dt-column-ns { display: table-column; }
|
66
|
+
.dt-column-group-ns { display: table-column-group; }
|
67
|
+
|
68
|
+
.dt--fixed-ns {
|
69
|
+
table-layout: fixed;
|
70
|
+
width: 100%;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
@media #{$breakpoint-medium} {
|
75
|
+
.dn-m { display: none; }
|
76
|
+
.di-m { display: inline; }
|
77
|
+
.db-m { display: block; }
|
78
|
+
.dib-m { display: inline-block; }
|
79
|
+
.dit-m { display: inline-table; }
|
80
|
+
.dt-m { display: table; }
|
81
|
+
.dtc-m { display: table-cell; }
|
82
|
+
.dt-row-m { display: table-row; }
|
83
|
+
.dt-row-group-m { display: table-row-group; }
|
84
|
+
.dt-column-m { display: table-column; }
|
85
|
+
.dt-column-group-m { display: table-column-group; }
|
86
|
+
|
87
|
+
.dt--fixed-m {
|
88
|
+
table-layout: fixed;
|
89
|
+
width: 100%;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
@media #{$breakpoint-large} {
|
94
|
+
.dn-l { display: none; }
|
95
|
+
.di-l { display: inline; }
|
96
|
+
.db-l { display: block; }
|
97
|
+
.dib-l { display: inline-block; }
|
98
|
+
.dit-l { display: inline-table; }
|
99
|
+
.dt-l { display: table; }
|
100
|
+
.dtc-l { display: table-cell; }
|
101
|
+
.dt-row-l { display: table-row; }
|
102
|
+
.dt-row-group-l { display: table-row-group; }
|
103
|
+
.dt-column-l { display: table-column; }
|
104
|
+
.dt-column-group-l { display: table-column-group; }
|
105
|
+
|
106
|
+
.dt--fixed-l {
|
107
|
+
table-layout: fixed;
|
108
|
+
width: 100%;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
@@ -0,0 +1,257 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/*
|
9
|
+
|
10
|
+
FLEXBOX
|
11
|
+
|
12
|
+
Media Query Extensions:
|
13
|
+
-ns = not-small
|
14
|
+
-m = medium
|
15
|
+
-l = large
|
16
|
+
|
17
|
+
*/
|
18
|
+
|
19
|
+
.flex { display: flex; }
|
20
|
+
.inline-flex { display: inline-flex; }
|
21
|
+
|
22
|
+
/* 1. Fix for Chrome 44 bug.
|
23
|
+
* https://code.google.com/p/chromium/issues/detail?id=506893 */
|
24
|
+
.flex-auto {
|
25
|
+
flex: 1 1 auto;
|
26
|
+
min-width: 0; /* 1 */
|
27
|
+
min-height: 0; /* 1 */
|
28
|
+
}
|
29
|
+
|
30
|
+
.flex-none { flex: none; }
|
31
|
+
|
32
|
+
.flex-column { flex-direction: column; }
|
33
|
+
.flex-row { flex-direction: row; }
|
34
|
+
.flex-wrap { flex-wrap: wrap; }
|
35
|
+
.flex-nowrap { flex-wrap: nowrap; }
|
36
|
+
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
37
|
+
.flex-column-reverse { flex-direction: column-reverse; }
|
38
|
+
.flex-row-reverse { flex-direction: row-reverse; }
|
39
|
+
|
40
|
+
.items-start { align-items: flex-start; }
|
41
|
+
.items-end { align-items: flex-end; }
|
42
|
+
.items-center { align-items: center; }
|
43
|
+
.items-baseline { align-items: baseline; }
|
44
|
+
.items-stretch { align-items: stretch; }
|
45
|
+
|
46
|
+
.self-start { align-self: flex-start; }
|
47
|
+
.self-end { align-self: flex-end; }
|
48
|
+
.self-center { align-self: center; }
|
49
|
+
.self-baseline { align-self: baseline; }
|
50
|
+
.self-stretch { align-self: stretch; }
|
51
|
+
|
52
|
+
.justify-start { justify-content: flex-start; }
|
53
|
+
.justify-end { justify-content: flex-end; }
|
54
|
+
.justify-center { justify-content: center; }
|
55
|
+
.justify-between { justify-content: space-between; }
|
56
|
+
.justify-around { justify-content: space-around; }
|
57
|
+
|
58
|
+
.content-start { align-content: flex-start; }
|
59
|
+
.content-end { align-content: flex-end; }
|
60
|
+
.content-center { align-content: center; }
|
61
|
+
.content-between { align-content: space-between; }
|
62
|
+
.content-around { align-content: space-around; }
|
63
|
+
.content-stretch { align-content: stretch; }
|
64
|
+
|
65
|
+
.order-0 { order: 0; }
|
66
|
+
.order-1 { order: 1; }
|
67
|
+
.order-2 { order: 2; }
|
68
|
+
.order-3 { order: 3; }
|
69
|
+
.order-4 { order: 4; }
|
70
|
+
.order-5 { order: 5; }
|
71
|
+
.order-6 { order: 6; }
|
72
|
+
.order-7 { order: 7; }
|
73
|
+
.order-8 { order: 8; }
|
74
|
+
.order-last { order: 99999; }
|
75
|
+
|
76
|
+
.flex-grow-0 { flex-grow: 0; }
|
77
|
+
.flex-grow-1 { flex-grow: 1; }
|
78
|
+
|
79
|
+
.flex-shrink-0 { flex-shrink: 0; }
|
80
|
+
.flex-shrink-1 { flex-shrink: 1; }
|
81
|
+
|
82
|
+
@media #{$breakpoint-not-small} {
|
83
|
+
.flex-ns { display: flex; }
|
84
|
+
.inline-flex-ns { display: inline-flex; }
|
85
|
+
.flex-auto-ns {
|
86
|
+
flex: 1 1 auto;
|
87
|
+
min-width: 0; /* 1 */
|
88
|
+
min-height: 0; /* 1 */
|
89
|
+
}
|
90
|
+
.flex-none-ns { flex: none; }
|
91
|
+
.flex-column-ns { flex-direction: column; }
|
92
|
+
.flex-row-ns { flex-direction: row; }
|
93
|
+
.flex-wrap-ns { flex-wrap: wrap; }
|
94
|
+
.flex-nowrap-ns { flex-wrap: nowrap; }
|
95
|
+
.flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
|
96
|
+
.flex-column-reverse-ns { flex-direction: column-reverse; }
|
97
|
+
.flex-row-reverse-ns { flex-direction: row-reverse; }
|
98
|
+
.items-start-ns { align-items: flex-start; }
|
99
|
+
.items-end-ns { align-items: flex-end; }
|
100
|
+
.items-center-ns { align-items: center; }
|
101
|
+
.items-baseline-ns { align-items: baseline; }
|
102
|
+
.items-stretch-ns { align-items: stretch; }
|
103
|
+
|
104
|
+
.self-start-ns { align-self: flex-start; }
|
105
|
+
.self-end-ns { align-self: flex-end; }
|
106
|
+
.self-center-ns { align-self: center; }
|
107
|
+
.self-baseline-ns { align-self: baseline; }
|
108
|
+
.self-stretch-ns { align-self: stretch; }
|
109
|
+
|
110
|
+
.justify-start-ns { justify-content: flex-start; }
|
111
|
+
.justify-end-ns { justify-content: flex-end; }
|
112
|
+
.justify-center-ns { justify-content: center; }
|
113
|
+
.justify-between-ns { justify-content: space-between; }
|
114
|
+
.justify-around-ns { justify-content: space-around; }
|
115
|
+
|
116
|
+
.content-start-ns { align-content: flex-start; }
|
117
|
+
.content-end-ns { align-content: flex-end; }
|
118
|
+
.content-center-ns { align-content: center; }
|
119
|
+
.content-between-ns { align-content: space-between; }
|
120
|
+
.content-around-ns { align-content: space-around; }
|
121
|
+
.content-stretch-ns { align-content: stretch; }
|
122
|
+
|
123
|
+
.order-0-ns { order: 0; }
|
124
|
+
.order-1-ns { order: 1; }
|
125
|
+
.order-2-ns { order: 2; }
|
126
|
+
.order-3-ns { order: 3; }
|
127
|
+
.order-4-ns { order: 4; }
|
128
|
+
.order-5-ns { order: 5; }
|
129
|
+
.order-6-ns { order: 6; }
|
130
|
+
.order-7-ns { order: 7; }
|
131
|
+
.order-8-ns { order: 8; }
|
132
|
+
.order-last-ns { order: 99999; }
|
133
|
+
|
134
|
+
.flex-grow-0-ns { flex-grow: 0; }
|
135
|
+
.flex-grow-1-ns { flex-grow: 1; }
|
136
|
+
|
137
|
+
.flex-shrink-0-ns { flex-shrink: 0; }
|
138
|
+
.flex-shrink-1-ns { flex-shrink: 1; }
|
139
|
+
}
|
140
|
+
@media #{$breakpoint-medium} {
|
141
|
+
.flex-m { display: flex; }
|
142
|
+
.inline-flex-m { display: inline-flex; }
|
143
|
+
.flex-auto-m {
|
144
|
+
flex: 1 1 auto;
|
145
|
+
min-width: 0; /* 1 */
|
146
|
+
min-height: 0; /* 1 */
|
147
|
+
}
|
148
|
+
.flex-none-m { flex: none; }
|
149
|
+
.flex-column-m { flex-direction: column; }
|
150
|
+
.flex-row-m { flex-direction: row; }
|
151
|
+
.flex-wrap-m { flex-wrap: wrap; }
|
152
|
+
.flex-nowrap-m { flex-wrap: nowrap; }
|
153
|
+
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
|
154
|
+
.flex-column-reverse-m { flex-direction: column-reverse; }
|
155
|
+
.flex-row-reverse-m { flex-direction: row-reverse; }
|
156
|
+
.items-start-m { align-items: flex-start; }
|
157
|
+
.items-end-m { align-items: flex-end; }
|
158
|
+
.items-center-m { align-items: center; }
|
159
|
+
.items-baseline-m { align-items: baseline; }
|
160
|
+
.items-stretch-m { align-items: stretch; }
|
161
|
+
|
162
|
+
.self-start-m { align-self: flex-start; }
|
163
|
+
.self-end-m { align-self: flex-end; }
|
164
|
+
.self-center-m { align-self: center; }
|
165
|
+
.self-baseline-m { align-self: baseline; }
|
166
|
+
.self-stretch-m { align-self: stretch; }
|
167
|
+
|
168
|
+
.justify-start-m { justify-content: flex-start; }
|
169
|
+
.justify-end-m { justify-content: flex-end; }
|
170
|
+
.justify-center-m { justify-content: center; }
|
171
|
+
.justify-between-m { justify-content: space-between; }
|
172
|
+
.justify-around-m { justify-content: space-around; }
|
173
|
+
|
174
|
+
.content-start-m { align-content: flex-start; }
|
175
|
+
.content-end-m { align-content: flex-end; }
|
176
|
+
.content-center-m { align-content: center; }
|
177
|
+
.content-between-m { align-content: space-between; }
|
178
|
+
.content-around-m { align-content: space-around; }
|
179
|
+
.content-stretch-m { align-content: stretch; }
|
180
|
+
|
181
|
+
.order-0-m { order: 0; }
|
182
|
+
.order-1-m { order: 1; }
|
183
|
+
.order-2-m { order: 2; }
|
184
|
+
.order-3-m { order: 3; }
|
185
|
+
.order-4-m { order: 4; }
|
186
|
+
.order-5-m { order: 5; }
|
187
|
+
.order-6-m { order: 6; }
|
188
|
+
.order-7-m { order: 7; }
|
189
|
+
.order-8-m { order: 8; }
|
190
|
+
.order-last-m { order: 99999; }
|
191
|
+
|
192
|
+
.flex-grow-0-m { flex-grow: 0; }
|
193
|
+
.flex-grow-1-m { flex-grow: 1; }
|
194
|
+
|
195
|
+
.flex-shrink-0-m { flex-shrink: 0; }
|
196
|
+
.flex-shrink-1-m { flex-shrink: 1; }
|
197
|
+
}
|
198
|
+
|
199
|
+
@media #{$breakpoint-large} {
|
200
|
+
.flex-l { display: flex; }
|
201
|
+
.inline-flex-l { display: inline-flex; }
|
202
|
+
.flex-auto-l {
|
203
|
+
flex: 1 1 auto;
|
204
|
+
min-width: 0; /* 1 */
|
205
|
+
min-height: 0; /* 1 */
|
206
|
+
}
|
207
|
+
.flex-none-l { flex: none; }
|
208
|
+
.flex-column-l { flex-direction: column; }
|
209
|
+
.flex-row-l { flex-direction: row; }
|
210
|
+
.flex-wrap-l { flex-wrap: wrap; }
|
211
|
+
.flex-nowrap-l { flex-wrap: nowrap; }
|
212
|
+
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
|
213
|
+
.flex-column-reverse-l { flex-direction: column-reverse; }
|
214
|
+
.flex-row-reverse-l { flex-direction: row-reverse; }
|
215
|
+
|
216
|
+
.items-start-l { align-items: flex-start; }
|
217
|
+
.items-end-l { align-items: flex-end; }
|
218
|
+
.items-center-l { align-items: center; }
|
219
|
+
.items-baseline-l { align-items: baseline; }
|
220
|
+
.items-stretch-l { align-items: stretch; }
|
221
|
+
|
222
|
+
.self-start-l { align-self: flex-start; }
|
223
|
+
.self-end-l { align-self: flex-end; }
|
224
|
+
.self-center-l { align-self: center; }
|
225
|
+
.self-baseline-l { align-self: baseline; }
|
226
|
+
.self-stretch-l { align-self: stretch; }
|
227
|
+
|
228
|
+
.justify-start-l { justify-content: flex-start; }
|
229
|
+
.justify-end-l { justify-content: flex-end; }
|
230
|
+
.justify-center-l { justify-content: center; }
|
231
|
+
.justify-between-l { justify-content: space-between; }
|
232
|
+
.justify-around-l { justify-content: space-around; }
|
233
|
+
|
234
|
+
.content-start-l { align-content: flex-start; }
|
235
|
+
.content-end-l { align-content: flex-end; }
|
236
|
+
.content-center-l { align-content: center; }
|
237
|
+
.content-between-l { align-content: space-between; }
|
238
|
+
.content-around-l { align-content: space-around; }
|
239
|
+
.content-stretch-l { align-content: stretch; }
|
240
|
+
|
241
|
+
.order-0-l { order: 0; }
|
242
|
+
.order-1-l { order: 1; }
|
243
|
+
.order-2-l { order: 2; }
|
244
|
+
.order-3-l { order: 3; }
|
245
|
+
.order-4-l { order: 4; }
|
246
|
+
.order-5-l { order: 5; }
|
247
|
+
.order-6-l { order: 6; }
|
248
|
+
.order-7-l { order: 7; }
|
249
|
+
.order-8-l { order: 8; }
|
250
|
+
.order-last-l { order: 99999; }
|
251
|
+
|
252
|
+
.flex-grow-0-l { flex-grow: 0; }
|
253
|
+
.flex-grow-1-l { flex-grow: 1; }
|
254
|
+
|
255
|
+
.flex-shrink-0-l { flex-shrink: 0; }
|
256
|
+
.flex-shrink-1-l { flex-shrink: 1; }
|
257
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/*
|
9
|
+
|
10
|
+
FLOATS
|
11
|
+
http://tachyons.io/docs/layout/floats/
|
12
|
+
|
13
|
+
1. Floated elements are automatically rendered as block level elements.
|
14
|
+
Setting floats to display inline will fix the double margin bug in
|
15
|
+
ie6. You know... just in case.
|
16
|
+
|
17
|
+
2. Don't forget to clearfix your floats with .cf
|
18
|
+
|
19
|
+
Base:
|
20
|
+
f = float
|
21
|
+
|
22
|
+
Modifiers:
|
23
|
+
l = left
|
24
|
+
r = right
|
25
|
+
n = none
|
26
|
+
|
27
|
+
Media Query Extensions:
|
28
|
+
-ns = not-small
|
29
|
+
-m = medium
|
30
|
+
-l = large
|
31
|
+
|
32
|
+
*/
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
.fl { float: left; _display: inline; }
|
37
|
+
.fr { float: right; _display: inline; }
|
38
|
+
.fn { float: none; }
|
39
|
+
|
40
|
+
@media #{$breakpoint-not-small} {
|
41
|
+
.fl-ns { float: left; _display: inline; }
|
42
|
+
.fr-ns { float: right; _display: inline; }
|
43
|
+
.fn-ns { float: none; }
|
44
|
+
}
|
45
|
+
|
46
|
+
@media #{$breakpoint-medium} {
|
47
|
+
.fl-m { float: left; _display: inline; }
|
48
|
+
.fr-m { float: right; _display: inline; }
|
49
|
+
.fn-m { float: none; }
|
50
|
+
}
|
51
|
+
|
52
|
+
@media #{$breakpoint-large} {
|
53
|
+
.fl-l { float: left; _display: inline; }
|
54
|
+
.fr-l { float: right; _display: inline; }
|
55
|
+
.fn-l { float: none; }
|
56
|
+
}
|
@@ -0,0 +1,99 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/*
|
9
|
+
|
10
|
+
FONT FAMILY GROUPS
|
11
|
+
Docs: http://tachyons.io/docs/typography/font-family/
|
12
|
+
|
13
|
+
*/
|
14
|
+
|
15
|
+
|
16
|
+
.sans-serif {
|
17
|
+
font-family: $sans-serif;
|
18
|
+
}
|
19
|
+
|
20
|
+
.serif {
|
21
|
+
font-family: $serif;
|
22
|
+
}
|
23
|
+
|
24
|
+
.system-sans-serif {
|
25
|
+
font-family: sans-serif;
|
26
|
+
}
|
27
|
+
|
28
|
+
.system-serif {
|
29
|
+
font-family: serif;
|
30
|
+
}
|
31
|
+
|
32
|
+
|
33
|
+
/* Monospaced Typefaces (for code) */
|
34
|
+
|
35
|
+
/* From http://cssfontstack.com */
|
36
|
+
code, .code {
|
37
|
+
font-family: Consolas,
|
38
|
+
monaco,
|
39
|
+
monospace;
|
40
|
+
}
|
41
|
+
|
42
|
+
.courier {
|
43
|
+
font-family: 'Courier Next',
|
44
|
+
courier,
|
45
|
+
monospace;
|
46
|
+
}
|
47
|
+
|
48
|
+
|
49
|
+
/* Sans-Serif Typefaces */
|
50
|
+
|
51
|
+
.helvetica {
|
52
|
+
font-family: 'helvetica neue', helvetica,
|
53
|
+
sans-serif;
|
54
|
+
}
|
55
|
+
|
56
|
+
.avenir {
|
57
|
+
font-family: 'avenir next', avenir,
|
58
|
+
sans-serif;
|
59
|
+
}
|
60
|
+
|
61
|
+
|
62
|
+
/* Serif Typefaces */
|
63
|
+
|
64
|
+
.athelas {
|
65
|
+
font-family: athelas,
|
66
|
+
georgia,
|
67
|
+
serif;
|
68
|
+
}
|
69
|
+
|
70
|
+
.georgia {
|
71
|
+
font-family: georgia,
|
72
|
+
serif;
|
73
|
+
}
|
74
|
+
|
75
|
+
.times {
|
76
|
+
font-family: times,
|
77
|
+
serif;
|
78
|
+
}
|
79
|
+
|
80
|
+
.bodoni {
|
81
|
+
font-family: "Bodoni MT",
|
82
|
+
serif;
|
83
|
+
}
|
84
|
+
|
85
|
+
.calisto {
|
86
|
+
font-family: "Calisto MT",
|
87
|
+
serif;
|
88
|
+
}
|
89
|
+
|
90
|
+
.garamond {
|
91
|
+
font-family: garamond,
|
92
|
+
serif;
|
93
|
+
}
|
94
|
+
|
95
|
+
.baskerville {
|
96
|
+
font-family: baskerville,
|
97
|
+
serif;
|
98
|
+
}
|
99
|
+
|
@@ -0,0 +1,36 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/*
|
9
|
+
|
10
|
+
FONT STYLE
|
11
|
+
Docs: http://tachyons.io/docs/typography/font-style/
|
12
|
+
|
13
|
+
Media Query Extensions:
|
14
|
+
-ns = not-small
|
15
|
+
-m = medium
|
16
|
+
-l = large
|
17
|
+
|
18
|
+
*/
|
19
|
+
|
20
|
+
.i { font-style: italic; }
|
21
|
+
.fs-normal { font-style: normal; }
|
22
|
+
|
23
|
+
@media #{$breakpoint-not-small} {
|
24
|
+
.i-ns { font-style: italic; }
|
25
|
+
.fs-normal-ns { font-style: normal; }
|
26
|
+
}
|
27
|
+
|
28
|
+
@media #{$breakpoint-medium} {
|
29
|
+
.i-m { font-style: italic; }
|
30
|
+
.fs-normal-m { font-style: normal; }
|
31
|
+
}
|
32
|
+
|
33
|
+
@media #{$breakpoint-large} {
|
34
|
+
.i-l { font-style: italic; }
|
35
|
+
.fs-normal-l { font-style: normal; }
|
36
|
+
}
|