preparation for menu for secondary pageactions

This commit is contained in:
Felix Hamann 2019-01-27 18:17:40 +01:00
parent 3333992b0d
commit 3c7ba0e824
3 changed files with 70 additions and 14 deletions

View File

@ -1,16 +1,23 @@
$newline never
$if hasPageActions
<div .page-nav-prime>
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
$case menuItemType
$of PageActionPrime
<div .pagenav__list-item>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of PageActionSecondary
<div .pagenav__list-item>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _
<div .pagenav>
<div .pagenav-prime>
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
$case menuItemType
$of PageActionPrime
<div .pagenav__list-item>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _
<div .pagenav-secondary>
Weitere Punkte
<div .pagenav-secondary__list>
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
$case menuItemType
$of PageActionSecondary
<div .pagenav__list-item.pagenav__list-item--secondary>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _

View File

View File

@ -1,6 +1,55 @@
.pagenav {
display: flex;
justify-content: space-between;
}
.pagenav-secondary {
float: right;
position: relative;
flex-basis: 50px;
height: 50px;
width: 50px;
overflow: visible;
&:hover {
.pagenav-secondary__list {
animation: pagenav-fade-in 200ms ease-in-out;
display: block;
}
}
}
@keyframes pagenav-fade-in {
from {
opacity: 0;
}
}
.pagenav-secondary__list {
position: absolute;
display: none;
right: 0;
top: 0;
width: 250px;
text-align: right;
padding: 7px 13px;
background-color: white;
box-shadow: 0 0 6px 3px var(--color-grey-light)
}
.pagenav__list-item {
position: relative;
display: inline-block;
padding: 7px 10px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
margin: 10px 10px 0 0;
}
.pagenav__list-item--secondary {
display: block;
margin: 0;
+.pagenav__list-item--secondary {
margin-top: 10px;
}
}