diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index acc3358452..726b139a0a 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -5,7 +5,7 @@ export const MiddlePanel = styled.div` width: calc(100% - ${props => props.theme.rightPanel.width}); padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; - ${media.lessThan('medium')` + ${media.lessThan('medium', true)` width: 100%; padding: ${props => `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; @@ -19,7 +19,7 @@ export const Section = withProps<{ underlined?: boolean }>( )` padding: ${props => props.theme.spacing.sectionVertical}px 0; - ${media.lessThan('medium')` + ${media.lessThan('medium', true)` padding: 0; `} ${props => @@ -45,7 +45,7 @@ export const RightPanel = styled.div` background-color: ${props => props.theme.rightPanel.backgroundColor}; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; - ${media.lessThan('medium')` + ${media.lessThan('medium', true)` width: 100%; padding: ${props => `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; @@ -61,7 +61,7 @@ export const Row = styled.div` width: 100%; padding: 0; - ${media.lessThan('medium')` + ${media.lessThan('medium', true)` flex-direction: column; `}; `; diff --git a/src/components/Redoc/styled.elements.tsx b/src/components/Redoc/styled.elements.tsx index 6bf55e1a88..abc9925598 100644 --- a/src/components/Redoc/styled.elements.tsx +++ b/src/components/Redoc/styled.elements.tsx @@ -30,9 +30,10 @@ export const ApiContentWrap = styled.div` position: relative; overflow: hidden; width: calc(100% - ${props => props.theme.menu.width}); - ${media.lessThan('small')` + ${media.lessThan('small', true)` width: 100%; `}; + contain: layout; `; @@ -43,7 +44,7 @@ export const BackgroundStub = styled.div` bottom: 0; right: 0; width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4); - ${media.lessThan('medium')` + ${media.lessThan('medium', true)` display: none; `}; `; diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx index e0ecc5449a..3d2e2fd52f 100644 --- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx +++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx @@ -43,6 +43,10 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)` background: #ffffff; display: ${props => (props.open ? 'flex' : 'none')}; `}; + + @media print { + display: none; + } `; const FloatingButton = styled.div` @@ -60,11 +64,16 @@ const FloatingButton = styled.div` ${media.lessThan('small')` display: flex; `}; + bottom: 44px; width: 60px; height: 60px; padding: 0 20px; + + @media print { + display: none; + } `; @observer diff --git a/src/styled-components.ts b/src/styled-components.ts index 41badeb72a..1e0e4fb1de 100644 --- a/src/styled-components.ts +++ b/src/styled-components.ts @@ -26,9 +26,10 @@ const { >; export const media = { - lessThan(breakpoint) { + lessThan(breakpoint, print?: boolean) { return (...args) => css` - @media (max-width: ${props => props.theme.breakpoints[breakpoint]}) { + @media ${print ? 'print, ' : ''} screen and (max-width: ${props => + props.theme.breakpoints[breakpoint]}) { ${(css as any)(...args)}; } `;