mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 23:42:11 -05:00
hotfix(jumpbar): jump bar fixed on mobile
This commit is contained in:
parent
17a2ca773b
commit
e4159e1c6d
2 changed files with 25 additions and 4 deletions
|
@ -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);
|
||||||
`
|
`
|
||||||
|
|
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in a new issue