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