Skip to main content
Module

x/a11ynav/src/index.css

Library for accessible navigations
Go to Latest
File
body { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a { color: black; text-decoration: none;}
button:hover,button:focus,a:hover,a:focus { text-decoration: underline;}
pre[class*="language-"] { padding: 0 1em !important;}
nav { margin: 60px 0; position: relative;}
.site-nav { position: relative; z-index: 9001;}
.a11y-nav > .has-mega-menu { position: static;}
.a11y-nav li .mega-menu ul { position: static; background: none; padding: 0; border: none;}
.a11y-nav .mega-menu { position: absolute; justify-content: space-between; align-items: flex-start; border: 1px solid #ccc; width: 100%; background: white; top: calc(100% + 1em); left: 0;}
.a11y-nav .mega-menu > ul { display: flex;}
.a11y-nav .mega-menu > ul > li { flex: 1 1 auto; padding: 10px; width: 50%;}.a11y-nav .mega-menu > ul > li > a { font-weight: bold; margin: 0 0 5px;}
.a11y-nav .mega-menu.a11y-nav-active { display: flex !important;}
.a11y-nav .mega-menu img { padding: 10px;}
.container { max-width: 1230px; margin: 0 auto; display: flex;}
.container > * { flex: 1 1 auto;}
.main { width: 75%; padding: 0 10px;}
.side { width: 25%; padding: 0 10px;}
.rail-nav { display: block;}
.rail-nav > li { display: block;}
.rail-nav a, .rail-nav button { padding: 5px 0;}
.rail-nav li ul { position: static; border: none; border-left: 2px solid black; padding-left: 10px;}
.rail-nav li ul li { padding: 0;}
.rail-nav .active,.rail-nav [aria-expanded="true"] { font-weight: bold;}