css.sidebar.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of dotty-doc_0.20 Show documentation
dotty-doc-bootstrapped
The newest version!
.sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  /* Safari and some others don't support overflow: x y */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* nicer scrolling on touch screens */
  font-family: var(--font-family-sans-serif);
  font-weight: 400;
  background: var(--primary);
  border-top: 1px solid black;
  /* hidden by default, shown by toggle (on small screens) */
  visibility: hidden;
  opacity: 0;
  transition: visibility .25s ease-out, opacity .25s ease-out;
}

.sidebar.toggled {
  visibility: visible;
  opacity: 1;
}

.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 .toc > li {
  border-left: 2px solid var(--accent);
  padding-left: 1em;
}

.sidebar > ul > li.leaf > a, .sidebar li.section > a {
  color: white;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

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

.sidebar a {
  width: 100%;
  color: var(--contrast);
  transition: color .2s ease-out;
}
.sidebar a:hover {
  color: var(--accent) !important;
}

/* API Documentation */
.package-toggle i.fas {
  font-size: 15px;
  margin-right: 5px;
}

.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;
}
.entity-kinds a.trait {
  background: #19aacf;
}

.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 */
    width: 320px;
    visibility: visible;
    opacity: 1;
    margin-left: 0;
    transition: margin .25s ease-out;
  }
  .sidebar.toggled {
    margin-left: -320px;
  }
  #content-wrapper {
    margin-left: 320px !important;
    transition: margin .25s ease-out;
  }
  .sidebar.toggled ~ #content-wrapper {
    margin-left: 0 !important;
  }
}