twindy/src/preset/reset.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.

// This CSS reset tries to remove any styling and leave a "blank canvas"
// to work on. This is useful for web apps or complex websites where
// semantic elements should be used without worries about preexisting styles.

// Inspired by
// https://github.com/jgthms/minireset.css/blob/master/minireset.css
// https://github.com/necolas/normalize.css/blob/master/normalize.css
// https://cssreset.com/scripts/eric-meyer-reset-css/
@require "../mixins/base.styl";

tw-reset() {
  if __tw_once("reset") {
    *, *::before, *::after {
      box-sizing: inherit;
    }

    html {
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      box-sizing: border-box;
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      // font-size 100%
      font: inherit;
      vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
      display: block;
    }

    ol, ul {
      list-style: none;
    }

    blockquote, q {
      quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
      content: "";
      content: none;
    }

    html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
      margin: 0;
      padding: 0;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 100%;
      font-weight: normal;
    }

    ul {
      list-style: none;
    }

    button, input, optgroup, select, textarea {
      font-size: inherit;
      font-family: inherit;
      margin: 0;
      padding: 0;
      outline: none;
      border: none;
      width: auto;
      min-width: 0;
      background-color: transparent;
      color: inherit;
      text-transform: none;
    }

    button, input:not([type=checkbox]), optgroup, select, textarea {
      appearance: none;
      -webkit-appearance: none;
    }

    a {
      outline: none;
      color: inherit;
      text-decoration: none;
      background-color: transparent;
    }

    [contenteditable] {
      outline: none;
    }

    img, video, picture {
      display: block;
      height: auto;
      // max-width 100%
    }

    iframe {
      border: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    td, th {
      padding: 0;
    }

    td:not([align]), th:not([align]) {
      text-align: left;
    }

    input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
      appearance: none;
      -webkit-appearance: none;
    }

    button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
      border-style: none;
      padding: 0;
    }

    pre, tt, code, kbd, samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }
  }
}