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

Merge branch 'dev' into feat/nav_breadcrumb

Browse source
This commit is contained in:
Jelmer Veen 2022-06-12 12:47:30 +02:00 • committed by GitHub
commit 7354c7f347
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
105 changed files with 4323 additions and 2904 deletions
Download patch file Download diff file Expand all files Collapse all files

50
scss/components/_nav.scss
View file

@ -2,6 +2,18 @@
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// Pico
// ––––––––––––––––––––
// Horizontal Nav
nav,
nav ul {
@ -19,35 +31,34 @@ nav {
list-style: none;
&:first-of-type {
margin-left: calc(var(--spacing) * -0.5);
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
}
@ -91,11 +102,16 @@ aside {
}
li {
padding: calc(var(--spacing) * 0.5);
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}