consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a border to the menu button

Browse Source 
This way we make it more obvious that it's clickable and, since adding a
border requires adding padding, we increase the touch area, making it
easier to use and more accessible for users with motor disabilities.

Since now the button looks like a button, we don't need the pointer
cursor Foundation adds to hamburger icons and can use the default cursor
browsers provide for buttons.
This commit is contained in:
Javi Martín
2021-05-19 00:43:26 +02:00
parent 26a8f2eace
commit 747e6146a7
1 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/layout.scss
View File

@@ -668,11 +668,15 @@ body > header,
} }
.menu-button { .menu-button {
border: 1px solid;
border-radius: $button-radius;
color: inherit; color: inherit;
padding: 0.6em;
} }
.menu-icon { .menu-icon {
@include hamburger($color: currentcolor, $color-hover: currentcolor); @include hamburger($color: currentcolor, $color-hover: currentcolor);
cursor: inherit;
} }
.title-bar { .title-bar {