Implement the Inventory tab's sub-navigation (closes #97)

This commit is contained in:
Oliver-Akins 2024-03-02 22:40:32 -07:00
parent 2065596686
commit 5f09f92790
12 changed files with 90 additions and 23 deletions

View file

@ -1,13 +1,11 @@
@use "./themes/dark.scss";
@use "../../../mixins/material" as material;
@use "../../../mixins/partials" as partials;
@use "./pages/stats.scss";
.dotdungeon .actor--pc {
.dotdungeon .actor--pc-v2 {
background-color: var(--sheet-bg);
position: relative;
color: white;
.e-0dp { @include material.elevate(0); }
.e-1dp { @include material.elevate(1); }
@ -20,12 +18,33 @@
.e-16dp { @include material.elevate(16); }
.e-24dp { @include material.elevate(24); }
nav {
background-color: var(--nav-bg);
@include material.elevate(02);
.nav-bar {
@include material.elevate(8);
background: color-mix(in lab, var(--nav-bg), white 5%);
position: absolute;
bottom: 0;
width: 100%;
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;
&:hover {
// background: color-mix(in lab, inherit, currentColor 4%);
@include material.elevate(4);
}
}
}
.page-content {