Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix InvSlider vertical thumb styling

Browse Source
This commit is contained in:
psychedelicious 2023-12-29 17:07:16 +11:00 committed by Kent Keirsey
parent 4134f18319
commit 43a4b815e8
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/common/components/InvSlider/theme.ts
View File

@ -20,7 +20,8 @@ const filledTrack = defineStyle((_props) => {
}; };
}); });
const thumb = defineStyle(() => { const thumb = defineStyle((props) => {
const { orientation } = props;
return { return {
w: 4, w: 4,
h: 4, h: 4,
@ -29,10 +30,16 @@ const thumb = defineStyle(() => {
borderColor: 'base.200', borderColor: 'base.200',
borderWidth: 2, borderWidth: 2,
_hover: { _hover: {
transform: `translateY(-50%) scale(1.15)`, transform:
orientation === 'vertical'
? 'translateX(-50%) scale(1.15)'
: 'translateY(-50%) scale(1.15)',
transition: 'transform 0.1s', transition: 'transform 0.1s',
_active: { _active: {
transform: `translateY(-50%) scale(1.22)`, transform:
orientation === 'vertical'
? 'translateX(-50%) scale(1.22)'
: 'translateY(-50%) scale(1.22)',
transition: 'transform 0.05s', transition: 'transform 0.05s',
}, },
}, },
@ -51,7 +58,7 @@ const baseStyle = definePartsStyle((props) => ({
container: container(), container: container(),
track: track(), track: track(),
filledTrack: filledTrack(props), filledTrack: filledTrack(props),
thumb: thumb(), thumb: thumb(props),
mark: mark(), mark: mark(),
})); }));