@ddsys/material
Version:
<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>
57 lines (55 loc) • 1.89 kB
JavaScript
export default function(theme) {
const { colors, variables } = theme;
const { toggleSwitch } = variables;
return [
{ name: "primary", color: colors.primary },
{ name: "secondary", color: colors.secondary },
{ name: "success", color: colors.success },
{ name: "info", color: colors.info },
{ name: "warning", color: colors.warning },
{ name: "danger", color: colors.danger }
].reduce((result, style) => {
result[style.name] = {
[`${style.name}Bar`]: {
borderRadius: 13,
width: toggleSwitch.barWidth,
height: toggleSwitch.barHeight,
marginTop: -toggleSwitch.barHeight / 2,
marginLeft: -toggleSwitch.barWidth / 2,
border: "solid 1px",
borderColor: `${style.color}`,
backgroundColor: `${style.color} !important`,
opacity: 1,
transition: `background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`
},
[`${style.name}Icon`]: {
width: toggleSwitch.iconWidth,
height: toggleSwitch.iconHeight,
border: `1px solid ${style.color}`,
backgroundColor: colors.white
},
[`${style.name}Root`]: {
width: toggleSwitch.barWidth + toggleSwitch.iconWidth
},
[`${style.name}Checked`]: {
transform: `translateX(${toggleSwitch.barWidth -
toggleSwitch.iconWidth -
toggleSwitch.borderWidth * 2}px)`,
[`& + $${style.name}Bar`]: {
opacity: 1
}
},
[`${style.name}SwitchBase`]: {
[`&$${style.name}Checked`]: {
color: colors.white,
[`& + $${style.name}Bar`]: {
backgroundColor: `${style.color}`
}
},
transition: `transform 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms`
},
[`${style.name}IconChecked`]: {}
};
return result;
}, {});
}