Skip to content

Commit e0e02a4

Browse files
author
mrmrs
committed
Add new css
1 parent b0888e4 commit e0e02a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+505
-118
lines changed

‎src/css/_background-position.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/*
2+
3+
BACKGROUND POSITION
4+
5+
Base:
6+
bg = background
7+
8+
Modifiers:
9+
-center = center center
10+
-top = top center
11+
-right = center right
12+
-bottom = bottom center
13+
-left = center left
14+
15+
Media Query Extensions:
16+
-ns = not-small
17+
-m = medium
18+
-l = large
19+
20+
*/
21+
22+
.bg-center {
23+
background-repeat: no-repeat;
24+
background-position: center center;
25+
}
26+
27+
.bg-top {
28+
background-repeat: no-repeat;
29+
background-position: top center;
30+
}
31+
32+
.bg-right {
33+
background-repeat: no-repeat;
34+
background-position: center right;
35+
}
36+
37+
.bg-bottom {
38+
background-repeat: no-repeat;
39+
background-position: bottom center;
40+
}
41+
42+
.bg-left {
43+
background-repeat: no-repeat;
44+
background-position: center left;
45+
}
46+
47+
@media (--breakpoint-not-small) {
48+
.bg-center-ns {
49+
background-repeat: no-repeat;
50+
background-position: center center;
51+
}
52+
53+
.bg-top-ns {
54+
background-repeat: no-repeat;
55+
background-position: top center;
56+
}
57+
58+
.bg-right-ns {
59+
background-repeat: no-repeat;
60+
background-position: center right;
61+
}
62+
63+
.bg-bottom-ns {
64+
background-repeat: no-repeat;
65+
background-position: bottom center;
66+
}
67+
68+
.bg-left-ns {
69+
background-repeat: no-repeat;
70+
background-position: center left;
71+
}
72+
}
73+
74+
@media (--breakpoint-medium) {
75+
.bg-center-m {
76+
background-repeat: no-repeat;
77+
background-position: center center;
78+
}
79+
80+
.bg-top-m {
81+
background-repeat: no-repeat;
82+
background-position: top center;
83+
}
84+
85+
.bg-right-m {
86+
background-repeat: no-repeat;
87+
background-position: center right;
88+
}
89+
90+
.bg-bottom-m {
91+
background-repeat: no-repeat;
92+
background-position: bottom center;
93+
}
94+
95+
.bg-left-m {
96+
background-repeat: no-repeat;
97+
background-position: center left;
98+
}
99+
}
100+
101+
@media (--breakpoint-large) {
102+
.bg-center-l {
103+
background-repeat: no-repeat;
104+
background-position: center center;
105+
}
106+
107+
.bg-top-l {
108+
background-repeat: no-repeat;
109+
background-position: top center;
110+
}
111+
112+
.bg-right-l {
113+
background-repeat: no-repeat;
114+
background-position: center right;
115+
}
116+
117+
.bg-bottom-l {
118+
background-repeat: no-repeat;
119+
background-position: bottom center;
120+
}
121+
122+
.bg-left-l {
123+
background-repeat: no-repeat;
124+
background-position: center left;
125+
}
126+
}

‎src/css/_background-size.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BACKGROUND SIZE
4+
Docs: http://tachyons.io/docs/themes/background-size/
45
56
Media Query Extensions:
67
-ns = not-small

‎src/css/_border-colors.css

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BORDER COLORS
4+
Docs: http://tachyons.io/docs/themes/borders/
45
56
Border colors can be used to extend the base
67
border classes ba,bt,bb,br,bl found in the _borders.css file.
@@ -54,28 +55,30 @@
5455
.b--black-025 { border-color: var(--black-025); }
5556
.b--black-0125 { border-color: var(--black-0125); }
5657

57-
.b--dark-red { border-color: var(--dark-red); }
58-
.b--red { border-color: var(--red); }
59-
.b--orange { border-color: var(--orange); }
60-
.b--gold { border-color: var(--gold); }
61-
.b--yellow { border-color: var(--yellow); }
62-
.b--purple { border-color: var(--purple); }
63-
.b--light-purple { border-color: var(--light-purple); }
64-
.b--hot-pink { border-color: var(--hot-pink); }
65-
.b--dark-pink { border-color: var(--dark-pink); }
66-
.b--pink { border-color: var(--pink); }
67-
.b--dark-green { border-color: var(--dark-green); }
68-
.b--green { border-color: var(--green); }
69-
.b--navy { border-color: var(--navy); }
70-
.b--dark-blue { border-color: var(--dark-blue); }
71-
.b--blue { border-color: var(--blue); }
72-
.b--light-blue { border-color: var(--light-blue); }
73-
.b--lightest-blue { border-color: var(--lightest-blue); }
74-
.b--washed-blue { border-color: var(--washed-blue); }
75-
.b--washed-green { border-color: var(--washed-green); }
76-
.b--washed-yellow { border-color: var(--washed-yellow); }
77-
.b--light-pink { border-color: var(--light-pink); }
78-
.b--light-yellow { border-color: var(--light-yellow) }
79-
.b--light-red { border-color: var(--light-red); }
58+
.b--dark-red { border-color: var(--dark-red); }
59+
.b--red { border-color: var(--red); }
60+
.b--light-red { border-color: var(--light-red); }
61+
.b--orange { border-color: var(--orange); }
62+
.b--gold { border-color: var(--gold); }
63+
.b--yellow { border-color: var(--yellow); }
64+
.b--light-yellow { border-color: var(--light-yellow); }
65+
.b--purple { border-color: var(--purple); }
66+
.b--light-purple { border-color: var(--light-purple); }
67+
.b--dark-pink { border-color: var(--dark-pink); }
68+
.b--hot-pink { border-color: var(--hot-pink); }
69+
.b--pink { border-color: var(--pink); }
70+
.b--light-pink { border-color: var(--light-pink); }
71+
.b--dark-green { border-color: var(--dark-green); }
72+
.b--green { border-color: var(--green); }
73+
.b--light-green { border-color: var(--light-green); }
74+
.b--navy { border-color: var(--navy); }
75+
.b--dark-blue { border-color: var(--dark-blue); }
76+
.b--blue { border-color: var(--blue); }
77+
.b--light-blue { border-color: var(--light-blue); }
78+
.b--lightest-blue { border-color: var(--lightest-blue); }
79+
.b--washed-blue { border-color: var(--washed-blue); }
80+
.b--washed-green { border-color: var(--washed-green); }
81+
.b--washed-yellow { border-color: var(--washed-yellow); }
82+
.b--washed-red { border-color: var(--washed-red); }
8083

