1.docsNavContainer { 2 background: $sidenav; 3 height: 35px; 4 left: 0; 5 position: fixed; 6 width: 100%; 7 z-index: 100; 8} 9 10.docMainWrapper { 11 .wrapper { 12 &.mainWrapper { 13 padding-left: 0; 14 padding-right: 0; 15 padding-top: 10px; 16 } 17 } 18} 19 20.docsSliderActive { 21 .docsNavContainer { 22 box-sizing: border-box; 23 height: 100%; 24 overflow-y: auto; 25 -webkit-overflow-scrolling: touch; 26 padding-bottom: 50px; 27 } 28 29 .mainContainer { 30 display: none; 31 } 32} 33 34.navBreadcrumb { 35 box-sizing: border-box; 36 display: flex; 37 flex-flow: row nowrap; 38 font-size: 12px; 39 height: 35px; 40 overflow: hidden; 41 padding: 5px 10px; 42 43 a, span { 44 border: 0; 45 color: $sidenav-text; 46 } 47 48 i { 49 padding: 0 3px; 50 } 51} 52 53nav.toc { 54 position: relative; 55 56 section { 57 padding: 0px; 58 position: relative; 59 60 .navGroups { 61 display: none; 62 padding: 40px 10px 10px; 63 } 64 } 65 66 .toggleNav { 67 background: $sidenav; 68 color: $sidenav-text; 69 position: relative; 70 transition: background-color 0.3s, color 0.3s; 71 72 .navToggle { 73 cursor: pointer; 74 height: 24px; 75 margin-right: 10px; 76 position: relative; 77 text-align: left; 78 width: 18px; 79 80 &::before, &::after { 81 content: ""; 82 position: absolute; 83 top: 50%; 84 left: 0; 85 left: 8px; 86 width: 3px; 87 height: 6px; 88 border: 5px solid $sidenav-text; 89 border-width: 5px 0; 90 margin-top: -8px; 91 transform: rotate(45deg); 92 z-index: 1; 93 } 94 95 &::after { 96 transform: rotate(-45deg); 97 } 98 99 i { 100 &::before, &::after { 101 content: ""; 102 position: absolute; 103 top: 50%; 104 left: 2px; 105 background: transparent; 106 border-width: 0 5px 5px; 107 border-style: solid; 108 border-color: transparent $sidenav-text; 109 height: 0; 110 margin-top: -7px; 111 opacity: 1; 112 width: 5px; 113 z-index: 10; 114 } 115 116 &::after { 117 border-width: 5px 5px 0; 118 margin-top: 2px; 119 } 120 } 121 } 122 123 .navGroup { 124 background: $sidenav-overlay; 125 margin: 1px 0; 126 127 ul { 128 display: none; 129 } 130 131 h3 { 132 background: $sidenav-overlay; 133 color: $sidenav-text; 134 cursor: pointer; 135 font-size: 14px; 136 font-weight: 400; 137 line-height: 1.2em; 138 padding: 10px; 139 transition: color 0.2s; 140 141 i:not(:empty) { 142 width: 16px; 143 height: 16px; 144 display: inline-block; 145 box-sizing: border-box; 146 text-align: center; 147 color: rgba($sidenav-text, 0.5); 148 margin-right: 10px; 149 transition: color 0.2s; 150 } 151 152 &:hover { 153 color: $primary-bg; 154 155 i:not(:empty) { 156 color: $primary-bg; 157 } 158 } 159 } 160 161 &.navGroupActive { 162 background: $sidenav-active; 163 color: $sidenav-text; 164 165 ul { 166 display: block; 167 padding-bottom: 10px; 168 padding-top: 10px; 169 } 170 171 h3 { 172 background: $primary-bg; 173 color: $primary-overlay; 174 175 i { 176 display: none; 177 } 178 } 179 } 180 } 181 182 ul { 183 padding-left: 0; 184 padding-right: 24px; 185 186 li { 187 list-style-type: none; 188 padding-bottom: 0; 189 padding-left: 0; 190 191 a { 192 border: none; 193 color: $sidenav-text; 194 display: inline-block; 195 font-size: 14px; 196 line-height: 1.1em; 197 margin: 2px 10px 5px; 198 padding: 5px 0 2px; 199 transition: color 0.3s; 200 201 &:hover, 202 &:focus { 203 color: $primary-bg; 204 } 205 206 &.navItemActive { 207 color: $primary-bg; 208 font-weight: 900; 209 } 210 } 211 } 212 } 213 } 214 215 .toggleNavActive { 216 .navBreadcrumb { 217 background: $sidenav; 218 margin-bottom: 20px; 219 position: fixed; 220 width: 100%; 221 } 222 223 section { 224 .navGroups { 225 display: block; 226 } 227 } 228 229 230 .navToggle { 231 &::before, &::after { 232 border-width: 6px 0; 233 height: 0px; 234 margin-top: -6px; 235 } 236 237 i { 238 opacity: 0; 239 } 240 } 241 } 242} 243 244.docsNavVisible { 245 .navPusher { 246 .mainContainer { 247 padding-top: 35px; 248 } 249 } 250} 251 252@media only screen and (min-width: 900px) { 253 .navBreadcrumb { 254 padding: 5px 0; 255 } 256 257 nav.toc { 258 section { 259 .navGroups { 260 padding: 40px 0 0; 261 } 262 } 263 } 264} 265 266@media only screen and (min-width: 1024px) { 267 .navToggle { 268 display: none; 269 } 270 271 .docsSliderActive { 272 .mainContainer { 273 display: block; 274 } 275 } 276 277 .docsNavVisible { 278 .navPusher { 279 .mainContainer { 280 padding-top: 0; 281 } 282 } 283 } 284 285 .docsNavContainer { 286 background: none; 287 box-sizing: border-box; 288 height: auto; 289 margin: 40px 40px 0 0; 290 overflow-y: auto; 291 position: relative; 292 width: 300px; 293 } 294 295 nav.toc { 296 section { 297 .navGroups { 298 display: block; 299 padding-top: 0px; 300 } 301 } 302 303 .toggleNavActive { 304 .navBreadcrumb { 305 margin-bottom: 0; 306 position: relative; 307 } 308 } 309 } 310 311 .docMainWrapper { 312 display: flex; 313 flex-flow: row nowrap; 314 margin-bottom: 40px; 315 316 .wrapper { 317 padding-left: 0; 318 padding-right: 0; 319 320 &.mainWrapper { 321 padding-top: 0; 322 } 323 } 324 } 325 326 .navBreadcrumb { 327 display: none; 328 h2 { 329 padding: 0 10px; 330 } 331 } 332}