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

new design for breadrumbs. more clearly visible now

Browse Source
This commit is contained in:
Felix Hamann 2018-06-24 21:44:28 +02:00
parent 813871111b
commit 9a3ad65dbf
3 changed files with 29 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/default-layout.lucius
View File

@ -172,7 +172,7 @@ h4 {
} }
.main__content-body { .main__content-body {
padding: 10px 40px 60px; padding: 0 40px 60px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {

2
templates/widgets/breadcrumbs.hamlet
View File

@ -4,4 +4,4 @@ $newline never
$forall bc <- parents $forall bc <- parents
<li .breadcrumbs__item> <li .breadcrumbs__item>
<a .breadcrumbs__link href="@{fst bc}">#{snd bc} <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
<li ..breadcrumbs__item.breadcrumbs__last-item>#{title} <li .breadcrumbs__item>#{title}

66
templates/widgets/breadcrumbs.lucius
View File

@ -1,30 +1,42 @@
.breadcrumbs__container { .breadcrumbs__container {
position: relative; position: relative;
align-self: flex-end; color: var(--color-font);
background-color: var(--color-dark); margin-left: 40px;
color: white; margin-top: 20px;
transition: margin-bottom .2s ease;
} }
.breadcrumbs__container--animated { @media (max-width: 768px) {
transition: left .2s ease;
.breadcrumbs__container {
margin-left: 20px;
}
} }
.breadcrumbs__link { .breadcrumbs__link {
color: var(--color-lightwhite);
&:hover { &:hover {
color: var(--color-lightwhite); color: var(--color-fontsec);
} }
} }
.breadcrumbs__item { .breadcrumbs__item {
padding-left: 25px;
padding-right: 14px; padding-right: 14px;
position: relative; position: relative;
line-height: 28px; line-height: 28px;
opacity: 0.8; opacity: 0.8;
z-index: 1; z-index: 1;
margin-right: 10px;
&:last-child {
margin-right: 0;
font-weight: 800;
color: var(--color-dark);
top: 1px;
&::after {
content: none;
}
}
--color-separator: var(--color-primary); --color-separator: var(--color-primary);
@ -36,37 +48,13 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 4px; top: 11px;
right: -13px; right: 0;
width: 18px; width: 7px;
height: 18px; height: 7px;
border-bottom: 2px solid var(--color-separator); border-bottom: 1px solid var(--color-separator);
border-right: 2px solid var(--color-separator); border-right: 1px solid var(--color-separator);
transform: rotate(-45deg); transform: rotate(-45deg);
z-index: 10; z-index: 10;
} }
} }
.breadcrumbs__last-item {
padding-right: 20px;
background-color: var(--color-separator);
&::before {
content: '';
position: absolute;
top: 4px;
left: -8px;
width: 18px;
height: 18px;
background-color: var(--color-dark);
border-bottom: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
transform: rotate(-45deg);
z-index: 10;
}
&::after {
background-color: var(--color-separator);
right: -8px;
}
}