DocSpace-client/packages/components/paging/styled-paging.js

60 lines
1.5 KiB
JavaScript

import styled from "styled-components";
import Base from "../themes/base";
import { mobile } from "../utils/device";
const StyledPaging = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-start;
& > button {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: ${theme.paging.button.marginRight};`
: `margin-right: ${theme.paging.button.marginRight};`}
max-width: ${(props) => props.theme.paging.button.maxWidth};
}
`;
StyledPaging.defaultProps = { theme: Base };
const StyledOnPage = styled.div`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
margin-right: ${theme.paging.comboBox.marginLeft};
margin-left: ${theme.paging.comboBox.marginRight};
`
: `
margin-left: ${theme.paging.comboBox.marginLeft};
margin-right: ${theme.paging.comboBox.marginRight};
`}
.hideDisabled {
div[disabled] {
display: none;
}
}
@media ${mobile} {
display: none;
}
`;
StyledOnPage.defaultProps = { theme: Base };
const StyledPage = styled.div`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: ${theme.paging.page.marginRight};`
: `margin-right: ${theme.paging.page.marginRight};`}
.manualWidth {
.dropdown-container {
width: ${(props) => props.theme.paging.page.width};
}
}
`;
StyledPage.defaultProps = { theme: Base };
export { StyledPage, StyledOnPage, StyledPaging };