Skip to content

Commit

Permalink
Print tweaks (#25164)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
mdo committed Jan 4, 2018
1 parent 8184c64 commit 20765b5
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 3 deletions.
20 changes: 17 additions & 3 deletions scss/_print.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 20765b5

Please sign in to comment.