Skip to content

Commit 221a535

Browse files
hannahisshannahiss
authored
Merge branch 'ouds/main' into ouds/main-his-default-ouds-tags
2 parents ee3665c + ebe108b commit 221a535

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1059
-558
lines changed

‎packages/orange-compact/orange-business-tools-logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/orange-compact/orange-compact-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/orange/orange-logo.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎scss/_footer.scss‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@
55
--#{$prefix}footer-padding-bottom: 0;
66
--#{$prefix}footer-color: #{$footer-color};
77
--#{$prefix}footer-title-margin-bottom: 0;
8-
--#{$prefix}footer-title-font-size: #{$footer-font-size-md};
9-
--#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
10-
--#{$prefix}footer-title-line-height: #{$footer-line-height-md};
11-
--#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
128
// scss-docs-end footer-css-vars
139
--#{$prefix}navbar-padding-y: 0;
1410
--#{$prefix}navbar-nav-link-padding-y: 0;
@@ -47,11 +43,9 @@
4743
}
4844

4945
.footer-heading {
46+
@include get-font-size("body-large");
47+
max-width: unset;
5048
margin-bottom: var(--#{$prefix}footer-title-margin-bottom);
51-
font-size: var(--#{$prefix}footer-title-font-size);
52-
font-weight: var(--#{$prefix}footer-title-font-weight);
53-
line-height: var(--#{$prefix}footer-title-line-height);
54-
letter-spacing: var(--#{$prefix}footer-title-letter-spacing);
5549
white-space: nowrap;
5650
}
5751
}
@@ -69,8 +63,6 @@
6963
--#{$prefix}footer-padding-top: #{$footer-social-padding-top};
7064
--#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
7165
--#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
72-
--#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
73-
--#{$prefix}footer-title-line-height: #{$footer-line-height-sm};
7466
// scss-docs-end footer-social-css-vars
7567

7668
display: flex;
@@ -138,8 +130,6 @@
138130
// scss-docs-start footer-social-md-css-vars
139131
--#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
140132
--#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
141-
--#{$prefix}footer-title-font-size: #{$footer-font-size-md};
142-
--#{$prefix}footer-title-line-height: #{$footer-line-height-md};
143133
// scss-docs-end footer-social-md-css-vars
144134

145135
flex-direction: row;

‎scss/_navbar.scss‎

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@
148148
margin-right: var(--#{$prefix}navbar-brand-margin-end);
149149
margin-bottom: var(--#{$prefix}navbar-brand-margin-y);
150150
@include font-size(var(--#{$prefix}navbar-brand-font-size));
151+
line-height: 1;
151152
color: var(--#{$prefix}navbar-brand-color);
152153
text-decoration: if($link-decoration == none, null, none);
153154
white-space: nowrap;
@@ -174,19 +175,13 @@
174175
.title,
175176
.two-lined {
176177
margin: divide(-2em, 7) $spacer divide(-1em, 7) calc(var(--#{$prefix}navbar-brand-logo-size) / 2);
177-
@include font-size(var(--#{$prefix}navbar-brand-font-size));
178+
@include get-font-size("heading-large");
178179
line-height: 1;
179-
letter-spacing: var(--#{$prefix}navbar-brand-letter-spacing);
180180
}
181181

182182
.two-lined {
183-
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs};
184-
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined-xs};
185-
186-
@include media-breakpoint-up(md) {
187-
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined};
188-
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined};
189-
}
183+
@include get-font-size("heading-medium");
184+
line-height: 1;
190185
}
191186
}
192187
// End mod
@@ -418,13 +413,14 @@
418413
// OUDS mod
419414
.nav-link {
420415
margin: 0;
416+
line-height: 1;
421417

422418
&.active::before {
423419
position: absolute;
424420
right: var(--#{$prefix}navbar-nav-link-padding-x);
425421
bottom: calc(-1 * var(--#{$prefix}navbar-padding-y));
426422
left: var(--#{$prefix}navbar-nav-link-padding-x);
427-
height: calc(var(--#{$prefix}navbar-border-width) * 4);
423+
height: 4px;
428424
content: "";
429425
background-color: currentcolor;
430426
@include transition($navbar-active-transition);
@@ -471,11 +467,6 @@
471467
display: flex;
472468
}
473469

474-
.header-minimized &:first-child:not(.supra),
475-
.header-minimized .supra + &.navbar {
476-
--#{$prefix}navbar-nav-link-padding-y: .75rem;
477-
}
478-
479470
&:not(.supra) + .navbar {
480471
margin-top: 0;
481472

@@ -532,29 +523,24 @@
532523
}
533524
}
534525
}
535-
// scss-docs-end navbar-expand-loop
536-
537-
// Navbar themes
538-
//
539-
// Styles for switching between navbars with light or dark background.
540-
541-
.navbar-light {
542-
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
543-
}
544526

545-
// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility
546-
// OUDS mod: no `navbar[data-bs-theme="dark"]` selector
547-
.navbar-dark {
548-
--#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // OUDS mod
549-
--#{$prefix}navbar-color: #{$navbar-dark-color};
550-
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
551-
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
552-
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
553-
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
554-
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
555-
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
556-
// OUDS mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
527+
.header-minimized {
528+
.navbar-expand,
529+
.supra + .navbar-expand {
530+
@each $breakpoint in map-keys($grid-breakpoints) {
531+
$next: breakpoint-next($breakpoint, $grid-breakpoints);
532+
$infix: breakpoint-infix($next, $grid-breakpoints);
533+
534+
// stylelint-disable-next-line scss/selector-no-union-class-name
535+
&#{$infix} {
536+
@include media-breakpoint-up($next) {
537+
&:first-child:not(.supra),
538+
&.navbar:not(.supra) {
539+
--#{$prefix}navbar-nav-link-padding-y: 14px;
540+
}
541+
}
542+
}
543+
}
544+
}
557545
}
558-
// End mod
559-
560-
// OUDS mod: no `@if enable-dark-mode`
546+
// scss-docs-end navbar-expand-loop

‎scss/_variables.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1293,18 +1293,18 @@ $navbar-padding-y: .375rem !default; // OUDS mod
12931293
$navbar-padding-x: null !default;
12941294
$navbar-font-weight: $font-weight-bold !default; // OUDS mod
12951295

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

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

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

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

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

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

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

1353-
$navbar-icon-size-xs: $spacer * 1.25 !default;
1354-
$navbar-icon-size: $spacer * 1.5 !default;
1353+
$navbar-icon-size-xs: 1.5rem !default;
1354+
$navbar-icon-size: 1.5rem !default;
13551355

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

1361-
$navbar-supra-link-padding-y: $spacer * .6 !default;
1361+
$navbar-supra-link-padding-y: 12px !default;
13621362
$navbar-supra-link-padding-x: .46875rem !default;
1363-
$navbar-supra-icon-padding-y: $spacer * .25 !default;
1363+
$navbar-supra-icon-padding-y: 5px !default;
13641364
$navbar-supra-icon-padding-x: $navbar-nav-icon-padding-x-xs !default;
13651365
$navbar-supra-icon-size: $navbar-icon-size-xs !default;
13661366

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

‎site/data/components-details.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { ComponentCardData } from '@components/shortcodes/ComponentCard.astro'
2+
import { getConfig } from '@libs/config'
23
import { getVersionedDocsPath } from '@libs/path'
34

45
export const componentsDetails: ComponentCardData[] = [
56
{
67
name: 'Alert message',
8+
slug: 'alert-message',
79
link: 'alerts#alert-message',
810
category: 'Dialog',
911
snippet: `
@@ -97,6 +99,67 @@ export const componentsDetails: ComponentCardData[] = [
9799
</li>
98100
</ul>`
99101
},
102+
{
103+
name: 'Footer',
104+
category: 'Navigation',
105+
snippet: `
106+
<footer class="footer navbar w-75" data-bs-theme="dark">
107+
<h2 class="visually-hidden">Sitemap &amp; information</h2>
108+
<div class="container-fluid container-max-width footer-nav px-small py-2xl-small d-lg-none d-sm-none d-md-block">
109+
<nav class="accordion">
110+
<div class="row">
111+
<div class="footer-column">
112+
<h3 class="accordion-header footer-heading">
113+
<button class="accordion-button collapsed container-fluid container-max-width px-none d-md-none" type="button">Label</button>
114+
<span class="d-none d-md-flex">Label</span>
115+
</h3>
116+
<div class="container-fluid container-max-width accordion-collapse collapse">
117+
<ul class="navbar-nav ps-large ps-md-none">
118+
<li><a class="nav-link" href="#">Label</a></li>
119+
</ul>
120+
</div>
121+
</div>
122+
</div>
123+
</nav>
124+
</div>
125+
<div class="border-bottom border-thin border-default d-lg-none d-sm-none d-md-block"></div>
126+
<div class="container-fluid container-max-width footer-terms px-small">
127+
<ul class="navbar-nav gap-md-large">
128+
<li>© Label</li>
129+
<li><a class="nav-link" href="#">Label</a></li>
130+
</ul>
131+
</div>
132+
</footer>`
133+
},
134+
{
135+
name: 'Header',
136+
category: 'Navigation',
137+
snippet: `
138+
<header class="header-minimized w-75">
139+
<nav class="navbar navbar-expand-lg">
140+
<div class="container-fluid container-max-width px-small">
141+
<div class="navbar-brand me-auto me-lg-xlarge">
142+
<a class="stretched-link" href="#">
143+
<img src="${getVersionedDocsPath(`/assets/brand/${getConfig().brand}-logo.svg`)}" width="50" height="50" alt="" loading="lazy">
144+
</a>
145+
<h1 class="title">Label</h1>
146+
</div>
147+
<button class="navbar-toggler collapsed" type="button">
148+
<span class="navbar-toggler-icon"></span>
149+
</button>
150+
</div>
151+
</nav>
152+
<nav class="navbar navbar-expand-lg">
153+
<div class="container-fluid container-max-width px-small">
154+
<div class="navbar-collapse collapse m-none">
155+
<ul class="navbar-nav">
156+
<li class="nav-item"><a class="nav-link" href="#">Label</a></li>
157+
</ul>
158+
</div>
159+
</div>
160+
</nav>
161+
</header>`
162+
},
100163
{
101164
name: 'Icon',
102165
category: 'Visual assets',
@@ -107,6 +170,7 @@ export const componentsDetails: ComponentCardData[] = [
107170
},
108171
{
109172
name: 'Inline alert',
173+
slug: 'inline-alert',
110174
link: 'alerts#inline-alert',
111175
category: 'Dialog',
112176
snippet: `

0 commit comments

Comments
 (0)