mirror of
https://github.com/phpbb/phpbb.git
synced 2025-08-18 14:31:19 +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
@@ -1104,11 +1104,6 @@ input.disabled {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#notification_list {
|
||||
background-color: #FFFFFF;
|
||||
border-color: #B9B9B9;
|
||||
}
|
||||
|
||||
#notification_list ul li {
|
||||
border-bottom-color: #B9B9B9;
|
||||
}
|
||||
@@ -1118,12 +1113,12 @@ input.disabled {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#notification_list > .header, .notification_list > .footer {
|
||||
#notification_list .header, .notification_list .footer {
|
||||
border-color: #B9B9B9;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#notification_list > .header {
|
||||
#notification_list .header {
|
||||
background: #F1F8FF;
|
||||
background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
|
||||
@@ -1133,12 +1128,16 @@ input.disabled {
|
||||
background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
|
||||
}
|
||||
|
||||
.popup-pointer {
|
||||
border-bottom-color: #B9B9B9;
|
||||
.dropdown .pointer {
|
||||
border-color: #B9B9B9 transparent;
|
||||
}
|
||||
|
||||
.popup-pointer-inner {
|
||||
border-bottom-color: #F1F8FF;
|
||||
.dropdown .pointer-inner {
|
||||
border-color: #FFF transparent;
|
||||
}
|
||||
|
||||
#notification_list .pointer-inner {
|
||||
border-color: #F1F8FF transparent;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
||||
@@ -1149,22 +1148,11 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
|
||||
border-color: #D31141;
|
||||
}
|
||||
|
||||
ul.responsive-popup {
|
||||
.dropdown .dropdown-contents {
|
||||
background: #fff;
|
||||
border-color: #b9b9b9;
|
||||
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.responsive-menu .popup-pointer {
|
||||
border-bottom-color: #b9b9b9;
|
||||
}
|
||||
|
||||
.responsive-menu .popup-pointer-inner {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
|
||||
background: #ddedfb;
|
||||
border-color: #c0c9d5;
|
||||
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
|
||||
.dropdown-up .dropdown-contents {
|
||||
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -218,6 +218,10 @@ ul.cplist {
|
||||
|
||||
/* Responsive tabs
|
||||
----------------------------------------*/
|
||||
.responsive-tab {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link span {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
@@ -251,29 +255,25 @@ ul.cplist {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 26px;
|
||||
z-index: 2;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
#tabs .dropdown, #minitabs .dropdown {
|
||||
top: 29px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
#minitabs ul.responsive-tabs {
|
||||
top: 23px;
|
||||
#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
|
||||
bottom: -5px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs ul.responsive-tabs {
|
||||
right: auto;
|
||||
left: 0;
|
||||
#tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown {
|
||||
margin-left: -41px;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs li, #minitabs .responsive-tabs li {
|
||||
#tabs .dropdown li, #minitabs .dropdown li {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span {
|
||||
#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
|
||||
background: transparent;
|
||||
float: none;
|
||||
margin: 0;
|
||||
@@ -281,14 +281,16 @@ ul.cplist {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs .responsive-tabs a span {
|
||||
.tabs-container #minitabs .dropdown a span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span {
|
||||
padding: 5px;
|
||||
#tabs .dropdown a span, #minitabs .dropdown a span {
|
||||
padding: 5px 8px;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
/* UCP navigation menu
|
||||
----------------------------------------*/
|
||||
/* Container for sub-navigation list */
|
||||
|
||||
Reference in New Issue
Block a user