mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #240 from picocss/ll/fix-breadcrumbs

Browse source 
Fix: Breadcrumbs
This commit is contained in:
Lucas Larroche 2022-09-13 02:19:55 +07:00 • committed by GitHub
commit 1cbf521dbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 103 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/pico.classless.css
View file

@ -1940,20 +1940,26 @@ nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
}
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
justify-content: start;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
nav[aria-label=breadcrumb] a[aria-current=page] {
nav[aria-label=breadcrumb] a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
nav [role=button] {
margin-right: inherit;
@ -1977,6 +1983,10 @@ aside li [role=button] {
margin: inherit;
}
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/**
* Progress
*/

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

26
css/pico.css
View file

@ -2128,20 +2128,26 @@ nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
}
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
justify-content: start;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
nav[aria-label=breadcrumb] a[aria-current=page] {
nav[aria-label=breadcrumb] a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
nav [role=button] {
margin-right: inherit;
@ -2165,6 +2171,10 @@ aside li [role=button] {
margin: inherit;
}
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/**
* Progress
*/

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

26
css/pico.fluid.classless.css
View file

@ -1910,20 +1910,26 @@ nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
}
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
justify-content: start;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
nav[aria-label=breadcrumb] a[aria-current=page] {
nav[aria-label=breadcrumb] a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
nav [role=button] {
margin-right: inherit;
@ -1947,6 +1953,10 @@ aside li [role=button] {
margin: inherit;
}
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/**
* Progress
*/

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

8
docs/navs.html
View file

@ -25,10 +25,10 @@
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;
&lt;/<b>aside</b>&gt;</code></pre></footer></article><p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb, specifying the current page with: <code><i>aria-current</i>=<u>"page"</u></code>.</p><article aria-label="breadcrumb nav example"><nav aria-label="breadcrumb"><ul><li><a href="#" onclick="event.preventDefault()">First link</a></li><li><a href="#" onclick="event.preventDefault()">Second link</a></li><li><a href="#" onclick="event.preventDefault()" aria-current="page">Last link</a></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;/<b>aside</b>&gt;</code></pre></footer></article><p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p><article aria-label="Breadcrumb example"><nav aria-label="breadcrumb"><ul><li><a href="#" onclick="event.preventDefault()">Home</a></li><li><a href="#" onclick="event.preventDefault()">Category</a></li><li>Page</li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-current</i>=<u>"page"</u>&gt;Last link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Home&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Category&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;Page&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>

20
docs/src/navs.html
View file

@ -117,22 +117,18 @@
</footer>
</article>
<p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb, specifying the current page with: <code><i>aria-current</i>=<u>"page"</u></code>.</p>
<p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p>
<article aria-label="breadcrumb nav example">
<article aria-label="Breadcrumb example">
<nav aria-label="breadcrumb">
<ul>
<li>
<a href="#" onclick="event.preventDefault()">First link</a>
<a href="#" onclick="event.preventDefault()">Home</a>
</li>
<li>
<a href="#" onclick="event.preventDefault()">Second link</a>
</li>
<li>
<a href="#" onclick="event.preventDefault()" aria-current="page" >
Last link
</a>
<a href="#" onclick="event.preventDefault()">Category</a>
</li>
<li>Page</li>
</ul>
</nav>
@ -140,9 +136,9 @@
<pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-current</i>=<u>"page"</u>&gt;Last link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Home&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Category&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;Page&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

33
scss/components/_nav.scss
View file

@ -66,22 +66,30 @@ nav {
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: left;
justify-content: start;
& ul li {
padding-inline-start: 0;
&:not(:first-child) {
margin-inline-start: var(--nav-link-spacing-horizontal);
}
&:not(:last-child) {
a::after {
padding-inline-start: 0.5rem;
::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
}
}
& a[aria-current="page"] {
& a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
@ -116,3 +124,18 @@ aside {
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}