Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: added possibility to overwrite the value on which to break … #874

Merged
merged 1 commit into from
Jun 20, 2024
Merged

refactor: added possibility to overwrite the value on which to break … #874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions source/_patterns/02-components/brand/brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

.rea-header & {
padding-top: to-rem($pxValue: 18);
@media screen and (min-width: 1024px) {
@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 {
Expand All @@ -27,7 +27,7 @@
}
}
}
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
.cmp-mainnavigation ~ & {
.rea-header & {
.is-site-name {
Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/02-components/language-switcher/language-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
}
}
}
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
top: to-rem($pxValue: 56);
}
}
Expand Down
24 changes: 12 additions & 12 deletions source/_patterns/02-components/mainnavigation/mainnavigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
& > input[type="checkbox"][id] {
@include a11y-visually-hidden($partial: $partial);

@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
// Hiding the navigation toggle elements on huger viewports
&,
& + label[for] {
Expand Down Expand Up @@ -60,7 +60,7 @@
}

// Displaying the main navigation as an top to bottom overlay on smaller viewports
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
background-color: $db-color-cool-gray-600;
left: 0;
position: absolute;
Expand Down Expand Up @@ -89,30 +89,30 @@

// Multiple level navigation
ul ul {
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
box-shadow: $box-shadow-01, $box-shadow-02;
position: absolute;
visibility: hidden;

z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
}

@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
display: none;
}
}

// First Level
& > ul {
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
display: flex;
}

& > li,
& > * > li {
& > .elm-link,
& > * > .elm-link {
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
padding: $mainnavigation-link--paddingTop
to-rem($pxValue: 26) $mainnavigation-link--paddingBottom;

Expand All @@ -132,7 +132,7 @@

// From second level
ul {
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
left: 0;
min-width: 100%;
top: to-rem($pxValue: 79);
Expand All @@ -158,7 +158,7 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
padding-left: to-rem($pxValue: 34);
}
}
Expand All @@ -169,7 +169,7 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
padding-left: to-rem($pxValue: 60);
}
}
Expand Down Expand Up @@ -207,13 +207,13 @@
& > ul,
& > * > ul {
visibility: visible;
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
display: initial;
}
}
}

@media screen and (max-width: 1023px) {
@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

Expand All @@ -238,7 +238,7 @@
position: relative;
}
}
@media screen and (min-width: 1024px) {
@media screen and (width > $db-break-the-header-max-width) {
// Do not show Icon for menu on bigger screens
&[aria-haspopup="true"] {
&::after {
Expand Down
4 changes: 4 additions & 0 deletions source/_patterns/03-areas/00-header/header.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ title: Header
state: inprogress
---

## Breakpoint for the header

If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-break-the-header-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`.

## Fixed positioned header

You could set the header area to fixed positioning by adding the class `has-fixed-header` to the `body` HTML tag.
Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/03-areas/00-header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
.elm-link {
display: inline-block;
}
@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
border-bottom: $header---borderBottom;
min-height: to-rem($pxValue: 64);
}
Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/03-areas/00-header/meta.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
padding-top: to-rem($pxValue: 9);
}

@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
margin-top: to-rem($pxValue: 8);
}
}
Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/03-areas/_areas.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ body.has-fixed-header {
top: 0;
}

@media screen and (max-width: 1023px) {
@media screen and (max-width: $db-break-the-header-max-width) {
padding-top: to-rem($pxValue: 80);
}
}
Expand Down
3 changes: 3 additions & 0 deletions source/css/_db-ui-core.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,6 @@ $z-index-cmp-overflow-menu-menu: 60 !default;
$z-index-cmp-overflow-menu-overlay: 50 !default;
$z-index-rea-header-cmp-sitesearch-focus: 10 !default;
$z-index-reas-fixed-header-footer: 10 !default;

// Defined the max-width for a narrower screen to break the header, that e.g. let's the navigation break into a hamburger menu. Also defined the z-index for the header and footer.
$db-break-the-header-max-width: 1023px !default;
Loading