Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 1 addition & 2 deletions scss/_breadcrumb.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@
// End mod
// scss-docs-end breadcrumb-css-vars

@include list-unstyled();
display: flex;
padding: 0;
list-style: none;
@include get-font-size("label-medium");

.breadcrumb-item {
Expand Down
3 changes: 1 addition & 2 deletions scss/_navbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -207,15 +207,14 @@
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars

@include list-unstyled(); // OUDS mod
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // OUDS mod
margin-bottom: 0;
@include font-size(var(--#{$prefix}navbar-nav-font-size)); // OUDS mod
line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // OUDS mod
letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // OUDS mod
@include list-unstyled(); // OUDS mod

// OUDS mod: Handle .nav-link and .nav-icon slightly differently than Bs
.nav-link {
position: relative;
Expand Down
1 change: 1 addition & 0 deletions scss/_reboot.scss
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ address {
ol,
ul,
dl {
max-width: var(--#{$prefix}font-max-width-body-medium);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it impacted the breadcrumb component, we did not use the list-unstyled there.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use list-unstyled in breadcrumb I think, instead of the padding/list-style none

margin-top: 0;
margin-bottom: 1rem;
}
Expand Down
1 change: 1 addition & 0 deletions scss/mixins/_lists.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
max-width: initial;
padding-left: 0;
list-style: none;
}
4 changes: 2 additions & 2 deletions site/src/content/docs/components/bullet-list.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ Add `.fw-normal` to the top `ul` to use a normal font weight.

### Unstyled

Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
Remove the default `list-style`, left margin and `max-width` on lists (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.

<Example code={`<ul class="list-unstyled">
<li>This is a list.</li>
Expand Down Expand Up @@ -321,7 +321,7 @@ Remove a list's bullets and apply some light `margin` with a combination of two
Only use this where you can not add a class to `<ul>` and `<ol>`.
</Callout>

All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`, they also have a `max-width` set to `--bs-font-max-width-body-medium`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.

<Example showMarkup={false} code={`<ul>
<li>All lists have their top margin removed</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to

- <span class="tag tag-small rounded-none tag-positive">New</span> `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added.
- <span class="tag tag-small rounded-none tag-negative">Breaking</span> `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS.
- <span class="tag tag-small rounded-none tag-warning">Warning</span> Native `<ul>`, `<ol>` and `<dl>` now have a `max-width` set to the variable `--bs-font-max-width-body-medium`.

### Close button

Expand Down
4 changes: 4 additions & 0 deletions site/src/content/docs/migrations/migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ toc: true

- <span class="tag tag-small rounded-none tag-negative">Breaking</span> `.btn-rounded` has been replaced by a global `.use-rounded-corner-buttons`. Read more in our [buttons page]([[docsref:/components/buttons#rounded]]).

### Reboot

- <span class="tag tag-small rounded-none tag-warning">Warning</span> Native `<ul>`, `<ol>` and `<dl>` now have a `max-width` set to the variable `--bs-font-max-width-body-medium`.

### Utilities

#### Background
Expand Down
4 changes: 1 addition & 3 deletions site/src/scss/_toc.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@
@include get-font-size("label-medium"); // OUDS mod: instead of `.875rem`

ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
@include list-unstyled(); // OUDS mod
margin-bottom: 0;

ul {
padding-left: 1rem;
Expand Down
Loading