add style switch for input type radio
This commit is contained in:
parent
df2c7f5997
commit
26ca2a1bbc
@ -1,116 +1,120 @@
|
|||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import plugin from 'tailwindcss/plugin';
|
import plugin from "tailwindcss/plugin";
|
||||||
|
|
||||||
export default plugin(({addVariant, addComponents, theme, e}) => {
|
export default plugin(({ addVariant, addComponents, theme, e }) => {
|
||||||
addComponents({
|
addComponents({
|
||||||
'.switch': {
|
".switch": {
|
||||||
'display': 'flex',
|
display: "flex",
|
||||||
'align-items': 'center',
|
"align-items": "center",
|
||||||
'gap': theme('spacing')['2.5'],
|
gap: theme("spacing")["2.5"],
|
||||||
'cursor': 'pointer',
|
cursor: "pointer",
|
||||||
'input[type=checkbox]': {
|
"input[type=checkbox],input[type=radio]": {
|
||||||
'display': 'flex',
|
display: "flex",
|
||||||
'appearance': 'none',
|
appearance: "none",
|
||||||
'background-color': 'var(--tw-gray-300)',
|
"background-color": "var(--tw-gray-300)",
|
||||||
'position': 'relative',
|
position: "relative",
|
||||||
'cursor': 'pointer',
|
cursor: "pointer",
|
||||||
'flex-shrink': '0',
|
"flex-shrink": "0",
|
||||||
'height': theme('custom.components.switch.DEFAULT.height'),
|
height: theme("custom.components.switch.DEFAULT.height"),
|
||||||
'width': theme('custom.components.switch.DEFAULT.width'),
|
width: theme("custom.components.switch.DEFAULT.width"),
|
||||||
'border-radius': theme('custom.components.switch.DEFAULT.height'),
|
"border-radius": theme(
|
||||||
'transition': 'all .15s ease-in-out',
|
"custom.components.switch.DEFAULT.height",
|
||||||
'&:before': {
|
),
|
||||||
'display': 'flex',
|
transition: "all .15s ease-in-out",
|
||||||
'position': 'absolute',
|
"&:before": {
|
||||||
'content': '""',
|
display: "flex",
|
||||||
'height': '1rem',
|
position: "absolute",
|
||||||
'width': '1rem',
|
content: '""',
|
||||||
'border-radius': '100%',
|
height: "1rem",
|
||||||
'background-color': 'var(--tw-light)',
|
width: "1rem",
|
||||||
'left': '0.25rem',
|
"border-radius": "100%",
|
||||||
'top': '50%',
|
"background-color": "var(--tw-light)",
|
||||||
'transform': 'translateY(-50%)',
|
left: "0.25rem",
|
||||||
'filter': 'drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.03))',
|
top: "50%",
|
||||||
'transition': 'all .15s ease-in-out'
|
transform: "translateY(-50%)",
|
||||||
},
|
filter: "drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.03))",
|
||||||
'&:checked, &[aria-checked="true"]': {
|
transition: "all .15s ease-in-out",
|
||||||
'background-color': 'var(--tw-primary)',
|
},
|
||||||
'transition': 'all .15s ease-in-out',
|
'&:checked, &[aria-checked="true"]': {
|
||||||
'&:before': {
|
"background-color": "var(--tw-primary)",
|
||||||
'background-color': '#ffffff',
|
transition: "all .15s ease-in-out",
|
||||||
'transition': 'all .15s ease-in-out',
|
"&:before": {
|
||||||
'left': 'calc(100% - 0.25rem)',
|
"background-color": "#ffffff",
|
||||||
'transform': 'translate(-100%, -50%)',
|
transition: "all .15s ease-in-out",
|
||||||
'filter': 'none'
|
left: "calc(100% - 0.25rem)",
|
||||||
}
|
transform: "translate(-100%, -50%)",
|
||||||
},
|
filter: "none",
|
||||||
'&:disabled': {
|
},
|
||||||
'background-color': 'var(--tw-gray-100)',
|
},
|
||||||
'border': '1px solid var(--tw-gray-300)',
|
"&:disabled": {
|
||||||
'cursor': 'not-allowed',
|
"background-color": "var(--tw-gray-100)",
|
||||||
'opacity': '0.5',
|
border: "1px solid var(--tw-gray-300)",
|
||||||
'&:before': {
|
cursor: "not-allowed",
|
||||||
'background-color': 'var(--tw-gray-300)'
|
opacity: "0.5",
|
||||||
},
|
"&:before": {
|
||||||
'&:checked, &[aria-checked="true"]': {
|
"background-color": "var(--tw-gray-300)",
|
||||||
'background-color': 'var(--tw-primary-clarity)',
|
},
|
||||||
'border': '0',
|
'&:checked, &[aria-checked="true"]': {
|
||||||
'&:before': {
|
"background-color": "var(--tw-primary-clarity)",
|
||||||
'background-color': 'var(--tw-light)'
|
border: "0",
|
||||||
}
|
"&:before": {
|
||||||
}
|
"background-color": "var(--tw-light)",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
'.switch-label': {
|
},
|
||||||
'color': 'var(--tw-gray-700)',
|
},
|
||||||
'font-size': theme('fontSize.sm'),
|
".switch-label": {
|
||||||
'font-weight': theme('fontWeight.medium'),
|
color: "var(--tw-gray-700)",
|
||||||
'line-height': theme('lineHeight.4')
|
"font-size": theme("fontSize.sm"),
|
||||||
},
|
"font-weight": theme("fontWeight.medium"),
|
||||||
'input[type=checkbox] + .switch-label': {
|
"line-height": theme("lineHeight.4"),
|
||||||
'color': 'var(--tw-gray-800)',
|
},
|
||||||
},
|
"input[type=checkbox] + .switch-label,input[type=radio] + .switch-label":
|
||||||
'&:has(input[type=checkbox]:disabled)': {
|
{
|
||||||
'.switch-label': {
|
color: "var(--tw-gray-800)",
|
||||||
'color': 'var(--tw-gray-500)'
|
},
|
||||||
}
|
"&:has(input[type=checkbox]:disabled),&:has(input[type=radio]:disabled)":
|
||||||
}
|
{
|
||||||
},
|
".switch-label": {
|
||||||
'.switch-sm': {
|
color: "var(--tw-gray-500)",
|
||||||
'input[type=checkbox]': {
|
},
|
||||||
'height': theme('custom.components.switch.sm.height'),
|
},
|
||||||
'width': theme('custom.components.switch.sm.width'),
|
},
|
||||||
'border-radius': theme('custom.components.switch.sm.height'),
|
".switch-sm": {
|
||||||
'&:before': {
|
"input[type=checkbox],input[type=radio]": {
|
||||||
'height': '0.75rem',
|
height: theme("custom.components.switch.sm.height"),
|
||||||
'width': '0.75rem',
|
width: theme("custom.components.switch.sm.width"),
|
||||||
}
|
"border-radius": theme("custom.components.switch.sm.height"),
|
||||||
},
|
"&:before": {
|
||||||
'.switch-label': {
|
height: "0.75rem",
|
||||||
'font-size': theme('fontSize.2sm'),
|
width: "0.75rem",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
'.switch-lg': {
|
".switch-label": {
|
||||||
'input[type=checkbox]': {
|
"font-size": theme("fontSize.2sm"),
|
||||||
'height': theme('custom.components.switch.lg.height'),
|
},
|
||||||
'width': theme('custom.components.switch.lg.width'),
|
},
|
||||||
'border-radius': theme('custom.components.switch.lg.height'),
|
".switch-lg": {
|
||||||
'&:before': {
|
"input[type=checkbox],input[type=radio]": {
|
||||||
'height': '1.25rem',
|
height: theme("custom.components.switch.lg.height"),
|
||||||
'width': '1.25rem',
|
width: theme("custom.components.switch.lg.width"),
|
||||||
}
|
"border-radius": theme("custom.components.switch.lg.height"),
|
||||||
},
|
"&:before": {
|
||||||
'.switch-label': {
|
height: "1.25rem",
|
||||||
'font-size': theme('fontSize.md'),
|
width: "1.25rem",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
".switch-label": {
|
||||||
|
"font-size": theme("fontSize.md"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
addVariant('switch-on', [
|
addVariant("switch-on", [
|
||||||
({modifySelectors, separator}) => {
|
({ modifySelectors, separator }) => {
|
||||||
modifySelectors(({className}) => {
|
modifySelectors(({ className }) => {
|
||||||
return `.switch:has([type="checkbox"]:checked) .${e(`switch-on${separator}${className}`)}`;
|
return `.switch:has(:checked) .${e(`switch-on${separator}${className}`)}`;
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user