@db-ux/core-foundations 4.5.3 → 4.5.4

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @db-ux/core-foundations
 
+## 4.5.4
+
+### Patch Changes
+
+- fix: adjusted `@media` queries (removed `screen` from combined queries) to avoid broken layouts when printing - [see commit 0960eb6](https://github.com/db-ux-design-system/core-web/commit/0960eb6f9223fe23bdaac0de685cf7aa5eb7654e)
+
 ## 4.5.3
 
 _version bump_
 
-
 ## 4.5.2
 
 _version bump_

package/build/styles/_screen-sizes.scss

@@ -62,7 +62,7 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 
 	@if $width == "min" {
 		/* stylelint-disable-next-line media-query-no-invalid */
-		@media screen and (min-width: #{helpers.px-to-em($screen)}) {
+		@media (min-width: #{helpers.px-to-em($screen)}) {
 			&:not([data-force-mobile]),
 			&[data-force-mobile="false"] {
 				@content;
@@ -75,7 +75,7 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 		}
 
 		/* stylelint-disable-next-line media-query-no-invalid */
-		@media screen and (max-width: #{helpers.px-to-em($screen - 1)}) {
+		@media (max-width: #{helpers.px-to-em($screen - 1)}) {
 			@content;
 		}
 	}
@@ -96,7 +96,7 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 	}
 
 	/* stylelint-disable-next-line media-query-no-invalid */
-	@media screen and (#{$min}width#{$max}) {
+	@media (#{$min}width#{$max}) {
 		@content;
 	}
 	/* stylelint-disable-next-line at-rule-empty-line-before */

package/build/styles/absolute.css

@@ -259,7 +259,7 @@ select,
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   :not([data-disable-focus=true]):is(a,
   button,
   input,
@@ -6131,7 +6131,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     :root,
     :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
@@ -6145,7 +6145,7 @@ code {
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     :root,
     :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
@@ -6159,7 +6159,7 @@ code {
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     :root,
     :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
@@ -6195,7 +6195,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     :root,
     :host {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
@@ -6227,7 +6227,7 @@ code {
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     :root,
     :host {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
@@ -6259,7 +6259,7 @@ code {
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     :root,
     :host {
       --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
@@ -6307,7 +6307,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     :root,
     :host {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
@@ -6339,7 +6339,7 @@ code {
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     :root,
     :host {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
@@ -6371,7 +6371,7 @@ code {
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-body-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     :root,
     :host {
       --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
@@ -6416,7 +6416,7 @@ code {
   box-shadow: var(--db-elevation-md);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-interactive-elevation,
   [data-interactive=elevation] {
     transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);

package/build/styles/defaults/default-elevation.css

@@ -1 +1 @@
-@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}
+@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}

package/build/styles/defaults/default-elevation.scss

@@ -7,7 +7,7 @@
 	cursor: pointer;
 	box-shadow: variables.$db-elevation-md;
 
-	@media screen and (prefers-reduced-motion: no-preference) {
+	@media (prefers-reduced-motion: no-preference) {
 		transition: box-shadow variables.$db-transition-duration-fast
 			variables.$db-transition-timing-functional;
 	}