Implement a button to create items of a specific subtype in the player inventory (closes #120)

This commit is contained in:
Oliver-Akins 2024-03-22 23:35:04 -06:00
parent b3e699bc32
commit 96f5b17785
9 changed files with 73 additions and 21 deletions

View file

@ -27,6 +27,40 @@
}
}
.item-group {
&__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
&__create-item {
@include material.elevate(2);
color: var(--inventory-create-item-font-color);
&:hover {
@include material.elevate(4);
}
&:focus-visible, &:active {
@include material.elevate(8);
}
}
&__list {
&--material {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
&--untyped {
display: flex;
gap: 8px;
flex-direction: column;
}
}
}
.panel {
padding: 8px;
border-radius: 4px;
@ -54,7 +88,7 @@
background: hsl( from currentColor / 50% ); // probably gonna need color-mix
}
&:focus-visible {
&:focus-visible, &:active {
border-width: 2px;
border-color: currentColor;
background: var(--elevation-8dp-bg);
@ -94,18 +128,6 @@
}
}
.material-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.untyped-list {
display: flex;
gap: 8px;
flex-direction: column;
}
.material {
@include material.elevate(1);
padding: 8px;
@ -174,6 +196,7 @@
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
&:hover {
cursor: pointer;
@ -188,6 +211,7 @@
}
&__name {
flex-grow: 1;
cursor: inherit;
font-family: var(--inventory-item-name-font);
font-size: var(--inventory-item-name-font-size);
}

View file

@ -48,6 +48,9 @@ $body-font: sans-serif;
--skill-training-select-text-color: #{$on-surface};
--skill-roll-button-text-color: #{$on-surface};
/* General variables for inventory tab */
--inventory-create-item-font-color: white;
/* Common Inventory Item Variables */
--inventory-item-name-font: #{$body-font};
--inventory-item-name-font-size: 0.875rem;