keyboard reveal + adaptive fix

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

View File

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

View File

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