FIX: Cleanup CSS code (#462)
This commit is contained in:
committed by
GitHub
parent
1b34db0bc3
commit
bbba875da3
@@ -216,21 +216,18 @@ const Wrapper = styled("div")`
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const DRAWER_WIDTH = 264;
|
||||||
|
const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 440;
|
||||||
|
|
||||||
const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
|
const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
|
||||||
margin-left: ${({ isDrawerOpen }) => (isDrawerOpen ? "0px" : "-264px")};
|
margin-left: ${({ isDrawerOpen }) => (isDrawerOpen ? "0px" : `-${DRAWER_WIDTH}px`)};
|
||||||
width: ${({ isDrawerOpen }) =>
|
width: ${({ isDrawerOpen }) => (isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%")};
|
||||||
isDrawerOpen ? "calc(100% - 264px)" : "100%"};
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@media (max-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px) {
|
||||||
@media (max-width: 440px) {
|
${({ isDrawerOpen }) => isDrawerOpen && `min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px;`}
|
||||||
${({ isDrawerOpen }) =>
|
}
|
||||||
isDrawerOpen &&
|
|
||||||
`
|
|
||||||
min-width: 440px;
|
|
||||||
`}
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const MobileOverlay = styled("div")`
|
const MobileOverlay = styled("div")`
|
||||||
@@ -243,7 +240,7 @@ const MobileOverlay = styled("div")`
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@media (min-width: 441px) {
|
@media (min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE + 1}px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user