feat: Add print styles using media-print mixin (#2531)

.changeset/media-print-mixin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Added `media-print` mixin and print styles to hide interactive components during printing.

core/scss/layout/_core.scss

@@ -14,7 +14,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @media print {
+  @include media-print {
     background: transparent;
   }
 }

core/scss/layout/_footer.scss

@@ -4,6 +4,10 @@
   padding: $footer-padding-y 0;
   color: $footer-color;
   margin-top: auto;
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .footer-transparent {

core/scss/layout/_page.scss

@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
 
-  @media print {
+  @include media-print {
     margin: 0 !important;
   }
 }

core/scss/mixins/_mixins.scss

@@ -66,3 +66,12 @@
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
   }
 }
+
+//
+// Print styles
+//
+@mixin media-print {
+  @media print {
+    @content;
+  }
+}

core/scss/ui/_buttons.scss

@@ -216,6 +216,10 @@
   bottom: 1rem;
   left: 1rem;
   box-shadow: var(--#{$prefix}shadow-dropdown);
+
+  @include media-print {
+    display: none;
+  }
 }
 
 //
@@ -277,10 +281,18 @@
   &.show {
     color: var(--#{$prefix}primary);
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .btn-actions {
   display: flex;
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .btn-animate-icon {

core/scss/ui/_cards.scss

@@ -1,7 +1,7 @@
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
-  @media print {
+  @include media-print {
     border: none;
     box-shadow: none;
   }
@@ -341,7 +341,7 @@ Stacked card
     }
   }
 
-  @media print {
+  @include media-print {
     padding: 0;
   }
 

core/scss/ui/_close.scss

@@ -39,6 +39,10 @@
     user-select: none;
     opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 // @mixin btn-close-white() {

core/scss/ui/_dropdowns.scss

@@ -14,6 +14,10 @@
       display: flex;
     }
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .dropdown-item {

core/scss/ui/_modals.scss

@@ -65,3 +65,9 @@
   max-width: none;
   margin: 0 $modal-dialog-margin;
 }
+
+.modal {
+  @include media-print {
+    display: none !important;
+  }
+}

core/scss/ui/_offcanvas.scss

@@ -1,3 +1,9 @@
+.offcanvas {
+  @include media-print {
+    display: none;
+  }
+}
+
 .offcanvas-header {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }

core/scss/ui/_pagination.scss

@@ -4,6 +4,10 @@
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
   line-height: var(--#{$prefix}body-line-height);
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .page-link {

core/scss/ui/_popovers.scss

@@ -1,2 +1,5 @@
 .popover {
+  @include media-print {
+    display: none;
+  }
 }

core/scss/ui/_tables.scss

@@ -7,7 +7,7 @@
       padding-bottom: $table-th-padding-y;
       white-space: nowrap;
 
-      @media print {
+      @include media-print {
         background: transparent;
       }
     }

core/scss/ui/_toasts.scss

@@ -9,6 +9,10 @@
   button[data-bs-dismiss="toast"] {
     outline: none;
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 @each $state, $value in $theme-colors {

core/scss/ui/_toolbar.scss

@@ -7,4 +7,8 @@
   > * {
     margin: 0 .5rem;
   }
+
+  @include media-print {
+    display: none;
+  }
 }