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

Add material slider

pull/6493/head
Cagatay Civici 2024-09-28 15:07:40 +03:00
parent ef33290079
commit 730687c303
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,24 +4,25 @@ export default {
}, },
track: { track: {
background: '{content.border.color}', background: '{content.border.color}',
borderRadius: '{content.border.radius}', borderRadius: '{border.radius.xs}',
size: '3px' size: '2px'
}, },
range: { range: {
background: '{primary.color}' background: '{primary.color}'
}, },
handle: { handle: {
width: '20px', width: '18px',
height: '20px', height: '18px',
borderRadius: '50%', borderRadius: '50%',
background: '{content.border.color}', background: '{primary.color}',
hoverBackground: '{content.border.color}', hoverBackground: '{primary.color}',
content: { content: {
borderRadius: '50%', borderRadius: '50%',
hoverBackground: '{content.background}', contentBackground: '{primary.color}',
width: '16px', hoverBackground: '{primary.color}',
height: '16px', width: '18px',
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)' height: '18px',
shadow: '0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)'
}, },
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
@ -31,16 +32,18 @@ export default {
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
} }
}, },
colorScheme: { style: ({ dt }) => `
light: { .p-slider-handle {
handle: { transition: box-shadow ${dt('slider.transition.duration')};
contentBackground: '{surface.0}'
}
},
dark: {
handle: {
contentBackground: '{surface.950}'
} }
.p-slider:not(.p-disabled) .p-slider-handle:hover {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('slider.handle.background')}, transparent 92%);
} }
.p-slider-handle:focus-visible,
.p-slider:not(.p-disabled) .p-slider-handle:focus:hover {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('slider.handle.background')}, transparent 84%);
} }
`
}; };