hotfix(jumpbar): jump bar fixed on mobile

This commit is contained in:
trashtemp 2021-12-28 23:40:07 +01:00
parent 17a2ca773b
commit e4159e1c6d
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 25 additions and 4 deletions

View file

@ -13,16 +13,32 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
z-index: 10; z-index: 10;
position: relative; position: relative;
> div { ${(props) =>
props.position === "top" &&
css`
top: 0;
`}
${(props) => ${(props) =>
props.position === "bottom" && props.position === "bottom" &&
css` css`
top: -26px; top: 65px;
${() => ${() =>
isTouchscreenDevice && isTouchscreenDevice &&
css` css`
top: -32px; top: -90px;
`}
`}
> div {
${(props) =>
props.position === "bottom" &&
css`
${() =>
isTouchscreenDevice &&
css`
top: -90px;
`} `}
`} `}
@ -37,7 +53,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
user-select: none; user-select: none;
justify-content: space-between; justify-content: space-between;
transition: color ease-in-out 0.08s; transition: color ease-in-out 0.08s;
top: 48px; top: -90px;
${(props) => ${(props) =>
props.accent props.accent
@ -53,6 +69,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
${(props) => ${(props) =>
props.position === "top" props.position === "top"
? css` ? css`
top: 48px;
border-radius: 0 0 var(--border-radius) border-radius: 0 0 var(--border-radius)
var(--border-radius); var(--border-radius);
` `

View file

@ -19,4 +19,8 @@ export default styled.select`
&:focus { &:focus {
box-shadow: 0 0 0 1.5pt var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);
} }
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
`; `;