diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 2c5e6ccc..767ca430 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -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