From 75ea2ea9674615c98230f67936069f6a4f0f4030 Mon Sep 17 00:00:00 2001 From: Chris Beer <cabeer@stanford.edu> Date: Fri, 15 Mar 2019 10:26:25 -0700 Subject: [PATCH] Add button hover styles to our window sidebar tabs; fixes #2205 --- src/containers/WindowSideBarButtons.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js index c768e1338..71738d39c 100644 --- a/src/containers/WindowSideBarButtons.js +++ b/src/containers/WindowSideBarButtons.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import { withTranslation } from 'react-i18next'; import * as actions from '../state/actions'; import { @@ -48,10 +49,24 @@ const style = theme => ({ tab: { minWidth: 'auto', borderRight: '4px solid transparent', + '&:hover': { + textDecoration: 'none', + backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + '&$disabled': { + backgroundColor: 'transparent', + }, + }, }, tabSelected: { backgroundColor: theme.palette.secondary.light, borderRight: `4px solid ${theme.palette.secondary.main}`, + '&:hover': { + backgroundColor: theme.palette.secondary.light, + }, }, }); -- GitLab