packages/styles/scss/utilities/_print.scss

   1 @include media('print') {
   2         /**
   3          * add in this all elements which need to be hardly reseted for print
   4          */
   5         body,
   6         html,
   7         .page,
   8         .reset4print {
   9                 background-color: white;
  10                 background-image: none;
  11                 border: 0;
  12                 box-shadow: none;
  13                 color: black;
  14                 float: none;
  15                 block-size: auto;
  16                 margin: 0;
  17                 max-inline-size: 100%;
  18                 min-block-size: 0;
  19                 padding: 0;
  20                 position: static;
  21                 inline-size: auto;
  22                 opacity: 1;
  23                 visibility: visible;
  24                 max-block-size: none;
  25                 display: block;
  26                 font-size: 10pt;
  27         }
  28
  29         body {
  30                 padding: 0.5em;
  31                 overflow: auto;
  32         }
  33
  34         /* hide unnecessary elements */
  35         .no-print {
  36                 display: none;
  37         }
  38
  39         .is-printed-version {
  40                 .modal-container,
  41                 .modal,
  42                 .modal-content-inner,
  43                 .modal-two-content,
  44                 .modal-two,
  45                 .modal-two-dialog,
  46                 .modal-two-dialog-container {
  47                         @extend .reset4print;
  48                 }
  49
  50                 .modal-content-inner::before,
  51                 .modal-content-inner::after {
  52                         content: none;
  53                 }
  54
  55                 .app-root,
  56                 .modal-overlay,
  57                 .modal-two-backdrop,
  58                 .modal-two-header,
  59                 .modal-two-footer,
  60                 .item-icon,
  61                 .scroll-start-shadow,
  62                 .scroll-end-shadow {
  63                         @extend .no-print;
  64                 }
  65         }
  66
  67         /* display specific elements for print */
  68         .on-print {
  69                 display: block;
  70         }
  71
  72         /* avoid problematic page break */
  73         ul,
  74         ol {
  75                 page-break-inside: avoid;
  76         }
  77
  78         h1,
  79         h2,
  80         h3,
  81         caption {
  82                 page-break-after: avoid;
  83         }
  84
  85         .keep-color {
  86                 /* stylelint-disable-next-line */
  87                 print-color-adjust: exact;
  88         }
  89
  90         .main {
  91                 border: 0;
  92         }
  93 }
  94
  95 .only-print {
  96         @include media('screen') {
  97                 display: none;
  98         }
  99 }