navigation.css

/*!
 * Navigation
 */

.ui-header-navbar,
.ui-nav-collapse > ul {
  background-color: #f5f5f5;
  color: #777;
}

.ui-header-navbar h2,
.ui-header-navbar h3 {
  font-size: 150%;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
}

.ui-header-navbar a {
  color: #777;
  display: inline-block;
}

.ui-header-navbar i {
  height: 1.6em;
}

.ui-navbar-brand {
  float: left;
  margin: 0.5em 1.2em 0.6em 0;
}

.ui-navbar-nav,
.ui-navbar-nav > ul {
  float: left;
  margin-bottom: 0;
  vertical-align: top;
}

.ui-navbar-nav {
  max-height: 3.5em;
}

.ui-navbar-nav > ul > li {
  display: table-cell;
}

.ui-navbar-nav > ul > li > a {
  font-size: 125%;
  padding: 0.6em;
}

.ui-navbar-form,
.ui-navbar-account {
  font-size: 93.75%;
  padding-bottom: 0.6em;
  padding-top: 0.6em;
  text-align: right;
  vertical-align: bottom;
}

.ui-navbar-form input {
  background-color: #fff;
  color: #777;
}

.ui-navbar-text {
  display: inline-block;
  height: 2em;
  margin: 0.7em 0 0.8em;
}

.ui-nav-collapse > :first-child {
  cursor: pointer;
  display: none;
  float: left;
  padding-bottom: 0.8em;
  padding-top: 0.8em;
}

.ui-nav-collapse i {
  height: 1.4em;
}

.ui-nav-tabs,
.ui-nav-pills,
.ui-nav-stacked,
.ui-nav-pagination,
.ui-header-navbar > nav > ul {
  display: inline-block;
  list-style: none;
  padding-left: 0;
}

.ui-nav-tabs > li,
.ui-nav-pills > li {
  float: left;
}

.ui-nav-tabs > li:not(:last-child),
.ui-nav-pills > li:not(:last-child) {
  margin-right: 0.2rem;
}

.ui-nav-tabs > li > a,
.ui-nav-pills > li > a,
.ui-nav-stacked > li > a {
  display: inline-block;
  padding: 0.4em 0.8em;
}

.ui-nav-tabs > li:hover,
.ui-nav-pills > li:hover,
.ui-nav-stacked > li:hover,
.ui-navbar-nav > ul > li:hover {
  background-color: #e8e8e8;
}

.ui-nav-tabs:not(.ui-nav-justified) {
  border-bottom: 1px solid #ccc;
  width: 100%;
}

.ui-nav-tabs > li {
  border: 1px solid transparent;
  border-bottom-color: #ccc;
  border-radius: var(--border-radius, 0) var(--border-radius, 0) 0 0;
  margin-bottom: -1px;
}

.ui-nav-tabs > .ui-state-active {
  background-color: transparent;
  border-color: #ccc #ccc #fff;
}

.ui-nav-justified {
  width: 100%;
}

/**
 * 1. Ensure that `float` will not modify the computed value of `display`.
 */

.ui-nav-justified > li {
  display: table-cell;
  float: none; /* 1 */
  width: 1%;
}

.ui-nav-justified > li > a,
.ui-nav-stacked > li > a {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.ui-nav-justified > li > a {
  padding: 0.4em 0;
  text-align: center;
  vertical-align: middle;
}

.ui-nav-pills > li {
  border: 1px solid transparent;
  border-radius: var(--border-radius, 0);
}

.ui-nav-pills > .ui-state-active {
  border-color: #ccc;
}

.ui-nav-stacked {
  border: 1px solid #ccc;
  border-radius: var(--border-radius, 0);
  overflow: hidden;
}

.ui-nav-breadcrumb {
  background-color: #f5f5f5;
  border-radius: var(--border-radius, 0);
  color: #333;
  list-style: none;
  margin-bottom: 1rem;
  padding: 0.4em 0.8em;
}

.ui-nav-breadcrumb > li {
  display: inline-block;
  white-space: nowrap;
}

.ui-nav-breadcrumb > li + li:before {
  color: #ccc;
  content: "/\00a0";
  padding: 0 0.4em;
}

.ui-nav-pagination > li {
  display: inline-block;
}

.ui-nav-pagination > li > :only-child {
  border: 1px solid #ccc;
  border-radius: var(--border-radius, 0);
  display: inline-block;
  padding: 0.4em 0.8em;
}

.ui-nav-pagination > li > :only-child:empty {
  border-radius: 50%;
  padding: 0.4em;
}

.ui-nav-pagination > li > :only-child:focus,
.ui-nav-pagination > li > :only-child:hover {
  background-color: #e8e8e8;
  color: #333;
}

.ui-nav-left,
.ui-nav-right {
  font-size: 150%;
  opacity: 0.65;
  position: relative;
  top: -0.8em;
}

.ui-nav-left {
  float: left;
  left: -0.4em;
}

.ui-nav-right {
  float: right;
  right: -0.4em;
}

.ui-nav-left:hover,
.ui-nav-right:hover {
  cursor: pointer;
  opacity: 1;
}

.ui-nav-vertical {
  padding: 0.4em 0.8em;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ui-nav-vertical > li {
  display: block;
}