mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Breadcrumb

Browse source
This commit is contained in:
Lucas Larroche 2022-09-13 02:16:29 +07:00
parent 673d7cecc1
commit aaa1ffe05c
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] { nav[aria-label=breadcrumb] {
align-items: center; align-items: center;
justify-content: left; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-padding-start: 0; -webkit-margin-start: var(--nav-link-spacing-horizontal);
padding-inline-start: 0; margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
-webkit-padding-start: 0.5rem; position: absolute;
padding-inline-start: 0.5rem; 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: "/"; content: "/";
color: var(--muted-color); 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; color: inherit;
text-decoration: none;
pointer-events: none;
} }
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
@ -1977,6 +1983,10 @@ aside li [role=button] {
margin: inherit; margin: inherit;
} }
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/** /**
* Progress * 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] { nav[aria-label=breadcrumb] {
align-items: center; align-items: center;
justify-content: left; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-padding-start: 0; -webkit-margin-start: var(--nav-link-spacing-horizontal);
padding-inline-start: 0; margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
-webkit-padding-start: 0.5rem; position: absolute;
padding-inline-start: 0.5rem; 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: "/"; content: "/";
color: var(--muted-color); 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; color: inherit;
text-decoration: none;
pointer-events: none;
} }
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
@ -2165,6 +2171,10 @@ aside li [role=button] {
margin: inherit; margin: inherit;
} }
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/** /**
* Progress * 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] { nav[aria-label=breadcrumb] {
align-items: center; align-items: center;
justify-content: left; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-padding-start: 0; -webkit-margin-start: var(--nav-link-spacing-horizontal);
padding-inline-start: 0; margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
-webkit-padding-start: 0.5rem; position: absolute;
padding-inline-start: 0.5rem; 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: "/"; content: "/";
color: var(--muted-color); 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; color: inherit;
text-decoration: none;
pointer-events: none;
} }
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
@ -1947,6 +1953,10 @@ aside li [role=button] {
margin: inherit; margin: inherit;
} }
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
/** /**
* Progress * 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>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>ul</b>&gt;
&lt;/<b>nav</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>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;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;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>&gt;Category&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;Page&lt;<b>/li</b>&gt;
&lt;<b>/ul</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> &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> </footer>
</article> </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"> <nav aria-label="breadcrumb">
<ul> <ul>
<li> <li>
<a href="#" onclick="event.preventDefault()">First link</a> <a href="#" onclick="event.preventDefault()">Home</a>
</li> </li>
<li> <li>
<a href="#" onclick="event.preventDefault()">Second link</a> <a href="#" onclick="event.preventDefault()">Category</a>
</li>
<li>
<a href="#" onclick="event.preventDefault()" aria-current="page" >
Last link
</a>
</li> </li>
<li>Page</li>
</ul> </ul>
</nav> </nav>
@ -140,9 +136,9 @@
<pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt; <pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>ul</b>&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;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;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>&gt;Category&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;Page&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt; &lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre> &lt;/<b>nav</b>&gt;</code></pre>

33
scss/components/_nav.scss
View file

@ -66,22 +66,30 @@ nav {
// Breadcrumb // Breadcrumb
&[aria-label="breadcrumb"] { &[aria-label="breadcrumb"] {
align-items: center; align-items: center;
justify-content: left; justify-content: start;
& ul li { & ul li {
padding-inline-start: 0; &:not(:first-child) {
margin-inline-start: var(--nav-link-spacing-horizontal);
}
&:not(:last-child) { &:not(:last-child) {
a::after { ::after {
padding-inline-start: 0.5rem; position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/"; content: "/";
color: var(--muted-color); color: var(--muted-color);
text-align: center;
} }
} }
} }
& a[aria-current="page"] { & a[aria-current] {
background-color: transparent;
color: inherit; 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: "\\";
}
}
}
}
}
}