From 982d1f0e8c1ea172a74ab1313955d19d2979b345 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:20:36 +0100 Subject: [PATCH 1/2] fix: minor issues with sub-navigation (#2331) --- .../navigation-item/navigation-item.scss | 1 + packages/foundations/scss/_screen-sizes.scss | 32 +++++++++++-------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 2cc1a86cae5..6ca041538ba 100644 --- 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 index 9486c791378..2a81b9f0e0d 100644 --- 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; } } From c1eb627e8b834bd56e6dbb57018d5b21bb595318 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:37:49 +0100 Subject: [PATCH 2/2] docs: adding further inspirational content (#1625) * docs: adding further inspirational links * Update README.md * Update README.md * chore: added new URLs * Update design-systems.js --------- Co-authored-by: Nicolas Merget <104347736+nmerget@users.noreply.github.com> --- docs/research/README.md | 7 ++++++ .../component-research/design-systems.js | 22 +++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/docs/research/README.md b/docs/research/README.md index f76136906a0..ec0522aee91 100644 --- a/docs/research/README.md +++ b/docs/research/README.md @@ -15,3 +15,10 @@ You can find more design systems here: - - + +Further inspirational links: + +- +- + +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 index 08d9cbb2482..a9cc65006dd 100644 --- 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',