krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 07:07:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add :focus styles to match :hover styles

Browse Source 
Add :focus styles to the .habitica-menu-dropdown.
These match the existing :hover styles.
This commit is contained in:
Ian Oxley
2019-03-28 20:38:17 +00:00
parent 5755bfc952
commit 6fba71ea2c
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/client/components/header/menu.vue
View File

@@ -290,6 +290,7 @@ div
margin-right: 24px; margin-right: 24px;
} }
&:focus /deep/ .top-menu-icon.svg-icon,
&:hover /deep/ .top-menu-icon.svg-icon { &:hover /deep/ .top-menu-icon.svg-icon {
color: $white; color: $white;
} }

8
website/client/components/ui/customMenuDropdown.vue
View File

@@ -12,12 +12,18 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
<style lang="scss"> <style lang="scss">
@import '~client/assets/scss/colors.scss'; @import '~client/assets/scss/colors.scss';
.habitica-menu-dropdown {
&:hover,
&:focus { // NB focus styles match the hover styles for .svg-icon
outline: none;
}
.habitica-menu-dropdown.open { &.open {
.habitica-menu-dropdown-toggle .svg-icon { .habitica-menu-dropdown-toggle .svg-icon {
color: $white !important; color: $white !important;
} }
} }
}
</style> </style>
<style lang='scss' scoped> <style lang='scss' scoped>
@import '~client/assets/scss/colors.scss'; @import '~client/assets/scss/colors.scss';