inno-js/journal.pl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

keyboard reveal + adaptive fix

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2022-11-29 22:58:30 +03:00
parent ecb7f10f74
commit 832a7ae058
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/keyboard.style.ts
View File

@ -1,6 +1,15 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { keyframes } from '@emotion/react'; import { keyframes } from '@emotion/react';
const reveal = keyframes`
from {
bottom: -600px;
}
to {
bottom: 0;
}
`;
export const Wrapper = styled.div` export const Wrapper = styled.div`
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -12,6 +21,8 @@ export const Wrapper = styled.div`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
animation: ${reveal} .5s;
animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
`; `;
export const KeyRow = styled.div` export const KeyRow = styled.div`
@ -20,7 +31,6 @@ export const KeyRow = styled.div`
export const BackspaceBtn = styled.img` export const BackspaceBtn = styled.img`
width: 60%; width: 60%;
/* height: 8px; */
`; `;
export const Key = styled.button` export const Key = styled.button`

8
src/pages/style.ts
View File

@ -291,7 +291,13 @@ export const FullScreenButton = styled.button`
export const InputHolder = styled.div` export const InputHolder = styled.div`
background-color: rgba(0, 0, 0, .0); background-color: rgba(0, 0, 0, .0);
width: calc(100% - 70px); width: calc(100% - 70px);
height: 100%; height: 60px;
right: 70px; right: 70px;
top: 12px;
left: 12px;
position: absolute; position: absolute;
@media screen and (max-width: 600px) {
width: 100%;
}
`; `;