Merge branch 'boilerplate-icon-only-menu' into 'master'

Boilerplate icon only menu

See merge request ArisuOngaku/wms-boilerplate!3
This commit is contained in:
Alice Gaudon 2020-07-06 10:51:46 +00:00
commit db3cf2178a

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,6 +138,45 @@ 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;
}
&:last-child a .tip {
left: unset;
right: 4px;
transform: none;
} }
} }
} }