_base.scss

//
// Base styles
// =============================================================================
// Based on sanitize.css v4.1.0 with heavy modifications for Concise CSS
//
// TODO: Most of the comments are from sanitize.css. Comments for Concise should be added too.
//
// Contents:
// 1. Display definitions
// 2. Elements of HTML
// 3. Grouping content
// 4. Text-level semantics
// 5. Embedded content
// 6. Links
// 7. Tabular data
// 8. Forms
// 9. WAI-ARIA
// 10. User interaction
// 11. Lobotomized Owl (Margins)

//
// 1. Display definitions
// --------------------------------------------------

//
// Add the correct display in IE 9-.
// 1. Add the correct display in Edge, IE, and Firefox.
// 2. Add the correct display in IE.
//

article,
aside,
details, // 1
figcaption,
figure,
footer,
header,
main, // 2
menu,
nav,
section,
summary { // 1
	display: block;
}

//
// Add the correct display in IE 9-.
//

audio,
canvas,
progress,
video {
	display: inline-block;
}

//
// Add the correct display in iOS 4-7.
//

audio:not([controls]) {
	display: none;
	height: 0;
}

//
// Add the correct display in IE 10-.
// 1. Add the correct display in IE.
//

template, // 1
[hidden] {
	display: none;
}

//
// 2. Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
// --------------------------------------------------

//
// 1. Remove repeating backgrounds in all browsers.
// 2. Add box sizing inheritence in all browsers.
//

*,
::before,
::after {
	background-repeat: no-repeat; // 1
	box-sizing: inherit; // 2
}

//
// 1. Add text decoration inheritance in all browsers.
// 2. Add vertical alignment inheritence in all browsers.
//

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

//
// Root styles
//

