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

feat: improve nav support for form elements

Browse source
This commit is contained in:
Lucas Larroche 2023-01-01 13:49:42 +07:00
parent a730228855
commit 7f9ffd252a
1 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

46
scss/components/_nav.scss
View file

@ -18,7 +18,6 @@
// Pico
// ––––––––––––––––––––
// Horizontal Nav
nav,
nav ul {
display: flex;
@ -47,21 +46,29 @@
margin: 0;
padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements
> * {
#{$✨}spacing: 0;
: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);
&:not(:hover) {
text-decoration: none;
}
}
}
: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);
&:not(:hover) {
text-decoration: none;
// Minimal support for buttons and forms elements
button,
[role="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
var(#{$✨}nav-link-spacing-horizontal);
}
}
@ -83,10 +90,12 @@
content: "/";
color: var(#{$✨}muted-color);
text-align: center;
text-decoration: none;
}
}
}
// Minimal support for aria-current
& a[aria-current] {
background-color: transparent;
color: inherit;
@ -94,15 +103,6 @@
pointer-events: none;
}
}
// Minimal support for button and role="button"
button,
[role="button"] {
margin-right: inherit;
margin-left: inherit;
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
var(#{$✨}nav-link-spacing-horizontal);
}
}
// Vertical Nav