108 lines
2.5 KiB
SCSS
108 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 5ch;
|
|
}
|
|
&--armor {
|
|
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
|
|
}
|
|
&--shield {
|
|
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
|
|
}
|
|
&--equipment {
|
|
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
|
|
}
|
|
&--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;
|
|
}
|
|
&--talent {
|
|
grid-template-columns: $row-height 1fr 21ch 3fr 5ch;
|
|
}
|
|
&--racial-ability,
|
|
&--language,
|
|
&--alphabet,
|
|
&--special-creature-ability {
|
|
grid-template-columns: $row-height 1fr 3fr 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;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&__image {
|
|
border: none;
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
|
|
&__control-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 0 calc(1em / 3);
|
|
}
|
|
}
|
|
|
|
.ds4-item-list-title {
|
|
border-bottom: variables.$border-groove;
|
|
font-weight: bold;
|
|
margin-bottom: 0;
|
|
margin-top: 1em;
|
|
padding-left: 1em;
|
|
}
|