ashpie/ily.li
ashpie/ily.li
1
0
Fork 0
Code Issues 3 Pull Requests 1 Releases 2 Wiki Activity

nav menu: add support for buttons i.e. forms

Browse Source
This commit is contained in:
Alice Gaudon 2020-07-15 10:49:36 +02:00
parent eed59453fb
commit 9b04519e33
1 changed files with 70 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
assets/sass/layout.scss
View File

@ -63,19 +63,21 @@ header {
li { li {
list-style: none; list-style: none;
a, span { a, button {
position: relative; position: relative;
height: 64px;
margin: 0;
padding: 0 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 64px;
padding: 0 24px;
.feather { &:hover, &:active {
--icon-size: 24px; &:not(button) {
} background-color: rgba(255, 255, 255, 0.07);
}
&:hover {
.tip { .tip {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
@ -83,10 +85,32 @@ header {
transition-delay: 150ms; transition-delay: 150ms;
} }
} }
.feather {
--icon-size: 24px;
}
} }
a:hover, a:active { button {
background-color: rgba(255, 255, 255, 0.07); margin: 8px;
padding: 24px;
height: 32px;
.feather {
margin-right: 0;
}
.tip {
text-transform: initial;
font-weight: initial;
}
}
form {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
} }
} }
} }
@ -139,10 +163,14 @@ header {
transform: translateX(0%); transform: translateX(0%);
} }
li a { li {
.tip { a, button {
display: block; .tip {
margin-left: 8px; display: block;
margin-left: 8px;
text-transform: inherit;
font-weight: inherit;
}
} }
} }
} }
@ -151,32 +179,38 @@ header {
@media (min-width: $menuLayoutSwitchTreshold) { @media (min-width: $menuLayoutSwitchTreshold) {
nav ul li { nav ul li {
a .tip { a, button {
visibility: hidden; .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 { &:last-child {
left: unset; a, button {
right: 4px; .tip {
transform: none; left: unset;
right: 4px;
transform: none;
}
}
} }
} }
} }