IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 10:03:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Switch: Add hover effect for inline switch (#34387)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-05-19 16:25:04 +02:00 committed by GitHub
parent 8ddf6de6e7
commit c944a33b95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -54,7 +54,10 @@ export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps
return (
<div className={styles.inlineContainer}>
{showLabel && (
<label htmlFor={id} className={cx(styles.inlineLabel, value && styles.inlineLabelEnabled)}>
<label
htmlFor={id}
className={cx(styles.inlineLabel, value && styles.inlineLabelEnabled, 'inline-switch-label')}
>
{label}
</label>
)}
@ -145,6 +148,14 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
background: ${transparent ? 'transparent' : theme.components.input.background};
border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius()};
&:hover {
border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderHover};
.inline-switch-label {
color: ${theme.colors.text.primary};
}
}
`,
inlineLabel: css`
cursor: pointer;