infima/styles/components/pills.css

A UI framework for content-centric websites.

:root {
  --ifm-pills-color-active: var(--ifm-color-primary);
  --ifm-pills-color-background-active: var(--ifm-hover-overlay);
  --ifm-pills-spacing: 0.0625rem;
}

.pills {
  font-weight: var(--ifm-font-weight-bold);
  padding-left: 0;

  & > .pill-item {
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-block;
    list-style-type: none;
    padding: 0.25rem 1rem;

    &.pill-item--active {
      background: var(--ifm-pills-color-background-active);
      color: var(--ifm-pills-color-active);
    }

    &:not(.pill-item--active):hover {
      background-color: var(--ifm-pills-color-background-active);
      transition: background var(--ifm-transition-fast)
        cubic-bezier(0.08, 0.52, 0.52, 1);
    }

    &:not(:first-child) {
      margin-left: var(--ifm-pills-spacing);
    }

    &:not(:last-child) {
      margin-right: var(--ifm-pills-spacing);
    }
  }

  & > .pill-item + .pill-item {
    margin-top: 0;
  }

  &.pills--block {
    display: flex;
    justify-content: stretch;

    @media (--ifm-narrow-window) {
      flex-direction: column;
    }

    & > .pill-item {
      flex-grow: 1;
      text-align: center;

      @media (--ifm-narrow-window) {
        &:not(:first-child) {
          margin-top: var(--ifm-pills-spacing);
        }

        &:not(:last-child) {
          margin-bottom: var(--ifm-pills-spacing);
        }
      }
    }
  }
}