1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | .dim {
|
22 | opacity: 1;
|
23 | transition: opacity .15s ease-in;
|
24 | }
|
25 | .dim:hover,
|
26 | .dim:focus {
|
27 | opacity: .5;
|
28 | transition: opacity .15s ease-in;
|
29 | }
|
30 | .dim:active {
|
31 | opacity: .8; transition: opacity .15s ease-out;
|
32 | }
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | .glow {
|
40 | transition: opacity .15s ease-in;
|
41 | }
|
42 | .glow:hover,
|
43 | .glow:focus {
|
44 | opacity: 1;
|
45 | transition: opacity .15s ease-in;
|
46 | }
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | .hide-child .child {
|
64 | opacity: 0;
|
65 | transition: opacity .15s ease-in;
|
66 | }
|
67 | .hide-child:hover .child,
|
68 | .hide-child:focus .child,
|
69 | .hide-child:active .child {
|
70 | opacity: 1;
|
71 | transition: opacity .15s ease-in;
|
72 | }
|
73 |
|
74 | .underline-hover:hover,
|
75 | .underline-hover:focus {
|
76 | text-decoration: underline;
|
77 | }
|
78 |
|
79 |
|
80 |
|
81 |
|
82 | .grow {
|
83 | -moz-osx-font-smoothing: grayscale;
|
84 | backface-visibility: hidden;
|
85 | transform: translateZ(0);
|
86 | transition: transform 0.25s ease-out;
|
87 | }
|
88 |
|
89 | .grow:hover,
|
90 | .grow:focus {
|
91 | transform: scale(1.05);
|
92 | }
|
93 |
|
94 | .grow:active {
|
95 | transform: scale(.90);
|
96 | }
|
97 |
|
98 | .grow-large {
|
99 | -moz-osx-font-smoothing: grayscale;
|
100 | backface-visibility: hidden;
|
101 | transform: translateZ(0);
|
102 | transition: transform .25s ease-in-out;
|
103 | }
|
104 |
|
105 | .grow-large:hover,
|
106 | .grow-large:focus {
|
107 | transform: scale(1.2);
|
108 | }
|
109 |
|
110 | .grow-large:active {
|
111 | transform: scale(.95);
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 | .pointer:hover {
|
117 | cursor: pointer;
|
118 | }
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 | .shadow-hover {
|
128 | cursor: pointer;
|
129 | position: relative;
|
130 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
|
131 | }
|
132 |
|
133 | .shadow-hover::after {
|
134 | content: '';
|
135 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
|
136 | border-radius: inherit;
|
137 | opacity: 0;
|
138 | position: absolute;
|
139 | top: 0;
|
140 | left: 0;
|
141 | width: 100%;
|
142 | height: 100%;
|
143 | z-index: -1;
|
144 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
|
145 | }
|
146 |
|
147 | .shadow-hover:hover::after,
|
148 | .shadow-hover:focus::after {
|
149 | opacity: 1;
|
150 | }
|
151 |
|
152 |
|
153 |
|
154 |
|
155 | .bg-animate,
|
156 | .bg-animate:hover,
|
157 | .bg-animate:focus {
|
158 | transition: background-color .15s ease-in-out;
|
159 | }
|