diff --git a/source/_data/enterprise/mainnavigation.json b/source/_data/enterprise/mainnavigation.json index 5432616c16..2e36a7d415 100644 --- a/source/_data/enterprise/mainnavigation.json +++ b/source/_data/enterprise/mainnavigation.json @@ -25,6 +25,36 @@ "href": "#", "value": "Sub 01 Sub 03", "rel": "news" + }, + { + "href": "#", + "value": "Sub 01 Sub 04", + "rel": "index" + }, + { + "href": "#", + "value": "Sub 01 Sub 05", + "rel": "offers" + }, + { + "href": "#", + "value": "Sub 01 Sub 06", + "rel": "news" + }, + { + "href": "#", + "value": "Sub 01 Sub 07", + "rel": "index" + }, + { + "href": "#", + "value": "Sub 01 Sub 08", + "rel": "offers" + }, + { + "href": "#", + "value": "Sub 01 Sub 09", + "rel": "news" } ] }, diff --git a/source/_patterns/01-elements/image/image.scss b/source/_patterns/01-elements/image/image.scss index 1958c30689..ca89f96d39 100644 --- a/source/_patterns/01-elements/image/image.scss +++ b/source/_patterns/01-elements/image/image.scss @@ -1,13 +1,5 @@ @import "image.variables"; .elm-image { - &.is-logo { - height: auto; - margin: 0.2rem #{to-rem($pxValue: 16)} 0.2rem 0; - max-width: $image-logo--maxwidth; - - .cmp-brand & { - width: $brand-image--width; // * TODO: possibly rework variable naming - } - } + // We removed logo styles here } diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index 294f044d05..7478911d24 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -1,11 +1,18 @@ @import "brand.variables"; .cmp-brand { - .elm-image { - &.is-logo { - float: left; - margin-top: -#{to-rem($pxValue: 2)}; - } + font-weight: bold; + display: flex; + align-items: center; + gap: 1rem; + + a, + img { + height: 1.5rem; + } + + img { + width: auto; } a { @@ -13,27 +20,4 @@ // Deactivate underline on site name being made clickable by added to the link as well text-decoration: none; } - - .rea-header & { - padding-top: to-rem($pxValue: 18); - @media screen and (width > $db-break-the-header-max-width) { - padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming - - .is-site-name { - &::before { - // * TODO: introduce is-icon as a mixin and change the following declarations afterwards - content: none !important; - } - } - } - } - @media screen and (max-width: $db-break-the-header-max-width) { - .cmp-mainnavigation ~ & { - .rea-header & { - .is-site-name { - display: none; - } - } - } - } } diff --git a/source/_patterns/02-components/dropdown/dropdown.scss b/source/_patterns/02-components/dropdown/dropdown.scss index 70ef1b9a74..1079addd53 100644 --- a/source/_patterns/02-components/dropdown/dropdown.scss +++ b/source/_patterns/02-components/dropdown/dropdown.scss @@ -10,12 +10,6 @@ summary { @include icon(glyph(account), 24, "outline", $partial: $partial); - &:hover { - &::before { - color: $db-color-red-500; - } - } - @media screen and (max-width: $metanavigation-iconOnly--maxWidth) { // * TODO: possibly rework variable naming @include is-icon-text-replace(); diff --git a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss index d3e2d9df3a..fd4fa649e4 100644 --- a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss +++ b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss @@ -1,3 +1,5 @@ @import "../../../css/helpers/functions"; @import "../../00-base/icons/icons.helpers"; @import "../../00-base/icons/icons.variables"; + +$db-language-switcher---direction: var(--db-language-switcher---direction, 1); diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index 9c88b21f75..684dcb59eb 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -1,6 +1,12 @@ @import "../../../css/partials.meta"; @import "language-switcher.variables"; +@mixin set-top($step: 1) { + top: calc( + #{$db-language-switcher---direction} * (100% * #{$step} + 1rem - 2px) + ); +} + .cmp-language-switcher { list-style: none; @@ -29,41 +35,41 @@ top: to-rem($pxValue: 26); .rea-header & { - top: to-rem($pxValue: 55); + @include set-top(1); z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming // TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework &:not([aria-current="page"], [aria-selected="true"]) ~ li:not([aria-current="page"], [aria-selected="true"]) { - top: to-rem($pxValue: 54 * 2); + @include set-top(2); & ~ li:not([aria-current="page"], [aria-selected="true"]) { - top: to-rem($pxValue: 54 * 3); + @include set-top(3); & ~ li:not([aria-current="page"], [aria-selected="true"]) { - top: to-rem($pxValue: 54 * 4); + @include set-top(4); & ~ li:not( [aria-current="page"], [aria-selected="true"] ) { - top: to-rem($pxValue: 54 * 5); + @include set-top(5); & ~ li:not( [aria-current="page"], [aria-selected="true"] ) { - top: to-rem($pxValue: 54 * 6); + @include set-top(6); } } } } } @media screen and (width > $db-break-the-header-max-width) { - top: to-rem($pxValue: 56); + top: 100%; } } @@ -78,9 +84,8 @@ .elm-link, .elm-button { - padding-bottom: to-rem($pxValue: 15); + padding-block: 1rem; padding-right: to-rem($pxValue: 34); - padding-top: to-rem($pxValue: 15); &:hover, &:focus { @@ -95,8 +100,6 @@ .elm-link, .elm-button { - padding-bottom: to-rem($pxValue: 22); - & { @include icon( glyph(expand-more), diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index 06f62665f3..54ae1d54af 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -1,10 +1,17 @@ @import "../../../css/partials.meta"; // TODO: Replace magic numbers e.g. with flexbox implementations and extract variables as well for multi-brand @import "mainnavigation.variables"; +@import "../../../css/helpers/dividers"; .cmp-mainnavigation { - position: $mainnavigation---position; top: $mainnavigation---position-top; + padding-inline-start: 1.5rem; + position: $mainnavigation---position; + + &::before { + @extend %header-divider; + inset-inline-start: 0; + } .rea-header & { order: 1; @@ -26,7 +33,10 @@ // Navigation toggle elements & > input[type="checkbox"][id] { - @include a11y-visually-hidden($partial: $partial); + appearance: none; + position: absolute; + block-size: 1.5rem; + aspect-ratio: 1 / 1; @media screen and (width > $db-break-the-header-max-width) { // Hiding the navigation toggle elements on huger viewports @@ -61,32 +71,93 @@ } &::after { - position: absolute; - right: to-rem($pxValue: 16); - transform: translateY(to-rem($pxValue: 2)); + margin-right: to-rem($pxValue: 16); } } // Displaying the main navigation as an top to bottom overlay on smaller viewports @media screen and (max-width: $db-break-the-header-max-width) { - background-color: $db-color-cool-gray-600; - left: 0; - position: absolute; - top: to-rem($pxValue: 64); - - width: 100vw; z-index: $z-index-cmp-mainnavigation-dropdown; // * TODO: possibly rework variable naming - & > input[type="checkbox"][id]:not(:checked) { - // Hiding the cross on collapsed navigation + & > input[type="checkbox"][id] { & + label[for] { + @include is-icon-text-replace(); + padding: 0; + + &::before, &::after { - content: none; + margin: 0; } } - // Hiding the navigation - & ~ ul { - display: none; + + &:not(:checked) { + // Hiding the cross on collapsed navigation + & + label[for] { + &::after { + content: none; + } + } + // Hiding the navigation + & ~ ul { + display: none; + } + } + + &:checked { + inset-inline-end: 1.5rem; + inset-block-start: 1rem; + position: absolute; + z-index: $z-index-cmp-overflow-menu-overlay; + + & + label[for] { + background-color: #fff; + block-size: 3.5rem; + + &::after { + padding: 0.5rem; + inset-inline-end: 1rem; + inset-block-start: 0.5rem; + position: absolute; + z-index: $z-index-cmp-overflow-menu-overlay; + } + + &::before { + content: ""; + position: fixed; + inset: 0; + z-index: $z-index-cmp-mainnavigation-dropdown; + background-color: $db-color-cool-gray-700; + opacity: 0.8; + } + } + } + } + + &:has(> input[type="checkbox"][id]:not(:checked)) { + // Only for burger menu + position: absolute; + inset-inline-end: 1.5rem; + inset-block-start: 50%; + transform: translateY(-50%); + padding-inline-start: 1rem; + } + + &:has(> input[type="checkbox"][id]:checked) { + position: fixed; + inset: 0; + padding: 0; + margin-inline-start: 1.5rem; + + &::after { + content: ""; + width: 100%; + block-size: 3.5rem; + background-color: #fff; + inset: 0; + position: absolute; + z-index: $z-index-cmp-mainnavigation-dropdown; + border-bottom: 1px solid rgba(40, 45, 55, 0.2); + border-top-left-radius: 4px; } } } @@ -112,8 +183,21 @@ // First Level & > ul { + @media screen and (max-width: $db-break-the-header-max-width) { + background-color: #fff; + position: absolute; + inset-inline: 0; + inset-block-end: 0; + inset-block-start: 3.5rem; + z-index: $z-index-cmp-overflow-menu-overlay; + padding: 0.75rem; + margin-block-end: 3.5rem; + overflow: auto; + } + @media screen and (width > $db-break-the-header-max-width) { display: flex; + gap: 0.75rem; } & > li, @@ -121,11 +205,9 @@ & > .elm-link, & > * > .elm-link { @media screen and (width > $db-break-the-header-max-width) { - padding: $mainnavigation-link--paddingTop - to-rem($pxValue: 26) $mainnavigation-link--paddingBottom; - - border-#{$mainnavigation-link--borderPosition}: 4px solid - transparent; + height: 2.5rem; + padding: 0.5rem 0.75rem; + border-radius: 4px; &:hover, &:focus { @@ -133,7 +215,16 @@ } &[aria-current="page"] { - border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500; + &::after { + height: 4px; + width: 100%; + content: ""; + background-color: $db-color-red-500; + border-radius: 2px; + position: absolute; + inset-block-start: calc(100% + 0.25rem); + inset-inline: 0; + } } } } @@ -141,15 +232,23 @@ // From second level ul { @media screen and (width > $db-break-the-header-max-width) { - left: 0; + inset-inline-start: 0; min-width: 100%; - top: to-rem($pxValue: 79); + inset-block-start: calc(100% + 0.5rem); + + &::before { + content: ""; + height: 0.5rem; + width: 100%; + position: absolute; + inset-block-end: 100%; + } // From third level ul { - left: 100%; + inset-inline-start: 100%; top: auto; - transform: translateY(-#{to-rem($pxValue: 53)}); + inset-block-start: 0.25rem; } .elm-link { @@ -211,7 +310,7 @@ } } - &:hover { + &:is(:hover, :focus-within) { & > ul, & > * > ul { visibility: visible; @@ -222,24 +321,21 @@ } @media screen and (max-width: $db-break-the-header-max-width) { - background-color: $db-color-cool-gray-600; - color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color - &:hover { - background-color: $db-color-cool-gray-300; - color: $db-color-cool-gray-800; - & > a { font-weight: 700; } + + &[aria-haspopup="true"] { + --icon-glyph-after: "⌄"; + } } .elm-link { color: inherit; - padding-bottom: to-rem($pxValue: 8); - - padding-left: to-rem($pxValue: 22); - padding-top: to-rem($pxValue: 8); + padding-block: 0.5rem; + padding-inline-start: 0.75rem; + width: calc(100% - 4rem); } &[aria-haspopup="true"] { @@ -255,12 +351,17 @@ } .elm-link { - &:hover, - &:focus { - background-color: $db-color-cool-gray-200; + background-color: rgba($db-color-cool-gray-700, 0); + + &:hover { + background-color: rgba($db-color-cool-gray-700, 0.08); color: initial; } + &:active { + background-color: rgba($db-color-cool-gray-700, 0.16); + } + &[aria-current="page"] { font-weight: 700; } diff --git a/source/_patterns/02-components/metanavigation/metanavigation.scss b/source/_patterns/02-components/metanavigation/metanavigation.scss index 8aba261c91..edffd9ba0e 100644 --- a/source/_patterns/02-components/metanavigation/metanavigation.scss +++ b/source/_patterns/02-components/metanavigation/metanavigation.scss @@ -6,6 +6,7 @@ margin-bottom: 0; margin-top: 0; padding-left: 0; + gap: 0.5rem; li { padding-left: to-rem($pxValue: 8); @@ -17,16 +18,8 @@ } .elm-link { + @include is-icon-text-replace(); text-decoration: none; - - .cmp-sitesearch:focus-within ~ & { - @include is-icon-text-replace(); - } - @media screen and (max-width: #{$metanavigation-iconOnly--maxWidth}) { - .rea-header & { - @include is-icon-text-replace(); - } - } } } diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss index 669fc5025d..775533a4dc 100644 --- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss +++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss @@ -13,7 +13,13 @@ } summary { - display: inline-block; + display: inline-flex; + align-items: center; + padding: 0.5rem 0.75rem; + border-radius: 4px; + cursor: default; + + background-color: rgba($db-color-cool-gray-700, 0); & { @include icon( @@ -25,16 +31,15 @@ } &::before { - display: inline-block; - padding: to-rem($pxValue: 9) to-rem($pxValue: 12); transform: translateX(-#{to-rem($pxValue: 2)}); } - &:hover, - &:focus { - &::before { - background-color: $db-color-cool-gray-200; - } + &:hover { + background-color: rgba($db-color-cool-gray-700, 0.08); + } + + &:active { + background-color: rgba($db-color-cool-gray-700, 0.16); } &::-webkit-details-marker { diff --git a/source/_patterns/02-components/sitesearch/_sitesearch.hbs b/source/_patterns/02-components/sitesearch/_sitesearch.hbs index 5fbeabc5ac..d04094eea7 100644 --- a/source/_patterns/02-components/sitesearch/_sitesearch.hbs +++ b/source/_patterns/02-components/sitesearch/_sitesearch.hbs @@ -1,5 +1,5 @@ {{! TODO: Weitere Komponenten korrekt inkludieren }} diff --git a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss index 3c96b5c913..b221fb2d98 100644 --- a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss +++ b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss @@ -6,3 +6,6 @@ $sitesearch-form-full-maxWidth: to-rem( $pxValue: 500 ) !default; $sitesearch-input--backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color +$sitesearch-width--open: to-rem( + $pxValue: 240 +); diff --git a/source/_patterns/02-components/sitesearch/sitesearch.scss b/source/_patterns/02-components/sitesearch/sitesearch.scss index c511bac7c5..e2c34c8266 100644 --- a/source/_patterns/02-components/sitesearch/sitesearch.scss +++ b/source/_patterns/02-components/sitesearch/sitesearch.scss @@ -1,34 +1,52 @@ @import "../../../css/partials.meta"; @import "sitesearch.variables"; +@import "../../01-elements/form-elements"; .cmp-sitesearch { position: relative; + display: flex; + align-items: center; + padding-inline-end: 0.75rem; + + @media screen and (max-width: $db-break-the-header-max-width) { + margin-inline-start: auto; + margin-inline-end: 2.25rem; + padding-inline-end: 2rem; + + &::before { + display: none; + } + } .elm-input[type="search"] { - background-color: $sitesearch-input--backgroundColor; // * TODO: possibly rework variable naming + @extend %form-element-solid; background-image: none; opacity: 0; - padding-left: to-em($pxValue: 36); width: 0; + padding: 0; &:focus, &:not(:placeholder-shown) { opacity: 1; - width: to-rem($pxValue: 240); + width: calc(#{$sitesearch-width--open} + 1rem); + padding-inline-start: 1rem; + padding-inline-end: 3rem; + padding-top: 0; & + .elm-label { display: none; } & ~ .elm-button { - display: initial; + display: flex; } } - - // transition: all 500ms; } .elm-label { + padding: 0.5rem; + border-radius: 4px; + display: inline-block; & { @@ -36,57 +54,55 @@ } &::before { - // TODO: Evaluate on whether this declaration could get moved to the general icon declarations - font-size: to-rem($pxValue: 22); vertical-align: top; } - .rea-header & { - padding-top: to-rem($pxValue: 10); - } - .rea-meta & { - @media screen and (max-width: #{$metanavigation-iconOnly--maxWidth}) { - @include is-icon-text-replace(); - } + @include is-icon-text-replace(); } } .elm-button { + @include is-icon-text-replace(); + display: none; - left: 0; position: absolute; - top: to-em($pxValue: 8); - visibility: hidden; + padding: 0.5rem; + inset-inline-end: 0.75rem; + border: 0; & { @include icon(glyph(search), 24, "outline", $partial: $partial); } + } - &::before { - left: to-rem($pxValue: 4); - margin: -9px; - padding: 9px; - position: absolute; - top: -#{to-rem($pxValue: 2)}; - visibility: visible; + .elm-label, + .elm-button { + background-color: rgba($db-color-cool-gray-700, 0); + + &:hover { + background-color: rgba($db-color-cool-gray-700, 0.08); } - } - .rea-meta & { - margin-right: to-rem($pxValue: 8); + &:active { + background-color: rgba($db-color-cool-gray-700, 0.16); + } + } - @media screen and (max-width: #{$sitesearch-form-full-maxWidth}) { - // * TODO: possibly rework variable naming - &:focus-within { - left: to-rem($pxValue: 16); - position: absolute; - z-index: $z-index-rea-header-cmp-sitesearch-focus; + @media screen and (max-width: #{$sitesearch-form-full-maxWidth}) { + &:focus-within, + &:has(.elm-input[type="search"]:not(:placeholder-shown)) { + left: to-rem($pxValue: 16); + position: absolute; + z-index: $z-index-rea-header-cmp-sitesearch-focus; - .elm-input[type="search"] { - width: calc(100vw - #{to-rem($pxValue: 32)}); - } + .elm-input[type="search"] { + width: calc(100vw - 5.5rem); } } + + .elm-button { + inset-inline-end: 2rem; + } } } diff --git a/source/_patterns/03-areas/00-header/_header.variables.scss b/source/_patterns/03-areas/00-header/_header.variables.scss index 71fff27f57..756924f933 100644 --- a/source/_patterns/03-areas/00-header/_header.variables.scss +++ b/source/_patterns/03-areas/00-header/_header.variables.scss @@ -14,3 +14,5 @@ $header---borderBottom: #{to-rem( $header---marginBottom: to-rem( $pxValue: 16 ) !default; + +$header---minHeight: 3.5rem; diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 785e30aaaa..20b864f930 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -1,33 +1,76 @@ @import "../../../css/partials.meta"; @import "header.variables"; @import "../../../css/helpers/functions"; +@import "../../../css/helpers/dividers"; .rea-header { background-color: $header---backgroundColor; box-shadow: $header---boxShadow; - display: flex; - justify-content: space-between; + align-items: center; margin-bottom: $header---marginBottom; - // TODO: all of the header declarations need to get realigned and most likely need to get set up via flexbox for simplification - min-height: to-rem($pxValue: 79); - padding-left: to-rem($pxValue: 16); - padding-right: to-rem($pxValue: 16); - - // We'll need to keep this for legacy reasons, to position the navigation even within a metanavigation included in header - &:not(:has(.rea-meta)) { - &::after { - content: ""; - display: inline-block; - order: 3; + display: flex; + gap: 1.5rem; + + min-block-size: $header---minHeight; + padding-inline: 1.5rem; + padding-block: 0.875rem; + + // Divider only if there is a sitesearch and metanavigation + &:has(.cmp-sitesearch):has(.cmp-metanavigation) { + .cmp-sitesearch { + &::before { + @extend %header-divider; + inset-inline-end: 0; + } } } - .elm-link { - display: inline-block; - } @media screen and (max-width: $db-break-the-header-max-width) { border-bottom: $header---borderBottom; - min-height: to-rem($pxValue: 64); + position: relative; + + &:has(.cmp-mainnavigation > input[type="checkbox"][id]:not(:checked)) { + .rea-meta { + position: absolute; + inset: 0; + margin: 0; + + & > .elm-link, + .cmp-metanavigation, + .cmp-language-switcher, + .cmp-dropdown { + display: none; + } + } + } + + &:has(.cmp-mainnavigation > input[type="checkbox"][id]:checked) { + .rea-meta { + --db-language-switcher---direction: -1; + background-color: #fff; + position: fixed; + inset-inline-end: 0; + inset-inline-start: 1.5rem; + inset-block-start: unset; + inset-block-end: 0; + block-size: 3.5rem; + z-index: $z-index-cmp-overflow-menu-overlay; + border-top: 1px solid rgba(40, 45, 55, 0.2); + border-bottom-left-radius: 4px; + padding-inline: 1rem; + + .cmp-sitesearch { + display: none; + } + + .cmp-dropdown { + & > menu { + bottom: 100%; + transform: translateY(-0.875rem); + } + } + } + } } } diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index 1b6ec93f9e..da6272c401 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -2,6 +2,9 @@ .rea-meta { display: flex; + align-items: center; + margin-inline-start: auto; + gap: 0.5rem; ul, ol { @@ -14,17 +17,12 @@ } .rea-header & { - margin-top: #{$header-big-link-paddingTop - 0.5625}rem; order: 2; .elm-link { padding-bottom: to-rem($pxValue: 9); padding-top: to-rem($pxValue: 9); } - - @media screen and (max-width: $db-break-the-header-max-width) { - margin-top: to-rem($pxValue: 8); - } } & > .elm-link { diff --git a/source/css/helpers/_dividers.scss b/source/css/helpers/_dividers.scss new file mode 100644 index 0000000000..dcde94116c --- /dev/null +++ b/source/css/helpers/_dividers.scss @@ -0,0 +1,9 @@ +%header-divider { + position: absolute; + content: ""; + width: 1px; + height: 1.5rem; + background-color: rgba(40, 45, 55, 0.2); + inset-block-start: 50%; + transform: translateY(-50%); +}