SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: better use of scss features

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:59:47 +01:00
parent fd3c8f6449
commit 2bb3abab52
1 changed files with 57 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/components/Navigation.vue
View file

@ -28,78 +28,79 @@ export default {
.nav { .nav {
overflow: auto; overflow: auto;
}
.nav__list { &__list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
z-index: 1; z-index: 1;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
@include mq-desktop { @include mq-desktop {
justify-content: center; justify-content: center;
}
} }
}
.nav__item { &__item {
padding: 0.375em; padding: 0.375em;
white-space: nowrap; white-space: nowrap;
} }
.nav__link { &__link {
display: block; display: block;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
color: $copy-color; color: $copy-color;
margin-bottom: 0.375em; margin-bottom: 0.375em;
text-decoration: none; text-decoration: none;
&:hover ~ .nav__underline { &.router-link-exact-active {
&::before, color: #fff;
&::after { }
}
&__link:hover ~ &__underline {
&:before,
&:after {
width: 50%; width: 50%;
background-color: $copy-color; background-color: $copy-color;
} }
} }
&.router-link-exact-active { &__link.router-link-exact-active ~ &__underline {
color: $bg-color-light; &:before,
&:after {
width: 50%;
background-color: #fff;
}
}
&:hover ~ .nav__underline { &__underline {
&::before, position: relative;
&::after { display: block;
background-color: $bg-color-light; width: 100%;
}
&:before,
&:after {
content: "";
position: absolute;
width: 0;
height: 0.125em;
bottom: 0;
transition: all 0.2s ease-in-out;
}
&:before {
left: 50%;
}
&:after {
right: 50%;
} }
} }
} }
.nav__underline {
position: relative;
display: block;
width: 100%;
&::before,
&::after {
content: "";
position: absolute;
width: 0;
height: 0.125em;
bottom: 0;
transition: all 0.2s ease-in-out;
}
&::before {
left: 50%;
}
&::after {
right: 50%;
}
}
</style> </style>