Merge branch 'main' into chore-docs-removed-obsolete-part

db-ui · Mar 20, 2024 · 60e2d60 · 60e2d60
2 parents 17d2682 + c1eb627
commit 60e2d60
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 13 deletions.
diff --git a/docs/research/README.md b/docs/research/README.md
@@ -15,3 +15,10 @@ You can find more design systems here:
 
 -   <https://component.gallery/>
 -   <https://github.com/alexpate/awesome-design-systems>
+
+Further inspirational links:
+
+- <https://handreichungen.bfit-bund.de/barrierefreie-uie/>
+- <https://open-ui.org/>
+
+5. Additionally it might be beneficial to even also already save your HTML explorations within the related components file, like e.g. for `buttons`: `packages/components/src/components/button/index.html`
diff --git a/docs/scripts/component-research/design-systems.js b/docs/scripts/component-research/design-systems.js
@@ -13,6 +13,17 @@ export const designSystems = [
 		url: 'https://inclusive-components.design/',
 		componentUrl: 'https://inclusive-components.design/#components'
 	},
+	{
+		name: 'Barrierefreie Gestaltung von User Interface-Elementen',
+		url: 'https://handreichungen.bfit-bund.de/barrierefreie-uie/',
+		componentUrl:
+			'https://handreichungen.bfit-bund.de/barrierefreie-uie/0.4/zusammengesetzte_bedienelemente.html'
+	},
+	{
+		name: 'Open UI',
+		url: 'https://open-ui.org/',
+		componentUrl: 'https://open-ui.org/'
+	},
 	{
 		name: 'Telekom Scale',
 		url: 'https://github.com/telekom/scale',
@@ -92,6 +103,17 @@ export const designSystems = [
 		componentUrl:
 			'https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/overview'
 	},
+	{
+		name: 'Audi Design System',
+		url: 'https://www.audi.com/ci/en/guides/user-interface.html',
+		componentUrl:
+			'https://www.audi.com/ci/en/guides/user-interface/components.html'
+	},
+	{
+		name: 'DHL Design System',
+		url: 'https://www.dpdhl-brands.com/en/dhl/buttons',
+		componentUrl: 'https://www.dpdhl-brands.com/en/dhl/buttons'
+	},
 	{
 		name: 'Bootstrap',
 		url: 'https://github.com/twbs/bootstrap',

diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -141,6 +141,7 @@
 	padding: variables.$db-spacing-fixed-md;
 	inline-size: 100%;
 	position: fixed;
+	overflow-y: auto;
 	// additional #{$db-spacing-fixed-3xs} for border
 	inset-block: calc(
 			#{component.$default-mobile-header-height} + #{variables.$db-spacing-fixed-3xs}

diff --git a/packages/foundations/scss/_screen-sizes.scss b/packages/foundations/scss/_screen-sizes.scss
@@ -1,10 +1,16 @@
-@use "helpers/functions";
+@use "helpers";
 
-$db-breakpoint-xs: functions.to-rem(360);
-$db-breakpoint-sm: functions.to-rem(720);
-$db-breakpoint-md: functions.to-rem(1024);
-$db-breakpoint-lg: functions.to-rem(1440);
-$db-breakpoint-xl: functions.to-rem(1920);
+$db-screen-size-xs: 360;
+$db-screen-size-sm: 720;
+$db-screen-size-md: 1024;
+$db-screen-size-lg: 1440;
+$db-screen-size-xl: 1920;
+
+$db-breakpoint-xs: helpers.to-em($db-screen-size-xs);
+$db-breakpoint-sm: helpers.to-em($db-screen-size-sm);
+$db-breakpoint-md: helpers.to-em($db-screen-size-md);
+$db-breakpoint-lg: helpers.to-em($db-screen-size-lg);
+$db-breakpoint-xl: helpers.to-em($db-screen-size-xl);
 
 :root {
 	--db-breakpoint-xs: #{$db-breakpoint-xs};
@@ -15,19 +21,19 @@ $db-breakpoint-xl: functions.to-rem(1920);
 }
 
 @mixin screen($size: "sm", $width: "min") {
-	$screen: $db-breakpoint-sm;
+	$screen: $db-screen-size-sm;
 	@if ($size == "xs") {
-		$screen: $db-breakpoint-xs;
+		$screen: $db-screen-size-xs;
 	} @else if ($size == "md") {
-		$screen: $db-breakpoint-md;
+		$screen: $db-screen-size-md;
 	} @else if ($size == "lg") {
-		$screen: $db-breakpoint-lg;
+		$screen: $db-screen-size-lg;
 	} @else if ($size == "xl") {
-		$screen: $db-breakpoint-xl;
+		$screen: $db-screen-size-xl;
 	}
 
 	@if ($width == "min") {
-		@media screen and (min-width: $screen) {
+		@media screen and (min-width: helpers.to-em($screen)) {
 			&:not([data-force-mobile]),
 			&[data-force-mobile="false"] {
 				@content;
@@ -38,7 +44,7 @@ $db-breakpoint-xl: functions.to-rem(1920);
 			@content;
 		}
 
-		@media screen and (max-width: $screen) {
+		@media screen and (max-width: helpers.to-em($screen - 1)) {
 			@content;
 		}
 	}