Make the nav buttons look like designs (closes #107)

This commit is contained in:
Oliver-Akins 2024-03-04 19:38:58 -07:00
parent 5f09f92790
commit cd6554289b
4 changed files with 13 additions and 4 deletions

View file

@ -12,6 +12,7 @@ $on-secondary: $t;
.actor--pc-v2 {
--sheet-bg: #{$background};
--nav-bg: #{$surface};
--nav-button-text: #{$on-surface};
/* Elevation backgrounds to following Material design */
--elevation-0dp-bg: #{$surface};

View file

@ -39,10 +39,18 @@
@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 {
// background: color-mix(in lab, inherit, currentColor 4%);
@include material.elevate(4);
@include material.elevate(6);
background: hsl( from currentColor / 50% ); // probably gonna need color-mix
}
}
}