granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modify HeaderMenu CSS for position, state

Browse source 
* Fix positioning at top
* Make it full width with padding on phones
* Remove hover states on phones
This commit is contained in:
Justin Edmund 2022-12-27 17:17:34 -08:00
parent 9513f6b9e6
commit 95ef911781
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/HeaderMenu/index.scss
View file

@ -1,12 +1,18 @@
.Menu { .Menu {
background: var(--menu-bg); background: var(--menu-bg);
border-radius: 6px; border-radius: 6px;
box-sizing: border-box;
display: none; display: none;
min-width: 220px; min-width: 220px;
position: absolute; position: absolute;
top: $unit * 5.75; // This shouldn't be hardcoded. How to calculate it? top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
// Also, add space that doesn't make the menu disappear if you move your mouse slowly // Also, add space that doesn't make the menu disappear if you move your mouse slowly
z-index: 10; z-index: 10;
@include breakpoint(phone) {
left: $unit-2x;
right: $unit-2x;
}
} }
.MenuItem { .MenuItem {
@ -29,6 +35,16 @@
color: var(--text-primary); color: var(--text-primary);
} }
} }
@include breakpoint(phone) {
background: inherit;
color: inherit;
cursor: default;
a {
color: inherit;
}
}
} }
&.profile > div { &.profile > div {