Get the material items finished

This commit is contained in:
Oliver-Akins 2024-03-19 23:30:58 -06:00
parent 310ac07c88
commit 83d0bad21f
8 changed files with 146 additions and 9 deletions

View file

@ -0,0 +1,69 @@
@use "./themes/dark.scss";
@use "../../../../mixins/material" as material;
@use "../../../../mixins/partials" as partials;
@use "./pages/stats.scss";
@use "./pages/inventory.scss";
.dotdungeon .actor--pc-v2 {
background-color: var(--sheet-bg);
.e-0dp { @include material.elevate(0); }
.e-1dp { @include material.elevate(1); }
.e-2dp { @include material.elevate(2); }
.e-3dp { @include material.elevate(3); }
.e-4dp { @include material.elevate(4); }
.e-6dp { @include material.elevate(6); }
.e-8dp { @include material.elevate(8); }
.e-12dp { @include material.elevate(12); }
.e-16dp { @include material.elevate(16); }
.e-24dp { @include material.elevate(24); }
.scrollable {
container-type: size;
overflow: auto;
}
.nav-bar {
@include material.elevate(8);
background: color-mix(in lab, var(--nav-bg), white 5%);
position: absolute;
bottom: 0;
width: calc(100% - 6px);
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
@include partials.sub-nav("page", "inventory", flex);
button {
@include material.elevate(2);
height: 36px;
box-sizing: border-box;
color: var(--nav-button-text);
&:focus-visible {
border-style: solid;
border-width: 2px;
border-color: currentColor;
background: var(--elevation-8dp-bg);
}
&:hover {
@include material.elevate(6);
background: hsl( from currentColor / 50% ); // probably gonna need color-mix
}
}
}
.page-content {
padding: 16px;
padding-bottom: 69px;
height: 100%;
}
}