updating metric component - removed !importants and used new constants
This commit is contained in:
parent
1dad247e0e
commit
078ec20aaf
@ -12,7 +12,7 @@ const {
|
||||
|
||||
const StyledDescription = styled.p`
|
||||
margin: 0;
|
||||
color: ${colors.regular};
|
||||
color: ${colors.base.secondary};
|
||||
`;
|
||||
|
||||
const Description = (props) => (
|
||||
|
@ -6,7 +6,7 @@ const {
|
||||
} = Styled;
|
||||
|
||||
const StyledLink = styled.a`
|
||||
text-decoration: underline !important;
|
||||
text-decoration: underline;
|
||||
`;
|
||||
|
||||
const Link = ({
|
||||
|
@ -28,8 +28,8 @@ const StyledTile = styled.div`
|
||||
width: ${remcalc(300)};
|
||||
height: ${remcalc(247)};
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
border: ${remcalc(1)} solid ${colors.borderSecondary};
|
||||
background-color: ${colors.brandSecondary};
|
||||
border: ${remcalc(1)} solid ${colors.base.greyLight};
|
||||
background-color: ${colors.base.white};
|
||||
|
||||
${breakpoints.small`
|
||||
width: ${remcalc(300)};
|
||||
|
@ -12,7 +12,7 @@ const {
|
||||
|
||||
const StyledTitle = styled.h4`
|
||||
margin: 0;
|
||||
color: ${colors.semibold};
|
||||
color: ${colors.fonts.semibold};
|
||||
`;
|
||||
|
||||
const Title = ({
|
||||
|
@ -3,16 +3,16 @@ const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
base,
|
||||
} = constants.colors;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const color = (props) => props.secondary
|
||||
? colors.brandSecondaryLink
|
||||
: colors.brandPrimaryLink;
|
||||
? base.secondary
|
||||
: base.primary;
|
||||
|
||||
const Anchor = styled.a`
|
||||
color: ${color} !important;
|
||||
|
@ -39,8 +39,8 @@ const backgroundActive = match({
|
||||
}, base.primaryDark);
|
||||
|
||||
const border = match({
|
||||
secondary: base.white,
|
||||
disabled: inactive.default
|
||||
secondary: base.greyLight,
|
||||
disabled: inactive.greyLight
|
||||
}, base.primary);
|
||||
|
||||
const borderHover = match({
|
||||
|
@ -21,14 +21,14 @@ module.exports = styled.li`
|
||||
padding-bottom: ${remcalc(10)};
|
||||
|
||||
& a {
|
||||
color: ${colors.fonts.regular};
|
||||
color: ${colors.base.primary};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& a.active {
|
||||
cursor: default;
|
||||
color: ${colors.brandPrimaryLink};
|
||||
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
|
||||
color: ${colors.base.primary};
|
||||
border-bottom: 2px solid ${colors.base.primary};
|
||||
padding-bottom: ${remcalc(6)};
|
||||
}
|
||||
`;
|
||||
|
@ -16,7 +16,7 @@ module.exports = {
|
||||
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
|
||||
border: {
|
||||
checked: `${remcalc(1)} solid ${base.primary}`,
|
||||
unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
|
||||
confirmed: `${remcalc(1)} solid ${base.secondaryLight}`
|
||||
unchecked: `${remcalc(1)} solid ${base.greyLight}`,
|
||||
confirmed: `${remcalc(1)} solid ${base.greyLight}`
|
||||
}
|
||||
};
|
||||
|
@ -14,8 +14,8 @@ const base = {
|
||||
secondaryLight: '#919191',
|
||||
white: '#FFFFFF',
|
||||
grey: '#f8f8f8',
|
||||
greyDark: '#e9e9e9',
|
||||
greyLight: '#919191',
|
||||
greyLight: '#e9e9e9',
|
||||
greyDark: '#919191',
|
||||
red: '#DA4B42',
|
||||
yellow: '#E4A800',
|
||||
green: '#00AF66',
|
||||
@ -28,7 +28,7 @@ const fonts = {
|
||||
|
||||
const inactive = {
|
||||
default: '#FAFAFA',
|
||||
border: '#D8D8D8',
|
||||
border: base.greyLight,
|
||||
text: base.greyLight
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user