apex4x/Templates/_common/css/components-navigation.css

The Comprehensive ARIA Development Suite

/*--------------------------------------------------------------------
         CSS by Laurence Lewis October 2020
-------------------------------------------------------------------- */

nav {
  margin: auto;
  max-width: 40em;
  padding: 0 1em;
  text-align: center;
}
nav h2.parent--page {
  color: var(--globalWhite);
}

.left-aside nav > p {
  font-family: Frutiger, Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

nav > ul {
  list-style: none;
}

nav > ul > li {
  font-family: Frutiger, Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}
nav.parent--page > ul > li > a {
  text-decoration: none;
}

nav a,
nav a:link,
nav a:visited {
  background-color: var(--navLinkBackground);
  display: block;
  text-transform: uppercase;
  color: var(--globalWhite);
  padding: 0.5em;
  border: none;
  border-top: 1px solid var(--datepicker-lightGrey);
}

nav a:hover {
  color: var(--globalWhite);
  background: var(--whatsock-red);
}

nav a:focus {
  color: var(--globalWhite);
  background: var(--whatsock-red);
}

nav a[aria-current="page"] {
  color: var(--globalWhite);
  background: var(--whatsock-red);
}

@media (min-width: 87.5em) {
  nav {
    margin: 0.5em 0;
    max-width: 20em;
    padding: 0;
  }
}