css.sidebar.css Maven / Gradle / Ivy

Go to download
.sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 1000;
  width: 275px;
  height: 100%;
  overflow-x: hidden; /* Safari and some others don't support overflow: x y */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* nicer scrolling on touch screens */
  font-family: var(--font-family-sidebar);
  background: var(--sidebar);
  margin-left: -275px; /* invisible by default, shown by toggle */
  transition: margin .25s ease-out;
}

.sidebar.toggled {
  margin-left: 0;
  box-shadow: -2px 0 8px var(--primary);
}

.sidebar ul.toc {
  padding-bottom: 60px; /* avoids unreachable elements at the end of toc */
  padding-left: 1em;
  padding-top: 1em;
  margin-bottom: 0;
}

.sidebar ul {
  list-style-type: none;
  padding-left: 0;
}

.sidebar li {
  margin-top: .5em;
}

.sidebar li.section ul {
  padding-left: 1em;
  display: none;
}
.sidebar li.section ul.toggled {
  display: block;
}

.sidebar li.section.index-entities ul {
  padding-left: 0;
}

.sidebar .index-entity.entity-package {
  margin-left: 5px;
  margin-top: .25em;
}

.sidebar .toc > li:not(.index-entities) > ul {
  border-left: 2px solid var(--sidebar-active);
  padding-left: 1em;
  margin-left: 5px;
}

.sidebar li a {
  font-size: var(--font-size-sidebar-page);
  font-weight: var(--font-weight-sidebar-page);
}

.sidebar > ul > li.leaf > a, .sidebar li.section > a {
  font-size: var(--font-size-sidebar-category);
  font-weight: var(--font-weight-sidebar-category);
  text-transform: capitalize;
  cursor: pointer;
  color: var(--sidebar-category);
}

.sidebar .entity-package > .entity-name {
  text-transform: none;
}

.sidebar a {
  width: 100%;
  color: var(--sidebar-page);
  transition: color .2s ease-out;
}
.sidebar a:hover, .sidebar a.toggled {
  color: var(--sidebar-active) !important;
}

/* API Documentation */
.package-toggle i.fas {
  font-size: 15px;
  margin-right: 1px;
  color: var(--sidebar-active);
}

.entity-kinds {
  display: inline-flex;
  /* so that it is aligned with the text AND allows to select the type
     and its companion if any. */
}

.entity-kinds > a.letter-anchor {
  float: left;
  width: 1.5em;
  height: 1.5em;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-right: 5px;
  border-radius: 1em;
}

.entity-kinds a.object {
  background: #2c6c8d;
}
.entity-kinds a.class {
  background: #44ad7d;
  padding-right: 1px;
}
.entity-kinds a.trait {
  background: #19aacf;
  padding-right: 1px;
}

.with-companion .entity-kinds:not(:hover) a.object {
  display:none;
}
.with-companion .entity-kinds:not(:hover) a.class {
  background: linear-gradient(45deg, #2c6c8d 49%, #44ad7d 51%);
}
.with-companion .entity-kinds:not(:hover) a.trait {
  background: linear-gradient(45deg, #2c6c8d 49%, #19aacf 51%);
}

@media (min-width: 768px) {
  .sidebar { /* visible by default, hidden by toggle */
    margin-left: 0;
    box-shadow: -2px 0 8px var(--primary);
  }
  .sidebar.toggled {
    margin-left: -275px;
    box-shadow: none;
  }
  #content-wrapper {
    margin-left: 275px !important;
    transition: margin .25s ease-out;
  }
  .sidebar.toggled ~ #content-wrapper {
    margin-left: 0 !important;
  }
}