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