231 lines
4.8 KiB
SCSS
231 lines
4.8 KiB
SCSS
// Reboot
|
|
// Based off Boostrap reboot, which is based off normalize.css
|
|
|
|
// Document
|
|
//
|
|
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
// Body
|
|
//
|
|
// 1. Remove the margin in all browsers.
|
|
// 2. As a best practice, apply a default `background-color`.
|
|
// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
|
// 4. Change the default tap highlight to be completely transparent in iOS.
|
|
body {
|
|
margin: 0; // 1
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
line-height: $line-height-base;
|
|
color: $body-color;
|
|
background-color: $body-bg; // 2
|
|
-webkit-text-size-adjust: 100%; // 3
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
|
|
}
|
|
|
|
// 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.
|
|
//
|
|
// Credit: https://github.com/suitcss/base
|
|
[tabindex="-1"]:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
// Abbreviations and acronyms
|
|
abbr[title] {
|
|
text-decoration: underline dotted; // 2
|
|
cursor: help; // 3
|
|
text-decoration-skip-ink: none; // 4
|
|
}
|
|
|
|
address {
|
|
margin-bottom: 1rem;
|
|
font-style: normal;
|
|
line-height: inherit;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
ol ol,
|
|
ul ul,
|
|
ol ul,
|
|
ul ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
blockquote {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
|
|
//
|
|
// Figures
|
|
//
|
|
|
|
figure {
|
|
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
|
// We reset that to create a better flow in-page.
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
|
|
//
|
|
// Images
|
|
//
|
|
|
|
img {
|
|
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
|
// centers them. This won't apply should you reset them to `block` level.
|
|
vertical-align: middle;
|
|
// Note: `<img>`s are deliberately not made responsive by default.
|
|
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
|
}
|
|
|
|
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
|
//
|
|
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
|
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
|
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
|
// See:
|
|
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
|
// * http://caniuse.com/#feat=css-touch-action
|
|
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
|
|
|
a,
|
|
area,
|
|
button,
|
|
input,
|
|
label,
|
|
select,
|
|
summary,
|
|
textarea {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
|
|
//
|
|
// Forms
|
|
//
|
|
|
|
label {
|
|
// Allow labels to use `margin` for spacing.
|
|
display: inline-block;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
// Reset focus style, show only on tab press (requires JS support)
|
|
|
|
a:focus,
|
|
input:focus,
|
|
select:focus,
|
|
button:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.tab-key {
|
|
a:focus,
|
|
button:focus {
|
|
outline: auto;
|
|
}
|
|
}
|
|
|
|
// Delete FF dotted outline.
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
line-height: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
// iOS adds rounded borders by default
|
|
border-radius: 0;
|
|
// reset FF :active:focus padding animation
|
|
padding: 0;
|
|
}
|
|
|
|
// 1. Remove the default vertical scrollbar in IE.
|
|
// 2. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
|
|
|
textarea {
|
|
overflow: auto; // 1
|
|
resize: vertical; // 2
|
|
}
|
|
|
|
|
|
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
|
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
|
// So we reset that to ensure fieldsets behave more like a standard block element.
|
|
// See https://github.com/twbs/bootstrap/issues/12359
|
|
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
|
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
|
|
|
fieldset {
|
|
min-width: 0; // 1
|
|
padding: 0; // 2
|
|
margin: 0; // 2
|
|
border: 0; // 2
|
|
}
|
|
|
|
legend {
|
|
// Reset the entire legend element to match the `fieldset`
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-bottom: .5rem;
|
|
font-size: 1.5rem;
|
|
line-height: inherit;
|
|
}
|
|
|
|
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
|
|
// 1. Change font properties to `inherit` in Safari.
|
|
// 2. Correct the inability to style clickable types in iOS and Safari.
|
|
|
|
::-webkit-file-upload-button {
|
|
font: inherit; // 1
|
|
-webkit-appearance: button; // 2
|
|
}
|
|
|
|
// Add the correct display for main in IE 11
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
picture {
|
|
display: block;
|
|
}
|