fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework icons in navbar items

Browse Source
This commit is contained in:
Felix Hamann 2019-05-01 21:05:48 +02:00
parent 493286ab43
commit 19b7b1e9a5
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/utils/asidenav.scss
View File

@ -141,7 +141,7 @@
text-transform: uppercase;
width: 100%;
height: 100%;
padding: 0 4px 2px;
padding: 2px 4px;
border: 1px solid currentColor;
letter-spacing: 2px;
background-color: white;

4
templates/widgets/navbar/item.hamlet
View File

@ -1,4 +1,6 @@
$newline never
<a .navbar__link-wrapper href=#{route} ##{menuIdent}>
<i .fas.fa-#{fromMaybe "none" menuItemIcon}>
$if isJust menuItemIcon
<div .navbar__link-icon>
<i .fas.fa-2x.fa-#{fromMaybe "none" menuItemIcon}>
<div .navbar__link-label>_{SomeMessage menuItemLabel}

11
templates/widgets/navbar/navbar.lucius
View File

@ -58,6 +58,7 @@
/* links */
.navbar__link-wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
@ -66,15 +67,23 @@
min-width: 90px;
color: var(--color-lightwhite);
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
overflow: hidden;
&:hover {
color: var(--color-lightwhite);
}
}
.navbar__link-icon {
position: absolute;
right: 4px;
top: 4px;
opacity: 0.3;
}
.navbar__link-label {
transition: opacity .2s ease;
padding: 4px 6px;
padding: 2px 4px;
text-transform: uppercase;
}