feat(radio/checkbox): show background-color in print stylesheet (#22298…

…) (#22299)

* feat(material/radio): show background-color in print stylesheet (#22298)

* added color-adjust for radio background-color

* feat(material/checkbox): show background-color in print stylesheet (#22298)

* added color-adjust for checkbox background-color

* feat(material-experimental/mdc-checkbox): show background-color in print stylesheet (#22298)

* added color-adjust for checkbox background-color

(cherry picked from commit 5fd431f)

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -64,6 +64,13 @@
     opacity: map-get($mdc-ripple-dark-ink-opacities, press);
   }
 
+
+  .mdc-checkbox__background {
+    // force browser to show background-color when using the print function
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
   // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
   //  conditionally add them. Consider the size cost when deciding whether to switch.

src/material/checkbox/checkbox.scss

@@ -276,6 +276,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
                   $mat-linear-out-slow-in-timing-function,
               opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
 
+  // force browser to show background-color when using the print function
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+
   ._mat-animation-noopable & {
     transition: none;
   }

src/material/radio/radio.scss

@@ -80,6 +80,10 @@ $mat-radio-ripple-radius: 20px;
   // IE to flash the entire circle for a couple of frames, throwing off the entire animation.
   transform: scale(0.001);
 
+  // force browser to show background-color when using the print function
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+
   ._mat-animation-noopable & {
     transition: none;
   }