Skip to content

Commit 14112e5

Browse files
author
mrmrs
committed
Adding styles.
1 parent 8c8e1a9 commit 14112e5

25 files changed

+1391
-3
lines changed

‎_sass/_animations.scss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* ==========================================================================
2+
ANIMATION UTILITIES
3+
- Animation Directions
4+
5+
========================================================================== */
6+
7+
/* Animation Directions */
8+
9+
.ani-dir-norm { animation-direction: normal; }
10+
.ani-dir-rev { animation-direction: reverse; }
11+
.ani-dir-alt { animation-direction: alternate; }
12+
.ani-dir-alt-rev { animation-direction: alternate-reverse; }
13+
14+
15+
/* Animation Durations TODO: Change scale */
16+
17+
.ani-dur-1 { animation-duration: .4s; }
18+
.ani-dur-2 { animation-duration: .5s; }
19+
.ani-dur-3 { animation-duration: .6s; }
20+
.ani-dur-4 { animation-duration: 1s; }
21+
.ani-dur-5 { animation-duration: 1.5; }
22+
.ani-dur-6 { animation-duration: 10; }
23+
24+
25+
/* Animation Fill Mode TODO: Class names. */
26+
27+
.ani-fil-non { animation-fill-mode: none; }
28+
.ani-fil-frw { animation-fill-mode: forwards; }
29+
.ani-fil-bck { animation-fill-mode: backwards; }
30+
.ani-fil-bth { animation-fill-mode: both; }
31+
32+
33+
/* Animation Count */
34+
35+
.ani-count-1 { animation-iteration-count: 1; }
36+
.ani-count-2 { animation-iteration-count: 2; }
37+
.ani-count-3 { animation-iteration-count: 5; }
38+
.ani-count-4 { animation-iteration-count: 10; }
39+
.ani-count-5 { animation-iteration-count: infinite; }
40+
41+
42+
/* Animation Play State */
43+
44+
.ani-state-run { animation-play-state: running; }
45+
.ani-state-pause { animation-play-state: paused; }
46+
47+
48+
/* Animation Timing */
49+
50+
.ani-tmng-ease { animation-timing-function: ease; }
51+
.ani-tmng-easein { animation-timing-function: ease-in; }
52+
.ani-tmng-easeout { animation-timing-function: ease-out; }
53+
.ani-tmng-easeinout { animation-timing-function: ease-in-out; }
54+
.ani-tmng-linear { animation-timing-function: linear; }
55+
.ani-tmng-bezier { animation-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1); }
56+
.ani-tmng-start { animation-timing-function: step-start; }
57+
.ani-tmng-stop { animation-timing-function: step-stop; }
58+
59+
60+
/* Animation delays */
61+
62+
.ani-delay-1 { animation-delay: .5s; }
63+
.ani-delay-2 { animation-delay: 1s; }
64+
.ani-delay-3 { animation-delay: 2s; }
65+
.ani-delay-4 { animation-delay: 4s; }
66+
.ani-delay-5 { animation-delay: 8s; }
67+
.ani-delay-6 { animation-delay: 16s; }
68+

‎_sass/_backgrounds.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* ==========================================================================
2+
BACKGROUNDS
3+
========================================================================== */
4+
5+
6+
.bg-cov { background-size: cover; }
7+
.bg-con { background-size: contain; }
8+
9+
10+
/* 1st value defines background width, height is implicitly set to auto */
11+
12+
.bg-half { background-size: 50%; }
13+
.bg-size4 { background-size: 4rem; }
14+
.bg-auto { background-size: auto; }
15+
16+
/* Repeats */
17+
18+
.bg-x { background-repeat: repeat-x; }
19+
.bg-y { background-repeat: repeat-y; }
20+
.bg-repeat { background-repeat: repeat; }
21+
.bg-space { background-repeat: space; }
22+
.bg-round { background-repeat: round; }
23+
.bg-norepeat { background-repeat: no-repeat; }
24+
25+
26+
/* Background Clip */
27+
28+
.bg-clip-bb { background-clip: border-box; }
29+
.bg-clip-pb { background-clip: padding-box; }
30+
.bg-clip-cb { background-clip: content-box; }

