diff options
Diffstat (limited to 'app/assets/stylesheets/components/_nav.scss')
-rw-r--r-- | app/assets/stylesheets/components/_nav.scss | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss new file mode 100644 index 0000000..06fdd22 --- /dev/null +++ b/app/assets/stylesheets/components/_nav.scss @@ -0,0 +1,141 @@ +/** + * 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 { + display: flex; +} + +nav { + justify-content: space-between; + + ol, + ul { + align-items: center; + margin-bottom: 0; + padding: 0; + list-style: none; + + &:first-of-type { + margin-left: calc(var(--nav-element-spacing-horizontal) * -1); + } + &:last-of-type { + margin-right: calc(var(--nav-element-spacing-horizontal) * -1); + } + } + + li { + display: inline-block; + 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); + text-decoration: none; + + &:is([aria-current], :hover, :active, :focus) { + text-decoration: none; + } + } + + // Breadcrumb + &[aria-label="breadcrumb"] { + align-items: center; + justify-content: start; + + & ul li { + &:not(:first-child) { + margin-inline-start: var(--nav-link-spacing-horizontal); + } + + &:not(:last-child) { + ::after { + position: absolute; + width: calc(var(--nav-link-spacing-horizontal) * 2); + margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); + content: "/"; + color: var(--muted-color); + text-align: center; + } + } + } + + & a[aria-current] { + background-color: transparent; + color: inherit; + text-decoration: none; + pointer-events: none; + } + } + + // Minimal support for role="button" + [role="button"] { + margin-right: inherit; + margin-left: inherit; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); + } +} + +// Vertical Nav +aside { + nav, + ol, + ul, + li { + display: block; + } + + li { + padding: calc(var(--nav-element-spacing-vertical) * 0.5) + var(--nav-element-spacing-horizontal); + + a { + display: block; + } + + // Minimal support for links as buttons + [role="button"] { + margin: inherit; + } + } +} + +// Breadcrumb RTL +[dir="rtl"] { + nav { + &[aria-label="breadcrumb"] { + & ul li { + &:not(:last-child) { + ::after { + content: "\\"; + } + } + } + } + } +} |