1 | /**
|
2 | * Copyright 2015 Google Inc. All Rights Reserved.
|
3 | *
|
4 | * Licensed under the Apache License, Version 2.0 (the "License");
|
5 | * you may not use this file except in compliance with the License.
|
6 | * You may obtain a copy of the License at
|
7 | *
|
8 | * http://www.apache.org/licenses/LICENSE-2.0
|
9 | *
|
10 | * Unless required by applicable law or agreed to in writing, software
|
11 | * distributed under the License is distributed on an "AS IS" BASIS,
|
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | * See the License for the specific language governing permissions and
|
14 | * limitations under the License.
|
15 | */
|
16 |
|
17 | @import "../variables";
|
18 |
|
19 | /*
|
20 | * What follows is the result of much research on cross-browser styling.
|
21 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
22 | * Kroc Camen, and the H5BP dev community and team.
|
23 | */
|
24 |
|
25 | /* ==========================================================================
|
26 | Base styles: opinionated defaults
|
27 | ========================================================================== */
|
28 |
|
29 | html {
|
30 | color: $text-color-primary;
|
31 | font-size: 1em;
|
32 | line-height: 1.4;
|
33 | }
|
34 |
|
35 | /*
|
36 | * Remove text-shadow in selection highlight:
|
37 | * https://twitter.com/miketaylr/status/12228805301
|
38 | *
|
39 | * These selection rule sets have to be separate.
|
40 | * Customize the background color to match your design.
|
41 | */
|
42 |
|
43 | ::selection {
|
44 | background: #b3d4fc;
|
45 | text-shadow: none;
|
46 | }
|
47 |
|
48 | /*
|
49 | * A better looking default horizontal rule
|
50 | */
|
51 |
|
52 | hr {
|
53 | display: block;
|
54 | height: 1px;
|
55 | border: 0;
|
56 | border-top: 1px solid #ccc;
|
57 | margin: 1em 0;
|
58 | padding: 0;
|
59 | }
|
60 |
|
61 | /*
|
62 | * Remove the gap between audio, canvas, iframes,
|
63 | * images, videos and the bottom of their containers:
|
64 | * https://github.com/h5bp/html5-boilerplate/issues/440
|
65 | */
|
66 |
|
67 | audio,
|
68 | canvas,
|
69 | iframe,
|
70 | img,
|
71 | svg,
|
72 | video {
|
73 | vertical-align: middle;
|
74 | }
|
75 |
|
76 | /*
|
77 | * Remove default fieldset styles.
|
78 | */
|
79 |
|
80 | fieldset {
|
81 | border: 0;
|
82 | margin: 0;
|
83 | padding: 0;
|
84 | }
|
85 |
|
86 | /*
|
87 | * Allow only vertical resizing of textareas.
|
88 | */
|
89 |
|
90 | textarea {
|
91 | resize: vertical;
|
92 | }
|
93 |
|
94 | /* ==========================================================================
|
95 | Browser Upgrade Prompt
|
96 | ========================================================================== */
|
97 |
|
98 | .browserupgrade {
|
99 | margin: 0.2em 0;
|
100 | background: #ccc;
|
101 | color: #000;
|
102 | padding: 0.2em 0;
|
103 | }
|
104 |
|
105 | /* ==========================================================================
|
106 | Author's custom styles
|
107 | ========================================================================== */
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | /* ==========================================================================
|
126 | Helper classes
|
127 | ========================================================================== */
|
128 |
|
129 | /*
|
130 | * Hide visually and from screen readers:
|
131 | */
|
132 |
|
133 | .hidden {
|
134 | display: none ;
|
135 | }
|
136 |
|
137 | /*
|
138 | * Hide only visually, but have it available for screen readers:
|
139 | * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
140 | */
|
141 |
|
142 | .visuallyhidden {
|
143 | border: 0;
|
144 | clip: rect(0 0 0 0);
|
145 | height: 1px;
|
146 | margin: -1px;
|
147 | overflow: hidden;
|
148 | padding: 0;
|
149 | position: absolute;
|
150 | width: 1px;
|
151 | }
|
152 |
|
153 | /*
|
154 | * Extends the .visuallyhidden class to allow the element
|
155 | * to be focusable when navigated to via the keyboard:
|
156 | * https://www.drupal.org/node/897638
|
157 | */
|
158 |
|
159 | .visuallyhidden.focusable:active,
|
160 | .visuallyhidden.focusable:focus {
|
161 | clip: auto;
|
162 | height: auto;
|
163 | margin: 0;
|
164 | overflow: visible;
|
165 | position: static;
|
166 | width: auto;
|
167 | }
|
168 |
|
169 | /*
|
170 | * Hide visually and from screen readers, but maintain layout
|
171 | */
|
172 |
|
173 | .invisible {
|
174 | visibility: hidden;
|
175 | }
|
176 |
|
177 | /*
|
178 | * Clearfix: contain floats
|
179 | *
|
180 | * For modern browsers
|
181 | * 1. The space content is one way to avoid an Opera bug when the
|
182 | * `contenteditable` attribute is included anywhere else in the document.
|
183 | * Otherwise it causes space to appear at the top and bottom of elements
|
184 | * that receive the `clearfix` class.
|
185 | * 2. The use of `table` rather than `block` is only necessary if using
|
186 | * `:before` to contain the top-margins of child elements.
|
187 | */
|
188 |
|
189 | .clearfix:before,
|
190 | .clearfix:after {
|
191 | content: " "; /* 1 */
|
192 | display: table; /* 2 */
|
193 | }
|
194 |
|
195 | .clearfix:after {
|
196 | clear: both;
|
197 | }
|
198 |
|
199 | /* ==========================================================================
|
200 | EXAMPLE Media Queries for Responsive Design.
|
201 | These examples override the primary ('mobile first') styles.
|
202 | Modify as content requires.
|
203 | ========================================================================== */
|
204 |
|
205 | @media only screen and (min-width: 35em) {
|
206 | /* Style adjustments for viewports that meet the condition */
|
207 | }
|
208 |
|
209 | @media print,
|
210 | (min-resolution: 1.25dppx),
|
211 | (min-resolution: 120dpi) {
|
212 | /* Style adjustments for high resolution devices */
|
213 | }
|
214 |
|
215 | /* ==========================================================================
|
216 | Print styles.
|
217 | Inlined to avoid the additional HTTP request:
|
218 | http://www.phpied.com/delay-loading-your-print-css/
|
219 | ========================================================================== */
|
220 |
|
221 | @media print {
|
222 | *,
|
223 | *:before,
|
224 | *:after,
|
225 | *:first-letter,
|
226 | *:first-line {
|
227 | background: transparent ;
|
228 | color: #000 ; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
|
229 | box-shadow: none ;
|
230 | text-shadow: none ;
|
231 | }
|
232 |
|
233 | a,
|
234 | a:visited {
|
235 | text-decoration: underline;
|
236 | }
|
237 |
|
238 | a[href]:after {
|
239 | content: " (" attr(href) ")";
|
240 | }
|
241 |
|
242 | abbr[title]:after {
|
243 | content: " (" attr(title) ")";
|
244 | }
|
245 |
|
246 | /*
|
247 | * Don't show links that are fragment identifiers,
|
248 | * or use the `javascript:` pseudo protocol
|
249 | */
|
250 |
|
251 | a[href^="#"]:after,
|
252 | a[href^="javascript:"]:after {
|
253 | content: "";
|
254 | }
|
255 |
|
256 | pre,
|
257 | blockquote {
|
258 | border: 1px solid #999;
|
259 | page-break-inside: avoid;
|
260 | }
|
261 |
|
262 | /*
|
263 | * Printing Tables:
|
264 | * http://css-discuss.incutio.com/wiki/Printing_Tables
|
265 | */
|
266 |
|
267 | thead {
|
268 | display: table-header-group;
|
269 | }
|
270 |
|
271 | tr,
|
272 | img {
|
273 | page-break-inside: avoid;
|
274 | }
|
275 |
|
276 | img {
|
277 | max-width: 100% ;
|
278 | }
|
279 |
|
280 | p,
|
281 | h2,
|
282 | h3 {
|
283 | orphans: 3;
|
284 | widows: 3;
|
285 | }
|
286 |
|
287 | h2,
|
288 | h3 {
|
289 | page-break-after: avoid;
|
290 | }
|
291 | }
|