From fbcec822756a7e1b970a02d1f60708c09b801edc Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Fri, 5 Oct 2018 15:57:12 +0300
Subject: [PATCH] fix: minor media print improvements

---
 src/common-elements/panels.ts                            | 8 ++++----
 src/components/Redoc/styled.elements.tsx                 | 5 +++--
 src/components/StickySidebar/StickyResponsiveSidebar.tsx | 9 +++++++++
 src/styled-components.ts                                 | 5 +++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index acc33584..726b139a 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 6bf55e1a..abc99255 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 e0ecc544..3d2e2fd5 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 41badeb7..1e0e4fb1 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)};
       }
     `;