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 {
overflow: auto;
}
.nav__list {
margin: 0;
padding: 0;
&__list {
margin: 0;
padding: 0;
list-style-type: none;
list-style-type: none;
z-index: 1;
z-index: 1;
overflow: auto;
width: 100%;
overflow: auto;
width: 100%;
@include mq-desktop {
justify-content: center;
@include mq-desktop {
justify-content: center;
}
}
}
.nav__item {
padding: 0.375em;
white-space: nowrap;
}
&__item {
padding: 0.375em;
white-space: nowrap;
}
.nav__link {
display: block;
font-weight: bold;
line-height: 1;
color: $copy-color;
margin-bottom: 0.375em;
text-decoration: none;
&__link {
display: block;
font-weight: bold;
line-height: 1;
color: $copy-color;
margin-bottom: 0.375em;
text-decoration: none;
&:hover ~ .nav__underline {
&::before,
&::after {
&.router-link-exact-active {
color: #fff;
}
}
&__link:hover ~ &__underline {
&:before,
&:after {
width: 50%;
background-color: $copy-color;
}
}
&.router-link-exact-active {
color: $bg-color-light;
&__link.router-link-exact-active ~ &__underline {
&:before,
&:after {
width: 50%;
background-color: #fff;
}
}
&:hover ~ .nav__underline {
&::before,
&::after {
background-color: $bg-color-light;
}
&__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%;
}
}
}
.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>