mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-01 07:30:07 +02:00
Code Issues Releases Wiki Activity

fix button active state

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-04 18:51:49 +00:00
parent 68aa758b64
commit 954ea0387e
1 changed files with 84 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
ui/src/components/button/index.js
View File

@ -13,38 +13,99 @@ const {
} = fns; } = fns;
const { const {
default: styled, default: styled
} = Styled; } = Styled;
const styles = {
primaryBorder: colors.brandPrimary,
secondaryColor: colors.brandSecondary,
...colors
};
const background = match({ const background = match({
secondary: styles.background, secondary: colors.brandSecondary,
disabled: styles.inactiveBackground, disabled: colors.brandInactive
}, styles.brandPrimary); }, 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({ const border = match({
secondary: styles.border, secondary: colors.borderSecondary,
disabled: styles.inactiveBorder disabled: colors.borderInactive
}, styles.primaryBorder); }, 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({ const color = match({
secondary: styles.secondaryColor, secondary: colors.brandSecondaryColor,
disabled: styles.inactiveColor disabled: colors.brandInactiveColor
}, styles.background); }, colors.brandPrimaryColor);
const borderRadius = match({
rect: 0
}, remcalc(boxes.borderRadius));
// based on bootstrap 4
module.exports = styled.button` module.exports = styled.button`
border-radius: ${remcalc(boxes.borderRadius)}; display: flex;
box-shadow: ${boxes.bottomShaddow}; justify-content: center;
font-size: ${remcalc(16)}; align-items: center;
min-width: ${remcalc(120)};
padding: ${remcalc('18 24')}; 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}; 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;
}
`; `;