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

Material toggle switch

pull/6493/head
Cagatay Civici 2024-09-28 15:44:18 +03:00
parent 730687c303
commit b29f1dad1d
3 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/themes/src/presets/material/checkbox/index.js
View File

@ -52,14 +52,14 @@ export default {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%); 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) { .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%); 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) { .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%); box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 84%);
} }

8
packages/themes/src/presets/material/radiobutton/index.js
View File

@ -50,14 +50,14 @@ export default {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%); 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) { .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%); 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) { .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%); box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 84%);
} }

41
packages/themes/src/presets/material/toggleswitch/index.js
View File

@ -1,10 +1,10 @@
export default { export default {
root: { root: {
width: '2.5rem', width: '2.75rem',
height: '1.5rem', height: '1rem',
borderRadius: '30px', borderRadius: '30px',
gap: '0.25rem', gap: '0',
shadow: '{form.field.shadow}', shadow: 'none',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
style: '{focus.ring.style}', style: '{focus.ring.style}',
@ -24,22 +24,22 @@ export default {
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',
size: '1rem', size: '1.5rem',
disabledBackground: '{form.field.disabled.color}' disabledBackground: '{form.field.disabled.color}'
}, },
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.300}', background: '{surface.300}',
hoverBackground: '{surface.400}', hoverBackground: '{surface.300}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.200}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.200}'
}, },
handle: { handle: {
background: '{surface.0}', background: '{surface.0}',
hoverBackground: '{surface.0}', hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{surface.0}' checkedHoverBackground: '{primary.color}'
} }
}, },
dark: { dark: {
@ -56,5 +56,26 @@ export default {
checkedHoverBackground: '{surface.900}' 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);
}
`
}; };