dotty_res.styles.theme.components.pill.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of scaladoc_3 Show documentation
scaladoc
The newest version!
.pill {
  height: calc(4.5 * var(--base-spacing));
  padding-left: calc(1.25 * var(--base-spacing));
  padding-right: calc(1.5 * var(--base-spacing));
  background-color: var(--action-primary-background-default-solid);
  border-radius: 18px;
  border: 1px solid transparent;
  color: var(--text-primary);
  margin-right: calc(1.5 * var(--base-spacing));
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 768px) {
  .pill {
    display: none;
  }
}

.pill::after {
  content: url(../../../images/icon-buttons/arrow-down/light/default.svg);
  margin-left: calc(1.5 * var(--base-spacing));
}

.theme-dark .pill::after {
  content: url(../../../images/icon-buttons/arrow-down/dark/default.svg);
}

.pill-container:focus .pill::after {
  content: url(../../../images/icon-buttons/arrow-down/light/selected.svg);
  margin-left: calc(1.5 * var(--base-spacing));
}

.theme-dark .pill-container:focus .pill::after {
  content: url(../../../images/icon-buttons/arrow-down/dark/selected.svg);
}

.pill.has-value::after {
  display: none;
}

.pill .filter-name {
  color: var(--text-secondary);
  margin-right: calc(0.5 * var(--base-spacing));
  padding-bottom: 2px;
}

.pill > .close {
  display: none;
  margin-left: calc(1.5 * var(--base-spacing));
}

.pill.has-value > .close {
  display: block;
}

.pill-container {
  display: flex;
  align-items: center;
}

.pill-container ul {
  display: none;
  background-color: var(--action-primary-background-default-solid);
  color: var(--action-primary-content-hover);
  list-style-type: none;
  position: absolute;
  padding: 0;
  border-radius: 4px;
  padding-top: calc(1 * var(--base-spacing));
  padding-bottom: calc(1 * var(--base-spacing));
   top: 54px;
}

.pill-container ul li {
  padding: calc(1 * var(--base-spacing)) calc(4 * var(--base-spacing));
  cursor: pointer;
  display: flex;
}

.pill-container ul li:hover {
  background-color: var(--action-primary-background-hover);
}

.pill-container ul li[data-selected="true"]:hover {
  background-color: var(--action-primary-background-hover);
}

.pill-container ul li[data-selected="true"] {
  background-color: var(--action-primary-background-selected);
}

.pill-container ul li[data-selected="true"]::before {
  margin-right: calc(1.5 * var(--base-spacing));
  left: calc(1 * var(--base-spacing));
  content: url(../../../images/thick.svg);
  position: absolute;
}

.theme-dark .pill-container ul li[data-selected="true"]::before {
  content: url(../../../images/thick-dark.svg);
}

.pill-container.menu-visible ul {
  display: block;
}

.pill-container.menu-visible .pill {
  background-color: var(--action-primary-background-selected);
  border: 1px solid var(--action-primary-border-default);
}