hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change order of the current nav item indicator styles

Browse Source
This commit is contained in:
daudix
2024-06-09 19:13:53 +03:00
parent b63c531ff3
commit cba25e34f7
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_general.scss
View File

@ -54,12 +54,14 @@ body {
} }
} }
// Custom focus indicator
:focus-visible { :focus-visible {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color); outline: 0.125rem solid var(--primary-color);
outline-offset: 2px; outline-offset: 2px;
} }
// Fallback for older browsers
@supports not selector(:focus-visible) { @supports not selector(:focus-visible) {
:focus { :focus {
animation: focus-in var(--transition); animation: focus-in var(--transition);

20
sass/_nav.scss
View File

@ -65,16 +65,6 @@
} }
&.active { &.active {
&:hover::before {
right: 1rem;
left: 1rem;
border-bottom: 0.25rem solid var(--primary-color);
}
&:active::before {
border-radius: 0.25rem;
}
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
@ -87,6 +77,16 @@
border-radius: 0 0 0.25rem 0.25rem; border-radius: 0 0 0.25rem 0.25rem;
content: ""; content: "";
} }
&:hover::before {
right: 1rem;
left: 1rem;
border-bottom: 0.25rem solid var(--primary-color);
}
&:active::before {
border-radius: 0.25rem;
}
} }
} }