Skip to content

Commit 528b944

Browse files
authored
refactor: added possibility to overwrite the value on which to break … (#874)
refactor: added possibility to overwrite the value on which to break the header underneath
1 parent 3fee73f commit 528b944

File tree

8 files changed

+25
-18
lines changed

8 files changed

+25
-18
lines changed

source/_patterns/02-components/brand/brand.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
.rea-header & {
1818
padding-top: to-rem($pxValue: 18);
19-
@media screen and (min-width: 1024px) {
19+
@media screen and (width > $db-break-the-header-max-width) {
2020
padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming
2121

2222
.is-site-name {
@@ -27,7 +27,7 @@
2727
}
2828
}
2929
}
30-
@media screen and (max-width: 1023px) {
30+
@media screen and (max-width: $db-break-the-header-max-width) {
3131
.cmp-mainnavigation ~ & {
3232
.rea-header & {
3333
.is-site-name {

source/_patterns/02-components/language-switcher/language-switcher.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
}
6363
}
6464
}
65-
@media screen and (min-width: 1024px) {
65+
@media screen and (width > $db-break-the-header-max-width) {
6666
top: to-rem($pxValue: 56);
6767
}
6868
}

source/_patterns/02-components/mainnavigation/mainnavigation.scss

+12-12
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
& > input[type="checkbox"][id] {
2929
@include a11y-visually-hidden($partial: $partial);
3030

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

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

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

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

100-
@media screen and (max-width: 1023px) {
100+
@media screen and (max-width: $db-break-the-header-max-width) {
101101
display: none;
102102
}
103103
}
104104

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

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

@@ -132,7 +132,7 @@
132132

133133
// From second level
134134
ul {
135-
@media screen and (min-width: 1024px) {
135+
@media screen and (width > $db-break-the-header-max-width) {
136136
left: 0;
137137
min-width: 100%;
138138
top: to-rem($pxValue: 79);
@@ -158,7 +158,7 @@
158158
& > * > li {
159159
& > .elm-link,
160160
& > * > .elm-link {
161-
@media screen and (max-width: 1023px) {
161+
@media screen and (max-width: $db-break-the-header-max-width) {
162162
padding-left: to-rem($pxValue: 34);
163163
}
164164
}
@@ -169,7 +169,7 @@
169169
& > * > li {
170170
& > .elm-link,
171171
& > * > .elm-link {
172-
@media screen and (max-width: 1023px) {
172+
@media screen and (max-width: $db-break-the-header-max-width) {
173173
padding-left: to-rem($pxValue: 60);
174174
}
175175
}
@@ -207,13 +207,13 @@
207207
& > ul,
208208
& > * > ul {
209209
visibility: visible;
210-
@media screen and (max-width: 1023px) {
210+
@media screen and (max-width: $db-break-the-header-max-width) {
211211
display: initial;
212212
}
213213
}
214214
}
215215

216-
@media screen and (max-width: 1023px) {
216+
@media screen and (max-width: $db-break-the-header-max-width) {
217217
background-color: $db-color-cool-gray-600;
218218
color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
219219

@@ -238,7 +238,7 @@
238238
position: relative;
239239
}
240240
}
241-
@media screen and (min-width: 1024px) {
241+
@media screen and (width > $db-break-the-header-max-width) {
242242
// Do not show Icon for menu on bigger screens
243243
&[aria-haspopup="true"] {
244244
&::after {

source/_patterns/03-areas/00-header/header.md

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ title: Header
33
state: inprogress
44
---
55

6+
## Breakpoint for the header
7+
8+
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`.
9+
610
## Fixed positioned header
711

812
You could set the header area to fixed positioning by adding the class `has-fixed-header` to the `body` HTML tag.

source/_patterns/03-areas/00-header/header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
.elm-link {
2727
display: inline-block;
2828
}
29-
@media screen and (max-width: 1023px) {
29+
@media screen and (max-width: $db-break-the-header-max-width) {
3030
border-bottom: $header---borderBottom;
3131
min-height: to-rem($pxValue: 64);
3232
}

source/_patterns/03-areas/00-header/meta.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
padding-top: to-rem($pxValue: 9);
2323
}
2424

25-
@media screen and (max-width: 1023px) {
25+
@media screen and (max-width: $db-break-the-header-max-width) {
2626
margin-top: to-rem($pxValue: 8);
2727
}
2828
}

source/_patterns/03-areas/_areas.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ body.has-fixed-header {
2323
top: 0;
2424
}
2525

26-
@media screen and (max-width: 1023px) {
26+
@media screen and (max-width: $db-break-the-header-max-width) {
2727
padding-top: to-rem($pxValue: 80);
2828
}
2929
}

source/css/_db-ui-core.variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ $z-index-cmp-overflow-menu-menu: 60 !default;
3434
$z-index-cmp-overflow-menu-overlay: 50 !default;
3535
$z-index-rea-header-cmp-sitesearch-focus: 10 !default;
3636
$z-index-reas-fixed-header-footer: 10 !default;
37+
38+
// 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.
39+
$db-break-the-header-max-width: 1023px !default;

0 commit comments

Comments
 (0)