bootstrap 5 print styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "../bootstrap/bootstrap-common"; | |
// Print styles | |
@media print { | |
// Our custom styles | |
*, | |
*::before, | |
*::after { | |
text-shadow: none !important; | |
box-shadow: none !important; | |
} | |
a:not(.btn) { | |
text-decoration: underline; | |
} | |
abbr[title]::after { | |
content: " (" attr(title) ")"; | |
} | |
pre { | |
white-space: pre-wrap !important; | |
} | |
pre, | |
blockquote { | |
border: 1px solid #adb5bd; | |
page-break-inside: avoid; | |
} | |
tr, | |
img { | |
page-break-inside: avoid; | |
} | |
p, | |
h2, | |
h3 { | |
orphans: 3; | |
widows: 3; | |
} | |
h2, | |
h3 { | |
page-break-after: avoid; | |
} | |
// Print utilities | |
@each $key, $utility in $utilities { | |
// The utility can be disabled with `false`, thus check if the utility is a map first | |
// Then check if the utility needs print styles | |
@if type-of($utility) == "map" and map-get($utility, print) == true { | |
@include generate-utility($utility, "-print"); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Loop over each breakpoint | |
@each $breakpoint in map-keys($grid-breakpoints) { | |
// Generate media query if needed | |
@include media-breakpoint-up($breakpoint) { | |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); | |
// Loop over each utility property | |
@each $key, $utility in $utilities { | |
// The utility can be disabled with `false`, thus check if the utility is a map first | |
// Only proceed if responsive media queries are enabled or if it's the base media query | |
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { | |
@include generate-utility($utility, $infix); | |
} | |
} | |
} | |
} | |
// RFS rescaling | |
@media (min-width: $rfs-mq-value) { | |
@each $breakpoint in map-keys($grid-breakpoints) { | |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); | |
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { | |
// Loop over each utility property | |
@each $key, $utility in $utilities { | |
// The utility can be disabled with `false`, thus check if the utility is a map first | |
// Only proceed if responsive media queries are enabled or if it's the base media query | |
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { | |
@include generate-utility($utility, $infix, true); | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment