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; text-transform: uppercase;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 4px 2px; padding: 2px 4px;
border: 1px solid currentColor; border: 1px solid currentColor;
letter-spacing: 2px; letter-spacing: 2px;
background-color: white; background-color: white;

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

@ -1,4 +1,6 @@
$newline never $newline never
<a .navbar__link-wrapper href=#{route} ##{menuIdent}> <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} <div .navbar__link-label>_{SomeMessage menuItemLabel}

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

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