ds4/scss/components/shared/_embedded_document_list.scss

/*
 * SPDX-FileCopyrightText: 2021 Johannes Loher
 * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 *
 * SPDX-License-Identifier: MIT
 */

@use "../../utils/mixins";
@use "../../utils/variables";

.ds4-embedded-document-list {
  @include mixins.mark-invalid-or-disabled-input;

  $row-height: 1.75em;

  display: grid;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.2em;
  margin: 0;
  padding: 0.5em 0;

  &--weapon {
    grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
    :nth-child(9n + 1),
    :nth-child(9n + 5),
    :nth-child(9n + 6),
    :nth-child(9n + 7) {
      justify-self: center;
    }
  }
  &--armor {
    grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
    :nth-child(9n + 1),
    :nth-child(9n + 7) {
      justify-self: center;
    }
  }
  &--shield {
    grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
    :nth-child(7n + 1),
    :nth-child(7n + 5) {
      justify-self: center;
    }
  }
  &--equipment {
    grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
    :nth-child(7n + 1) {
      justify-self: center;
    }
  }
  &--loot {
    grid-template-columns: $row-height 3ch 1fr 10ch 3fr 5ch;
  }
  &--spell {
    grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 5ch;
    :nth-child(9n + 1),
    :nth-child(9n + 4) {
      justify-self: center;
    }
  }
  &--talent {
    grid-template-columns: $row-height 1fr 4ch 3fr 5ch;
    :nth-child(9n + 3) {
      justify-self: center;
    }
  }
  &--racial-ability,
  &--language,
  &--alphabet,
  &--special-creature-ability {
    grid-template-columns: $row-height 1fr 3fr 5ch;
  }

  &--effect {
    grid-template-columns: $row-height $row-height $row-height 3fr 2fr $row-height 5ch;
    :nth-child(7n + 1),
    :nth-child(7n + 2),
    :nth-child(7n + 6) {
      justify-self: center;
    }
  }

  &--item-effect {
    grid-template-columns: $row-height 1fr 5ch;
  }

  &__row {
    display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`

    &--header {
      font-weight: bold;
    }

    > * {
      height: $row-height;
      line-height: $row-height;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &__image {
    border: none;
  }

  &__editable {
    &[type="text"],
    &[type="number"] {
      background-color: transparent;
      border: 0;
      padding: 0;
      height: 100%;
    }

    &--checkbox {
      &[type="checkbox"] {
        width: 100%;
        height: 100%;
        margin: 0px;
      }
    }
  }

  &__description {
    overflow: hidden;
    text-overflow: ellipsis;

    :not(:first-child) {
      display: none;
    }

    > * {
      font-size: 0.75em;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__clickable {
    cursor: pointer;
  }
}

.ds4-embedded-document-list-title {
  border-bottom: variables.$border-groove;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1em;
  padding-left: 1em;
}