Rationalize Reset CSS

rationalize.css

/** taken from https://github.com/niksy/rationalize.css/blob/master/index.css **/

@import url('normalize.css');
@import url('opinionate.css');

/**
 * =============================================================================
 * Base
 * =============================================================================
 */

/**
 * Use easier method for layout creation and modification.
 */
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

/**
 * 1. Display vertical scrollbar at all times.
 * 2. Normalize global text color.
 */
html {
	overflow-y: scroll; /* 1 */
	-ms-overflow-style: scrollbar; /* 1 */
	color: #000; /* 2 */
}

/**
 * Normalize global background color.
 * It will propagate to `html` element.
 */
body {
	background-color: #fff;
}

/**
 * =============================================================================
 * Typography
 * =============================================================================
 */

/**
 * Add help cursor for some elements.
 */
abbr[title],
acronym[title],
dfn {
	cursor: help;
}

/**
 * Improve horizontal rule display.
 */
hr {
	display: block; margin: 1em 0; padding: 0;
}

/**
 * Add the correct font weight.
 */
b,
strong {
	font-weight: bold;
}

/**
 * =============================================================================
 * Embedded content
 * =============================================================================
 */

/**
 * 1. Alternative text will be visually offset if images don’t load.
 * 2. Remove the gap between images and the bottom of their containers.
 * 3. Make images expand as large as their container, keeping the height
 *    proportional to the width.
 */
img {
	height: auto; max-width: 100%; /* 3 */
	font-style: italic; /* 1 */
	vertical-align: bottom; /* 2 */
}

/**
 * Fluid styles mess up Google Maps images
 * so we have to reset them to inital state
 */
.gm-style img {
	max-width: none;
	vertical-align: baseline;
}

/**
 * Remove the gap between elements and the bottom of their containers.
 */
object, embed {
	vertical-align: bottom;
}

/**
 * =============================================================================
 * Grouping content
 * =============================================================================
 */

/**
 * Contain overflow in all browsers.
 */
pre {
	overflow: auto;
}

/**
 * =============================================================================
 * Forms
 * =============================================================================
 */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 */

button,
input,
optgroup,
select,
textarea {
	font: inherit; /* 1 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
	font-weight: bold;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
	line-height: normal;
}

/**
 * Inherit text properties from parent element for form elements.
 */
select,
button,
input,
textarea {
	color: inherit;
}

/**
 * 1. Display ellipsis in placeholders so they don’t get cut off.
 * 2. Correct the text style of placeholders in Chrome, Edge, and Safari
 *    https://github.com/necolas/normalize.css/pull/603#issuecomment-230118874
 */
::placeholder {
	opacity: 1; /* 2 */
	text-overflow: ellipsis; /* 1 */
	color: #a9a9a9; /* 2 */
}

/**
 * 1. Set sensible defaults for elements with invalid form input.
 * 2. Set sensible styling for all browsers.
 */
input:invalid,
textarea:invalid {
	box-shadow: 0 0 4px #f00; /* 2 */
	outline: 0; /* 1 */
}

/**
 * 1. Constraint `textarea` to vertical resize only.
 * 2. A hack for HTML5 `contenteditable` attribute on mobile.
 * 3. Blink adds some vertical spacing at the bottom.
 */
textarea {
	vertical-align: bottom; /* 3 */
	resize: vertical; /* 1 */
}
textarea[contenteditable] {
	-webkit-appearance: none; /* 2 */
}

/**
 * Set `select` background color to white because some OSs (e.g. Linux) don’t
 * use it as default.
 */
select {
	background-color: #fff;
}

/**
 * Add pointer cursor to some form elements for better interactivity.
 */
select,
label[for],
label input,
input[type="image"],
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
	cursor: pointer;
}

/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
	cursor: default;
}

/**
 * =============================================================================
 * Tables
 * =============================================================================
 */

/**
 * Remove most spacing between table cells.
 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/**
 * =============================================================================
 * Accessibility
 * =============================================================================
 */

/**
 * Visually emphasize focused elements with custom tabindex which should
 * be keyboard accessible.
 */
[tabindex="0"]:focus {
	outline: thin dotted;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
	outline: none;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements.
 */

[aria-disabled="true"] {
	cursor: default;
	pointer-events: none;
}

/**
 * Hide `[type="button"] when `.no-js` is present.
 */
.no-js button[type="button"] {
	display: none;
}

/**
 * =============================================================================
 * Responsive
 * =============================================================================
 */

/**
 * Get IE 10 Snap Mode to play nicely with `meta` viewport.
 */
@viewport {
	width: device-width;
}