eslint/docs/src/assets/scss/foundations.scss

   1 ::selection {
   2     background-color: var(--color-brand);
   3     color: #fff;
   4 }
   5
   6 h1:target,
   7 h2:target,
   8 h3:target,
   9 h4:target,
  10 h5:target,
  11 h6:target {
  12     background-color: var(--lighter-background-color);
  13 }
  14
  15 *:focus {
  16     outline: none;
  17 }
  18
  19 *:focus-visible {
  20     outline: 2px solid var(--outline-color);
  21     outline-offset: 3px;
  22 }
  23
  24 *.focus-visible {
  25     outline: 2px solid var(--outline-color);
  26     outline-offset: 3px;
  27 }
  28
  29 *:focus:not(:focus-visible) {
  30     outline: 1px solid transparent;
  31     box-shadow: none;
  32 }
  33
  34 .js-focus-visible *:focus:not(.focus-visible) {
  35     outline: 1px solid transparent;
  36     box-shadow: none;
  37 }
  38
  39 input:focus-visible {
  40     outline: 2px solid var(--link-color);
  41     border-color: var(--border-color);
  42 }
  43
  44 input:focus {
  45     outline: 2px solid transparent;
  46     box-shadow: 0 0 0 2px var(--link-color);
  47 }
  48
  49 *,
  50 *::before,
  51 *::after {
  52     box-sizing: border-box;
  53 }
  54
  55 html {
  56     accent-color: var(--link-color);
  57     background-color: var(--body-background-color);
  58     height: 100%;
  59     font-family: var(--text-font);
  60     overflow-x: hidden;
  61     caret-color: var(--link-color);
  62 }
  63
  64 body {
  65     font-size: var(--step-0);
  66     position: relative;
  67     margin: 0 auto;
  68     line-height: 1.5;
  69     display: flex;
  70     flex-direction: column;
  71     min-height: 100%;
  72     background-color: var(--body-background-color);
  73     color: var(--body-text-color);
  74 }
  75
  76 #skip-link {
  77     position: fixed;
  78     top: -30em;
  79     left: 0;
  80     right: auto;
  81     offset-block-start: -30em;
  82     offset-inline-start: 0;
  83     offset-inline-end: auto;
  84     z-index: 999;
  85     transition: top .1s linear;
  86
  87     &:focus {
  88         outline: 2px solid transparent;
  89         top: 2px;
  90         offset-block-start: 2px;
  91     }
  92
  93     &:focus-visible {
  94         outline: 2px solid transparent;
  95         top: 2px;
  96         offset-block-start: 2px;
  97     }
  98 }
  99
 100 main {
 101     flex: 1;
 102
 103     &:focus {
 104         outline: none;
 105     }
 106
 107     &:target {
 108         outline: none;
 109     }
 110 }
 111
 112 hr {
 113     border: none;
 114     border-top: 1px solid var(--divider-color);
 115     border-block-start: 1px solid var(--divider-color);
 116     background: none;
 117     height: 0;
 118     margin: 2rem 0;
 119 }
 120
 121 .content-container {
 122     width: 100%;
 123     margin: 0 auto;
 124     padding: var(--space-xl-3xl) calc(1rem + 1vw);
 125     max-width: 1700px;
 126
 127     @media all and (min-width: 1700px) {
 128         margin: auto;
 129     }
 130 }
 131
 132 .section-head {
 133     .section-supporting-text {
 134         text-align: center;
 135         max-width: 768px;
 136         margin: 0 auto var(--space-l-2xl);
 137     }
 138 }
 139
 140 .section-foot {
 141     margin-top: var(--space-l-2xl);
 142     margin-block-start: var(--space-l-2xl);
 143
 144     .section-supporting-text {
 145         text-align: center;
 146         font-size: var(--step--1);
 147         max-width: 768px;
 148         margin: 0 auto;
 149     }
 150 }
 151
 152 .section-title {
 153     margin-bottom: 1rem;
 154     margin-block-end: 1rem;
 155 }
 156
 157 .section-supporting-text {
 158     font-size: var(--step-1);
 159 }
 160
 161 code,
 162 pre {
 163     font-family: var(--mono-font);
 164     font-variant-ligatures: none;
 165 }
 166
 167 code {
 168     color: var(--link-color);
 169
 170     pre & {
 171         color: unset;
 172     }
 173 }
 174
 175 .c-icon {
 176     color: var(--icon-color);
 177     flex: none;
 178     transition: all .2s linear;
 179
 180     @media (-ms-high-contrast: active) {
 181         color: windowText;
 182     }
 183
 184     @media (forced-colors: active) {
 185         color: canvasText;
 186     }
 187 }
 188
 189 table {
 190     width: 100%;
 191     margin: 2.5rem 0;
 192     border-collapse: collapse;
 193     border: 1px solid var(--divider-color);
 194
 195     td {
 196         padding: .25rem .5rem;
 197         border: 1px solid var(--divider-color);
 198     }
 199
 200     th {
 201         background-color: var(--lightest-background-color);
 202         padding: .25rem .5rem;
 203     }
 204 }
 205
 206 .c-btn,
 207 button,
 208 a {
 209     .c-icon:hover {
 210         color: var(--link-color);
 211     }
 212 }
 213
 214 a {
 215     color: var(--link-color);
 216     transition: color .1s linear;
 217
 218     .side-header & {
 219         color: inherit;
 220         text-decoration: none;
 221     }
 222 }
 223
 224 svg {
 225     flex: none;
 226     transition: color .1s linear;
 227 }
 228
 229 p {
 230     margin: 0 0 1.5em;
 231
 232     :matches(nav, .posts-collection) & {
 233         margin-bottom: .75em;
 234         margin-block-end: .75em;
 235     }
 236 }
 237
 238 p,
 239 h1,
 240 h2,
 241 h3,
 242 h4,
 243 h5,
 244 h6 {
 245     overflow-wrap: break-word;
 246 }
 247
 248 ul,
 249 ol {
 250     margin-top: 0;
 251     margin-block-start: 0;
 252
 253     li {
 254         margin: 0 0 .75em;
 255     }
 256
 257     .person__bio & {
 258         padding-left: 1.5rem;
 259         padding-inline-start: 1.5rem;
 260     }
 261 }
 262
 263 .docs-main ul,
 264 .post-main ul,
 265 .docs-main ol,
 266 .post-main ol {
 267     margin: 1rem 0;
 268 }
 269
 270 ul[role="list"] {
 271     list-style: none;
 272     margin: 0;
 273     padding: 0;
 274
 275     li {
 276         margin: 0;
 277     }
 278 }
 279
 280 ol {
 281     list-style: decimal;
 282
 283     li::marker {
 284         color: var(--link-color);
 285     }
 286 }
 287
 288 p:empty {
 289     margin: 0;
 290     display: none;
 291 }
 292
 293 figure {
 294     margin-bottom: 4rem;
 295     margin-block-end: 4rem;
 296
 297     img {
 298         margin-bottom: 1rem;
 299         margin-block-end: 1rem;
 300     }
 301
 302     figcaption {
 303         color: var(--grey);
 304     }
 305 }
 306
 307 img {
 308     display: block;
 309     position: relative;
 310     max-width: 100%;
 311     height: auto;
 312 }
 313
 314 nav {
 315     /* rarely do we display bullets for lists in navigation */
 316     ol,
 317     ul {
 318         list-style: none;
 319         margin: 0;
 320         padding: 0;
 321     }
 322 }
 323
 324 .video {
 325     width: 90%;
 326     max-width: 1400px;
 327     margin: 2em auto;
 328
 329     iframe {
 330         aspect-ratio: 16 / 9;
 331         width: 100%;
 332         height: auto;
 333     }
 334 }
 335
 336 @media (prefers-reduced-motion: no-preference) {
 337     *:focus-visible,
 338     *.focus-visible {
 339         transition: outline-offset .15s linear;
 340         outline-offset: 3px;
 341     }
 342 }
 343
 344 /* typography */
 345
 346 .eyebrow {
 347     color: var(--link-color);
 348     font-size: 1rem;
 349     font-weight: 500;
 350     display: block;
 351     margin-bottom: 1.5rem;
 352     margin-block-end: 1.5rem;
 353 }
 354
 355 h1,
 356 h2,
 357 h3,
 358 h4,
 359 h5,
 360 h6 {
 361     font-family: var(--display-font);
 362     color: var(--headings-color);
 363     font-weight: 500;
 364     margin-top: 0;
 365     margin-block-start: 0;
 366 }
 367
 368 h2,
 369 h3,
 370 h4,
 371 h5,
 372 h6 {
 373     .docs-main &,
 374     .components-main & {
 375         margin-top: 3rem;
 376         margin-bottom: 1.5rem;
 377         margin-block-start: 3rem;
 378         margin-block-end: 1.5rem;
 379
 380         &:first-child {
 381             margin-top: 0;
 382             margin-block-start: 0;
 383         }
 384     }
 385 }
 386
 387 small,
 388 caption,
 389 cite,
 390 figcaption {
 391     font-size: var(--step--1);
 392 }
 393
 394 h6,
 395 .h6 {
 396     font-size: var(--step-0);
 397 }
 398
 399 h5,
 400 .h5 {
 401     font-size: var(--step-0); // 20
 402 }
 403
 404 h4,
 405 .h4 {
 406     font-size: var(--step-1); // 24
 407 }
 408
 409 h3,
 410 .h3 {
 411     font-size: var(--step-2);
 412     line-height: 1.2;
 413 }
 414
 415 h2,
 416 .h2 {
 417     font-size: var(--step-3);
 418     line-height: 1.2;
 419 }
 420
 421 h1,
 422 .h1 {
 423     font-size: var(--step-4);
 424     line-height: 1.2;
 425 }
 426
 427 .h0 {
 428     font-size: var(--step-6);
 429     line-height: 1.2;
 430 }