Fix checkbox css when is checked

6 years ago · 24737ddb22
parent 02f442c71b
commit 24737ddb22
1 changed files with 5 additions and 3 deletions
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colors from 'config/colors';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
@ -34,8 +34,10 @@ const IconWrapper = styled.div`

    &:hover,
    &:focus {
-        border: 1px solid ${colors.TEXT_PRIMARY};
-        background: ${props => (props.checked ? colors.TEXT_PRIMARY : colors.WHITE)};
+        ${props => !props.checked && css`
+            border: 1px solid ${colors.GREEN_PRIMARY};
+        `}
+        background: ${props => (props.checked ? colors.GREEN_PRIMARY : colors.WHITE)};
    }
 `;