vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #6636 - For ToggleSwitch

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:29:37 +03:00
parent 3cf1fd15a6
commit d452103edf
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -12,7 +12,7 @@ const theme = ({ dt }) => `
appearance: none; appearance: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -50,10 +50,10 @@ const theme = ({ dt }) => `
color: ${dt('toggleswitch.handle.color')}; color: ${dt('toggleswitch.handle.color')};
width: ${dt('toggleswitch.handle.size')}; width: ${dt('toggleswitch.handle.size')};
height: ${dt('toggleswitch.handle.size')}; height: ${dt('toggleswitch.handle.size')};
left: ${dt('toggleswitch.gap')}; inset-inline-start: ${dt('toggleswitch.gap')};
margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2)); margin-block-start: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
border-radius: ${dt('toggleswitch.handle.border.radius')}; border-radius: ${dt('toggleswitch.handle.border.radius')};
transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')}, box-shadow ${dt('toggleswitch.slide.duration')}; transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, inset-inline-start ${dt('toggleswitch.slide.duration')}, box-shadow ${dt('toggleswitch.slide.duration')};
} }
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
@ -64,7 +64,7 @@ const theme = ({ dt }) => `
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle { .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
background: ${dt('toggleswitch.handle.checked.background')}; background: ${dt('toggleswitch.handle.checked.background')};
color: ${dt('toggleswitch.handle.checked.color')}; color: ${dt('toggleswitch.handle.checked.color')};
left: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')})); inset-inline-start: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')}));
} }
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {