more prominent navbar icons

This commit is contained in:
Felix Hamann 2019-05-04 11:01:01 +02:00
parent d017196245
commit 8c62bdb860

View File

@ -58,11 +58,10 @@
/* links */ /* links */
.navbar__link-wrapper { .navbar__link-wrapper {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: center;
height: 80px; height: 80px;
min-width: 90px; min-width: 90px;
color: var(--color-lightwhite); color: var(--color-lightwhite);
@ -71,14 +70,17 @@
&:hover { &:hover {
color: var(--color-lightwhite); color: var(--color-lightwhite);
.navbar__link-icon {
opacity: 1;
}
} }
} }
.navbar__link-icon { .navbar__link-icon {
position: absolute; opacity: 0.7;
right: 4px; transition: opacity 0.2s ease;
top: 4px; margin-bottom: 7px;
opacity: 0.3;
} }
.navbar__link-label { .navbar__link-label {
@ -90,7 +92,7 @@
@media (min-width: 769px) { @media (min-width: 769px) {
.navbar__link-wrapper { .navbar__link-wrapper {
border: 1px solid var(--color-lmu-box-border); border: 1px solid rgba(255, 255, 255, 0.7);
} }
} }
@ -106,6 +108,11 @@
.navbar__link-label { .navbar__link-label {
padding: 0 7px; padding: 0 7px;
} }
.navbar__link-icon {
transform: scale(0.65);
margin-bottom: 0;
}
} }
/* navbar list */ /* navbar list */
@ -142,21 +149,6 @@
&:not(.navbar__list-item--favorite) + .navbar__list-item { &:not(.navbar__list-item--favorite) + .navbar__list-item {
margin-left: 12px; margin-left: 12px;
} }
.fas {
height: 20px;
margin-left: 8px;
}
}
@media (max-width: 768px) {
.navbar__list-item {
.fas {
margin-left: 0;
}
}
} }
@media (max-width: 500px) { @media (max-width: 500px) {