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

Refactored InputSwitch styles

pull/5677/head
Cagatay Civici 2024-04-07 13:21:03 +03:00
parent 0c14b0c781
commit c721a82e4c
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/inputswitch/style/InputSwitchStyle.js
View File

@ -6,15 +6,15 @@ const inlineStyles = {
const classes = { const classes = {
root: ({ instance, props }) => [ root: ({ instance, props }) => [
'p-inputswitch p-component', 'p-toggleswitch p-component',
{ {
'p-highlight': instance.checked, 'p-toggleswitch-checked': instance.checked,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': props.invalid 'p-invalid': props.invalid
} }
], ],
input: 'p-inputswitch-input', input: 'p-toggleswitch-input',
slider: 'p-inputswitch-slider' slider: 'p-toggleswitch-slider'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

28
components/lib/themes/primeone/base/inputswitch/index.js
View File

@ -1,12 +1,12 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-inputswitch { .p-toggleswitch {
display: inline-block; display: inline-block;
width: 2.5rem; width: 2.5rem;
height: 1.5rem; height: 1.5rem;
} }
.p-inputswitch-input { .p-toggleswitch-input {
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
position: absolute; position: absolute;
@ -22,7 +22,7 @@ export default {
border-radius: ${dt('inputswitch.border.radius')}; border-radius: ${dt('inputswitch.border.radius')};
} }
.p-inputswitch-slider { .p-toggleswitch-slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
@ -30,13 +30,13 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
border: 0 none; border: 0 none;
background: ${dt('inputswitch.background')}; background: ${dt('inputswitch.background')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('inputswitch.border.radius')}; border-radius: ${dt('inputswitch.border.radius')};
outline-color: transparent; outline-color: transparent;
} }
.p-inputswitch-slider:before { .p-toggleswitch-slider:before {
position: absolute; position: absolute;
content: ""; content: "";
top: 50%; top: 50%;
@ -49,41 +49,41 @@ export default {
transition: all ${dt('transition.duration')}; transition: all ${dt('transition.duration')};
} }
.p-inputswitch.p-highlight .p-inputswitch-slider { .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('inputswitch.checked.background')}; background: ${dt('inputswitch.checked.background')};
} }
.p-inputswitch.p-highlight .p-inputswitch-slider:before { .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
background: ${dt('inputswitch.handle.checked.background')}; background: ${dt('inputswitch.handle.checked.background')};
left: 1.25rem; left: 1.25rem;
} }
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
background: ${dt('inputswitch.hover.background')}; background: ${dt('inputswitch.hover.background')};
} }
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before {
background: ${dt('inputswitch.handle.hover.background')}; background: ${dt('inputswitch.handle.hover.background')};
} }
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('inputswitch.checked.hover.background')}; background: ${dt('inputswitch.checked.hover.background')};
} }
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before {
background: ${dt('inputswitch.handle.checked.hover.background')}; background: ${dt('inputswitch.handle.checked.hover.background')};
} }
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-inputswitch.p-invalid > .p-inputswitch-slider { .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
background: ${dt('inputswitch.invalid.background')}; background: ${dt('inputswitch.invalid.background')};
} }
.p-inputswitch.p-invalid > .p-inputswitch-slider:before { .p-toggleswitch.p-invalid > .p-toggleswitch-slider:before {
background: ${dt('inputswitch.handle.invalid.background')}; background: ${dt('inputswitch.handle.invalid.background')};
} }
` `