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

   1 /* docs layout styles */
   2
   3 html {
   4     scroll-behavior: smooth;
   5 }
   6
   7 .docs {
   8     max-width: 1700px;
   9     margin: 0 auto;
  10 }
  11
  12 .docs-aside__content {
  13     flex: 1;
  14 }
  15
  16 .docs-wrapper {
  17     padding: 0 var(--space-s-l);
  18     flex: 1;
  19     display: flex;
  20     flex-direction: column;
  21
  22     @media all and (min-width: 1024px) {
  23         display: grid;
  24         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
  25         align-items: stretch;
  26     }
  27 }
  28
  29 .docs-nav {
  30     grid-column: 1 / 2;
  31     grid-row: 1 / 2;
  32     padding-top: var(--space-l-xl);
  33     padding-block-start: var(--space-l-xl);
  34     font-size: .875rem;
  35
  36     display: grid;
  37     grid-auto-rows: max-content;
  38     align-items: start;
  39
  40     @media all and (min-width: 1024px) {
  41         padding: var(--space-l-xl) 0;
  42         padding-right: var(--space-s-l);
  43         padding-inline-end: var(--space-s-l);
  44
  45         border-right: 1px solid var(--divider-color);
  46         border-inline-end: 1px solid var(--divider-color);
  47     }
  48 }
  49
  50 .docs-content {
  51     grid-column: 2 / 3;
  52     padding: var(--space-l-xl) 0;
  53     flex: 1;
  54
  55     @media all and (min-width: 800px) {
  56         display: grid;
  57         grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr);
  58         grid-gap: 1rem;
  59     }
  60
  61     @media all and (min-width: 1024px) {
  62         padding: 0;
  63     }
  64
  65     @media all and (min-width: 1300px) {
  66         grid-gap: 2rem;
  67     }
  68 }
  69
  70 .docs-main {
  71     flex: 1 1 68ch;
  72
  73     @media all and (min-width: 800px) {
  74         padding-right: var(--space-s-l);
  75         padding-inline-end: var(--space-s-l);
  76
  77         border-right: 1px solid var(--divider-color);
  78         border-inline-end: 1px solid var(--divider-color);
  79     }
  80
  81     @media all and (min-width: 1024px) {
  82         padding: var(--space-l-xl) var(--space-l-2xl);
  83     }
  84 }
  85
  86
  87 .docs-aside {
  88     grid-column: 2 / 3;
  89     display: flex;
  90     flex-direction: column;
  91
  92     @media all and (min-width: 800px) {
  93         padding: var(--space-l-xl) 0;
  94     }
  95 }
  96
  97 .docs-toc {
  98     flex: 1;
  99     align-self: center;
 100 }
 101
 102 .docs-edit-link {
 103     border-top: 1px solid var(--divider-color);
 104     padding-top: 1.5rem;
 105     padding-block-start: 1.5rem;
 106     margin: 3rem 0;
 107 }
 108
 109 div.correct,
 110 div.incorrect {
 111     position: relative;
 112
 113     &::after {
 114         position: absolute;
 115         top: -22px;
 116         right: -22px;
 117         offset-inline-end: -22px;
 118         offset-block-start: -22px;
 119     }
 120 }
 121
 122 div.correct {
 123     &::after {
 124         content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
 125     }
 126 }
 127
 128 div.incorrect {
 129     &::after {
 130         content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
 131     }
 132 }
 133
 134 pre[class*="language-"] {
 135     position: relative;
 136 }
 137
 138 .c-btn.c-btn--playground {
 139     position: absolute;
 140     font-size: var(--step--1);
 141     bottom: .5rem;
 142     right: .5rem;
 143     offset-block-end: .5rem;
 144     offset-inline-end: .5rem;
 145
 146     @media all and (max-width: 768px) {
 147         display: none;
 148     }
 149 }
 150
 151 @media (hover: none) {
 152     .anchorjs-link {
 153         opacity: 1;
 154     }
 155 }