:root {
	box-sizing: border-box;
	font-family: $font-primary;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
  background-color: getColor(background, body);
  color: getColor(text, primary);
  font-size: $font-size + px;
  text-rendering: optimizeLegibility;

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

//
// 3. Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
// --------------------------------------------------

//
// 1. Correct font sizing inheritance and scaling in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
//

code,
kbd,
pre,
samp {
	font-family: $font-mono; // 1
	font-size: typeScale(1); // 2
  background-color: getColor(background, light);
}

code,
kbd {
  vertical-align: middle;
  display: inline-block;
  padding: 0 0.4em;
}

pre {
  padding: 0.5lh 1em;

  & > code { white-space: pre; }
}

kbd {
  background-color: transparent;
  outline: 1px solid getColor(base, lines);
}

//
// 2. Add visible overflow in Edge and IE.
//

hr {
	background-color: getColor(base, lines);
  height: 1px;
	overflow: visible; // 2
  border: 0;
}

//
// Remove the list style on navigation lists in all browsers.
//

nav {
  ol,
  ul { padding-left: 0; }

  li { list-style: none; }
}

//
// Make definition lists bold
//

dt { font-weight: bold; }

//
// 4. Text-level semantics
// --------------------------------------------------

//
// Make blockquotes prettier
// 1. Adds an em dash in the cite and footer of the quote
// 2. Use the next smaller size in the scale
//

blockquote {
  padding: 0 1em;

  cite,
  footer {
    color: getColor(text, secondary);
    font-size: 100% / $scale-ratio; // 2
    margin-top: 0.5lh;

    &:before { content: "— "; } // 1
  }
}

//
// 1. Add a bordered underline effect in all browsers.
// 2. Remove text decoration in Firefox 40+.
// 3. Change all letters to uppercase
// 4. Turn on small caps for upper and lowercase letters

abbr {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; // 4
  text-transform: uppercase; // 3

  &[title] {
    border-bottom: 1px solid getColor(base, lines); // 1
    cursor: help;
    text-decoration: none; // 2
  }
}

//
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
//

b,
strong {
	font-weight: inherit;
}

//
// Add the correct font weight in Chrome, Edge, and Safari.
//

b,
strong {
	font-weight: bolder;
}

//
// Add the correct font style in Android 4.3-.
//

dfn {
	font-style: italic;
}

//
// Add the correct colors in IE 9-.
//

mark {
	background-color: #ffff00;
	color: #000000;
}

//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
//

progress {
	vertical-align: baseline;
}

//
// Correct the font size in all browsers.
//

small {
	// Use the next smaller size in the scale
  font-size: 100% / $scale-ratio;
}

//
// Change the positioning on superscript and subscript elements
// in all browsers.
// 1. Use the next smaller size in the scale
// 2. Enables display of subscript variants
// 3. Enables display of superscript variants
// 4. Adjust position
//

sub,
sup {
	line-height: 0;
	position: relative;
	vertical-align: baseline;
  font-size: 100% / $scale-ratio; // 1
}

sub {
  bottom: -0.25em; // 4
  font-feature-settings: "subs" 1; // 2
}

sup {
  top: -0.25em; // 4
  font-feature-settings: "sups" 1; // 3
}

//
// 1. Remove the text shadow on text selections.
// 2. Customize the background color on text selections.
//

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

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

//
// 5. Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
// --------------------------------------------------

//
// Change the alignment on media elements in all browers.
//

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

//
// Remove the border on images inside links in IE 10-.
//

img {
	border-style: none;
}

//
// Change the fill color to match the text color in all browsers.
//

svg {
	fill: currentColor;
}

//
// Hide the overflow in IE.
//

svg:not(:root) {
	overflow: hidden;
}

//
// 6. Links (https://www.w3.org/TR/html5/links.html#links)
// --------------------------------------------------

//
// 1. Remove the gray background on active links in IE 10.
// 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
// 3. Add transition by default
//

a {
	background-color: transparent; // 1
	-webkit-text-decoration-skip: objects; // 2
  color: getColor(base, primary);
  text-decoration: none;
  transition-duration: $transition-duration; // 3

  &:hover,
  &:focus { color: darken(getColor(base, primary), 20%); }
}

//
// Remove the outline when hovering in all browsers.
//

a:hover {
	outline-width: 0;
}

//
// 7. Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
// --------------------------------------------------

//
// Remove border spacing in all browsers.
//

table {
	border-collapse: collapse;
	border-spacing: 0;
}

//
// 8. Forms:  (https://www.w3.org/TR/html5/forms.html)
// --------------------------------------------------

//
// 1. Remove the default styling in all browsers.
//

input,
select,
textarea {
	background-color: transparent; // 1
	border-style: none; // 1
	color: inherit; // 1
  font: inherit;

  &:focus { outline: 2px solid getColor(blue, base); }
}

//
// Correct the overflow in IE.
// 1. Correct the overflow in Edge.
//

button,
input { // 1
	overflow: visible;
}

//
// Remove the inheritance in Edge, Firefox, and IE.
// 1. Remove the inheritance in Firefox.
//

button,
select { // 1
	text-transform: none;
}

//
// 1. Prevent the WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
//

button,
html [type="button"], // 1
[type="reset"],
[type="submit"] {
	-webkit-appearance: button; // 2
  font: inherit;
}

//
// Remove the inner border and padding in Firefox.
//

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

//
// Correct the focus styles unset by the previous rule.
//

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

//
// Correct the border and padding in all browsers.
//

fieldset {
	border: 1px solid getColor(base, lines);
  padding: 1lh 1em;
}

//
// 1. Correct the text wrapping in Edge and IE.
//

legend {
	display: table; // 1
	max-width: 100%; // 1
	white-space: normal; // 1
	padding: 0 0.5em;
}

//
// 1. Remove the vertical scrollbar in IE.
// 2. Change the resize direction on textareas in all browsers.
//

textarea {
	overflow: auto; // 1
	resize: vertical; // 2
	height: auto;
  padding: 0.25lh 0.5em;
}

//
// Remove the padding in IE 10-.
//

[type="checkbox"],
[type="radio"] {
	padding: 0;
}

//
// Correct the cursor style on increment and decrement buttons in Chrome.
//

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

//
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
//

[type="search"] {
	-webkit-appearance: textfield; // 1
	outline-offset: -2px; // 2
}

//
// Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
//

::-webkit-search-cancel-button,
::-webkit-search-decoration {
	-webkit-appearance: none;
}

//
// Correct the text style on placeholders in Chrome, Edge, and Safari.
//

::-webkit-input-placeholder {
	color: inherit;
	opacity: .54;
}

//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

//
// Make the range input flat using the Concise settings
//

input[type="range"] {
  border: none;
  padding: 0;
  width: 100%;
  -webkit-appearance: none;

  &:focus { outline: none; }

  &::range-track {
    background-color: getColor(base, lines);
    border: none;
    height: 0.2lh;
  }

  &::range-thumb {
    border: none;
    border-radius: 50%;
    background-color: getColor(base, primary);
    height: 0.5lh;
    margin-top: -0.15lh;
    width: 0.5lh;
  }

  &::-webkit-slider-thumb { -webkit-appearance: none; }
}

//
// Make the buttons flat
//

button {
  background-color: getColor(base, primary);
  border: none;
  color: getColor(text, inverted);
  cursor: pointer;
  font-size: typeScale(1);
  line-height: 1.5lh;
  padding: 0 1.5em;
  transition: background-color $transition-duration;
  white-space: nowrap;

  &:hover,
  &:focus {
    background-color: lighten(getColor(base, primary), 5%);
    text-decoration: none;
    outline: none;
  }

  &:active { background-color: lighten(getColor(base, primary), 10%); }

  &[disabled] {
    background-color: getColor(state, muted);
    color: getColor(text, inverted);
    cursor: not-allowed;
  }
}

// Make the submit inputs and buttons look the same
input[type="submit"] { @extend button; }

//
// 9. WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
// --------------------------------------------------

//
// Change the cursor on busy elements.
//

[aria-busy="true"] {
	cursor: progress;
}

//
// Change the cursor on control elements.
//

[aria-controls] {
	cursor: pointer;
}

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

[aria-disabled] {
	cursor: default;
}

//
// 10. User interaction (https://www.w3.org/TR/html5/editing.html)
// --------------------------------------------------

//
// Remove the tapping delay on clickable elements.
// 1. Remove the tapping delay in IE 10.
//

a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
	-ms-touch-action: manipulation; // 1
	touch-action: manipulation;
}

//
// Change the display on visually hidden accessible elements.
//

[hidden][aria-hidden="false"] {
	clip: rect(0, 0, 0, 0);
	display: inherit;
	position: absolute;
}

[hidden][aria-hidden="false"]:focus {
	clip: auto;
}

//
// 11. Automatic margins a.k.a Lobotomized Owl
// --------------------------------------------------

@if $automargin {
  * { margin: 0; }

  // A margin top is added to all the elements except the first one in each nesting level
  * + * { margin-top: $block-margin; }

  // These elements shouldn’t get a margin
  li,
  kbd,
  div,
  input,
  option,
  select,
  a,
  textarea,
  body,
  main,
  span,
  dd,
  code,
	label,
  br
  [#{$prefix}column]{ margin-top: 0; }

  // First paragraphs below a heading shouldn’t get a margin
  h1, h2, h3, h4, h5, h6 {
    & + p { margin-top: 0; }
  }
}