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

   1 /* docs layout styles */
   2
   3 html {
   4     scroll-behavior: smooth;
   5 }
   6
   7 .docs-aside__content {
   8     flex: 1;
   9 }
  10
  11 .docs-wrapper {
  12     padding: 0 var(--space-s-l);
  13     flex: 1;
  14     display: flex;
  15     flex-direction: column;
  16     max-width: 1700px;
  17
  18     @media all and (min-width: 1024px) {
  19         display: grid;
  20         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
  21         align-items: stretch;
  22     }
  23     @media all and (min-width: 1700px) {
  24         margin: auto;
  25     }
  26 }
  27
  28 .docs-nav {
  29     grid-column: 1 / 2;
  30     grid-row: 1 / 2;
  31     padding-top: var(--space-l-xl);
  32     padding-block-start: var(--space-l-xl);
  33     font-size: 0.875rem;
  34     display: grid;
  35     grid-auto-rows: max-content;
  36     align-items: start;
  37
  38     @media all and (min-width: 1024px) {
  39         padding: var(--space-l-xl) 0;
  40         padding-right: var(--space-s-l);
  41         padding-inline-end: var(--space-s-l);
  42         border-right: 1px solid var(--divider-color);
  43         border-inline-end: 1px solid var(--divider-color);
  44     }
  45 }
  46
  47 .docs-content {
  48     grid-column: 2 / 3;
  49     padding: var(--space-l-xl) 0;
  50     flex: 1;
  51
  52     @media all and (min-width: 800px) {
  53         display: grid;
  54         grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr);
  55         grid-gap: 1rem;
  56     }
  57
  58     @media all and (min-width: 1024px) {
  59         padding: 0;
  60     }
  61
  62     @media all and (min-width: 1300px) {
  63         grid-gap: 2rem;
  64     }
  65 }
  66
  67 .docs-main {
  68     flex: 1 1 68ch;
  69
  70     @media all and (min-width: 800px) {
  71         padding-right: var(--space-s-l);
  72         padding-inline-end: var(--space-s-l);
  73         border-right: 1px solid var(--divider-color);
  74         border-inline-end: 1px solid var(--divider-color);
  75     }
  76
  77     @media all and (min-width: 1024px) {
  78         padding: var(--space-l-xl) var(--space-l-2xl);
  79     }
  80 }
  81
  82 .docs-aside {
  83     grid-column: 2 / 3;
  84     display: flex;
  85     flex-direction: column;
  86
  87     @media all and (min-width: 800px) {
  88         padding: var(--space-l-xl) 0;
  89     }
  90 }
  91
  92 .docs-toc {
  93     flex: 1;
  94     align-self: center;
  95 }
  96
  97 .docs-edit-link {
  98     border-top: 1px solid var(--divider-color);
  99     padding-top: 1.5rem;
 100     padding-block-start: 1.5rem;
 101     margin: 3rem 0;
 102 }
 103
 104 div.correct,
 105 div.incorrect {
 106     position: relative;
 107
 108     &::after {
 109         position: absolute;
 110         top: -22px;
 111         right: -22px;
 112         offset-inline-end: -22px;
 113         offset-block-start: -22px;
 114     }
 115 }
 116
 117 div.correct {
 118     &::after {
 119         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");
 120     }
 121 }
 122
 123 div.incorrect {
 124     &::after {
 125         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");
 126     }
 127 }
 128
 129 div.img-container {
 130     background-color: var(--img-background-color);
 131     border-radius: var(--border-radius);
 132
 133     img {
 134         margin: 0 auto;
 135     }
 136 }
 137
 138 pre[class*="language-"] {
 139     position: relative;
 140 }
 141
 142 .c-btn.c-btn--playground {
 143     position: absolute;
 144     font-size: var(--step--1);
 145     bottom: 0.5rem;
 146     right: 0.5rem;
 147     offset-block-end: 0.5rem;
 148     offset-inline-end: 0.5rem;
 149
 150     @media all and (max-width: 768px) {
 151         display: none;
 152     }
 153 }
 154
 155 @media (hover: none) {
 156     .anchorjs-link {
 157         opacity: 1;
 158     }
 159 }
 160
 161 #scroll-up-btn {
 162     width: 50px;
 163     height: 50px;
 164     display: none;
 165     position: fixed;
 166     right: 50px;
 167     bottom: 35px;
 168     font-size: 1.5rem;
 169     border-radius: 50%;
 170     color: var(--body-background-color);
 171     text-decoration: none;
 172     justify-content: center;
 173     align-items: center;
 174     background-color: var(--link-color);
 175
 176     @media (max-width: 800px) {
 177         right: 35px;
 178     }
 179
 180     @media (max-width: 600px) {
 181         right: 25px;
 182     }
 183 }