blob: e42fe3e9b9645ffb300892e366fff530e1f821d3 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
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
29html {
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
52hr {
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
67audio,
68canvas,
69iframe,
70img,
71svg,
72video {
73 vertical-align: middle;
74}
75
76/*
77 * Remove default fieldset styles.
78 */
79
80fieldset {
81 border: 0;
82 margin: 0;
83 padding: 0;
84}
85
86/*
87 * Allow only vertical resizing of textareas.
88 */
89
90textarea {
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 !important;
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 background: transparent !important;
227 color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
228 box-shadow: none !important;
229 }
230
231 a,
232 a:visited {
233 text-decoration: underline;
234 }
235
236 a[href]:after {
237 content: " (" attr(href) ")";
238 }
239
240 abbr[title]:after {
241 content: " (" attr(title) ")";
242 }
243
244 /*
245 * Don't show links that are fragment identifiers,
246 * or use the `javascript:` pseudo protocol
247 */
248
249 a[href^="#"]:after,
250 a[href^="javascript:"]:after {
251 content: "";
252 }
253
254 pre,
255 blockquote {
256 border: 1px solid #999;
257 page-break-inside: avoid;
258 }
259
260 /*
261 * Printing Tables:
262 * http://css-discuss.incutio.com/wiki/Printing_Tables
263 */
264
265 thead {
266 display: table-header-group;
267 }
268
269 tr,
270 img {
271 page-break-inside: avoid;
272 }
273
274 img {
275 max-width: 100% !important;
276 }
277
278 p,
279 h2,
280 h3 {
281 orphans: 3;
282 widows: 3;
283 }
284
285 h2,
286 h3 {
287 page-break-after: avoid;
288 }
289}