rasyahroel/it_security_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add style switch for input type radio

Browse Source
This commit is contained in:
Daeng Deni Mardaeni 2024-08-27 21:03:19 +07:00
parent df2c7f5997
commit 26ca2a1bbc
1 changed files with 117 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
resources/metronic/core/plugins/components/switch.js
View File

@ -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))",
transition: "all .15s ease-in-out",
}, },
'&:checked, &[aria-checked="true"]': { '&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary)', "background-color": "var(--tw-primary)",
'transition': 'all .15s ease-in-out', transition: "all .15s ease-in-out",
'&:before': { "&:before": {
'background-color': '#ffffff', "background-color": "#ffffff",
'transition': 'all .15s ease-in-out', transition: "all .15s ease-in-out",
'left': 'calc(100% - 0.25rem)', left: "calc(100% - 0.25rem)",
'transform': 'translate(-100%, -50%)', transform: "translate(-100%, -50%)",
'filter': 'none' filter: "none",
}
}, },
'&:disabled': { },
'background-color': 'var(--tw-gray-100)', "&:disabled": {
'border': '1px solid var(--tw-gray-300)', "background-color": "var(--tw-gray-100)",
'cursor': 'not-allowed', border: "1px solid var(--tw-gray-300)",
'opacity': '0.5', cursor: "not-allowed",
'&:before': { opacity: "0.5",
'background-color': 'var(--tw-gray-300)' "&:before": {
"background-color": "var(--tw-gray-300)",
}, },
'&:checked, &[aria-checked="true"]': { '&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary-clarity)', "background-color": "var(--tw-primary-clarity)",
'border': '0', border: "0",
'&:before': { "&:before": {
'background-color': 'var(--tw-light)' "background-color": "var(--tw-light)",
}
}
}
}, },
'.switch-label': {
'color': 'var(--tw-gray-700)',
'font-size': theme('fontSize.sm'),
'font-weight': theme('fontWeight.medium'),
'line-height': theme('lineHeight.4')
}, },
'input[type=checkbox] + .switch-label': {
'color': 'var(--tw-gray-800)',
}, },
'&:has(input[type=checkbox]:disabled)': {
'.switch-label': {
'color': 'var(--tw-gray-500)'
}
}
}, },
'.switch-sm': { ".switch-label": {
'input[type=checkbox]': { color: "var(--tw-gray-700)",
'height': theme('custom.components.switch.sm.height'), "font-size": theme("fontSize.sm"),
'width': theme('custom.components.switch.sm.width'), "font-weight": theme("fontWeight.medium"),
'border-radius': theme('custom.components.switch.sm.height'), "line-height": theme("lineHeight.4"),
'&:before': {
'height': '0.75rem',
'width': '0.75rem',
}
}, },
'.switch-label': { "input[type=checkbox] + .switch-label,input[type=radio] + .switch-label":
'font-size': theme('fontSize.2sm'), {
} color: "var(--tw-gray-800)",
},
"&:has(input[type=checkbox]:disabled),&:has(input[type=radio]:disabled)":
{
".switch-label": {
color: "var(--tw-gray-500)",
},
},
},
".switch-sm": {
"input[type=checkbox],input[type=radio]": {
height: theme("custom.components.switch.sm.height"),
width: theme("custom.components.switch.sm.width"),
"border-radius": theme("custom.components.switch.sm.height"),
"&:before": {
height: "0.75rem",
width: "0.75rem",
},
},
".switch-label": {
"font-size": theme("fontSize.2sm"),
},
},
".switch-lg": {
"input[type=checkbox],input[type=radio]": {
height: theme("custom.components.switch.lg.height"),
width: theme("custom.components.switch.lg.width"),
"border-radius": theme("custom.components.switch.lg.height"),
"&:before": {
height: "1.25rem",
width: "1.25rem",
},
},
".switch-label": {
"font-size": theme("fontSize.md"),
}, },
'.switch-lg': {
'input[type=checkbox]': {
'height': theme('custom.components.switch.lg.height'),
'width': theme('custom.components.switch.lg.width'),
'border-radius': theme('custom.components.switch.lg.height'),
'&:before': {
'height': '1.25rem',
'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}`)}`;
}); });
} },
]); ]);
}); });