‎_sass/_borders.scss

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* ==========================================================================
2+
BORDERS
3+
========================================================================== */
4+
5+
6+
/* Border base */
7+
8+
.bor { border-style: solid; border-width: 1px; }
9+
10+
11+
.bw-1 { border-width: 1px; }
12+
.bw-2 { border-width: 2px; }
13+
.bw-3 { border-width: 4px; }
14+
.bw-4 { border-width: 8px; }
15+
.bw-5 { border-width: 16px; }
16+
17+
18+
/* Border extensions */
19+
20+
.bor--blk { border-color: $near-black; }
21+
.bor--dk-gry { border-color: $dark-gray; }
22+
.bor--md-gry { border-color: $mid-gray; }
23+
.bor--gray { border-color: $gray; }
24+
.bor--silver { border-color: $silver; }
25+
.bor--lt-slvr { border-color: $light-silver; }
26+
.bor--lt-gry { border-color: $light-gray; }
27+
.bor--near-wht { border-color: $near-white; }
28+
.bor--wht { border-color: $white; }
29+
30+
31+
/* Border Radius */
32+
33+
.br { border-radius: 4px; }
34+
.br-circ { border-radius: 9999px; }
35+
.br-100 { border-radius: 100%; }
36+
37+
38+
/* Styles */
39+
40+
.b-none { border-style: none; }
41+
.b-hidden { border-style: hidden; }
42+
.b-dotted { border-style: dotted; }
43+
.b-dashed { border-style: dashed; }
44+
.b-solid { border-style: solid; }
45+
.b-double { border-style: double; }
46+
.b-groove { border-style: groove; }
47+
.b-ridge { border-style: ridge; }
48+
.b-inset { border-style: inset; }
49+
.b-outset { border-style: outset; }
50+
51+
.bt-none { border-top-style: none; }
52+
.bt-hidden { border-top-style: hidden; }
53+
.bt-dotted { border-top-style: dotted; }
54+
.bt-dashed { border-top-style: dashed; }
55+
.bt-solid { border-top-style: solid; }
56+
.bt-double { border-top-style: double; }
57+
.bt-groove { border-top-style: groove; }
58+
.bt-ridge { border-top-style: ridge; }
59+
.bt-inset { border-top-style: inset; }
60+
.bt-outset { border-top-style: outset; }
61+
62+
.bb-none { border-bottom-style: none; }
63+
.bb-hidden { border-bottom-style: hidden; }
64+
.bb-dotted { border-bottom-style: dotted; }
65+
.bb-dashed { border-bottom-style: dashed; }
66+
.bb-solid { border-bottom-style: solid; }
67+
.bb-double { border-bottom-style: double; }
68+
.bb-groove { border-bottom-style: groove; }
69+
.bb-ridge { border-bottom-style: ridge; }
70+
.bb-inset { border-bottom-style: inset; }
71+
.bb-outset { border-bottom-style: outset; }
72+
73+
.bl-none { border-left-style: none; }
74+
.bl-hidden { border-left-style: hidden; }
75+
.bl-dotted { border-left-style: dotted; }
76+
.bl-dashed { border-left-style: dashed; }
77+
.bl-solid { border-left-style: solid; }
78+
.bl-double { border-left-style: double; }
79+
.bl-groove { border-left-style: groove; }
80+
.bl-ridge { border-left-style: ridge; }
81+
.bl-inset { border-left-style: inset; }
82+
.bl-outset { border-left-style: outset; }
83+
84+
.br-none { border-right-style: none; }
85+
.br-hidden { border-right-style: hidden; }
86+
.br-dotted { border-right-style: dotted; }
87+
.br-dashed { border-right-style: dashed; }
88+
.br-solid { border-right-style: solid; }
89+
.br-double { border-right-style: double; }
90+
.br-groove { border-right-style: groove; }
91+
.br-ridge { border-right-style: ridge; }
92+
.br-inset { border-right-style: inset; }
93+
.br-outset { border-right-style: outset; }
94+
95+
96+
/* Border Widths */
97+
98+
.bw-1 { border-width: 1px; }
99+
.bw-2 { border-width: 2px; }
100+
.bw-3 { border-width: 4px; }
101+
.bw-4 { border-width: 8px; }
102+
.bw-5 { border-width: 16px; }
103+
104+
.blw-1 { border-left-width: 1px; }
105+
.blw-2 { border-left-width: 2px; }
106+
.blw-3 { border-left-width: 4px; }
107+
.blw-4 { border-left-width: 8px; }
108+
.blw-5 { border-left-width: 16px; }
109+
110+
.brw-1 { border-right-width: 1px; }
111+
.brw-2 { border-right-width: 2px; }
112+
.brw-3 { border-right-width: 4px; }
113+
.brw-4 { border-right-width: 8px; }
114+
.brw-5 { border-right-width: 16px; }
115+
116+
.bbw-1 { border-bottom-width: 1px; }
117+
.bbw-2 { border-bottom-width: 2px; }
118+
.bbw-3 { border-bottom-width: 4px; }
119+
.bbw-4 { border-bottom-width: 8px; }
120+
.bbw-5 { border-bottom-width: 16px; }
121+
122+
.btw-1 { border-top-width: 1px; }
123+
.btw-2 { border-top-width: 2px; }
124+
.btw-3 { border-top-width: 4px; }
125+
.btw-4 { border-top-width: 8px; }
126+
.btw-5 { border-top-width: 16px; }

‎_sass/_clears.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* ==========================================================================
2+
CLEARS
3+
========================================================================== */
4+
5+
.cn { clear: none; }
6+
.cl { clear: left; }
7+
.cr { clear: right; }
8+
.cb { clear: both; }

0 commit comments

Comments
 (0)