mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -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

32
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,12 +46,6 @@
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
> * {
#{$✨}spacing: 0;
}
}
:where(a, [role="link"]) { :where(a, [role="link"]) {
display: inline-block; display: inline-block;
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1) margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
@ -65,6 +58,20 @@
} }
} }
// 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);
}
}
// Breadcrumb // Breadcrumb
&[aria-label="breadcrumb"] { &[aria-label="breadcrumb"] {
align-items: center; align-items: center;
@ -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