ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Boilerplate icon only menu #3

Merged
ArisuOngaku merged 1 commits from boilerplate-icon-only-menu into master 2020-07-06 12:51:46 +02:00
Conversation 2 Commits 1 Files Changed 1 +27 -19
1 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/sass/layout.scss
View File

@ -150,26 +150,34 @@ header {
} }
@media (min-width: $menuLayoutSwitchTreshold) { @media (min-width: $menuLayoutSwitchTreshold) {
nav ul li a .tip { nav ul li {
visibility: hidden; a .tip {
position: absolute; visibility: hidden;
display: block; position: absolute;
width: max-content; display: block;
height: 30px; width: max-content;
padding: 4px 8px; height: 30px;
line-height: 22px; padding: 4px 8px;
top: calc(100% + 8px); line-height: 22px;
left: 50%; top: calc(100% + 8px);
transform: translateX(-50%); left: 50%;
transform: translateX(-50%);
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: $defaultTextColor; color: $defaultTextColor;
opacity: 0; opacity: 0;
transition: opacity ease-out 100ms, visibility step-end 150ms; transition: opacity ease-out 100ms, visibility step-end 150ms;
transition-delay: 0ms; transition-delay: 0ms;
background-color: #000; background-color: #000;
border-radius: 5px; border-radius: 5px;
}
&:last-child a .tip {
left: unset;
right: 4px;
transform: none;
}
} }
} }
} }