Popover backport from 12
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
475e466d58
commit
aa636f0450
|
|
@ -284,66 +284,6 @@
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* menu bubble / popover */
|
|
||||||
.bubble,
|
|
||||||
#app-navigation .app-navigation-entry-menu {
|
|
||||||
position: absolute;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #333;
|
|
||||||
border-radius: 3px;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
z-index: 110;
|
|
||||||
margin: 5px;
|
|
||||||
margin-top: -5px;
|
|
||||||
right: 0;
|
|
||||||
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
||||||
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
||||||
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
||||||
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
||||||
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
||||||
}
|
|
||||||
|
|
||||||
.ie .bubble,
|
|
||||||
.ie #app-navigation .app-navigation-entry-menu,
|
|
||||||
.ie .bubble:after,
|
|
||||||
.ie #app-navigation .app-navigation-entry-menu:after,
|
|
||||||
.edge .bubble,
|
|
||||||
.edge #app-navigation .app-navigation-entry-menu,
|
|
||||||
.edge .bubble:after,
|
|
||||||
.edge #app-navigation .app-navigation-entry-menu:after {
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
/* miraculous border arrow stuff */
|
|
||||||
.bubble:after,
|
|
||||||
#app-navigation .app-navigation-entry-menu:after {
|
|
||||||
bottom: 100%;
|
|
||||||
right: 6px; /* change this to adjust the arrow position */
|
|
||||||
border: solid transparent;
|
|
||||||
content: " ";
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.bubble:after,
|
|
||||||
#app-navigation .app-navigation-entry-menu:after {
|
|
||||||
border-color: rgba(238, 238, 238, 0);
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-width: 10px;
|
|
||||||
}
|
|
||||||
.bubble .action {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
|
|
||||||
filter: alpha(opacity=50) !important;
|
|
||||||
opacity: .5 !important;
|
|
||||||
}
|
|
||||||
.bubble .action:hover,
|
|
||||||
.bubble .action:focus,
|
|
||||||
.bubble .action.active {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
|
|
||||||
filter: alpha(opacity=100) !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-navigation .app-navigation-entry-menu {
|
#app-navigation .app-navigation-entry-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -639,62 +579,234 @@ em {
|
||||||
padding: 0 15px 15px;
|
padding: 0 15px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* popover menu styles (use together with "bubble" class) */
|
/* POPOVER MENU ------------------------------------------------------------- */
|
||||||
.popovermenu .menuitem,
|
.ie .bubble, .ie .bubble:after,
|
||||||
.popovermenu .menuitem>span {
|
.ie .popovermenu, .ie .popovermenu:after,
|
||||||
cursor: pointer;
|
.ie #app-navigation .app-navigation-entry-menu,
|
||||||
vertical-align: middle;
|
.ie #app-navigation .app-navigation-entry-menu:after,
|
||||||
|
.edge .bubble,
|
||||||
|
.edge .bubble:after,
|
||||||
|
.edge .popovermenu,
|
||||||
|
.edge .popovermenu:after,
|
||||||
|
.edge #app-navigation .app-navigation-entry-menu,
|
||||||
|
.edge #app-navigation .app-navigation-entry-menu:after {
|
||||||
|
border: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popovermenu .menuitem {
|
.bubble,
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
.app-navigation-entry-menu,
|
||||||
filter: alpha(opacity=50);
|
.popovermenu {
|
||||||
opacity: .5;
|
position: absolute;
|
||||||
}
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
.popovermenu .menuitem:hover,
|
border-radius: 3px;
|
||||||
.popovermenu .menuitem:focus,
|
border-top-right-radius: 0;
|
||||||
.popovermenu .menuitem.active {
|
z-index: 110;
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
margin: 5px;
|
||||||
filter: alpha(opacity=100);
|
margin-top: -5px;
|
||||||
opacity: 1;
|
right: 0;
|
||||||
}
|
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||||
|
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||||
.popovermenu .menuitem img {
|
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||||
padding: initial;
|
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||||
}
|
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||||
|
|
||||||
.popovermenu a.menuitem,
|
|
||||||
.popovermenu label.menuitem,
|
|
||||||
.popovermenu .menuitem {
|
|
||||||
padding: 10px !important;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popovermenu.hidden {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.bubble:after,
|
||||||
.popovermenu .menuitem {
|
.app-navigation-entry-menu:after,
|
||||||
|
.popovermenu:after {
|
||||||
|
bottom: 100%;
|
||||||
|
/* Min-width of popover is 36px and arrow width is 20px
|
||||||
|
wich leaves us 8px right and 8px left */
|
||||||
|
right: 8px; /* change this to adjust the arrow position */
|
||||||
|
border: solid transparent;
|
||||||
|
content: ' ';
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
border-color: rgba(238, 238, 238, 0);
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
border-width: 10px;
|
||||||
|
}
|
||||||
|
/* Center the popover */
|
||||||
|
.bubble.menu-center,
|
||||||
|
.app-navigation-entry-menu.menu-center,
|
||||||
|
.popovermenu.menu-center {
|
||||||
|
transform: translateX(50%);
|
||||||
|
right: 50%;
|
||||||
|
margin-right: 0;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.bubble.menu-center:after,
|
||||||
|
.app-navigation-entry-menu.menu-center:after,
|
||||||
|
.popovermenu.menu-center:after {
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
/* Align the popover to the left */
|
||||||
|
.bubble.menu-left,
|
||||||
|
.app-navigation-entry-menu.menu-left,
|
||||||
|
.popovermenu.menu-left {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.bubble.menu-left:after,
|
||||||
|
.app-navigation-entry-menu.menu-left:after,
|
||||||
|
.popovermenu.menu-left:after {
|
||||||
|
left: 6px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
.bubble.open,
|
||||||
|
.app-navigation-entry-menu.open,
|
||||||
|
.popovermenu.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.bubble ul,
|
||||||
|
.app-navigation-entry-menu ul,
|
||||||
|
.popovermenu ul {
|
||||||
|
/* Overwrite #app-navigation > ul ul */
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
line-height: 30px;
|
flex-direction: column;
|
||||||
color: #000;
|
}
|
||||||
|
.bubble li,
|
||||||
|
.app-navigation-entry-menu li,
|
||||||
|
.popovermenu li {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.bubble li > button,
|
||||||
|
.bubble li > a,
|
||||||
|
.bubble li > .menuitem,
|
||||||
|
.app-navigation-entry-menu li > button,
|
||||||
|
.app-navigation-entry-menu li > a,
|
||||||
|
.app-navigation-entry-menu li > .menuitem,
|
||||||
|
.popovermenu li > button,
|
||||||
|
.popovermenu li > a,
|
||||||
|
.popovermenu li > .menuitem {
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 36px;
|
||||||
|
border: 0;
|
||||||
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
|
||||||
|
filter: alpha(opacity=50) !important;
|
||||||
|
opacity: .5 !important;
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: inherit;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
.bubble li > button.action,
|
||||||
.popovermenu .menuitem .icon,
|
.bubble li > a.action,
|
||||||
.popovermenu .menuitem .no-icon {
|
.bubble li > .menuitem.action,
|
||||||
display: inline-block;
|
.app-navigation-entry-menu li > button.action,
|
||||||
|
.app-navigation-entry-menu li > a.action,
|
||||||
|
.app-navigation-entry-menu li > .menuitem.action,
|
||||||
|
.popovermenu li > button.action,
|
||||||
|
.popovermenu li > a.action,
|
||||||
|
.popovermenu li > .menuitem.action {
|
||||||
|
padding: inherit !important;
|
||||||
|
}
|
||||||
|
.bubble li > button:hover, .bubble li > button:focus,
|
||||||
|
.bubble li > a:hover,
|
||||||
|
.bubble li > a:focus,
|
||||||
|
.bubble li > .menuitem:hover,
|
||||||
|
.bubble li > .menuitem:focus,
|
||||||
|
.app-navigation-entry-menu li > button:hover,
|
||||||
|
.app-navigation-entry-menu li > button:focus,
|
||||||
|
.app-navigation-entry-menu li > a:hover,
|
||||||
|
.app-navigation-entry-menu li > a:focus,
|
||||||
|
.app-navigation-entry-menu li > .menuitem:hover,
|
||||||
|
.app-navigation-entry-menu li > .menuitem:focus,
|
||||||
|
.popovermenu li > button:hover,
|
||||||
|
.popovermenu li > button:focus,
|
||||||
|
.popovermenu li > a:hover,
|
||||||
|
.popovermenu li > a:focus,
|
||||||
|
.popovermenu li > .menuitem:hover,
|
||||||
|
.popovermenu li > .menuitem:focus {
|
||||||
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
|
||||||
|
filter: alpha(opacity=100) !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.bubble li > button > span,
|
||||||
|
.bubble li > a > span,
|
||||||
|
.bubble li > .menuitem > span,
|
||||||
|
.app-navigation-entry-menu li > button > span,
|
||||||
|
.app-navigation-entry-menu li > a > span,
|
||||||
|
.app-navigation-entry-menu li > .menuitem > span,
|
||||||
|
.popovermenu li > button > span,
|
||||||
|
.popovermenu li > a > span,
|
||||||
|
.popovermenu li > .menuitem > span {
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.bubble li > button > p,
|
||||||
|
.bubble li > a > p,
|
||||||
|
.bubble li > .menuitem > p,
|
||||||
|
.app-navigation-entry-menu li > button > p,
|
||||||
|
.app-navigation-entry-menu li > a > p,
|
||||||
|
.app-navigation-entry-menu li > .menuitem > p,
|
||||||
|
.popovermenu li > button > p,
|
||||||
|
.popovermenu li > a > p,
|
||||||
|
.popovermenu li > .menuitem > p {
|
||||||
|
width: 150px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.bubble li > button > p > span,
|
||||||
|
.bubble li > a > p > span,
|
||||||
|
.bubble li > .menuitem > p > span,
|
||||||
|
.app-navigation-entry-menu li > button > p > span,
|
||||||
|
.app-navigation-entry-menu li > a > p > span,
|
||||||
|
.app-navigation-entry-menu li > .menuitem > p > span,
|
||||||
|
.popovermenu li > button > p > span,
|
||||||
|
.popovermenu li > a > p > span,
|
||||||
|
.popovermenu li > .menuitem > p > span {
|
||||||
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
|
||||||
|
filter: alpha(opacity=70) !important;
|
||||||
|
opacity: .7 !important;
|
||||||
|
}
|
||||||
|
.bubble li > button:not(:empty),
|
||||||
|
.bubble li > a:not(:empty),
|
||||||
|
.bubble li > .menuitem:not(:empty),
|
||||||
|
.app-navigation-entry-menu li > button:not(:empty),
|
||||||
|
.app-navigation-entry-menu li > a:not(:empty),
|
||||||
|
.app-navigation-entry-menu li > .menuitem:not(:empty),
|
||||||
|
.popovermenu li > button:not(:empty),
|
||||||
|
.popovermenu li > a:not(:empty),
|
||||||
|
.popovermenu li > .menuitem:not(:empty) {
|
||||||
|
padding: 0 !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
}
|
||||||
|
.bubble li > button > img,
|
||||||
|
.bubble li > a > img,
|
||||||
|
.bubble li > .menuitem > img,
|
||||||
|
.app-navigation-entry-menu li > button > img,
|
||||||
|
.app-navigation-entry-menu li > a > img,
|
||||||
|
.app-navigation-entry-menu li > .menuitem > img,
|
||||||
|
.popovermenu li > button > img,
|
||||||
|
.popovermenu li > a > img,
|
||||||
|
.popovermenu li > .menuitem > img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
padding: 0 10px;
|
||||||
margin-right: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
|
.bubble li [class^='icon-'],
|
||||||
.popovermenu .menuitem {
|
.bubble li [class*=' icon-'],
|
||||||
opacity: 0.5;
|
.app-navigation-entry-menu li [class^='icon-'],
|
||||||
}
|
.app-navigation-entry-menu li [class*=' icon-'],
|
||||||
|
.popovermenu li [class^='icon-'],
|
||||||
.popovermenu li:hover .menuitem {
|
.popovermenu li [class*=' icon-'] {
|
||||||
opacity: 1;
|
/* Keep padding to define the width to
|
||||||
|
assure correct position of a possible text */
|
||||||
|
padding: 18px 0 18px 36px;
|
||||||
|
min-width: 0;
|
||||||
|
/* Overwrite icons*/
|
||||||
|
min-height: 0;
|
||||||
|
background-position: 10px center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue