Improving print media styling

kamilmielnik · Jul 26, 2017 · c36b396 · c36b396
1 parent 3e08b81
commit c36b396
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/src/components/button/styles.scss b/src/components/button/styles.scss
@@ -7,7 +7,6 @@
   text-align: center;
   white-space: nowrap;
   letter-spacing: 1px;
-  box-shadow: 0px 0px 5px 1px grey;
   cursor: pointer;
   user-select: none;
 

diff --git a/src/components/page/styles.scss b/src/components/page/styles.scss
@@ -1,4 +1,7 @@
 .page {
+  width: 210mm;
+  height: 297mm;
+  padding: 20mm;
   box-sizing: border-box;
   background: white;
   box-shadow: 0px 0px 5px 2px grey;

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -6,26 +6,18 @@
 
   .page {
     margin: 20px auto;
-    padding: 20mm;
     height: 100%;
 
     .buttons {
       position: absolute;
       left: calc(100% + 20mm);
       top: 80px;
-      z-index: -1;
 
       .button {
         margin-bottom: 10px;
-
-        &.download-pdf {
-          top: 20px;
-        }
       }
-    }
 
-    @media screen and (max-width: 1030px) {
-      .buttons {
+      @media screen and (max-width: 1030px) {
         display: none;
       }
     }

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,18 +1,23 @@
 html, body {
   margin: 0 auto;
   padding: 0;
-  width: 210mm;
-  height: 285mm;
   background: #ccc;
+  box-sizing: border-box;
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
   line-height: 1.45;
 
   @media print {
     overflow: hidden;
+    background: white;
   }
 }
 
+@page  {
+  size: A4;
+  margin: 0;
+}
+
 a {
   text-decoration: none;
   cursor: pointer;