mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
v5: Drop all print styles and classes (#28339)
This commit is contained in:
Mark Otto
Martijn Cuppens
parent
d806e874b4
commit
473689ce5d
141
scss/_print.scss
141
scss/_print.scss
@ -1,141 +0,0 @@
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||
|
||||
// ==========================================================================
|
||||
// Print styles.
|
||||
// Inlined to avoid the additional HTTP request:
|
||||
// https://www.phpied.com/delay-loading-your-print-css/
|
||||
// ==========================================================================
|
||||
|
||||
@if $enable-print-styles {
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
// Bootstrap specific; comment out `color` and `background`
|
||||
//color: $black !important; // Black prints faster
|
||||
text-shadow: none !important;
|
||||
//background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//a[href]::after {
|
||||
// content: " (" attr(href) ")";
|
||||
//}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//
|
||||
// Don't show links that are fragment identifiers,
|
||||
// or use the `javascript:` pseudo protocol
|
||||
//
|
||||
|
||||
//a[href^="#"]::after,
|
||||
//a[href^="javascript:"]::after {
|
||||
// content: "";
|
||||
//}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
//
|
||||
// Printing Tables:
|
||||
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
//
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
.badge {
|
||||
border: $border-width solid $black;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid $gray-300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
color: inherit;
|
||||
|
||||
th,
|
||||
td,
|
||||
thead th,
|
||||
tbody + tbody {
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.table .thead-dark th {
|
||||
color: inherit;
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
|
||||
// Bootstrap specific changes end
|
||||
}
|
||||
}
|
||||
@ -114,7 +114,6 @@ $enable-transitions: true !default;
|
||||
$enable-prefers-reduced-motion-media-query: true !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-pointer-cursor-for-buttons: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
$enable-responsive-font-sizes: false !default;
|
||||
$enable-validation-icons: true !default;
|
||||
$enable-deprecation-messages: true !default;
|
||||
@ -1126,9 +1125,3 @@ $pre-scrollable-max-height: 340px !default;
|
||||
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
|
||||
$overflows: auto, hidden !default;
|
||||
$positions: static, relative, absolute, fixed, sticky !default;
|
||||
|
||||
|
||||
// Printing
|
||||
|
||||
$print-page-size: a3 !default;
|
||||
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
|
||||
|
||||
1
scss/bootstrap.scss
vendored
1
scss/bootstrap.scss
vendored
@ -40,4 +40,3 @@
|
||||
@import "carousel";
|
||||
@import "spinners";
|
||||
@import "utilities";
|
||||
@import "print";
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@ -14,11 +10,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utilities for toggling `display` in print
|
||||
//
|
||||
|
||||
@media print {
|
||||
@each $value in $displays {
|
||||
.d-print-#{$value} { display: $value !important; }
|
||||
|
||||
@ -14,7 +14,6 @@ Here's what you need to know before getting started with the navbar:
|
||||
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
||||
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{< docsref "/utilities/display" >}}) utility class.
|
||||
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
|
||||
|
||||
{{< callout info >}}
|
||||
|
||||
@ -129,20 +129,6 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com
|
||||
|
||||
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
|
||||
|
||||
## Printing
|
||||
|
||||
Even in some modern browsers, printing can be quirky.
|
||||
|
||||
As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868]({{< param repo >}}/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
|
||||
|
||||
{{< highlight css >}}
|
||||
@media print {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
## Android stock browser
|
||||
|
||||
Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
|
||||
|
||||
@ -241,7 +241,6 @@ You can find and customize these variables for key global options in Bootstrap's
|
||||
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
|
||||
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
|
||||
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
|
||||
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
|
||||
| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{< docsref "/content/typography#responsive-font-sizes" >}}). |
|
||||
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
|
||||
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
|
||||
|
||||
@ -32,6 +32,7 @@ Changes to our source Sass files and compiled CSS.
|
||||
- **Todo:** New variables?
|
||||
- **Todo:** Rearrange forms source files (under `scss/forms/`)
|
||||
- **Todo:** Rearrange grid source files (under `scss/grid/`)
|
||||
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
|
||||
|
||||
## JavaScript
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user