rei-mirrors/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico synced 2025-11-29 10:52:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
scss/components/_nav.scss
View File

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