[Summary view] [Print] [Text view]

   1  /**
   2   * Reset specific elements to make them easier to style in other contexts.
   3   */
   4  
   5  html,
   6  body,
   7  p,
   8  ol,
   9  ul,
  10  li,
  11  dl,
  12  dt,
  13  dd,
  14  blockquote,
  15  figure,
  16  fieldset,
  17  form,
  18  legend,
  19  textarea,
  20  pre,
  21  iframe,
  22  hr,
  23  h1,
  24  h2,
  25  h3,
  26  h4,
  27  h5,
  28  h6 {
  29      padding: 0;
  30      margin: 0;
  31      -moz-osx-font-smoothing: grayscale;
  32      -webkit-font-smoothing: antialiased;
  33  }
  34  
  35  /**
  36   * Apply generic border-box to all elements.
  37   * See:
  38   * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  39   */
  40  
  41  html {
  42  
  43      /* Apply border-box across the entire page. */
  44      box-sizing: border-box;
  45  
  46      // HTML resets
  47      font-family: var(--global--font-secondary);
  48      line-height: var(--global--line-height-body);
  49  }
  50  
  51  /**
  52   * Relax the definition a bit, to allow components to override it manually.
  53   */
  54  * {
  55  
  56      &,
  57      &::before,
  58      &::after {
  59          box-sizing: inherit;
  60      }
  61  }
  62  
  63  // body resets
  64  body {
  65      font-size: var(--global--font-size-base);
  66      font-weight: normal;
  67      color: var(--global--color-primary);
  68      text-align: left;
  69      background-color: var(--global--color-background);
  70  }
  71  
  72  
  73  button {
  74      cursor: pointer;
  75  }