alsa-tw-reset.scss

/*! Alsacreations-TW-Reset+ | MIT License | https://www.alsacreations.fr */

/*
  * Le layer `base` de Tailwind contient un fichier reset (Modern Normalize) lui-même [modifié par Tailwind](https://tailwindcss.com/docs/preflight).
  * Ce fichier Alsacreations-TW-Reset+ apporte des styles complémentaires (fix, accessibilité, print) que nous estimons nécessaires.
  */

/* ----------------------------- */
/* Reset basique                 */
/* ----------------------------- */

/*
  * Évite le min-width: auto sur les Flex Items et Grid Items
  * Voir <https://speakerdeck.com/goetter/flexbox-place-a-la-gueule-de-bois?slide=65>
  */

*,
*::before,
*::after {
  min-width: 0;
}

/*
  * 1. Supprime l'arrière-plan gris des liens actifs sur iOS
  * 2. Autorise la césure des mots longs par défaut
  */

html {
  -webkit-tap-highlight-color: transparent;
  /* 1 */
  overflow-wrap: break-word;
  /* 3 */
}

/*
* Supprime la bordure par défaut sur les images et iframes
*/

img {
  border-style: none;
}

iframe {
  border-style: none;
}

/*
  * SVG : Couleur de fill correspond à la couleur de texte courant
  */

svg:not([fill]) {
  fill: currentColor;
}

/* ----------------------------- */
/* Reset Accessibilité           */
/* ----------------------------- */

/*
  * Pas d'animations si l'utilisateur n'en souhaite pas
  */

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }
}

/*
  * Adaptation des curseurs selon l'état
  */

[aria-controls] {
  cursor: pointer;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
  * Adaptation des valeurs de display selon l'état
  */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* ----------------------------- */
/* Print reset                   */
/* ----------------------------- */

/* stylelint-disable */
@media print {

  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    width: auto;
    margin: auto;
    font-family: serif;
    font-size: 12pt;
  }

  p,
  .p-like,
  h1,
  .h1-like,
  h2,
  .h2-like,
  h3,
  .h3-like,
  h4,
  .h4-like,
  h5,
  .h5-like,
  h6,
  .h6-like,
  blockquote,
  label,
  ul,
  ol {
    color: #000;
    margin: auto;
  }

  .print {
    display: block;
  }

  .no-print {
    display: none;
  }

  /* Ni veuves ni orphelins */

  p,
  .p-like,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Pas de breaks au sein de ces éléments */

  blockquote,
  ul,
  ol {
    page-break-inside: avoid;
  }


  /* Pas de breaks après ces éléments */

  h1,
  .h1-like,
  h2,
  .h2-like,
  h3,
  .h3-like,
  caption {
    page-break-after: avoid;
  }

  a {
    color: #000;
  }

  a[href^="javascript:"]::after,
  a[href^="#"]::after {
    content: "";
  }
}

/* stylelint-enable */