diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-23 22:53:10 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-24 18:36:17 +0300 |
| commit | 016958ea5e64d291b73beb16db10fdd7e2e7a089 (patch) | |
| tree | 76512e1eae421bd3afc8d76504e60611975525ad /phpBB/styles/prosilver/theme/common.css | |
| parent | 6f97367ef065b871fdfbdddbd7919af886897a9f (diff) | |
| download | forums-016958ea5e64d291b73beb16db10fdd7e2e7a089.tar forums-016958ea5e64d291b73beb16db10fdd7e2e7a089.tar.gz forums-016958ea5e64d291b73beb16db10fdd7e2e7a089.tar.bz2 forums-016958ea5e64d291b73beb16db10fdd7e2e7a089.tar.xz forums-016958ea5e64d291b73beb16db10fdd7e2e7a089.zip | |
[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
Diffstat (limited to 'phpBB/styles/prosilver/theme/common.css')
| -rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 137 |
1 files changed, 87 insertions, 50 deletions
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 4f55d3e92c..9e15eada22 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -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; + +.dropdown-up .pointer { + bottom: 0; + top: auto; } -.responsive-menu.responsive-rightside .popup-pointer { +.dropdown-left .dropdown .pointer { left: auto; - right: 2px; + right: 10px; } -.responsive-menu.responsive-rightside ul.responsive-popup { - left: auto; - right: -5px; + +.dropdown .pointer-inner { + top: auto; + bottom: -11px; + left: -10px; +} + +.dropdown-up .pointer-inner { + bottom: auto; + top: -11px; } -ul.responsive-popup li { +.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; } |