Packages
mbta_metro
0.1.2
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
priv/js/plugins/button.js
import plugin from "tailwindcss/plugin";
const buttonPlugin = plugin(({ addBase, addComponents, theme }) => {
addBase({
'button': {
alignItems: "center",
borderRadius: theme('borderRadius.md'),
borderWidth: theme('borderWidth.sm'),
columnGap: theme('spacing.sm'),
display: "inline-flex",
fontWeight: theme("fontWeight.medium"),
paddingBottom: theme('spacing.sm'),
paddingTop: theme('spacing.sm'),
paddingLeft: theme('spacing.md'),
paddingRight: theme('spacing.md'),
transition: `all ${theme('transitionDuration.DEFAULT')} ease`,
'&[aria-disabled]': {
backgroundColor: theme('colors.charcoal.30'),
borderColor: theme('colors.charcoal.30'),
color: theme('colors.white'),
cursor: "not-allowed"
},
'&:focus, &:focus-within': {
outline: `${theme('spacing.xs')} solid ${theme('colors.cobalt.60')}`,
outlineOffset: 0
}
},
}),
addComponents({
'.button-primary': {
backgroundColor: "var(--button-primary-default-background-color)",
borderColor: "var(--button-primary-default-border-color)",
color: "var(--button-primary-default-text-color)",
'&:hover, &:active': {
backgroundColor: "var(--button-primary-active-background-color)",
borderColor: "var(--button-primary-active-border-color)",
color: "var(--button-primary-active-text-color)",
}
},
'.button-secondary': {
backgroundColor: "var(--button-secondary-default-background-color)",
borderColor: "var(--button-secondary-default-border-color)",
color: "var(--button-secondary-default-text-color)",
'&:hover': {
backgroundColor: "var(--button-secondary-hover-background-color)",
borderColor: "var(--button-secondary-hover-border-color)",
color: "var(--button-secondary-hover-text-color)",
},
'&:active': {
backgroundColor: "var(--button-secondary-active-background-color)",
borderColor: "var(--button-secondary-active-border-color)",
color: "var(--button-secondary-active-text-color)",
}
}
})
});
export default buttonPlugin;