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

Add material checkbox

pull/6493/head
Cagatay Civici 2024-09-28 14:26:05 +03:00
parent 6797a57bad
commit b628ed8cb8
1 changed files with 68 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,18 @@
export default {
root: {
borderRadius: '{border.radius.sm}',
width: '1.25rem',
height: '1.25rem',
borderRadius: '{border.radius.xs}',
width: '18px',
height: '18px',
background: '{form.field.background}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}',
checkedHoverBackground: '{primary.color}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.border.color}',
focusBorderColor: '{form.field.hover.border.color}',
checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}',
checkedHoverBorderColor: '{primary.color}',
checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
@ -32,5 +32,67 @@ export default {
checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}'
},
style: ({ dt }) => `
.p-checkbox {
border-radius: 50%;
transition: box-shadow ${dt('checkbox.transition.duration')};
}
.p-checkbox-box {
border-width: 2px;
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
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:focus-visible) {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 84%);
}
.p-checkbox-checked .p-checkbox-box:before {
content: "";
position: absolute;
top: 8px;
left: 2px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(45deg);
transform-origin: 0% 100%;
animation: p-md-check 125ms 50ms linear forwards;
}
.p-checkbox-checked .p-checkbox-icon {
display: none;
}
@keyframes p-md-check {
0%{
width: 0;
height: 0;
border-color: ${dt('checkbox.icon.checked.color')};
transform: translate3d(0,0,0) rotate(45deg);
}
33%{
width: 4px;
height: 0;
transform: translate3d(0,0,0) rotate(45deg);
}
100%{
width: 4px;
height: 10px;
border-color: ${dt('checkbox.icon.checked.color')};
transform: translate3d(0,-10px,0) rotate(45deg);
}
}
`
};