Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

9
styles/sheets/actor/char-sheet/pages/inventory.scss Normal file
View file

@ -0,0 +1,9 @@
.dotdungeon .actor--pc-v2 .active .inventory-page {
margin-bottom: 100px;
}
.dotdungeon .actor--pc-v2 .active .inventory-page .tab[data-tab="player"] {
display: grid;
gap: 16px;
grid-template-columns: 1fr 4fr;
}

3
styles/sheets/actor/char-sheet/pages/stats.scss
View file

@ -1,6 +1,5 @@
.dotdungeon .actor--pc .active.stats-panel {
.dotdungeon .actor--pc-v2 .active.stats-page {
display: grid;
height: 100%;
gap: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;

2
styles/sheets/actor/char-sheet/themes/dark.scss
View file

@ -9,7 +9,7 @@ $on-surface: white;
$on-primary: $t;
$on-secondary: $t;
.actor--pc {
.actor--pc-v2 {
--sheet-bg: #{$background};
--nav-bg: #{$surface};

35
styles/sheets/actor/char-sheet/v2.scss
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 {