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 {
display: flex;
justify-content: space-between;
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 {
flex: 1;
position: relative;
@ -47,16 +11,6 @@
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 {
flex: 1;
padding: 10px 10px 12px;
@ -66,24 +20,53 @@
}
}
@media (max-width: 768px) {
@media (max-width: 1024px) {
.pagenav {
flex-direction: column;
}
}
@media (min-width: 1025px) {
.pagenav-secondary {
width: 100%;
position: relative;
overflow: visible;
padding-top: 10px;
&::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 {
display: block;
position: relative;
width: initial;
text-align: initial;
position: absolute;
display: none;
left: 0;
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);
}
}
}