Print tweaks (#25164)

* Add min-width to body when printing

This should address some inconsistencies between browsers when printing. It applies a min-width to the body so that the content better resembles what your might see on your screen. I've made it a variable for easy customizing, too.

* Don't underline buttons when printing

* Add basic print styles for page and body size to create a semi-consistent print experience across browsers
This commit is contained in:
Mark Otto 2018-01-03 16:01:03 -08:00 committed by GitHub
parent 8184c649a1
commit 20765b5025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 3 deletions

View File

@ -20,9 +20,10 @@
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
a {
&:not(.btn) {
text-decoration: underline;
}
}
// Bootstrap specific; comment the following selector out
@ -82,6 +83,19 @@
// Bootstrap specific changes start
// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page {
size: $print-page-size;
}
body {
min-width: $print-body-min-width !important;
}
.container {
min-width: $print-body-min-width !important;
}
// Bootstrap components
.navbar {
display: none;

View File

@ -882,3 +882,8 @@ $kbd-bg: $gray-900 !default;
$pre-color: $gray-900 !default;
$pre-scrollable-max-height: 340px !default;
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;