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

Fixed toggle switch alignments

pull/5806/head
Cagatay Civici 2024-05-25 12:05:29 +03:00
parent 9106ea17d5
commit 2beb7027f4
4 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/themes/aura/toggleswitch/index.js
View File

@ -15,7 +15,8 @@ export default {
borderWidth: '1px', borderWidth: '1px',
borderColor: 'transparent', borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.2s'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',

3
components/lib/themes/lara/toggleswitch/index.js
View File

@ -15,7 +15,8 @@ export default {
borderWidth: '1px', borderWidth: '1px',
borderColor: 'transparent', borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.2s'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',

3
components/lib/themes/nora/toggleswitch/index.js
View File

@ -19,7 +19,8 @@ export default {
hoverBackground: '{form.field.background}', hoverBackground: '{form.field.background}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.color}', checkedHoverBackground: '{primary.color}',
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.1s'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',

14
components/lib/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -24,17 +24,17 @@ const theme = ({ dt }) => `
} }
.p-toggleswitch-slider { .p-toggleswitch-slider {
position: absolute; display: inline-block;
cursor: pointer; cursor: pointer;
top: 0; width: 100%;
left: 0; height: 100%;
right: 0;
bottom: 0;
border-width: ${dt('toggleswitch.border.width')}; border-width: ${dt('toggleswitch.border.width')};
border-style: solid; border-style: solid;
border-color: ${dt('toggleswitch.border.color')}; border-color: ${dt('toggleswitch.border.color')};
background: ${dt('toggleswitch.background')}; background: ${dt('toggleswitch.background')};
transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt('toggleswitch.transition.duration')}; transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt(
'toggleswitch.transition.duration'
)};
border-radius: ${dt('toggleswitch.border.radius')}; border-radius: ${dt('toggleswitch.border.radius')};
outline-color: transparent; outline-color: transparent;
box-shadow: ${dt('toggleswitch.shadow')}; box-shadow: ${dt('toggleswitch.shadow')};
@ -50,7 +50,7 @@ const theme = ({ dt }) => `
left: ${dt('toggleswitch.gap')}; left: ${dt('toggleswitch.gap')};
margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2)); margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
border-radius: ${dt('toggleswitch.handle.border.radius')}; border-radius: ${dt('toggleswitch.handle.border.radius')};
transition: all ${dt('toggleswitch.transition.duration')}; transition: background ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')};
} }
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {