diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 31c23d9ce..3a71618b9 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -7,6 +7,7 @@ import { withStyles, WithStyles } from "@material-ui/core/styles"; +import { fade } from "@material-ui/core/styles/colorManipulator"; import classNames from "classnames"; import React from "react"; @@ -29,7 +30,11 @@ const styles = (theme: Theme) => box: { "&$checked": { "&:before": { - background: theme.palette.primary.main + background: theme.palette.primary.main, + content: '"\\2713"', + color: theme.palette.common.white, + fontWeight: "bold", + textAlign: "center" }, borderColor: theme.palette.primary.main }, @@ -47,13 +52,14 @@ const styles = (theme: Theme) => "&:before": { background: "rgba(0, 0, 0, 0)", content: '""', - height: 8, - left: 2, + height: 14, + left: -1, position: "absolute", - top: 2, + top: -1, transition: theme.transitions.duration.short + "ms", - width: 8 + width: 14 }, + WebkitAppearance: "none", border: `1px solid ${theme.palette.grey[500]}`, boxSizing: "border-box", @@ -72,9 +78,13 @@ const styles = (theme: Theme) => borderRadius: "100%", cursor: "pointer", display: "flex", - height: 48, + height: 30, justifyContent: "center", - width: 48 + width: 30, + margin: 9, + "&:hover": { + background: fade(theme.palette.primary.main, 0.1) + } } }); const Checkbox = withStyles(styles, { name: "Checkbox" })( diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index bc36b2fa5..4b292e311 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -35,12 +35,20 @@ const styles = (theme: Theme) => padding: 0 }, checkboxPartialSelect: { + "& input": { + "&:before": { + background: [theme.palette.common.white, "!important"] as any, + border: `solid 1px ${theme.palette.primary.main}`, + content: "''" + }, + background: theme.palette.common.white + }, "&:after": { - background: theme.palette.common.white, + background: theme.palette.primary.main, content: "''", height: 2, position: "absolute", - width: 4 + width: 6 } }, checkboxSelected: {