1/* Print Styles - Hide Elements */
2@media print {
3  iframe,
4  .g-footer,
5  .g-mega-nav,
6  .g-product-subnav,
7  .g-subnav,
8  [aria-hidden='true'],
9  [id='__next-build-watcher'],
10  [id='edit-this-page'],
11  [id='jump-to-section'],
12  [id='sidebar'] {
13    display: none !important;
14  }
15}
16
17/* Print Styles - Page Spacing */
18@media print {
19  @page {
20    margin: 2cm 0.5cm;
21  }
22
23  @page :first {
24    margin-top: 0;
25  }
26
27  @page :last {
28    margin-top: 0;
29  }
30
31  blockquote {
32    break-inside: avoid;
33  }
34
35  body {
36    margin-bottom: 2cm;
37    margin-top: 2cm;
38  }
39
40  dl,
41  ol,
42  ul {
43    break-before: avoid;
44  }
45
46  h1,
47  h2,
48  h3,
49  h4,
50  h5,
51  h6 {
52    break-after: avoid;
53    break-inside: avoid;
54  }
55
56  img {
57    break-inside: avoid;
58    break-after: avoid;
59  }
60
61  pre,
62  table {
63    break-inside: avoid;
64  }
65
66  pre {
67    white-space: pre-wrap;
68  }
69}
70
71@media print {
72  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
73  .g-container {
74    /*
75    * A “measure” is the number of characters in a line of text.
76    * Long lines fatique readers as they find the start of a new line of text.
77    * It seems widely accepted that an ideal measure is 66 characters per line.
78    * An average character takes up .5em, and so we define a measure of 33em.
79    * See: https://webtypography.net/2.1.2
80    */
81    max-width: 33em;
82    padding-left: 0;
83    padding-right: 0;
84    word-break: break-word;
85  }
86
87  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
88  table {
89    margin-bottom: 0;
90    margin-top: 20px;
91  }
92}
93
94/* @todo: move print styles to @hashicorp/react-global-styles/global.css */
95@media print {
96  pre code,
97  code,
98  pre {
99    font-weight: inherit;
100  }
101
102  pre {
103    background: transparent;
104    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
105    color: inherit;
106    padding: 0.5em;
107
108    & > code {
109      white-space: inherit;
110    }
111  }
112}
113
114/* @todo: move print styles to @hashicorp/react-content/dist/style.css */
115@media print {
116  .g-content {
117    & a {
118      color: inherit;
119      font-weight: 700;
120
121      &:not(.anchor) {
122        &::after {
123          background-color: transparent;
124          position: static;
125          opacity: 1;
126        }
127      }
128
129      &[href^='http'] {
130        &::after {
131          content: ' <' attr(href) '>';
132          font-size: 0.8em;
133          font-style: italic;
134          letter-spacing: -0.01875em;
135          vertical-align: top;
136        }
137      }
138
139      &:not([href^='http']) {
140        text-decoration: underline;
141      }
142
143      & > code {
144        color: inherit;
145        font-weight: 700;
146
147        &::before,
148        &::after {
149          content: none;
150        }
151      }
152    }
153
154    & h1,
155    & h2,
156    & h3,
157    & h4,
158    & h5,
159    & h6 {
160      & code {
161        background: none;
162        font-size: 1em;
163        padding: 0;
164      }
165    }
166
167    & h2 {
168      margin: 1em 0 0;
169    }
170
171    & h3 {
172      margin: 1em 0 0;
173      padding-bottom: 0.25em;
174    }
175
176    & img {
177      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
178      margin: 1em 0 0;
179    }
180
181    & ol,
182    & ul {
183      margin: 1em 0 0;
184
185      & li {
186        margin-bottom: 0;
187        margin-top: 0.5em;
188
189        & p:first-child {
190          margin-top: 0;
191        }
192      }
193    }
194
195    & p {
196      margin: 1em 0 0;
197    }
198
199    & pre {
200      background-color: transparent;
201      border-radius: 0;
202      margin: 1.5em 0 0;
203
204      & code {
205        background: transparent;
206        color: inherit;
207      }
208    }
209
210    & dd,
211    & dt,
212    & li,
213    & p,
214    & td,
215    & th {
216      & > :not(pre) code,
217      & > code {
218        background: transparent;
219        font-weight: 700;
220        padding: 0;
221      }
222    }
223
224    & .alert.alert-danger,
225    & .alert.alert-info,
226    & .alert.alert-success,
227    & .alert.alert-warning {
228      background-color: transparent;
229    }
230  }
231}
232
233/* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
234@media print {
235  .hljs {
236    & * {
237      color: inherit;
238    }
239  }
240}
241
242/* @todo: remove when working on website/components/docs-page/style.css */
243@media print {
244  #p-docs {
245    & #inner {
246      overflow: visible;
247      width: auto;
248
249      & pre,
250      & code {
251        font-size: 0.844rem;
252      }
253    }
254  }
255}
256