Web: Login: fix modal style
This commit is contained in:
parent
df920f7b4e
commit
947115a6ca
@ -6,7 +6,6 @@ import { providersData } from "@appserver/common/constants";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
import { getProviderTranslation } from "@appserver/common/utils";
|
import { getProviderTranslation } from "@appserver/common/utils";
|
||||||
import { isMobile } from "react-device-detect";
|
|
||||||
|
|
||||||
const ProviderRow = styled.div`
|
const ProviderRow = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -37,10 +36,13 @@ const ProviderRow = styled.div`
|
|||||||
|
|
||||||
const Modal = styled(ModalDialog)`
|
const Modal = styled(ModalDialog)`
|
||||||
.modal-dialog-aside {
|
.modal-dialog-aside {
|
||||||
transform: translateX(
|
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||||
${(props) => (props.visible ? "0" : props.isMobile ? "325px" : "480px")}
|
width: 480px;
|
||||||
);
|
|
||||||
width: ${(props) => (props.isMobile ? "325px" : "480px")};
|
@media (max-width: 375px) {
|
||||||
|
width: 325px;
|
||||||
|
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -61,7 +63,6 @@ const MoreLoginModal = (props) => {
|
|||||||
visible={visible}
|
visible={visible}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
removeScroll={true}
|
removeScroll={true}
|
||||||
isMobile={isMobile}
|
|
||||||
>
|
>
|
||||||
<ModalDialog.Header>{t("Authorization")}</ModalDialog.Header>
|
<ModalDialog.Header>{t("Authorization")}</ModalDialog.Header>
|
||||||
<ModalDialog.Body>
|
<ModalDialog.Body>
|
||||||
|
Loading…
Reference in New Issue
Block a user