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',
borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}',
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.2s'
},
handle: {
borderRadius: '50%',

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

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

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

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

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

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