Created
February 20, 2023 17:09
-
-
Save lekoala/33aa29a1a4bf1a65cc426c366d02d7e6 to your computer and use it in GitHub Desktop.
bootstrap 5 print styles
This file contains hidden or 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 hidden or 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