Add :focus styles to match :hover styles

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

View File

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

View File

@@ -12,11 +12,17 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
<style lang="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 {
color: $white !important;
}
}
}
</style>
<style lang='scss' scoped>