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%);
}
.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%);
}

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%);
}
.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%);
}

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

@ -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);
}
`
};