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

   1 .docs-site-nav {
   2     display: flex;
   3     flex-direction: column;
   4     flex: 1;
   5     grid-column: 1 / -1;
   6     grid-row: 1;
   7
   8     ul {
   9         list-style: none;
  10         font-size: var(--step-1);
  11         margin-top: 1rem;
  12         margin-block-start: 1rem;
  13         margin-bottom: 2rem;
  14         margin-block-end: 2rem;
  15
  16         @media all and (min-width: 1024px) {
  17             font-size: var(--step-0);
  18             margin-top: 0;
  19             margin-block-start: 0;
  20             margin-bottom: 0;
  21             margin-block-end: 0;
  22             align-items: center;
  23             display: flex;
  24         }
  25     }
  26
  27     .flexer {
  28         display: flex;
  29         justify-self: flex-end;
  30         align-self: flex-end;
  31     }
  32
  33     a:not(.c-btn) {
  34         text-decoration: none;
  35         color: inherit;
  36         transition: color .2s linear;
  37         display: block;
  38
  39         &:hover {
  40             color: var(--link-color);
  41         }
  42     }
  43
  44     a:not(.c-btn)[aria-current="page"],
  45     a:not(.c-btn)[aria-current="true"] {
  46         color: var(--link-color);
  47         text-decoration: none;
  48         font-weight: 500;
  49     }
  50 }
  51
  52 .docs-nav-panel {
  53     @media all and (min-width: 1024px) {
  54         display: flex;
  55         flex-direction: row;
  56         justify-content: center;
  57     }
  58
  59     &[data-open="false"] {
  60         display: none;
  61     }
  62
  63     &[data-open="true"] {
  64         @media all and (min-width: 1024px) {
  65             display: flex;
  66             flex-direction: row;
  67             justify-content: center;
  68         }
  69     }
  70 }
  71
  72 .docs-nav-panel .mobile-only {
  73     @media all and (min-width: 1024px) {
  74         display: none;
  75     }
  76 }
  77
  78 .docs-site-nav-toggle {
  79     cursor: pointer;
  80     display: inline-flex;
  81     align-items: center;
  82     margin-left: .5rem;
  83     margin-right: -10px;
  84     margin-inline-start: .5rem;
  85     margin-inline-end: -10px;
  86
  87     svg {
  88         width: 40px;
  89         height: 40px;
  90         color: var(--headings-color);
  91         fill: none;
  92         stroke-width: 4;
  93         stroke-linecap: round;
  94         stroke-linejoin: round;
  95     }
  96
  97     #ham-top,
  98     #ham-middle,
  99     #ham-bottom {
 100         transition: all .2s linear;
 101     }
 102
 103     #ham-top {
 104         transform-origin: 30px 37px;
 105     }
 106
 107     #ham-bottom {
 108         transform-origin: 30px 63px;
 109     }
 110
 111     &[aria-expanded="true"] {
 112         #ham-middle {
 113             opacity: 0;
 114         }
 115
 116         #ham-top {
 117             transform: rotate(41deg);
 118         }
 119
 120         #ham-bottom {
 121             transform: rotate(-41deg);
 122         }
 123     }
 124 }
 125
 126 @media all and (min-width: 1024px) {
 127     .docs-site-nav {
 128         flex-direction: row;
 129         grid-column: auto;
 130         gap: 2rem;
 131
 132         ul {
 133             display: flex;
 134             gap: 2rem;
 135             font-size: var(--step-0);
 136
 137             li {
 138                 margin-bottom: 0;
 139                 margin-block-end: 0;
 140             }
 141         }
 142
 143         .flexer {
 144             order: 1;
 145         }
 146     }
 147 }