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