8184
.b--transparent { border-color: var(--transparent); }

‎src/css/_border-radius.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BORDER RADIUS
4+
Docs: http://tachyons.io/docs/themes/border-radius/
45
56
Base:
67
br = border-radius

‎src/css/_border-style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BORDER STYLES
4+
Docs: http://tachyons.io/docs/themes/borders/
45
56
Depends on base border module in _borders.css
67

‎src/css/_border-widths.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BORDER WIDTHS
4+
Docs: http://tachyons.io/docs/themes/borders/
45
56
Base:
67
bw = border-width

‎src/css/_borders.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BORDERS
4+
Docs: http://tachyons.io/docs/themes/borders/
45
56
Base:
67
b = border

‎src/css/_box-shadow.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
BOX-SHADOW
4+
Docs: http://tachyons.io/docs/themes/box-shadow/
45
56
Media Query Extensions:
67
-ns = not-small

‎src/css/_box-sizing.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/*
2-
Box Sizing
2+
3+
BOX SIZING
4+
35
*/
46

57
html,

‎src/css/_clears.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
CLEARFIX
4+
http://tachyons.io/docs/layout/clearfix/
45
56
*/
67

‎src/css/_colors.css

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,28 +51,30 @@
5151
--white-025: rgba(255,255,255,.025);
5252
--white-0125: rgba(255,255,255,.0125);
5353

54-
--dark-red: #f00008;
55-
--red: #ff3223;
56-
--orange: #f3a801;
57-
--gold: #f2c800;
58-
--yellow: #ffde37;
59-
--purple: #7d5da9;
60-
--light-purple: #8d4f92;
61-
--hot-pink: #d62288;
62-
--dark-pink: #c64774;
63-
--pink: #f49cc8;
64-
--dark-green: #006C71;
65-
--green: #41D69F;
54+
--dark-red: #e7040f;
55+
--red: #ff4136;
56+
--light-red: #ff725c;
57+
--orange: #ff6300;
58+
--gold: #ffb700;
59+
--yellow: #ffd700;
60+
--light-yellow: #fbf1a9;
61+
--purple: #5e2ca5;
62+
--light-purple: #a463f2;
63+
--dark-pink: #d5008f;
64+
--hot-pink: #ff41b4;
65+
--pink: #ff80cc;
66+
--light-pink: #ffa3d7;
67+
--dark-green: #137752;
68+
--green: #19a974;
69+
--light-green: #9eebcf;
6670
--navy: #001b44;
6771
--dark-blue: #00449e;
6872
--blue: #357edd;
6973
--light-blue: #96ccff;
7074
--lightest-blue: #cdecff;
7175
--washed-blue: #f6fffe;
7276
--washed-green: #e8fdf5;
73-
--washed-yellow: #fff8d5;
74-
--light-pink: #efa4b8;
75-
--light-yellow: #f3dd70;
76-
--light-red: #ffd3c0;
77+
--washed-yellow: #fffceb;
78+
--washed-red: #ffdfdf;
7779

7880
}

‎src/css/_coordinates.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
COORDINATES
4+
Docs: http://tachyons.io/docs/layout/position/
45
56
Use in combination with the position module.
67

‎src/css/_debug-children.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
DEBUG CHILDREN
4+
Docs: http://tachyons.io/docs/debug/
45
56
Just add the debug class to any element to see outlines on its
67
children.

‎src/css/_debug-grid.css

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/_debug.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
/*
2+
3+
DEBUG (PESTICIDE)
4+
Docs: http://tachyons.io/docs/debug/
5+
6+
This is a partial you have to manually include in your
7+
build file. It places a different colored outline on
8+
each element which can help you debug layout issues.
9+
There is also a handy chrome extension that can
10+
be found at http://pesticide.io
11+
12+
*/
113

214
body { outline: 1px solid #2980B9!important; }
315
article { outline: 1px solid #3498DB!important; }

‎src/css/_display.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
DISPLAY
4+
Docs: http://tachyons.io/docs/layout/display
45
56
Base:
67
d = display

‎src/css/_floats.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
FLOATS
4+
http://tachyons.io/docs/layout/floats/
45
56
1. Floated elements are automatically rendered as block level elements.
67
Setting floats to display inline will fix the double margin bug in

‎src/css/_font-family.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
FONT FAMILY GROUPS
4+
Docs: http://tachyons.io/docs/typography/font-family/
45
56
*/
67

‎src/css/_font-style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
33
FONT STYLE
4+
Docs: http://tachyons.io/docs/typography/font-style/
45
56
Media Query Extensions:
67
-ns = not-small

0 commit comments

Comments
 (0)