_normalization.scss

//
// Normalization and Base styles
// =============================================================================
// Adapted from sanitize.css
// (https://github.com/10up/sanitize.css)

//
// Normalization
// -------------

abbr[title] {
  text-decoration: underline; // Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+
  text-decoration: underline dotted; // Firefox 40+
}

// Chrome 44-, iOS 8+, Safari 9+
audio:not([controls]) { display: none; }

// Edge 12+, Safari 6.2+, and Chrome 18+
b,
strong { font-weight: bolder; }

button {
  -webkit-appearance: button; // iOS 8+
  overflow: visible; // Internet Explorer 11-
}

button,
input {
  // Firefox 4+
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  // Firefox 4+
  &:-moz-focusring { outline: 1px dotted ButtonText; }
}

// Firefox 40+, Internet Explorer 11-
button,
select { text-transform: none; }

// Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
details { display: block; }

hr {
  overflow: visible; // Internet Explorer 11-, Edge 12+
  margin: 1lh 0;
  background-color: getColor(base, lines);
  height: 1px;
}

html {
  -ms-overflow-style: -ms-autohiding-scrollbar; // Edge 12+, Internet Explorer 11-
  overflow-y: scroll; // All browsers without overlaying scrollbars
  -webkit-text-size-adjust: 100%; // iOS 8+, Windows Phone 8.1+
}

input {
  // iOS 8+
  -webkit-border-radius: 0;

  // iOS 8+
  &[type="button"],
  &[type="reset"],
  &[type="submit"] { -webkit-appearance: button; }

  // Firefox 36+
  &[type="number"] { width: auto; }

  &[type="search"] {
    // Chrome 45+, Safari 9+
    -webkit-appearance: textfield;

    // Chrome 45+, Safari 9+
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration { -webkit-appearance: none; }
  }
}

// Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+
main { display: block; }

// Internet Explorer 11-
pre { overflow: auto; }

// Internet Explorer 11-, Windows Phone 8.1+
progress { display: inline-block; }

// Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
summary { display: block; }

// Internet Explorer 11-
svg:not(:root) { overflow: hidden; }

// Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+
template { display: none; }

// Edge 12+, Internet Explorer 11-
textarea { overflow: auto; }

// Internet Explorer 10-
[hidden] { display: none; }

//
// Universal Inheritance
// ---------------------

*,
::before,
::after {
  box-sizing: inherit;
}

* {
  font-size: inherit;
  line-height: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

//
// Opinionated Defaults
// ---------------------

// Specify the root styles of the document
:root {
  background-color: getColor(background, body);
  box-sizing: border-box;
  color: getColor(text, primary);
  cursor: default;
  font: $font-size + px / 1.5 $font-primary;
  text-rendering: optimizeLegibility;

  @media ($breakpoint) {
    font-size: $font-size-secondary + px;
  }
}

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
}

*,
::before,
::after {
  border-style: solid;
  border-width: 0;
}

// Remove the tapping delay from clickable elements
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] { touch-action: manipulation; }

// Specify the standard appearance of selects
select {
  -moz-appearance: none;    // Firefox 40+
  -webkit-appearance: none; // Chrome 45+

  // Edge 12+, Internet Explorer 11-
  &::-ms-expand { display: none; }

  // Edge 12+, Internet Explorer 11-
  &::-ms-value { color: currentColor; }
}

// Use current current as the default fill of svg elements
svg { fill: currentColor; }

// Specify the progress cursor of updating elements
[aria-busy="true"] { cursor: progress; }

// Specify the pointer cursor of trigger elements
[aria-controls] { cursor: pointer; }

// Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements
[aria-disabled] { cursor: default; }

// Specify the style of visually hidden yet accessible elements
[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute;

  &:focus { clip: auto; }
}

// Specify the alignment of media elements
audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

// Specify the background color, and drop shadow of text selections
::-moz-selection {
  background-color: getColor(base, selection);
  text-shadow: none;
}

::selection {
  background-color: getColor(base, selection);
  text-shadow: none;
}

//
// Automatic margins
// -----------------

@if $automargin {
  * + * { margin-top: $block-margin; }

  li, kbd, div, input, option, select, a, textarea {
    margin-top: 0;
  }
}