/ src / common / styles / _base.scss
_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  }