Add optional icon only menu layout

This commit is contained in:
Alice Gaudon 2020-07-06 12:45:09 +02:00
parent 9b9dc176ea
commit fea9fe00e0

View File

@ -64,6 +64,7 @@ header {
list-style: none; list-style: none;
a, span { a, span {
position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -72,7 +73,15 @@ header {
.feather { .feather {
--icon-size: 24px; --icon-size: 24px;
margin-right: 10px; }
&:hover {
.tip {
visibility: visible;
opacity: 1;
transition: opacity ease-out 100ms;
transition-delay: 150ms;
}
} }
} }
@ -129,9 +138,40 @@ header {
&.open { &.open {
transform: translateX(0%); transform: translateX(0%);
} }
li a {
.tip {
display: block;
margin-left: 8px;
} }
} }
} }
}
}
@media (min-width: $menuLayoutSwitchTreshold) {
nav ul li a .tip {
visibility: hidden;
position: absolute;
display: block;
width: max-content;
height: 30px;
padding: 4px 8px;
line-height: 22px;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 18px;
color: $defaultTextColor;
opacity: 0;
transition: opacity ease-out 100ms, visibility step-end 150ms;
transition-delay: 0ms;
background-color: #000;
border-radius: 5px;
}
}
} }
footer { footer {