_base.initialize.scss

/**
 * A modern, elegant and minimal combination of Normalize.css and
 * CSS Reset. Compatible with IE10+.
 */

$iota-base-initialize: true;




// Options

$iota-base-initialize-box-sizing           : 'border-box' !default;

$iota-base-initialize-heading-size         : false !default;
$iota-base-initialize-form-elements        : false !default;
$iota-base-initialize-html5-form-elements  : false !default;




/**
 * 1. Sets box-sizing to border-box by default.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 3. Makes font thinkness to look the same in Firefox and Webkit.
 */

html {
  box-sizing: #{$iota-base-initialize-box-sizing}; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-font-smoothing: antialiased; /* 3 */
  -moz-osx-font-smoothing: grayscale; /* 3 */
}


/**
 * Simple reset of element margin and padding
 */

body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre, code,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend
 {
  margin:   0;
  padding:  0;
}


/**
 * Sets box-sizing to all elements and before / after
 */

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

}


/**
 * Fixes the issues of main HTML5 tag with even earlier versions of IE.
 * For IE9-, please use HTML5Shiv https://github.com/aFarkas/html5shiv.
 */

main { display: block }


/**
 * Sets heading font-size to be equal to the content font-size. Encourages
 * the use of different heading elements to define the position of the heading
 * in the document and not the heading look.

 * Opinionated and disabled by default.
 */

@if ($iota-base-initialize-heading-size == true) {
  
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit
  }

}


/**
 * Applies a bold font weight to strong instead of the default bolder
 */

strong { font-weight: bold }


/**
 * Removes default border spacing and collapse
 */

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


/**
 * 1. Removes border from images inside links
 * 2. Helps images to properly behave in responsive layouts
 */

img {
  border-style: none; /* 1 */
  max-width: 100%; /* 2 */
  height: auto; /* 2 */
  vertical-align: middle; /* 2 */
}


/**
 * 1. Removes text decoration from links.
 * 2. Sets default link color same as the content color.
 * 3. Removes default grey background in IE10.
 * 4. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  text-decoration: none; /* 1 */
  color: inherit; /* 2 */
  background-color: transparent; /* 3 */
  -webkit-text-decoration-skip: objects; /* 4 */
}




// Normalizing form elements

@if ($iota-base-initialize-form-elements == true) {

  /**
   * Remove margin from form elements
   */
  
  input,
  select,
  textarea { margin: 0 }


  /**
   * Show overflow in Edge
   */

  input { overflow: visible }


  /**
   * Remove the default vertical scrollbar in IE.
   */

  select { text-transform: none }


  /**
   * 1. Add the correct box sizing in IE 10-.
   * 2. Remove the padding in IE 10-.
   */

  [type="checkbox"],
  [type="radio"] {
    padding: 0; /* 2 */

    @if ($iota-base-initialize-box-sizing != 'border-box') {
      box-sizing: border-box /* 1 */;
    }
  }

}




// Normalizing of HTML5 form elements

@if ($iota-base-initialize-html5-form-elements == true) {

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

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-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 on macOS.
   */

  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
   * 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 */
  }

}