Make the nav buttons look like designs (closes #107)
This commit is contained in:
parent
5f09f92790
commit
cd6554289b
4 changed files with 13 additions and 4 deletions
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue