UNPKG

12.2 kBCSSView Raw
1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4 ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */
10
11 html {
12 line-height: 1.15; /* 1 */
13 -webkit-text-size-adjust: 100%; /* 2 */
14 }
15
16 /* Sections
17 ========================================================================== */
18
19 /**
20 * Remove the margin in all browsers.
21 */
22
23 body {
24 margin: 0;
25 }
26
27 /**
28 * Render the `main` element consistently in IE.
29 */
30
31 main {
32 display: block;
33 }
34
35 /**
36 * Correct the font size and margin on `h1` elements within `section` and
37 * `article` contexts in Chrome, Firefox, and Safari.
38 */
39
40 h1 {
41 font-size: 2em;
42 margin: 0.67em 0;
43 }
44
45 /* Grouping content
46 ========================================================================== */
47
48 /**
49 * 1. Add the correct box sizing in Firefox.
50 * 2. Show the overflow in Edge and IE.
51 */
52
53 hr {
54 box-sizing: content-box; /* 1 */
55 height: 0; /* 1 */
56 overflow: visible; /* 2 */
57 }
58
59 /**
60 * 1. Correct the inheritance and scaling of font size in all browsers.
61 * 2. Correct the odd `em` font sizing in all browsers.
62 */
63
64 pre {
65 font-family: monospace, monospace; /* 1 */
66 font-size: 1em; /* 2 */
67 }
68
69 /* Text-level semantics
70 ========================================================================== */
71
72 /**
73 * Remove the gray background on active links in IE 10.
74 */
75
76 a {
77 background-color: transparent;
78 }
79
80 /**
81 * 1. Remove the bottom border in Chrome 57-
82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 */
84
85 abbr[title] {
86 border-bottom: none; /* 1 */
87 text-decoration: underline; /* 2 */
88 -webkit-text-decoration: underline dotted;
89 text-decoration: underline dotted; /* 2 */
90 }
91
92 /**
93 * Add the correct font weight in Chrome, Edge, and Safari.
94 */
95
96 b,
97 strong {
98 font-weight: bolder;
99 }
100
101 /**
102 * 1. Correct the inheritance and scaling of font size in all browsers.
103 * 2. Correct the odd `em` font sizing in all browsers.
104 */
105
106 code,
107 kbd,
108 samp {
109 font-family: monospace, monospace; /* 1 */
110 font-size: 1em; /* 2 */
111 }
112
113 /**
114 * Add the correct font size in all browsers.
115 */
116
117 small {
118 font-size: 80%;
119 }
120
121 /**
122 * Prevent `sub` and `sup` elements from affecting the line height in
123 * all browsers.
124 */
125
126 sub,
127 sup {
128 font-size: 75%;
129 line-height: 0;
130 position: relative;
131 vertical-align: baseline;
132 }
133
134 sub {
135 bottom: -0.25em;
136 }
137
138 sup {
139 top: -0.5em;
140 }
141
142 /* Embedded content
143 ========================================================================== */
144
145 /**
146 * Remove the border on images inside links in IE 10.
147 */
148
149 img {
150 border-style: none;
151 }
152
153 /* Forms
154 ========================================================================== */
155
156 /**
157 * 1. Change the font styles in all browsers.
158 * 2. Remove the margin in Firefox and Safari.
159 */
160
161 button,
162 input,
163 optgroup,
164 select,
165 textarea {
166 font-family: inherit; /* 1 */
167 font-size: 100%; /* 1 */
168 line-height: 1.15; /* 1 */
169 margin: 0; /* 2 */
170 }
171
172 /**
173 * Show the overflow in IE.
174 * 1. Show the overflow in Edge.
175 */
176
177 button,
178 input { /* 1 */
179 overflow: visible;
180 }
181
182 /**
183 * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 * 1. Remove the inheritance of text transform in Firefox.
185 */
186
187 button,
188 select { /* 1 */
189 text-transform: none;
190 }
191
192 /**
193 * Correct the inability to style clickable types in iOS and Safari.
194 */
195
196 button,
197 [type="button"],
198 [type="reset"],
199 [type="submit"] {
200 -webkit-appearance: button;
201 }
202
203 /**
204 * Remove the inner border and padding in Firefox.
205 */
206
207 button::-moz-focus-inner,
208 [type="button"]::-moz-focus-inner,
209 [type="reset"]::-moz-focus-inner,
210 [type="submit"]::-moz-focus-inner {
211 border-style: none;
212 padding: 0;
213 }
214
215 /**
216 * Restore the focus styles unset by the previous rule.
217 */
218
219 button:-moz-focusring,
220 [type="button"]:-moz-focusring,
221 [type="reset"]:-moz-focusring,
222 [type="submit"]:-moz-focusring {
223 outline: 1px dotted ButtonText;
224 }
225
226 /**
227 * Correct the padding in Firefox.
228 */
229
230 fieldset {
231 padding: 0.35em 0.75em 0.625em;
232 }
233
234 /**
235 * 1. Correct the text wrapping in Edge and IE.
236 * 2. Correct the color inheritance from `fieldset` elements in IE.
237 * 3. Remove the padding so developers are not caught out when they zero out
238 * `fieldset` elements in all browsers.
239 */
240
241 legend {
242 box-sizing: border-box; /* 1 */
243 color: inherit; /* 2 */
244 display: table; /* 1 */
245 max-width: 100%; /* 1 */
246 padding: 0; /* 3 */
247 white-space: normal; /* 1 */
248 }
249
250 /**
251 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
252 */
253
254 progress {
255 vertical-align: baseline;
256 }
257
258 /**
259 * Remove the default vertical scrollbar in IE 10+.
260 */
261
262 textarea {
263 overflow: auto;
264 }
265
266 /**
267 * 1. Add the correct box sizing in IE 10.
268 * 2. Remove the padding in IE 10.
269 */
270
271 [type="checkbox"],
272 [type="radio"] {
273 box-sizing: border-box; /* 1 */
274 padding: 0; /* 2 */
275 }
276
277 /**
278 * Correct the cursor style of increment and decrement buttons in Chrome.
279 */
280
281 [type="number"]::-webkit-inner-spin-button,
282 [type="number"]::-webkit-outer-spin-button {
283 height: auto;
284 }
285
286 /**
287 * 1. Correct the odd appearance in Chrome and Safari.
288 * 2. Correct the outline style in Safari.
289 */
290
291 [type="search"] {
292 -webkit-appearance: textfield; /* 1 */
293 outline-offset: -2px; /* 2 */
294 }
295
296 /**
297 * Remove the inner padding in Chrome and Safari on macOS.
298 */
299
300 [type="search"]::-webkit-search-decoration {
301 -webkit-appearance: none;
302 }
303
304 /**
305 * 1. Correct the inability to style clickable types in iOS and Safari.
306 * 2. Change font properties to `inherit` in Safari.
307 */
308
309 ::-webkit-file-upload-button {
310 -webkit-appearance: button; /* 1 */
311 font: inherit; /* 2 */
312 }
313
314 /* Interactive
315 ========================================================================== */
316
317 /*
318 * Add the correct display in Edge, IE 10+, and Firefox.
319 */
320
321 details {
322 display: block;
323 }
324
325 /*
326 * Add the correct display in all browsers.
327 */
328
329 summary {
330 display: list-item;
331 }
332
333 /* Misc
334 ========================================================================== */
335
336 /**
337 * Add the correct display in IE 10+.
338 */
339
340 template {
341 display: none;
342 }
343
344 /**
345 * Add the correct display in IE 10.
346 */
347
348 [hidden] {
349 display: none;
350 }
351
352 /**
353 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
354 * A thin layer on top of normalize.css that provides a starting point more
355 * suitable for web applications.
356 */
357
358 /**
359 * Removes the default spacing and border for appropriate elements.
360 */
361
362 blockquote,
363 dl,
364 dd,
365 h1,
366 h2,
367 h3,
368 h4,
369 h5,
370 h6,
371 hr,
372 figure,
373 p,
374 pre {
375 margin: 0;
376 }
377
378 button {
379 background-color: transparent;
380 background-image: none;
381 padding: 0;
382 }
383
384 /**
385 * Work around a Firefox/IE bug where the transparent `button` background
386 * results in a loss of the default `button` focus styles.
387 */
388
389 button:focus {
390 outline: 1px dotted;
391 outline: 5px auto -webkit-focus-ring-color;
392 }
393
394 fieldset {
395 margin: 0;
396 padding: 0;
397 }
398
399 ol,
400 ul {
401 list-style: none;
402 margin: 0;
403 padding: 0;
404 }
405
406 /**
407 * Tailwind custom reset styles
408 */
409
410 /**
411 * 1. Use the user's configured `sans` font-family (with Tailwind's default
412 * sans-serif font stack as a fallback) as a sane default.
413 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
414 * to override it to ensure consistency even when using the default theme.
415 */
416
417 html {
418 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
419 line-height: 1.5; /* 2 */
420 }
421
422 /**
423 * 1. Prevent padding and border from affecting element width.
424 *
425 * We used to set this in the html element and inherit from
426 * the parent element for everything else. This caused issues
427 * in shadow-dom-enhanced elements like <details> where the content
428 * is wrapped by a div with box-sizing set to `content-box`.
429 *
430 * https://github.com/mozdevs/cssremedy/issues/4
431 *
432 *
433 * 2. Allow adding a border to an element by just adding a border-width.
434 *
435 * By default, the way the browser specifies that an element should have no
436 * border is by setting it's border-style to `none` in the user-agent
437 * stylesheet.
438 *
439 * In order to easily add borders to elements by just setting the `border-width`
440 * property, we change the default border-style for all elements to `solid`, and
441 * use border-width to hide them instead. This way our `border` utilities only
442 * need to set the `border-width` property instead of the entire `border`
443 * shorthand, making our border utilities much more straightforward to compose.
444 *
445 * https://github.com/tailwindcss/tailwindcss/pull/116
446 */
447
448 *,
449 ::before,
450 ::after {
451 box-sizing: border-box; /* 1 */
452 border-width: 0; /* 2 */
453 border-style: solid; /* 2 */
454 border-color: #e2e8f0; /* 2 */
455 }
456
457 /*
458 * Ensure horizontal rules are visible by default
459 */
460
461 hr {
462 border-top-width: 1px;
463 }
464
465 /**
466 * Undo the `border-style: none` reset that Normalize applies to images so that
467 * our `border-{width}` utilities have the expected effect.
468 *
469 * The Normalize reset is unnecessary for us since we default the border-width
470 * to 0 on all elements.
471 *
472 * https://github.com/tailwindcss/tailwindcss/issues/362
473 */
474
475 img {
476 border-style: solid;
477 }
478
479 textarea {
480 resize: vertical;
481 }
482
483 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
484 color: #a0aec0;
485 }
486
487 input::-ms-input-placeholder, textarea::-ms-input-placeholder {
488 color: #a0aec0;
489 }
490
491 input::placeholder,
492 textarea::placeholder {
493 color: #a0aec0;
494 }
495
496 button,
497 [role="button"] {
498 cursor: pointer;
499 }
500
501 table {
502 border-collapse: collapse;
503 }
504
505 h1,
506 h2,
507 h3,
508 h4,
509 h5,
510 h6 {
511 font-size: inherit;
512 font-weight: inherit;
513 }
514
515 /**
516 * Reset links to optimize for opt-in styling instead of
517 * opt-out.
518 */
519
520 a {
521 color: inherit;
522 text-decoration: inherit;
523 }
524
525 /**
526 * Reset form element properties that are easy to forget to
527 * style explicitly so you don't inadvertently introduce
528 * styles that deviate from your design system. These styles
529 * supplement a partial reset that is already applied by
530 * normalize.css.
531 */
532
533 button,
534 input,
535 optgroup,
536 select,
537 textarea {
538 padding: 0;
539 line-height: inherit;
540 color: inherit;
541 }
542
543 /**
544 * Use the configured 'mono' font family for elements that
545 * are expected to be rendered with a monospace font, falling
546 * back to the system monospace stack if there is no configured
547 * 'mono' font family.
548 */
549
550 pre,
551 code,
552 kbd,
553 samp {
554 font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
555 }
556
557 /**
558 * Make replaced elements `display: block` by default as that's
559 * the behavior you want almost all of the time. Inspired by
560 * CSS Remedy, with `svg` added as well.
561 *
562 * https://github.com/mozdevs/cssremedy/issues/14
563 */
564
565 img,
566 svg,
567 video,
568 canvas,
569 audio,
570 iframe,
571 embed,
572 object {
573 display: block;
574 vertical-align: middle;
575 }
576
577 /**
578 * Constrain images and videos to the parent width and preserve
579 * their instrinsic aspect ratio.
580 *
581 * https://github.com/mozdevs/cssremedy/issues/14
582 */
583
584 img,
585 video {
586 max-width: 100%;
587 height: auto;
588 }
\No newline at end of file