kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(modal): update snapshots

Browse Source 
fix(modal): fix max-width in mobile

fix: decrease the Z level of the mobile menu

test: update snapshots
This commit is contained in:
unix
2020-04-24 12:21:31 +08:00
parent abca5e9d8f
commit 870fc5cb8e
3 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/modal/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -12,7 +12,7 @@ exports[`Modal should render correctly 1`] = `
justify-content: center;
align-items: center;
word-break: break-word;
text-transform: uppercase;
text-transform: capitalize;
color: #000;
}
</style><p class=\\"\\">This is a modal</p><style>
@@ -108,7 +108,7 @@ exports[`Modal should render correctly 1`] = `
}
</style><style>
.wrapper {
max-width: 90%;
max-width: 85vw;
width: 26rem;
overflow: hidden;
display: flex;
@@ -119,6 +119,7 @@ exports[`Modal should render correctly 1`] = `
color: #000;
border-radius: 5px;
padding: 16pt;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
opacity: 0;
transform: translate3d(0px, -40px, 0px);
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
@@ -156,13 +157,16 @@ exports[`Modal should render correctly 1`] = `
height: 100vh;
width: 100vw;
overflow: auto;
z-index: 2000;
z-index: 1000;
}
.content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1001;
outline: none;
}
.offset {
@@ -180,10 +184,10 @@ exports[`Modal should render correctly 1`] = `
width: 100%;
height: 100%;
opacity: 0.25;
background-color: #000;
background-color: black;
transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: -1;
z-index: 1000;
}
</style></div>"
`;

2
components/modal/modal-wrapper.tsx
View File

@@ -28,7 +28,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
{children}
<style jsx>{`
.wrapper {
max-width: 85%;
max-width: 85vw;
width: ${width};
overflow: hidden;
display: flex;

2
lib/components/sidebar/tabbar-mobile.tsx
View File

@@ -24,7 +24,7 @@ const TabbarMobile:React.FC<Props> = ({ onClick }) => {
top: 0;
left: 0;
right: 0;
z-index: 10000;
z-index: 950;
height: 3.7rem;
background-color: ${theme.palette.background};
display: flex;