mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
fix button active state
This commit is contained in:
parent
68aa758b64
commit
954ea0387e
@ -13,38 +13,99 @@ const {
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const styles = {
|
||||
primaryBorder: colors.brandPrimary,
|
||||
secondaryColor: colors.brandSecondary,
|
||||
...colors
|
||||
};
|
||||
|
||||
const background = match({
|
||||
secondary: styles.background,
|
||||
disabled: styles.inactiveBackground,
|
||||
}, styles.brandPrimary);
|
||||
secondary: colors.brandSecondary,
|
||||
disabled: colors.brandInactive
|
||||
}, colors.brandPrimary);
|
||||
|
||||
const backgroundHover = match({
|
||||
secondary: colors.brandSecondaryDark,
|
||||
disabled: colors.brandInactive
|
||||
}, colors.brandPrimaryDark);
|
||||
|
||||
const backgroundActive = match({
|
||||
secondary: colors.brandSecondaryDarkest,
|
||||
disabled: colors.brandInactive
|
||||
}, colors.brandPrimaryDarkest);
|
||||
|
||||
const border = match({
|
||||
secondary: styles.border,
|
||||
disabled: styles.inactiveBorder
|
||||
}, styles.primaryBorder);
|
||||
secondary: colors.borderSecondary,
|
||||
disabled: colors.borderInactive
|
||||
}, colors.borderPrimary);
|
||||
|
||||
const borderHover = match({
|
||||
secondary: colors.borderSecondaryDark,
|
||||
disabled: colors.borderInactive
|
||||
}, colors.borderPrimaryDark);
|
||||
|
||||
const borderActive = match({
|
||||
secondary: colors.borderSecondaryDarkest,
|
||||
disabled: colors.borderInactive
|
||||
}, colors.borderPrimaryDarkest);
|
||||
|
||||
const color = match({
|
||||
secondary: styles.secondaryColor,
|
||||
disabled: styles.inactiveColor
|
||||
}, styles.background);
|
||||
secondary: colors.brandSecondaryColor,
|
||||
disabled: colors.brandInactiveColor
|
||||
}, colors.brandPrimaryColor);
|
||||
|
||||
const borderRadius = match({
|
||||
rect: 0
|
||||
}, remcalc(boxes.borderRadius));
|
||||
|
||||
// based on bootstrap 4
|
||||
module.exports = styled.button`
|
||||
border-radius: ${remcalc(boxes.borderRadius)};
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
font-size: ${remcalc(16)};
|
||||
min-width: ${remcalc(120)};
|
||||
padding: ${remcalc('18 24')};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 0;
|
||||
padding: ${remcalc('14 16')};
|
||||
|
||||
font-size: ${remcalc(16)};
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
|
||||
background: ${background};
|
||||
border: solid 1px ${border};
|
||||
color: ${color};
|
||||
background-image: none;
|
||||
background-color: ${background};
|
||||
border-radius: ${borderRadius};
|
||||
border: solid 1px ${border};
|
||||
|
||||
box-shadow: ${boxes.bottomShaddow};
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ${background};
|
||||
border: solid 1px ${border};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${backgroundHover};
|
||||
border: solid 1px ${borderHover};
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
|
||||
background-color: ${backgroundActive};
|
||||
border: solid 1px ${borderActive};
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user