Get most of the Untyped item implemented and functioning

This commit is contained in:
Oliver-Akins 2024-03-21 21:18:51 -06:00
parent a383225b8c
commit 6a355e63c0
7 changed files with 180 additions and 37 deletions

View file

@ -94,18 +94,16 @@
}
}
.item-list {
.material-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.material-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.untyped-list {
display: flex;
gap: 8px;
flex-direction: column;
}
.untyped-list {
display: flex;
gap: 8px;
flex-direction: column;
}
.material {
@ -140,6 +138,10 @@
@include material.elevate(4);
color: var(--inventory-material-hover-color);
}
&:focus-visible {
box-shadow: 0 0 10px var(--color-shadow-highlight);
}
}
&__input {
@ -173,8 +175,15 @@
gap: 8px;
align-items: center;
&:hover {
cursor: pointer;
}
button {
color: var(--inventory-material-color);
&:focus-visible {
box-shadow: 0 0 10px var(--color-shadow-highlight);
}
}
}
&__name {
@ -185,45 +194,86 @@
&__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) min-content;
grid-template-rows: repeat(3, min-content) auto;
grid-template-columns: repeat(3, minmax(0, 1fr)) 2.25rem;
grid-template-rows: repeat(3, 2.25rem) auto;
gap: 8px;
padding: 4px;
}
&__button {
@include material.elevate(2);
padding: 0px;
&:hover {
@include material.elevate(4);
}
&:focus-visible {
box-shadow: 0 0 10px var(--color-shadow-highlight);
}
&--send-to-chat {
@extend .untyped__button;
color: var(--inventory-untyped-send-to-chat-color);
}
&--edit {
@extend .untyped__button;
color: var(--inventory-untyped-edit-color);
}
&--delete {
@extend .untyped__button;
color: var(--inventory-untyped-delete-color);
background: var(--inventory-untyped-delete-bg);
&:hover {
background: var(--inventory-untyped-delete-bg-hover);
}
}
}
&__usage, &__tier {
@include material.elevate(1);
color: var(--inventory-untyped-card-color);
padding: 8px;
display: flex;
align-items: center
}
button {
@include material.elevate(2);
&:hover {
@include material.elevate(4);
}
align-items: center;
justify-content: space-between;
border-radius: 4px;
}
&__quantity--edit {
@include material.elevate(1);
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
justify-content: space-between;
padding: 0px 8px;
gap: 4px;
border-radius: 4px;
> :first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
input {
@include material.elevate(2);
font-family: var(--input-font);
font-size: var(--inventory-untyped-quantity-font-size);
width: 50px;
text-align: center;
border-radius: 4px;
padding: 5px 7px;
color: inherit;
}
}
&__description {
@include material.elevate(1);
color: var(--inventory-untyped-description-color);
margin: 0;
grid-row: span 3;
grid-column: span 3;
padding: 8px;
border-radius: 4px;
}
}
}

View file

@ -4,10 +4,12 @@ $background: #0a0a0a;
$surface: #121212;
$primary: #005300;
$secondary: #6c056c;
$danger: red;
$on-background: $t;
$on-surface: white;
$on-primary: $t;
$on-secondary: $t;
$on-danger: black;
$title-font: 'Pixelify Sans', sans-serif;
$body-font: sans-serif;
@ -56,5 +58,14 @@ $body-font: sans-serif;
--inventory-material-focus-color: white;
/* Untyped (custom) inventory item details */
--inventory-untyped-color: white;
--inventory-untyped-description-color: white;
--inventory-untyped-card-color: white;
--inventory-untyped-send-to-chat-color: white;
--inventory-untyped-edit-color: white;
--inventory-untyped-delete-color: white;
--inventory-untyped-delete-bg: color-mix(in lab, #{$danger} 30%, #{$surface});
--inventory-untyped-delete-bg-hover: color-mix(in lab, #{$danger} 37%, #{$surface});;
--inventory-untyped-quantity-font-size: 14px;
--inventory-untyped-quantity-color: white;
--inventory-untyped-quantity-input-color: white;
}

View file

@ -62,6 +62,10 @@
}
}
span.placeholder {
opacity: 60%;
}
.page-content {
padding: 16px;
padding-bottom: 69px;