Material toggle switch
parent
730687c303
commit
b29f1dad1d
|
@ -52,14 +52,14 @@ export default {
|
|||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 92%);
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 92%);
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 84%);
|
||||
}
|
||||
|
|
|
@ -50,14 +50,14 @@ export default {
|
|||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||
}
|
||||
|
||||
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
|
||||
}
|
||||
|
||||
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
|
||||
}
|
||||
|
||||
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
|
||||
}
|
||||
|
||||
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 84%);
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
export default {
|
||||
root: {
|
||||
width: '2.5rem',
|
||||
height: '1.5rem',
|
||||
width: '2.75rem',
|
||||
height: '1rem',
|
||||
borderRadius: '30px',
|
||||
gap: '0.25rem',
|
||||
shadow: '{form.field.shadow}',
|
||||
gap: '0',
|
||||
shadow: 'none',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
|
@ -24,22 +24,22 @@ export default {
|
|||
},
|
||||
handle: {
|
||||
borderRadius: '50%',
|
||||
size: '1rem',
|
||||
size: '1.5rem',
|
||||
disabledBackground: '{form.field.disabled.color}'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.300}',
|
||||
hoverBackground: '{surface.400}',
|
||||
checkedBackground: '{primary.color}',
|
||||
checkedHoverBackground: '{primary.hover.color}'
|
||||
hoverBackground: '{surface.300}',
|
||||
checkedBackground: '{primary.200}',
|
||||
checkedHoverBackground: '{primary.200}'
|
||||
},
|
||||
handle: {
|
||||
background: '{surface.0}',
|
||||
hoverBackground: '{surface.0}',
|
||||
checkedBackground: '{surface.0}',
|
||||
checkedHoverBackground: '{surface.0}'
|
||||
checkedBackground: '{primary.color}',
|
||||
checkedHoverBackground: '{primary.color}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
|
@ -56,5 +56,26 @@ export default {
|
|||
checkedHoverBackground: '{surface.900}'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
style: ({ dt }) => `
|
||||
.p-toggleswitch-slider:before {
|
||||
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('toggleswitch.handle.checked.background')}, transparent 92%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible).p-toggleswitch-checked .p-toggleswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('toggleswitch.handle.checked.background')}, transparent 84%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue