Skip to content

feat(lib): Add a workaround for Header #3388

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

Open
louismaximepiton wants to merge 9 commits into
base: ouds/main
Choose a base branch
from
Open

feat(lib): Add a workaround for Header #3388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7cba2e8
feat(lib): Add a workaround for Header
louismaximepiton Feb 24, 2026
1b7c77a
.
louismaximepiton Feb 25, 2026
4d88b22
fix first design review
louismaximepiton Mar 3, 2026
6c27c13
Remove forced theme
louismaximepiton Mar 3, 2026
76fbacf
Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-be…
louismaximepiton Mar 17, 2026
d0dd272
After rebase
louismaximepiton Mar 17, 2026
051f0a1
fix review
louismaximepiton Mar 19, 2026
c347ecf
update buttonLabel
louismaximepiton Mar 20, 2026
1bc7642
Merge branch 'ouds/main' into ouds/main-lmp-better-header
MaxLardenois Mar 23, 2026
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
1 change: 0 additions & 1 deletion packages/orange-compact/orange-business-tools-logo.svg
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions packages/orange-compact/orange-compact-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/orange/orange-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 35 additions & 39 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@
margin-right: var(--#{$prefix}navbar-brand-margin-end);
margin-bottom: var(--#{$prefix}navbar-brand-margin-y);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
Expand All @@ -174,20 +175,24 @@
.title,
.two-lined {
margin: divide(-2em, 7) $spacer divide(-1em, 7) calc(var(--#{$prefix}navbar-brand-logo-size) / 2);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
@include get-font-size("heading-large");
line-height: 1;
letter-spacing: var(--#{$prefix}navbar-brand-letter-spacing);
}

.two-lined {
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs};
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined-xs};

@include media-breakpoint-up(md) {
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined};
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined};
}
@include get-font-size("heading-medium");
line-height: 1;
}

// .two-lined {
// --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs};
// --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined-xs};

// @include media-breakpoint-up(md) {
// --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined};
// --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined};
// }
// }
}
// End mod

Expand Down Expand Up @@ -418,13 +423,14 @@
// OUDS mod
.nav-link {
margin: 0;
line-height: 1;

&.active::before {
position: absolute;
right: var(--#{$prefix}navbar-nav-link-padding-x);
bottom: calc(-1 * var(--#{$prefix}navbar-padding-y));
left: var(--#{$prefix}navbar-nav-link-padding-x);
height: calc(var(--#{$prefix}navbar-border-width) * 4);
height: 4px;
content: "";
background-color: currentcolor;
@include transition($navbar-active-transition);
Expand Down Expand Up @@ -471,11 +477,6 @@
display: flex;
}

.header-minimized &:first-child:not(.supra),
.header-minimized .supra + &.navbar {
--#{$prefix}navbar-nav-link-padding-y: .75rem;
}

&:not(.supra) + .navbar {
margin-top: 0;

Expand Down Expand Up @@ -532,29 +533,24 @@
}
}
}
// scss-docs-end navbar-expand-loop

// Navbar themes
//
// Styles for switching between navbars with light or dark background.

.navbar-light {
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
}

// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility
// OUDS mod: no `navbar[data-bs-theme="dark"]` selector
.navbar-dark {
--#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // OUDS mod
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
// OUDS mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
.header-minimized {
.navbar-expand,
.supra + .navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
&:first-child:not(.supra),
&.navbar {
--#{$prefix}navbar-nav-link-padding-y: 14px;
}
}
}
}
}
}
// End mod

// OUDS mod: no `@if enable-dark-mode`
// scss-docs-end navbar-expand-loop
44 changes: 22 additions & 22 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1293,18 +1293,18 @@ $navbar-padding-y: .375rem !default; // OUDS mod
$navbar-padding-x: null !default;
$navbar-font-weight: $font-weight-bold !default; // OUDS mod

$navbar-nav-link-padding-y: 1rem !default; // OUDS mod
$navbar-nav-link-padding-x-xs: $spacer * .25 !default; // OUDS mod
$navbar-nav-link-padding-x: $spacer * .5 !default; // OUDS mod
$navbar-nav-link-padding-y: 16px !default; // OUDS mod
$navbar-nav-link-padding-x-xs: 5px !default; // OUDS mod
$navbar-nav-link-padding-x: 10px !default; // OUDS mod

$navbar-brand-font-size: 2.1875rem !default; // OUDS mod
// OUDS mod: no nav-link-height calculation
$navbar-brand-padding-y: 0 !default; // OUDS mod
$navbar-brand-margin-end: $spacer * 1.5 !default; // OUDS mod
$navbar-brand-margin-end: 30px !default; // OUDS mod

$navbar-toggler-icon-close-bg: $cross-icon !default; // OUDS mod
$navbar-toggler-padding-y: $spacer * .6 !default; // OUDS mod: same as $navbar-nav-icon-padding-y-xs
$navbar-toggler-padding-x: $spacer * .75 !default; // OUDS mod: same as $navbar-nav-icon-padding-x-xs
$navbar-toggler-padding-y: 12px !default; // OUDS mod: same as $navbar-nav-icon-padding-y-xs
$navbar-toggler-padding-x: 15px !default; // OUDS mod: same as $navbar-nav-icon-padding-x-xs
$navbar-toggler-font-size-xs: 1.04166666rem !default; // OUDS mod
$navbar-toggler-font-size: 1.25rem !default; // OUDS mod
$navbar-toggler-border-radius: $btn-border-radius !default;
Expand All @@ -1313,11 +1313,11 @@ $navbar-toggler-transition: $transition-focus !default; // OUDS mod

$navbar-light-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)`
$navbar-light-bg: var(--#{$prefix}highlight-color) !default; // OUDS mod
$navbar-light-hover-color: var(--#{$prefix}link-hover-color) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
$navbar-light-active-color: var(--#{$prefix}primary) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
$navbar-light-hover-color: var(--#{$prefix}link-active-color) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
$navbar-light-active-color: var(--#{$prefix}color-action-selected) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
$navbar-light-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
$navbar-light-icon-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `rgba($body-color, .75)`
$navbar-light-icon-hover-color: var(--#{$prefix}link-hover-color) !default; // OUDS mod
$navbar-light-icon-hover-color: var(--#{$prefix}link-active-color) !default; // OUDS mod
$navbar-light-toggler-icon-bg: $burger-icon !default; // OUDS mod: instead of inline SVG
$navbar-light-toggler-icon-bg-small: $burger-icon-small !default; // OUDS mod: slightly different burger icon for small breakpoints
$navbar-light-toggler-border-color: null !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .15)`
Expand All @@ -1334,37 +1334,37 @@ $navbar-brand-transition: margin $navbar-transition-duration $
$navbar-brand-logo-transition: width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function !default;
$navbar-active-transition: bottom $navbar-transition-duration $navbar-transition-timing-function !default;

$navbar-border-width: calc(var(--#{$prefix}border-width) * .5) !default;
$navbar-border-width: var(--#{$prefix}border-width) !default;
$navbar-border-color: var(--#{$prefix}color-border-default) !default;

$navbar-brand-margin-y-xs: $spacer * .5 !default;
$navbar-brand-logo-size-xs: $spacer * 1.5 !default;
$navbar-brand-margin-y-xs: 10px !default;
$navbar-brand-logo-size-xs: 1.875rem !default;
$navbar-brand-font-size-xs: 1.3125rem !default;
$navbar-brand-letter-spacing-xs: calc(#{$letter-spacing-base} * 5) !default;
$navbar-brand-font-size-two-lined-xs: 1.0625rem !default;
$navbar-brand-letter-spacing-two-lined-xs: calc(#{$letter-spacing-base} * 4) !default;

$navbar-brand-margin-y: $spacer * .95 !default;
$navbar-brand-logo-size: $spacer * 2.5 !default;
$navbar-brand-margin-y: 18px !default;
$navbar-brand-logo-size: 3rem !default;
$navbar-brand-letter-spacing: calc(#{$letter-spacing-base} * 10) !default;
$navbar-brand-font-size-two-lined: 1.8125rem !default;
$navbar-brand-letter-spacing-two-lined: calc(#{$letter-spacing-base} * 8) !default;

$navbar-icon-size-xs: $spacer * 1.25 !default;
$navbar-icon-size: $spacer * 1.5 !default;
$navbar-icon-size-xs: 1.5rem !default;
$navbar-icon-size: 1.5rem !default;

$navbar-nav-icon-padding-y-xs: $spacer * .6 !default;
$navbar-nav-icon-padding-x-xs: $spacer * .75 !default;
$navbar-nav-icon-padding-y-xs: 12px !default;
$navbar-nav-icon-padding-x-xs: 15px !default;
$navbar-nav-icon-padding-y: $navbar-brand-margin-y !default;
$navbar-nav-icon-padding-x: $spacer !default;
$navbar-nav-icon-padding-x: 20px !default;

$navbar-supra-link-padding-y: $spacer * .6 !default;
$navbar-supra-link-padding-y: 12px !default;
$navbar-supra-link-padding-x: .46875rem !default;
$navbar-supra-icon-padding-y: $spacer * .25 !default;
$navbar-supra-icon-padding-y: 5px !default;
$navbar-supra-icon-padding-x: $navbar-nav-icon-padding-x-xs !default;
$navbar-supra-icon-size: $navbar-icon-size-xs !default;

$navbar-minimized-brand-margin-y: $spacer * .75 !default;
$navbar-minimized-brand-margin-y: 15px !default;
$navbar-minimized-nav-icon-padding-y: $navbar-minimized-brand-margin-y !default;
$navbar-minimized-toggler-padding-y: $navbar-minimized-brand-margin-y !default;

Expand Down
20 changes: 20 additions & 0 deletions site/data/components-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,26 @@ export const componentsDetails: ComponentCardData[] = [
</li>
</ul>`
},
{
name: 'Header',
category: 'Navigation',
snippet: `
<header class="header-minimized">
<nav class="navbar navbar-expand-lg" aria-label="Global navigation - Standard example">
<div class="container-fluid container-max-width px-small">
<div class="navbar-brand me-auto me-lg-xlarge">
<a class="stretched-link" href="#">
<img src="${getVersionedDocsPath('/assets/brand/orange-logo.svg')}" width="50" height="50" alt="OUDS Web - Back to Home" loading="lazy">
</a>
<h1 class="title">Label</h1>
</div>
<button class="navbar-toggler collapsed" type="button" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>`
},
{
name: 'Icon',
category: 'Visual assets',
Expand Down
3 changes: 1 addition & 2 deletions site/data/sidebar-components.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
- title: Checkbox
- title: Chips
- title: Divider
- title: Header
- title: Icon
- title: Links
- title: Password input
Expand Down Expand Up @@ -53,8 +54,6 @@
coming_soon: true
- title: Offcanvas
coming_soon: true
- title: Orange navbar
coming_soon: true
- title: Pagination
coming_soon: true
- title: Popover
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/header/Navigation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const { addedIn, layout, title } = Astro.props
</ul>
</div>
<div id="bd-navbar2" class="navbar-collapse collapse bd-navbar border-none">
<ul class="navbar-nav flex-row me-lg-large">
<ul class="navbar-nav flex-row me-lg-2xlarge">
<LinkItem class="nav-icon" href={getConfig().repo} target="_blank" rel="noopener">
<GitHubIcon height={16} width={16} />
<span class="visually-hidden">GitHub</span>
Expand All @@ -122,7 +122,7 @@ const { addedIn, layout, title } = Astro.props

<Versions layout={layout} addedIn={addedIn} />
</ul>
<ul class="navbar-nav flex-row ms-lg-large">
<ul class="navbar-nav flex-row">
<li class="nav-item dropdown">
<ThemeToggler layout={layout} />
</li>
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/header/SubNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<nav class="bd-subnavbar py-small d-lg-none" aria-label="Secondary navigation">
<div class="container-fluid container-max-width d-flex justify-content-end">
<button
class="btn btn-default btn-icon p-small"
class="btn btn-default btn-icon"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#bdSidebar"
Expand Down
Loading
Loading