rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

menu styling

This commit is contained in:
ManjaroOne666 2019-01-23 12:08:58 +00:00
parent c9e5a04789
commit 42fe1035c8
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/SiteMenu.vue
View File

@ -130,7 +130,7 @@ $transition-timing: .5s;
} }
.menu-content { .menu-content {
$color-bg: $color__primary-100; $color-bg: $color__neutral-200;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -316,9 +316,22 @@ $transition-timing: .5s;
display: block; display: block;
padding: .2em 0; padding: .2em 0;
color: $color__neutral-800;
transition: opacity .5s;
opacity: .9;
&:link, &:visited {
opacity: .9;
}
&:hover, &:active {
opacity: .5;
}
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
pointer-events: none; pointer-events: none;
color: $color__primary-700; color: $color__primary-900;
opacity: 1;
} }
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
@ -339,7 +352,7 @@ $transition-timing: .5s;
border-radius: 50%; border-radius: 50%;
background-color: $color__primary-700; background-color: $color__neutral-600;
transition: opacity .5s; transition: opacity .5s;
opacity: 0; opacity: 0;
@ -361,9 +374,6 @@ $transition-timing: .5s;
.social-nav { .social-nav {
list-style: none; list-style: none;
display: flex; display: flex;
@media (min-width: $bp__layout) {
}
} }
.social-nav__link { .social-nav__link {
@ -371,7 +381,17 @@ $transition-timing: .5s;
height: 2em; height: 2em;
width: 5ch; width: 5ch;
opacity: .7; transition: opacity .5s;
color: $color__neutral-900;
&:link, &:visited {
opacity: .8;
color: $color__neutral-900;
}
&:hover, &:active {
opacity: .5;
}
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
width: 3ch; width: 3ch;
@ -383,8 +403,9 @@ $transition-timing: .5s;
} }
.footer-attr { .footer-attr {
color: $color__neutral-500; color: $color__neutral-600;
font-size: .7em; font-size: .7em;
font-weight: 600;
} }
.menu-toggle { .menu-toggle {