Files
ISA-Frontend/tailwind-plugins/select-bullet.plugin.js
Nino Righi 1a72c23412 Merged PR 1481: Gelbe Seiten - Sortiment - Preisänderung Implementation + Init Unit Tests
Gelbe Seiten - Sortiment - Preisänderung Implementation + Init Unit Tests
2023-02-13 16:42:08 +00:00

52 lines
2.1 KiB
JavaScript

const plugin = require('tailwindcss/plugin');
module.exports = plugin(function ({ addComponents, theme }) {
addComponents({
'.isa-select-bullet': {
position: 'relative',
appearance: 'none',
width: theme('spacing.8'),
height: theme('spacing.8'),
},
'.isa-select-bullet::before': {
position: 'absolute',
display: 'block',
borderRadius: theme('borderRadius.full'),
backgroundColor: '#AEB7C1',
cursor: 'pointer',
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDuration: '200ms',
content: '""',
top: '0',
left: '0',
right: '0',
bottom: '0',
},
'.isa-select-bullet:hover::before': {
backgroundColor: '#778490',
},
'.isa-select-bullet:checked::before': {
backgroundColor: '#596470',
},
'.isa-select-bullet::after': {
content: '""',
backgroundImage:
"url(\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/'%3E%3Cpath fill='white' d='M21.432,3.715C21.432,3.715 21.432,3.715 21.432,3.715C21.115,3.76 20.823,3.911 20.604,4.143C16.03,8.727 12.603,12.511 8.244,16.932C8.244,16.932 3.297,12.754 3.297,12.754C2.909,12.424 2.374,12.327 1.895,12.499C1.895,12.499 1.895,12.499 1.895,12.499C1.415,12.672 1.065,13.088 0.975,13.589C0.885,14.091 1.072,14.602 1.463,14.929L7.415,19.966C7.981,20.441 8.818,20.403 9.338,19.877C14.251,14.954 17.761,11.007 22.616,6.141C23.057,5.714 23.172,5.051 22.903,4.499C22.903,4.499 22.903,4.499 22.903,4.499C22.633,3.948 22.04,3.631 21.432,3.715Z'/%3E%3C/svg%3E%0A\")",
position: 'absolute',
top: '0.4rem',
left: '0.4rem',
bottom: '0.4rem',
right: '0.4rem',
cursor: 'pointer',
opacity: '0',
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDuration: '200ms',
},
'.isa-select-bullet:checked::after': {
opacity: '1',
},
});
});