2021-02-09 12:02:17 +00:00
|
|
|
import styled from "styled-components";
|
|
|
|
import Loader from "../loader";
|
2021-02-25 21:19:45 +00:00
|
|
|
import Base from "../themes/base";
|
2021-02-09 12:02:17 +00:00
|
|
|
|
|
|
|
const StyledOuter = styled.div`
|
|
|
|
position: fixed;
|
|
|
|
text-align: center;
|
|
|
|
top: ${(props) => props.theme.requestLoader.top};
|
|
|
|
width: ${(props) => props.theme.requestLoader.widths};
|
|
|
|
z-index: ${(props) => props.zIndex};
|
|
|
|
display: ${(props) => (props.visible ? "block" : "none")};
|
|
|
|
`;
|
|
|
|
StyledOuter.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
const StyledInner = styled.div`
|
|
|
|
background-color: ${(props) => props.theme.requestLoader.backgroundColor};
|
|
|
|
border: ${(props) => props.theme.requestLoader.border};
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
overflow: ${(props) => props.theme.requestLoader.overflow};
|
|
|
|
padding: ${(props) => props.theme.requestLoader.padding};
|
|
|
|
line-height: ${(props) => props.theme.requestLoader.lineHeight};
|
|
|
|
z-index: ${(props) => props.zIndex};
|
|
|
|
border-radius: ${(props) => props.theme.requestLoader.borderRadius};
|
|
|
|
-moz-border-radius: ${(props) => props.theme.requestLoader.borderRadius};
|
|
|
|
-webkit-border-radius: ${(props) => props.theme.requestLoader.borderRadius};
|
|
|
|
box-shadow: ${(props) => props.theme.requestLoader.boxShadow};
|
|
|
|
-moz-box-shadow: ${(props) => props.theme.requestLoader.boxShadow};
|
|
|
|
-webkit-box-shadow: ${(props) => props.theme.requestLoader.boxShadow};
|
|
|
|
|
|
|
|
.text-style {
|
|
|
|
display: contents;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
StyledInner.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
const OvalLoader = styled(Loader)`
|
|
|
|
display: inline;
|
|
|
|
margin-right: ${(props) => props.theme.requestLoader.marginRight};
|
|
|
|
svg {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
OvalLoader.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
export { OvalLoader, StyledInner, StyledOuter };
|