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

make hover menu for SecondaryPageActions not right-aligned

Browse Source
This commit is contained in:
Felix Hamann 2019-02-08 22:07:01 +01:00
parent db780ecf00
commit b2ffb2f0c3
1 changed files with 36 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
templates/widgets/pageaction.lucius
View File

@ -1,44 +1,8 @@
.pagenav { .pagenav {
display: flex; display: flex;
justify-content: space-between;
align-items: flex-start; align-items: flex-start;
} }
.pagenav-secondary {
position: relative;
overflow: visible;
padding-top: 10px;
margin-left: auto;
&::after {
content: '\2807';
display: inline-block;
font-size: 31px;
padding: 4px 5px 2px 10px;
width: 40px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-sizing: border-box;
text-align: center;
}
&:hover {
.pagenav-secondary__list {
display: block;
}
}
}
.pagenav-secondary__list {
position: absolute;
display: none;
right: 0;
top: 10px;
width: 250px;
text-align: right;
background-color: white;
box-shadow: 0 0 6px 3px var(--color-grey-light);
}
.pagenav__list-item { .pagenav__list-item {
flex: 1; flex: 1;
position: relative; position: relative;
@ -47,16 +11,6 @@
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
} }
.pagenav__list-item--secondary {
display: flex;
box-shadow: none;
margin: 0;
&:hover {
background-color: var(--color-grey-light);
}
}
.pagenav__link-wrapper { .pagenav__link-wrapper {
flex: 1; flex: 1;
padding: 10px 10px 12px; padding: 10px 10px 12px;
@ -66,24 +20,53 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 1024px) {
.pagenav { .pagenav {
flex-direction: column; flex-direction: column;
} }
}
@media (min-width: 1025px) {
.pagenav-secondary { .pagenav-secondary {
width: 100%; position: relative;
overflow: visible;
padding-top: 10px;
&::after { &::after {
content: none; content: '\2026';
display: inline-block;
padding: 10px 10px 12px;
width: 40px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-sizing: border-box;
text-align: center;
}
&:hover {
.pagenav-secondary__list {
display: block;
}
} }
} }
.pagenav-secondary__list { .pagenav-secondary__list {
display: block; position: absolute;
position: relative; display: none;
width: initial; left: 0;
text-align: initial; top: 10px;
width: 250px;
background-color: white;
box-shadow: 0 0 6px 3px var(--color-grey-light);
}
.pagenav__list-item--secondary {
display: flex;
box-shadow: none;
margin: 0;
&:hover {
background-color: var(--color-grey-light);
}
} }
} }