1 |
|
2 | /**
|
3 | * Categorizing CSS Rules
|
4 | * ----------------------
|
5 | *
|
6 | * 1. Base rules are almost exclusively single element selectors.
|
7 | * 2. Layout rules divide the page into sections.
|
8 | * Layouts hold one or more modules together.
|
9 | * 3. Modules are the reusable, modular parts of our design.
|
10 | * They are the callouts, the sidebar sections, the product lists and so on.
|
11 | * 4. State rules are ways to describe how our modules or layouts will look when in a particular state.
|
12 | * Is it hidden or expanded? Is it active or inactive?
|
13 | * They are about describing how a module or layout looks on screens that are smaller or bigger.
|
14 | * They are also about describing how a module might look in different views like the home page or the inside page.
|
15 | * 5. Theme rules are similar to state rules in that they describe how modules or layouts might look.
|
16 | * Most sites don’t require a layer of theming but it is good to be aware of it.
|
17 | * Theme rules describe how modules or layouts might look.
|
18 | * Without theme site must work but look more like a wireframe.
|
19 | *
|
20 | * @see http://smacss.com/book/categorizing
|
21 | */
|
22 |
|
23 | @import url("../css/base.css"); /* 1 */
|
24 | @import url("../css/grid.css"); /* 3 */
|
25 | @import url("../css/grid-golden.css"); /* 3 */
|
26 | @import url("../css/spacing-4.css"); /* 3 */
|
27 | @import url("../css/media.css"); /* 3 */
|
28 | @import url("css/layout.css"); /* 2 */
|
29 | @import url("css/state.css"); /* 4 */
|
30 | @import url("css/theme/blue.css"); /* 5 */
|
31 |
|
32 | /*** ie8 ***/
|
33 | .ie8 {}
|
34 | /*/
|
35 | .no-ie8{}
|
36 | /**/
|
37 |
|
38 | /*
|
39 | @font-face {
|
40 | font-family: '<font-family>';
|
41 | src: url('<font-file>.eot?#iefix') format('embedded-opentype');
|
42 | src: local('<font-family>'), url('<font-file>.ttf') format('truetype'), url('<font-file>.woff') format('woff'), url('<font-file>') format('svg');
|
43 | }
|
44 | @font-face {
|
45 | font-family: '<font-family>';
|
46 | src: url('<font-file>.ttf') format('truetype'), url('<font-file>.woff') format('woff'), url('<font-file>') format('svg');
|
47 | }
|
48 |
|
49 | @font-face {
|
50 | font-family: "Bitstream Vera Serif Bold";
|
51 | src: url("/files/2468/VeraSeBd.ttf");
|
52 | }
|
53 |
|
54 | left-pitch-right
|
55 | forward-roll-back
|
56 | up-yaw-down
|
57 | */
|
58 |
|
59 | .fromLeft { animation: .5s ease both fromLeft; }
|
60 | .fromRight { animation: .5s ease both fromRight; }
|
61 | .fromUp { animation: .5s ease both fromUp; }
|
62 | .fromDown { animation: .5s ease both fromDown; }
|
63 | .fromBack { animation: .5s ease both fromBack; }
|
64 | .fromForward { animation: .5s ease both fromForward; }
|
65 |
|
66 | .toLeft { pointer-events: none; animation: .3s ease both toLeft; }
|
67 | .toRight { pointer-events: none; animation: .3s ease both toRight; }
|
68 | .toUp { pointer-events: none; animation: .3s ease both toUp; }
|
69 | .toDown { pointer-events: none; animation: .3s ease both toDown; }
|
70 | .toBack { pointer-events: none; animation: .3s ease both toBack; }
|
71 | .toForward { pointer-events: none; animation: .3s ease both toForward; }
|
72 |
|
73 | @keyframes fromLeft { from { transform: translateX(-100%); } }
|
74 | @keyframes toLeft { to { transform: translateX(-100%); opacity: 0; } }
|
75 | @keyframes fromRight { from { transform: translateX(100%); } }
|
76 | @keyframes toRight { to { transform: translateX(100%); opacity: 0; } }
|
77 | @keyframes fromUp { from { transform: translateY(-100%); } }
|
78 | @keyframes toUp { to { transform: translateY(-100%); opacity: 0; } }
|
79 | @keyframes fromDown { from { transform: translateY(100%); } }
|
80 | @keyframes toDown { to { transform: translateY(100%); opacity: 0; } }
|
81 | @keyframes fromBack { from { transform: scale(.4); opacity: 0; } }
|
82 | @keyframes toBack { to { transform: scale(.4); opacity: 0; } }
|
83 | @keyframes fromForward { from { transform: scale(2); opacity: 0; } }
|
84 | @keyframes toForward { to { transform: scale(2); opacity: 0; } }
|
85 |
|
86 |
|