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: provide possibility to overwrite breakpoint from within CSS #861

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

refactor: provide possibility to overwrite breakpoint from within CSS #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bc8524f
refactor: define a new variable
mfranzke Jun 10, 2024
75f3fbd
refactor: adapt CSS Variables solution
mfranzke Jun 10, 2024
b1465f3
Update mainnavigation.scss
mfranzke Jun 10, 2024
d5adc4c
Merge branch 'main' into 830-provide-possibility-to-overwrite-the-bre…
mfranzke Jun 18, 2024
e0951fa
refactor: migrated further media queries
mfranzke Jun 18, 2024
b967103
fix: corrected mixin name
mfranzke Jun 18, 2024
640279d
refactor: added possibility to overwrite the value on which to break …
mfranzke Jun 20, 2024
8013004
Merge branch 'main' into 830-provide-possibility-to-overwrite-the-bre…
mfranzke Jun 20, 2024
349900c
refactor: updated the naming
mfranzke Jun 20, 2024
c5f6f5b
Merge branch '830-provide-possibility-to-overwrite-the-breakpoint-1' …
mfranzke Jun 20, 2024
f4ce550
Merge branch 'main' into 830-provide-possibility-to-overwrite-the-bre…
mfranzke Jun 20, 2024
7b01f6a
refactor: differentiate by theme
mfranzke Jun 20, 2024
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
24 changes: 22 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 (width > $db-break-the-header-max-width) {
@mixin db-cmp-brand-rea-header {
padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming

.is-site-name {
Expand All @@ -26,8 +26,18 @@
}
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-brand-rea-header;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-brand-rea-header;
}
}
}
@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-brand-site-name {
.cmp-mainnavigation ~ & {
.rea-header & {
.is-site-name {
Expand All @@ -36,4 +46,14 @@
}
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-brand-site-name;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-brand-site-name;
}
}
}
2 changes: 2 additions & 0 deletions source/_patterns/02-components/brand/enterprise/brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
$enterprise: true;

@import "brand.variables";
@import "../brand";
2 changes: 2 additions & 0 deletions source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
$enterprise: true;

@import "language-switcher.variables";
@import "../language-switcher";
13 changes: 12 additions & 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,9 +62,20 @@
}
}
}
@media screen and (width > $db-break-the-header-max-width) {
@mixin db-cmp-language-switcher-li-rea-header {
top: to-rem($pxValue: 56);
}

@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-language-switcher-li-rea-header;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-language-switcher-li-rea-header;
}
}
}

.elm-link,
Expand Down
2 changes: 2 additions & 0 deletions source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
$enterprise: true;

@import "mainnavigation.variables";
@import "../mainnavigation";
147 changes: 135 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,13 +28,23 @@
& > input[type="checkbox"][id] {
@include a11y-visually-hidden($partial: $partial);

@media screen and (width > $db-break-the-header-max-width) {
@mixin cmp-mainnavigation-checkbox {
// Hiding the navigation toggle elements on huger viewports
&,
& + label[for] {
display: none;
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include cmp-mainnavigation-checkbox;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include cmp-mainnavigation-checkbox;
}
}
}

& > label[for] {
Expand All @@ -60,7 +70,7 @@
}

// Displaying the main navigation as an top to bottom overlay on smaller viewports
@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation {
background-color: $db-color-cool-gray-600;
left: 0;
position: absolute;
Expand All @@ -83,36 +93,77 @@
}
}

@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation;
}
}

ul {
background-color: $header---backgroundColor;
}

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

z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-ul-above;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-ul-above;
}
}

@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-ul-ul {
display: none;
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-ul;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-ul;
}
}
}

// First Level
& > ul {
@media screen and (width > $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-ul-above {
display: flex;
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-above;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-above;
}
}

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

Expand All @@ -128,11 +179,21 @@
border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500;
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-li-elm-link-above;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-li-elm-link-above;
}
}
}

// From second level
ul {
@media screen and (width > $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-ul-li-ul-above {
left: 0;
min-width: 100%;
top: to-rem($pxValue: 79);
Expand All @@ -153,14 +214,34 @@
padding-right: to-rem($pxValue: 18);
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-li-ul-above;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-li-ul-above;
}
}

& > li,
& > * > li {
& > .elm-link,
& > * > .elm-link {
@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-ul-ul-li {
padding-left: to-rem($pxValue: 34);
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-ul-li;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-ul-li;
}
}
}

// Third level
Expand All @@ -169,9 +250,19 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-ul-ul-ul-li {
padding-left: to-rem($pxValue: 60);
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-ul-ul-ul-li;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-ul-ul-ul-li;
}
}
}
}
}
Expand Down Expand Up @@ -207,13 +298,24 @@
& > ul,
& > * > ul {
visibility: visible;
@media screen and (max-width: $db-break-the-header-max-width) {

@mixin db-cmp-mainnavigation-li-hover {
display: initial;
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-li-hover;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-li-hover;
}
}
}
}

@media screen and (max-width: $db-break-the-header-max-width) {
@mixin db-cmp-mainnavigation-li {
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 +340,18 @@
position: relative;
}
}
@media screen and (width > $db-break-the-header-max-width) {
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-li;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-li;
}
}

@mixin db-cmp-mainnavigation-li-above {
// Do not show Icon for menu on bigger screens
&[aria-haspopup="true"] {
&::after {
Expand All @@ -258,5 +371,15 @@
}
}
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container not style(--db-narrower-screen: true) {
@include db-cmp-mainnavigation-li-above;
}
} @else {
@media screen and (width > $db-break-the-header-max-width) {
@include db-cmp-mainnavigation-li-above;
}
}
}
}
2 changes: 2 additions & 0 deletions source/_patterns/03-areas/00-header/enterprise/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
$enterprise: true;

@import "header.variables";
@import "../header";
2 changes: 2 additions & 0 deletions source/_patterns/03-areas/00-header/enterprise/meta.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
$enterprise: true;

@import "meta.variables";
@import "../meta";
12 changes: 12 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 @@ -7,6 +7,18 @@ state: inprogress

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`.

If you're using CSS only without SCSS, you could set the CSS Custom Property / CSS Variable via a `@media query` yourself:

```css
@media screen and (max-width: 1280px) {
:root {
--db-narrower-screen: true;
}
}
```

Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing (please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support), and that for we've only enabled it within the `enterprise` themed stylings.

## 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
13 changes: 12 additions & 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,8 +26,19 @@
.elm-link {
display: inline-block;
}
@media screen and (max-width: $db-break-the-header-max-width) {

@mixin db-cmp-header {
border-bottom: $header---borderBottom;
min-height: to-rem($pxValue: 64);
}
@if variable-exists(enterprise) {
// Based on the browser strategy, we could ignore Firefox for the moment
@container style(--db-narrower-screen: true) {
@include db-cmp-header;
}
} @else {
@media screen and (max-width: $db-break-the-header-max-width) {
@include db-cmp-header;
}
}
}
Loading
Loading