ds4/src/scss/components/_item_list.scss

105 lines
2.5 KiB
SCSS

@use "../utils/mixins";
@use "../utils/variables";
.ds4-item-list {
@include mixins.mark-invalid-or-disabled-input;
$row-height: 1.75em;
align-items: center;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.2em;
margin: 0.5em 0;
overflow-y: auto;
padding: 0;
&--weapon {
grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
}
&--armor {
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
}
&--shield {
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 4ch;
}
&--equipment {
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 4ch;
}
&--loot {
grid-template-columns: $row-height 3ch 1fr 10ch 3fr 4ch;
}
&--spell {
grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
}
&--talent {
grid-template-columns: $row-height 1fr 1fr 3fr 4ch;
}
&--racial-ability,
&--language,
&--alphabet,
&--special-creature-ability {
grid-template-columns: $row-height 1fr 3fr 4ch;
}
&__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;
white-space: nowrap;
}
}
&__image {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
&--rollable:hover {
background-image: url("../../../icons/svg/d20-black.svg") !important;
cursor: pointer;
}
}
&__editable {
background-color: transparent;
border: 0;
padding: 0;
&--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;
}
}
}
.ds4-item-list-title {
border-bottom: variables.$border-groove;
font-weight: bold;
margin-bottom: 0;
margin-top: 1em;
padding-left: 1em;
}