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

Make stepped list work without headings #3731

Merged
merged 1 commit into from May 7, 2021
Merged

Make stepped list work without headings #3731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 33 additions & 7 deletions scss/_patterns_lists.scss
View file
Open in desktop
Expand Up @@ -244,11 +244,43 @@ $spv-list-item--inner: null;
display: none;
}

// Indent titles
$bullet-width: map-get($line-heights, default-text);
$bullet-width-mobile: map-get($line-heights, default-text);

.p-stepped-list__title {
@extend %numbered-step-title;

padding-left: $bullet-width-mobile + $sph-inner;

@media (min-width: $breakpoint-heading-threshold) {
padding-left: $bullet-width + $sph-inner;
}

&::before {
margin-right: $sph-inner;
width: $bullet-width-mobile;

@media (min-width: $breakpoint-heading-threshold) {
width: $bullet-width;
}
}
}

.p-stepped-list__title + .p-stepped-list__content {
margin-left: $bullet-width-mobile + $sph-inner;

@media (min-width: $breakpoint-heading-threshold) {
margin-left: $bullet-width + $sph-inner;
}
}

.p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
@media (min-width: $threshold-6-12-col) {
margin-left: 0;
}
}

// Indent titles
@for $i from 6 through 1 {
// Bullet sizes for each heading level
$bullet-width: map-get($line-heights, default-text);
Expand Down Expand Up @@ -284,12 +316,6 @@ $spv-list-item--inner: null;
}
}
}

.p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
@media (min-width: $threshold-6-12-col) {
margin-left: 0;
}
}
}

@mixin vf-p-stepped-list-detailed {
Expand Down
32 changes: 32 additions & 0 deletions templates/docs/examples/patterns/lists/lists-stepped-without-headings.html
View file
Open in desktop
@@ -0,0 +1,32 @@
{% extends "_layouts/examples.html" %}
{% block title %}Lists / Stepped without headings{% endblock %}

{% block standalone_css %}patterns_lists{% endblock %}

{% block content %}
<ol class="p-stepped-list">
<li class="p-stepped-list__item">
<p class="p-stepped-list__title">
Download the Ubuntu image for your device in your `Downloads` folder
</p>
</li>

<li class="p-stepped-list__item">
<p class="p-stepped-list__title">
Insert your SD card or USB flash drive
</p>
</li>

<li class="p-stepped-list__item">
<p class="p-stepped-list__title">
Identify its address by opening the “Disks” application and look for the “Device” line. If the line is in the <code>/dev/mmcblk0p1</code> format, then your drive address is: <code>/dev/mmcblk0</code>. If it is in the <code>/dev/sdb1</code> format, then the address is <code>/dev/sdb</code>
</p>
</li>

<li class="p-stepped-list__item">
<p class="p-stepped-list__title">
Unmount it by right-clicking its icon in the launcher bar, the eject icon in a file manager or the square icon in the “Disks” application
</p>
</li>
</ol>
{% endblock %}
8 changes: 7 additions & 1 deletion templates/docs/patterns/lists.md
View file
Open in desktop
Expand Up @@ -102,7 +102,13 @@ If you want to display a list of items that form a set of steps — like a
tutorial or instructions — you can use the class `.p-stepped-list`.

<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped/" class="js-example">
View example of the stepped list pattern
View example of the stepped list pattern with headings
</a></div>

When the steps don't have headings use `<p>` paragraph as `.p-stepped-list__title`.

<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped-without-headings/" class="js-example">
View example of the stepped list without headings
</a></div>

### Horizontal stepped
Expand Down