packages/styles/scss/base/_reset.scss

   1 article,
   2 aside,
   3 details,
   4 dialog,
   5 figure,
   6 footer,
   7 header,
   8 main,
   9 menu,
  10 nav,
  11 section {
  12         display: block;
  13 }
  14
  15 audio,
  16 canvas,
  17 progress,
  18 video {
  19         display: inline-block;
  20 }
  21
  22 abbr,
  23 mark,
  24 meter,
  25 time,
  26 output {
  27         display: inline;
  28 }
  29
  30 /* reset minimum */
  31 html,
  32 body,
  33 blockquote,
  34 ul,
  35 ol,
  36 form,
  37 input,
  38 button,
  39 figure {
  40         margin: 0;
  41         padding: 0;
  42 }
  43
  44 button,
  45 progress {
  46         border: 0;
  47 }
  48
  49 p,
  50 ul,
  51 ol,
  52 dl,
  53 blockquote,
  54 pre,
  55 menu,
  56 td,
  57 th {
  58         font-size: 1em;
  59         line-height: inherit;
  60         margin-block: $base-line-height * 1em;
  61         margin-inline: 0;
  62 }
  63
  64 @if $use-reset-button==true {
  65         /* reset buttons, remember to style them in forms */
  66         input,
  67         select,
  68         textarea,
  69         optgroup,
  70         button {
  71                 background: transparent;
  72                 border: 0;
  73                 font: inherit;
  74                 color: inherit;
  75                 /* stylelint-disable-next-line */
  76                 -webkit-appearance: none; // -webkit-appearance: none makes vocalization failing
  77         }
  78
  79         input[type='checkbox'] {
  80                 /* stylelint-disable-next-line */
  81                 -webkit-appearance: checkbox;
  82         }
  83
  84         input[type='radio'] {
  85                 /* stylelint-disable-next-line */
  86                 -webkit-appearance: radio;
  87         }
  88 } @else {
  89         input,
  90         select,
  91         textarea,
  92         optgroup,
  93         button {
  94                 font: inherit;
  95                 color: inherit;
  96         }
  97 }
  98
  99 /* makes you want to click on */
 100 label,
 101 button,
 102 input[type='submit'],
 103 input[type='button'],
 104 input[type='reset'] {
 105         cursor: pointer;
 106 }
 107
 108 button[disabled],
 109 input[type='submit'][disabled],
 110 input[type='button'][disabled],
 111 input[type='reset'][disabled] {
 112         cursor: default;
 113         pointer-events: none;
 114 }
 115
 116 /* avoid dummy resize */
 117 textarea {
 118         resize: vertical;
 119         cursor: auto; // fixes an issue on Chrome using CSS custom scroll
 120 }
 121
 122 /* remove a Firefox difference on button tag */
 123 button::-moz-focus-inner {
 124         border: 0;
 125         padding: 0;
 126 }
 127
 128 label,
 129 button,
 130 input,
 131 select {
 132         color: currentcolor;
 133         vertical-align: middle;
 134 }
 135
 136 @if $use-reset-button==false {
 137         /** fix typo inputs **/
 138         input,
 139         select,
 140         textarea,
 141         optgroup,
 142         button {
 143                 font: inherit;
 144         }
 145 }
 146
 147 /* fix display img/iframe */
 148 @if $use-vertical-align-img-iframe==true {
 149         img,
 150         iframe {
 151                 vertical-align: middle;
 152         }
 153 }
 154
 155 iframe,
 156 dialog {
 157         border: 0;
 158 }
 159
 160 ul,
 161 ol,
 162 menu {
 163         padding-inline-start: 2em;
 164 }
 165
 166 dd {
 167         margin-inline-start: 2em;
 168 }
 169
 170 b,
 171 strong {
 172         font-weight: bold;
 173 }
 174
 175 /* harmonization between Chrome/Firefox */
 176 pre,
 177 code,
 178 kbd,
 179 samp {
 180         font-family: $font-family-monospace;
 181         font-size: 1em;
 182 }
 183
 184 pre {
 185         white-space: pre-wrap;
 186         word-wrap: break-word;
 187 }
 188
 189 small {
 190         font-size: 80%;
 191 }
 192
 193 /* avoid border on images in links */
 194 a {
 195         &:link,
 196         &:visited {
 197                 img {
 198                         border-style: none;
 199                 }
 200         }
 201 }
 202
 203 /* fix border image IE */
 204 img {
 205         border-style: none;
 206 }
 207
 208 /* tiny control */
 209 audio:not([controls]) {
 210         display: none;
 211         block-size: 0;
 212 }
 213
 214 /* important, abbr are good
 215  * only those with a title are shown */
 216 abbr[title] {
 217         border-block-end: dotted 1px;
 218         cursor: help;
 219         text-decoration: none;
 220
 221         /* color inherited from text */
 222 }
 223
 224 code,
 225 pre,
 226 samp {
 227         white-space: pre-wrap;
 228 }
 229
 230 code {
 231         line-height: 1;
 232 }
 233
 234 dfn {
 235         font-style: italic;
 236 }
 237
 238 /*
 239  * taken from http://tinytypo.tetue.net/ made by @tetue
 240  * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 241  *
 242  * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference
 243  */
 244 html {
 245         quotes: '\201C''\201D''\2018''\2019'; // default
 246 }
 247
 248 @each $quotes
 249         in (
 250                 ('lang': 'fr', 'quotes': '"\00AB\00A0" "\00A0\00BB" "\201C" "\201D" "\2018" "\2019"'),
 251                 ('lang': 'en', 'quotes': '"\201C" "\201D" "\2018" "\2019"'),
 252                 ('lang': 'es', 'quotes': '"\00AB" "\00BB" "\201C" "\201D"'),
 253                 ('lang': 'it', 'quotes': '"\00AB\00A0" "\00A0\00BB" "\201C" "\201D"'),
 254                 ('lang': 'de', 'quotes': '"\201e" "\201c" "\201a" "\2018"'),
 255                 ('lang': 'ja', 'quotes': '"\300c" "\300d" "\300e" "\300f"'),
 256                 ('lang': 'ar', 'quotes': '"\201C" "\201D"')
 257         )
 258 {
 259         :lang(#{map-get($quotes, 'lang')}) {
 260                 quotes: #{map-get($quotes, 'quotes')};
 261         }
 262 }
 263
 264 blockquote,
 265 q {
 266         &::before {
 267                 content: open-quote;
 268         }
 269
 270         &::after {
 271                 content: close-quote;
 272         }
 273 }