mirror of
https://github.com/phpbb/phpbb.git
synced 2025-08-28 10:40:28 +02:00
[ticket/11956] Reusable dropdown handler
Replace dropdown menu code with reusable handler that is shared between all types of dropdown menus and can be used by custom menus by extensions. PHPBB3-11956
This commit is contained in:
Vjacheslav Trushkin
@@ -363,6 +363,7 @@ ul.rightside {
|
||||
|
||||
ul.linklist li.responsive-menu {
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link {
|
||||
@@ -394,6 +395,24 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
li.responsive-menu.dropdown-right .dropdown {
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
li.responsive-menu.dropdown-left .dropdown {
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
li.responsive-menu .dropdown .dropdown-contents {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
ul.linklist .dropdown li {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Bulletin icons for list items
|
||||
----------------------------------------*/
|
||||
ul.linklist.bulletin li:before {
|
||||
@@ -416,54 +435,95 @@ ul.linklist.bulletin li.no-bulletin:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive popup
|
||||
/* Dropdown menu
|
||||
----------------------------------------*/
|
||||
ul.responsive-popup {
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 22px;
|
||||
z-index: 2;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
padding: 9px 0 0;
|
||||
}
|
||||
|
||||
.responsive-rightside ul.responsive-popup {
|
||||
.dropdown-up .dropdown {
|
||||
top: auto;
|
||||
bottom: 18px;
|
||||
padding: 0 0 9px;
|
||||
}
|
||||
|
||||
.dropdown-left .dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.responsive-menu .popup-pointer {
|
||||
top: 22px;
|
||||
|
||||
.dropdown .pointer, .dropdown .pointer-inner {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 10px dashed transparent;
|
||||
border-right: 10px dashed transparent;
|
||||
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-up .pointer, .dropdown-up .pointer-inner {
|
||||
border-bottom-width: 0;
|
||||
border-top: 10px solid transparent;
|
||||
}
|
||||
|
||||
.dropdown .pointer {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
left: 2px;
|
||||
}
|
||||
.responsive-menu ul.responsive-popup {
|
||||
top: 32px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.responsive-menu.responsive-rightside .popup-pointer {
|
||||
left: auto;
|
||||
right: 2px;
|
||||
}
|
||||
.responsive-menu.responsive-rightside ul.responsive-popup {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
.dropdown-up .pointer {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
ul.responsive-popup li {
|
||||
.dropdown-left .dropdown .pointer {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.dropdown .pointer-inner {
|
||||
top: auto;
|
||||
bottom: -11px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.dropdown-up .pointer-inner {
|
||||
bottom: auto;
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-contents {
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
float: none;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wrap ul.responsive-popup li {
|
||||
.wrap .dropdown li, .dropdown.wrap li {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ul.responsive-popup li:before, ul.responsive-popup li:after {
|
||||
.dropdown li:before, .dropdown li:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -854,10 +914,7 @@ form > p.post-notice strong {
|
||||
left: 0;
|
||||
width: 330px;
|
||||
z-index: 1;
|
||||
border: 1px solid;
|
||||
box-shadow: 3px 3px 5px darkgray;
|
||||
border-radius: 5px;
|
||||
top: 32px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
#notification_list ul {
|
||||
@@ -881,7 +938,11 @@ form > p.post-notice strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notification_list > .header {
|
||||
#notification_list .dropdown-contents {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#notification_list .header {
|
||||
padding: 0 10px;
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
@@ -893,18 +954,18 @@ form > p.post-notice strong {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
#notification_list > .header > .header_settings {
|
||||
#notification_list .header .header_settings {
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#notification_list > .footer {
|
||||
#notification_list .footer {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a {
|
||||
#notification_list ul li a, .notification_list dt > a, #notification_list .footer > a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -921,30 +982,6 @@ form > p.post-notice strong {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.popup-pointer, .popup-pointer-inner {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom: 10px solid;
|
||||
border-left: 10px dashed transparent;
|
||||
border-right: 10px dashed transparent;
|
||||
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.popup-pointer {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
.popup-pointer-inner {
|
||||
top: auto;
|
||||
bottom: -11px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.notification_list div.notifications {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user