_normalize.scss 2.64 KB
Newer Older
Andrey Azov's avatar
Andrey Azov committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
// Normalization rules picked from foundation-global-styles and foundation-normalize

@import 'common';

// apply a natural box layout model
html {
  box-sizing: border-box;
  font-size: $global-font-size;
}

// inherit the natural box layout from html; allow box-sizing to easily change if necessary
*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: none;
}

body {
  margin: 0;
  padding: 0;

  background: $body-background;

  font-family: $body-font-family;
  font-weight: $global-weight-normal;
  line-height: $global-lineheight;
  color: $body-font-color;

  @if ($body-antialiased) {
    -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
    -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
  }
}

img {
  // Get rid of gap under images by making them display: inline-block; by default
  display: inline-block;
  vertical-align: middle;

  // Grid defaults to get images and embeds to work properly
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}

// Make sure textarea takes on height automatically
textarea {
  height: auto;
  min-height: 50px;
  border-radius: $global-radius;
}

// Make select elements are 100% width by default
select {
  box-sizing: border-box;
  width: 100%;
  border-radius: $global-radius;
}

// Styles Google Maps and MapQuest embeds properly
// sass-lint:disable-line no-ids
.map_canvas,
.mqa-display {
  img,
  embed,
  object {
    max-width: none !important;
  }
}

// Reset <button> styles created by most browsers
button {
  // Remove the focus ring around an element when a mouse input is detected.
  &[data-whatinput='mouse'] {
    outline: 0;
  }
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: $global-radius;
  background: transparent;
  line-height: 1;
  cursor: $global-button-cursor;
}

pre {
  overflow: auto; // Prevent text overflow on pre
  font-family: monospace; // Correct the inheritance and scaling of font size in all browsers
  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
}

// Change the font styles in all browsers.
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
}

b,
strong {
  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
}

small {
  font-size: 80%; // // Add the correct font size in all browsers
}

// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}