Packages
mbta_metro
0.2.0
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/base.js
import plugin from "tailwindcss/plugin";
/**
* Basic styles, CSS resets, etc. for improving cross-browser consistency for
* the MBTA Metro components
*/
const basePlugin = plugin(({ addBase, theme }) =>
addBase({
// remove default caret in Safari
"details > summary::-webkit-details-marker": {
display: "none"
},
// the styles from the @tailwindcss/forms plugin aren't customizable, (see
// https://github.com/tailwindlabs/tailwindcss/discussions/4645 for
// discussion on custom ring color), yet are also too specific and can
// override other classes... so we override them as suggested by
// https://github.com/tailwindlabs/tailwindcss/discussions/4649#discussioncomment-8714473
// to more easily achieve our desired custom focus styles
"[type='checkbox'], [type='radio']": {
"border-color": theme("colors.cobalt.30"),
color: theme("colors.cobalt.30")
},
"[type='checkbox']:focus, [type='radio']:focus": {
"--tw-ring-color": theme("colors.cobalt.60"),
"--tw-ring-offset-color": "transparent",
"--tw-ring-offset-width": "0px",
"border-color": theme("colors.cobalt.30")
}
})
);
export default basePlugin;