mirror of
https://github.com/Redocly/redoc.git
synced 2024-12-05 06:43:43 +03:00
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import * as styledComponents from 'styled-components';
|
|
|
|
import { ResolvedThemeInterface } from './theme';
|
|
|
|
export { ResolvedThemeInterface };
|
|
|
|
const {
|
|
default: styled,
|
|
css,
|
|
createGlobalStyle,
|
|
keyframes,
|
|
ThemeProvider,
|
|
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
|
|
|
|
export const media = {
|
|
lessThan(breakpoint, print?: boolean, extra?: string) {
|
|
return (...args) => css`
|
|
@media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
|
|
props.theme.breakpoints[breakpoint]})${extra || ''} {
|
|
${(css as any)(...args)};
|
|
}
|
|
`;
|
|
},
|
|
|
|
greaterThan(breakpoint) {
|
|
return (...args) => css`
|
|
@media (min-width: ${props => props.theme.breakpoints[breakpoint]}) {
|
|
${(css as any)(...args)};
|
|
}
|
|
`;
|
|
},
|
|
|
|
between(firstBreakpoint, secondBreakpoint) {
|
|
return (...args) => css`
|
|
@media (min-width: ${props =>
|
|
props.theme.breakpoints[firstBreakpoint]}) and (max-width: ${props =>
|
|
props.theme.breakpoints[secondBreakpoint]}) {
|
|
${(css as any)(...args)};
|
|
}
|
|
`;
|
|
},
|
|
};
|
|
|
|
export { css, createGlobalStyle, keyframes, ThemeProvider };
|
|
export default styled;
|
|
|
|
export function extensionsHook(styledName: string) {
|
|
return props => {
|
|
if (!props.theme.extensionsHook) {
|
|
return;
|
|
}
|
|
return props.theme.extensionsHook(styledName, props);
|
|
};
|
|
}
|