eslint/docs/src/assets/scss/components/docs-index.scss

   1 .docs-index .docs-index__list {
   2     a {
   3         border-radius: var(--border-radius);
   4         text-decoration: none;
   5         display: flex;
   6         justify-content: space-between;
   7         align-items: center;
   8         padding: .5rem .75rem;
   9         margin-left: -.75rem;
  10         margin-inline-start: -.75rem;
  11         color: var(--headings-color);
  12
  13         &:hover,
  14         &[aria-current="true"] {
  15             background-color: var(--docs-lightest-background-color);
  16             color: var(--link-color);
  17         }
  18
  19         @media all and (max-width: 1023px) {
  20             padding: .5rem 1rem;
  21             margin-left: 0;
  22             margin-inline-start: 0;
  23         }
  24     }
  25 }
  26
  27 .docs-index__item {
  28     margin: 0;
  29
  30     ul ul {
  31         padding-left: .75rem;
  32     }
  33
  34     &[data-has-children] {
  35         margin-bottom: .5rem;
  36     }
  37 }
  38
  39 .docs-index__list > .docs-index__item {
  40     margin-top: 1.5rem;
  41     margin-block-start: 1.5rem;
  42
  43     > a {
  44         color: var(--icon-color);
  45         text-transform: uppercase;
  46         letter-spacing: 1px;
  47         font-size: .875rem;
  48         font-weight: 500;
  49     }
  50 }
  51
  52 /* Styles for the accordion icon */
  53 .index-js .index-icon {
  54     display: block !important;
  55     width: 0.75rem;
  56     height: 0.5rem;
  57     transform-origin: 50% 50%;
  58     transition: all 0.1s linear;
  59     color: inherit;
  60 }
  61
  62 .index-js [aria-expanded="true"] .index-icon {
  63     -ms-transform: rotate(180deg);
  64     transform: rotate(180deg);
  65 }
  66
  67 .index-js ul[aria-hidden="true"] {
  68     display: none;
  69 }
  70
  71 .index-js ul[aria-hidden="false"] {
  72     display: block;
  73 }
  74
  75 .docs__index__panel {
  76     &[data-open="false"] {
  77         display: none;
  78
  79         @media all and (min-width: 1024px) {
  80             display: block;
  81         }
  82     }
  83
  84     &[data-open="true"] {
  85         display: block;
  86
  87         @media all and (min-width: 1024px) {
  88             display: block;
  89         }
  90     }
  91 }
  92
  93 .docs-index-toggle {
  94     cursor: pointer;
  95     display: flex;
  96     width: 100%;
  97     padding: .75rem 1.125rem;
  98     align-items: center;
  99     justify-content: space-between;
 100     gap: .5rem;
 101     font-weight: 500;
 102     border: 1px solid var(--border-color);
 103     border-radius: var(--border-radius);
 104     background-color: var(--secondary-button-background-color);
 105     color: var(--secondary-button-text-color);
 106     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
 107
 108     &:hover {
 109         background-color: var(--secondary-button-hover-color);
 110     }
 111
 112     @media all and (min-width: 1024px) {
 113         display: none;
 114     }
 115
 116     svg {
 117         width: 1.5em;
 118         height: 1.5em;
 119         color: inherit;
 120         fill: none;
 121         stroke-width: 4;
 122         stroke-linecap: round;
 123         stroke-linejoin: round;
 124     }
 125
 126     #ham-top,
 127     #ham-middle,
 128     #ham-bottom {
 129         transition: all .2s linear;
 130     }
 131
 132     #ham-top {
 133         transform-origin: 30px 37px;
 134     }
 135
 136     #ham-bottom {
 137         transform-origin: 30px 63px;
 138     }
 139
 140     &[aria-expanded="true"] {
 141         #ham-middle {
 142             opacity: 0;
 143         }
 144
 145         #ham-top {
 146
 147             transform: rotate(41deg);
 148         }
 149
 150         #ham-bottom {
 151             transform: rotate(-41deg);
 152         }
 153     }
 154 }
 155
 156 .eslint-actions {
 157     display: inline-flex;
 158     flex-wrap: wrap;
 159     flex-direction: column;
 160     width: 100%;
 161     gap: 1rem;
 162
 163     @media all and (min-width: 640px) {
 164         flex-direction: row;
 165     }
 166 }