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 = {
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-invalid': props.invalid
}
],
input: 'p-inputswitch-input',
slider: 'p-inputswitch-slider'
input: 'p-toggleswitch-input',
slider: 'p-toggleswitch-slider'
};
export default BaseStyle.extend({

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

@ -1,12 +1,12 @@
export default {
css: ({ dt }) => `
.p-inputswitch {
.p-toggleswitch {
display: inline-block;
width: 2.5rem;
height: 1.5rem;
}
.p-inputswitch-input {
.p-toggleswitch-input {
cursor: pointer;
appearance: none;
position: absolute;
@ -22,7 +22,7 @@ export default {
border-radius: ${dt('inputswitch.border.radius')};
}
.p-inputswitch-slider {
.p-toggleswitch-slider {
position: absolute;
cursor: pointer;
top: 0;
@ -36,7 +36,7 @@ export default {
outline-color: transparent;
}
.p-inputswitch-slider:before {
.p-toggleswitch-slider:before {
position: absolute;
content: "";
top: 50%;
@ -49,41 +49,41 @@ export default {
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')};
}
.p-inputswitch.p-highlight .p-inputswitch-slider:before {
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
background: ${dt('inputswitch.handle.checked.background')};
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')};
}
.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')};
}
.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')};
}
.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')};
}
.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-offset: ${dt('focus.ring.offset')};
}
.p-inputswitch.p-invalid > .p-inputswitch-slider {
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
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')};
}
`