_base.scss
1 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 3 @import './colors'; 4 5 /* Document 6 ========================================================================== */ 7 8 /** 9 * 1. Correct the line height in all browsers. 10 * 2. Prevent adjustments of font size after orientation changes in iOS. 11 */ 12 13 html { 14 line-height: 1.15; /* 1 */ 15 -webkit-text-size-adjust: 100%; /* 2 */ 16 } 17 18 /* Sections 19 ========================================================================== */ 20 21 /** 22 * Remove the margin in all browsers. 23 */ 24 25 body { 26 margin: 0; 27 } 28 29 /** 30 * Render the `main` element consistently in IE. 31 */ 32 33 main { 34 display: block; 35 } 36 37 /** 38 * Correct the font size and margin on `h1` elements within `section` and 39 * `article` contexts in Chrome, Firefox, and Safari. 40 */ 41 42 h1 { 43 font-size: 2em; 44 margin: 0.67em 0; 45 } 46 47 /* Grouping content 48 ========================================================================== */ 49 50 /** 51 * 1. Add the correct box sizing in Firefox. 52 * 2. Show the overflow in Edge and IE. 53 */ 54 55 hr { 56 box-sizing: content-box; /* 1 */ 57 height: 0; /* 1 */ 58 overflow: visible; /* 2 */ 59 } 60 61 /** 62 * 1. Correct the inheritance and scaling of font size in all browsers. 63 * 2. Correct the odd `em` font sizing in all browsers. 64 */ 65 66 pre { 67 font-family: monospace, monospace; /* 1 */ 68 font-size: 1em; /* 2 */ 69 } 70 71 /* Text-level semantics 72 ========================================================================== */ 73 74 /** 75 * Remove the gray background on active links in IE 10. 76 */ 77 78 a { 79 background-color: transparent; 80 } 81 82 /** 83 * 1. Remove the bottom border in Chrome 57- 84 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 85 */ 86 87 abbr[title] { 88 border-bottom: none; /* 1 */ 89 text-decoration: underline; /* 2 */ 90 text-decoration: underline dotted; /* 2 */ 91 } 92 93 /** 94 * Add the correct font weight in Chrome, Edge, and Safari. 95 */ 96 97 b, 98 strong { 99 font-weight: bolder; 100 } 101 102 /** 103 * 1. Correct the inheritance and scaling of font size in all browsers. 104 * 2. Correct the odd `em` font sizing in all browsers. 105 */ 106 107 code, 108 kbd, 109 samp { 110 font-family: monospace, monospace; /* 1 */ 111 font-size: 1em; /* 2 */ 112 } 113 114 /** 115 * Add the correct font size in all browsers. 116 */ 117 118 small { 119 font-size: 80%; 120 } 121 122 /** 123 * Prevent `sub` and `sup` elements from affecting the line height in 124 * all browsers. 125 */ 126 127 sub, 128 sup { 129 font-size: 75%; 130 line-height: 0; 131 position: relative; 132 vertical-align: baseline; 133 } 134 135 sub { 136 bottom: -0.25em; 137 } 138 139 sup { 140 top: -0.5em; 141 } 142 143 /* Embedded content 144 ========================================================================== */ 145 146 /** 147 * Remove the border on images inside links in IE 10. 148 */ 149 150 img { 151 border-style: none; 152 } 153 154 /* Forms 155 ========================================================================== */ 156 157 /** 158 * 1. Change the font styles in all browsers. 159 * 2. Remove the margin in Firefox and Safari. 160 */ 161 162 button, 163 input, 164 optgroup, 165 select, 166 textarea { 167 font-family: inherit; /* 1 */ 168 font-size: 100%; /* 1 */ 169 line-height: 1.15; /* 1 */ 170 margin: 0; /* 2 */ 171 } 172 173 /** 174 * Show the overflow in IE. 175 * 1. Show the overflow in Edge. 176 */ 177 178 button, 179 input { 180 /* 1 */ 181 overflow: visible; 182 } 183 184 /** 185 * Remove the inheritance of text transform in Edge, Firefox, and IE. 186 * 1. Remove the inheritance of text transform in Firefox. 187 */ 188 189 button, 190 select { 191 /* 1 */ 192 text-transform: none; 193 } 194 195 /** 196 * Correct the inability to style clickable types in iOS and Safari. 197 */ 198 199 button, 200 [type='button'], 201 [type='reset'], 202 [type='submit'] { 203 -webkit-appearance: button; 204 } 205 206 /** 207 * Remove the inner border and padding in Firefox. 208 */ 209 210 button::-moz-focus-inner, 211 [type='button']::-moz-focus-inner, 212 [type='reset']::-moz-focus-inner, 213 [type='submit']::-moz-focus-inner { 214 border-style: none; 215 padding: 0; 216 } 217 218 /** 219 * Restore the focus styles unset by the previous rule. 220 */ 221 222 button:-moz-focusring, 223 [type='button']:-moz-focusring, 224 [type='reset']:-moz-focusring, 225 [type='submit']:-moz-focusring { 226 outline: 1px dotted ButtonText; 227 } 228 229 /** 230 * Correct the padding in Firefox. 231 */ 232 233 fieldset { 234 padding: 0.35em 0.75em 0.625em; 235 } 236 237 /** 238 * 1. Correct the text wrapping in Edge and IE. 239 * 2. Correct the color inheritance from `fieldset` elements in IE. 240 * 3. Remove the padding so developers are not caught out when they zero out 241 * `fieldset` elements in all browsers. 242 */ 243 244 legend { 245 box-sizing: border-box; /* 1 */ 246 color: inherit; /* 2 */ 247 display: table; /* 1 */ 248 max-width: 100%; /* 1 */ 249 padding: 0; /* 3 */ 250 white-space: normal; /* 1 */ 251 } 252 253 /** 254 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 255 */ 256 257 progress { 258 vertical-align: baseline; 259 } 260 261 /** 262 * Remove the default vertical scrollbar in IE 10+. 263 */ 264 265 textarea { 266 overflow: auto; 267 } 268 269 /** 270 * 1. Add the correct box sizing in IE 10. 271 * 2. Remove the padding in IE 10. 272 */ 273 274 [type='checkbox'], 275 [type='radio'] { 276 box-sizing: border-box; /* 1 */ 277 padding: 0; /* 2 */ 278 } 279 280 /** 281 * Correct the cursor style of increment and decrement buttons in Chrome. 282 */ 283 284 [type='number']::-webkit-inner-spin-button, 285 [type='number']::-webkit-outer-spin-button { 286 height: auto; 287 } 288 289 /** 290 * 1. Correct the odd appearance in Chrome and Safari. 291 * 2. Correct the outline style in Safari. 292 */ 293 294 [type='search'] { 295 -webkit-appearance: textfield; /* 1 */ 296 outline-offset: -2px; /* 2 */ 297 } 298 299 /** 300 * Remove the inner padding in Chrome and Safari on macOS. 301 */ 302 303 [type='search']::-webkit-search-decoration { 304 -webkit-appearance: none; 305 } 306 307 /** 308 * 1. Correct the inability to style clickable types in iOS and Safari. 309 * 2. Change font properties to `inherit` in Safari. 310 */ 311 312 ::-webkit-file-upload-button { 313 -webkit-appearance: button; /* 1 */ 314 font: inherit; /* 2 */ 315 } 316 317 /* Interactive 318 ========================================================================== */ 319 320 /* 321 * Add the correct display in Edge, IE 10+, and Firefox. 322 */ 323 324 details { 325 display: block; 326 } 327 328 /* 329 * Add the correct display in all browsers. 330 */ 331 332 summary { 333 display: list-item; 334 } 335 336 /* Misc 337 ========================================================================== */ 338 339 /** 340 * Add the correct display in IE 10+. 341 */ 342 343 template { 344 display: none; 345 } 346 347 /** 348 * Add the correct display in IE 10. 349 */ 350 351 [hidden] { 352 display: none; 353 } 354 355 .link { 356 color: $link-color; 357 cursor: pointer; 358 }