[ticket/12769] Fix dropdown styling

phpBB/styles/prosilver/template/jumpbox.html

@@ -32,7 +32,7 @@
 			<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
 			<span class="caret"><i class="icon fa-sort-down fa-fw"></i></span>
 		</span>
-		<div class="dropdown hidden">
+		<div class="dropdown">
 			<div class="pointer"><div class="pointer-inner"></div></div>
 			<ul class="dropdown-contents">
 			<!-- BEGIN jumpbox_forums -->

phpBB/styles/prosilver/template/navbar_header.html

@@ -3,11 +3,11 @@
 
 	<ul id="nav-main" class="linklist bulletin" role="menubar">
 
-			<div class="dropdown hidden">
 		<li id="quick-links" class="quick-links dropdown-container<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
 			<a href="#" class="dropdown-trigger">
 				<i class="icon fa-bars fa-fw"></i><span>{L_QUICK_LINKS}</span>
 			</a>
+			<div class="dropdown">
 				<div class="pointer"><div class="pointer-inner"></div></div>
 				<ul class="dropdown-contents" role="menu">
 					<!-- EVENT navbar_header_quick_links_before -->

phpBB/styles/prosilver/template/pagination.html

@@ -1,8 +1,8 @@
 <ul>
 <!-- IF BASE_URL and TOTAL_PAGES > 6 -->
 	<li class="dropdown-container dropdown-button-control dropdown-page-jump page-jump">
-		<div class="dropdown hidden">
 		<a class="button" href="#" class="dropdown-trigger" title="{L_JUMP_TO_PAGE_CLICK}" role="button"><i class="icon fa-level-down fa-rotate-270"></i><span class="sr-only">{PAGE_NUMBER}</span></a>
+		<div class="dropdown">
 			<div class="pointer"><div class="pointer-inner"></div></div>
 			<ul class="dropdown-contents">
 				<li>{L_JUMP_TO_PAGE}{L_COLON}</li>

phpBB/styles/prosilver/template/ucp_pm_message_header.html

@@ -31,11 +31,11 @@
 
 	<!-- IF not S_IS_BOT and U_PRINT_PM -->
 		<div class="dropdown-container dropdown-button-control topic-tools">
-			<div class="dropdown hidden">
 			<span title="{L_PM_TOOLS}" class="button dropdown-trigger dropdown-select">
 				<i class="icon fa-wrench fa-fw"></i>
 				<span class="caret"><i class="icon fa-sort-down fa-fw"></i></span>
 			</span>
+			<div class="dropdown">
 				<div class="pointer"><div class="pointer-inner"></div></div>
 				<ul class="dropdown-contents">
 					<!-- IF U_PRINT_PM -->

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -182,10 +182,10 @@
 			<dd class="profile-contact">
 				<strong>{L_CONTACT}{L_COLON}</strong>
 				<div class="dropdown-container dropdown-left">
-					<div class="dropdown hidden">
 					<a href="#" class="dropdown-trigger" title="{postrow.CONTACT_USER}">
 						<i class="icon fa-commenting-o fa-fw icon-lg"></i><span class="sr-only">{postrow.CONTACT_USER}</span>
 					</a>
+					<div class="dropdown">
 						<div class="pointer"><div class="pointer-inner"></div></div>
 						<div class="dropdown-contents contact-icons">
 							<!-- BEGIN contact -->

phpBB/styles/prosilver/template/viewtopic_topic_tools.html

@@ -1,10 +1,10 @@
 <!-- IF not S_IS_BOT and (U_WATCH_TOPIC or U_BOOKMARK_TOPIC or U_BUMP_TOPIC or U_EMAIL_TOPIC or U_PRINT_TOPIC or S_DISPLAY_TOPIC_TOOLS) -->
 	<div class="dropdown-container dropdown-button-control topic-tools">
 		<span title="{L_PM_TOOLS}" class="button dropdown-trigger dropdown-select">
-		<div class="dropdown hidden">
 			<i class="icon fa-wrench fa-fw"></i>
 			<span class="caret"><i class="icon fa-sort-down fa-fw"></i></span>
 		</span>
+		<div class="dropdown">
 			<div class="pointer"><div class="pointer-inner"></div></div>
 			<ul class="dropdown-contents">
 				<!-- EVENT viewtopic_topic_tools_before -->

phpBB/styles/prosilver/theme/base.css

@@ -1,61 +1,61 @@
 /* --------------------------------------------------------------
-    $Base
+	$Base
 -------------------------------------------------------------- */
 
 /** {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 *:before,
 *:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }*/
 
 /* Define your base font-size here; most elements will inherit this. _NO__DOTCOMMA__AFTER__*/
 html {
-    font-size: 1em; /* Assuming 16px... */
-    line-height: 1.5; /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) _NO__DOTCOMMA__AFTER__*/
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	font-size: 1em; /* Assuming 16px... */
+	line-height: 1.5; /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) _NO__DOTCOMMA__AFTER__*/
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #333333;
-    background-color: #ffffff;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	color: #333333;
+	background-color: #ffffff;
 }
 
 input,
 button,
 select,
 textarea {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
 }
 
 figure { margin: 0 }
 img { vertical-align: middle }
 
 hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #e5e5e5;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: 0;
+	border-top: 1px solid #e5e5e5;
 }
 
 a {
-    color: #428bca;
-    text-decoration: none;
+	color: #428bca;
+	text-decoration: none;
 }
 
 a:hover,
 a:focus,
 a:active {
-    color: #2a6496;
-    text-decoration: underline;
+	color: #2a6496;
+	text-decoration: underline;
 }
 
 blockquote,
@@ -71,9 +71,9 @@ figure,
 p,
 pre { margin: 0 }
 button {
-    background: transparent;
-    border: 0;
-    padding: 0;
+	background: transparent;
+	border: 0;
+	padding: 0;
 }
 
 /**
@@ -81,22 +81,22 @@ button {
  * results in a loss of the default `button` focus styles.
  */
 button:focus {
-    outline: 1px dotted;
-    outline: 5px auto -webkit-focus-ring-color;
+	outline: 1px dotted;
+	outline: 5px auto -webkit-focus-ring-color;
 }
 
 fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
+	border: 0;
+	margin: 0;
+	padding: 0;
 }
 
 iframe { border: 0 }
 ol,
 ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
 /**
@@ -110,6 +110,6 @@ ul {
  * Remove double underline from recent version of firefox
  */
 abbr[title] {
-    text-decoration: none;
+	text-decoration: none;
 }
 

phpBB/styles/prosilver/theme/buttons.css

@@ -17,9 +17,6 @@
 	vertical-align: bottom;
 }
 
-.dropdown-select {
-	padding-right: 24px;
-}
 
 .icon-button:before {
 	background: transparent 0 0 no-repeat;
@@ -30,99 +27,19 @@
 	width: 12px;
 }
 
-.dropdown-select.icon-button:before {
-	margin-right: 4px;
+.button:focus,
+.button:hover {
+ 	text-decoration: none;
 }
 
-.dropdown-select:after {
-	background-position: -103px 10px;
+.caret {
 	border-left: 1px solid;
-	content: '';
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: 22px;
-	width: 16px;
+	position: relative;
+	right: -6px;
 }
 
-.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after {
-	background-position: -103px -10px;
-}
-
-.buttons, .buttons .button {
-	float: left;
-}
-
-.buttons .button:before {
-	margin: 3px 0 0 2px;
-}
-
-.buttons .button, .dropdown-select {
-	margin-right: 5px;
-}
-
-.jumpbox .dropdown-select {
-	margin: 0;
-}
-
-/* Big button images */
-.reply-icon:before, .pmreply-icon:before					{ background-position: -20px 0; }
-.reply-icon:hover:before, .pmreply-icon:hover:before		{ background-position: -20px -20px; }
-
-.post-icon:before, .newpm-icon:before, .reply-all:before	{ background-position: 0 0; }
-.post-icon:hover:before,
-.newpm-icon:hover:before,
-.reply-all:hover:before										{ background-position: 0 -20px; }
-
-.locked-icon:before											{ background-position: -60px 0; }
-.locked-icon:hover:before									{ background-position: -60px -20px; }
-
-.forwardpm-icon:before										{ background-position: -40px 0; }
-.forwardpm-icon:hover:before								{ background-position: -40px -20px; }
-
-.modtools-icon {
-	font-size: 0;
-}
-
-.tools-icon:before, .modtools-icon:before, .search-icon:before, .search-adv-icon:before {
-	background-position: -80px 0;
-	height: 16px;
-	margin-top: 2px;
-	width: 16px;
-}
-
-.dropdown-visible .tools-icon:before,
-.nojs .dropdown-container:hover .tools-icon:before			{ background-position: -80px -20px; }
-
-.search-icon:before											{ background-position: -245px 0; }
-.search-icon:hover:before									{ background-position: -245px -20px; }
-
-.search-adv-icon:before										{ background-position: -265px 0; }
-.search-adv-icon:hover:before								{ background-position: -265px -20px; }
-
-.modtools-icon:before										{ background-position: -225px 0; }
-.dropdown-visible .modtools-icon:before,
-.nojs .dropdown-container:hover .modtools-icon:before		{ background-position: -225px -20px; }
-
-/* Icon images
----------------------------------------- */
-.small-icon {
-	background-position: 0 50%;
-	background-repeat: no-repeat;
-	background-image: none;
-}
-
-.small-icon > a {
-	display: inline-block;
-	padding: 0 0 0 18px;
-}
-
-ul.linklist.bulletin > li.small-icon:before {
-	display: none;
-}
-
-.dropdown .small-icon > a {
-	display: block;
+.caret i {
+	vertical-align: top;
 }
 
 /* Poster contact icons

phpBB/styles/prosilver/theme/colours.css

@@ -38,6 +38,10 @@ hr {
 
 .search-header {
 	box-shadow: 0 0 10px #0075B0;
+/* Notification mark read link */
+.dropdown-extended a.mark_read {
+	background-color: #FFFFFF;
+}
 }
 
 /* Round cornered boxes and backgrounds
@@ -300,10 +304,6 @@ a:hover	{ color: #D31141; }
 	color: #A8D8FF;
 }
 
-/* Notification mark read link */
-.dropdown-extended a.mark_read {
-	background-color: #FFFFFF;
-}
 
 /* Post body links */
 .postlink {
@@ -653,10 +653,6 @@ Colours and backgrounds for buttons.css
 	color: #D31141;
 }
 
-.dropdown-select {
-	color: #536482;
-}
-
 .button:hover, .dropdown-visible .dropdown-select, .nojs .dropdown-container:hover .dropdown-select {
 	border-color: #0A8ED0;
 	background-color: #FFFFFF; /* Old browsers */ /* FF3.6+ */
@@ -666,8 +662,8 @@ Colours and backgrounds for buttons.css
 	text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2);
 }
 
-.dropdown-select:after	{ border-color: #DADADA; }
-.dropdown-select:hover	{ border-color: #C7C3BF; }
+.caret	{ border-color: #DADADA; }
+.caret	{ border-color: #C7C3BF; }
 
 .dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
 	border-color: #A6B2BA;

phpBB/styles/prosilver/theme/common.css

@@ -1047,10 +1047,6 @@ ul.linklist:after,
 	display: block;
 }
 
-.hidden {
-	display: none;
-}
-
 .smilies {
 	vertical-align: text-bottom;
 }

phpBB/styles/prosilver/theme/links.css

@@ -45,8 +45,6 @@ li.breadcrumbs span:first-child > a {
 	z-index: 2;
 	right: 0;
 	top: 50%;
-	width: 30px;
-	height: 40px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
@@ -57,7 +55,7 @@ li.breadcrumbs span:first-child > a {
 }
 
 .dropdown-extended a.mark_read:hover {
-	width: 40px;
+	width: 50px;
 }
 
 .jumpbox-cat-link,

phpBB/styles/prosilver/theme/utilities.css

@@ -1,16 +1,26 @@
 /* --------------------------------------------------------------
-    $Utilities
+	$Utilities
 -------------------------------------------------------------- */
 
 .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
 }
 
 .clearfix:before,
@@ -21,8 +31,8 @@
 .container-fluid:after,
 .row:before,
 .row:after {
-    content: " ";
-    display: table;
+	content: " ";
+	display: table;
 }
 .clearfix:after,
 .container:after,
@@ -30,9 +40,9 @@
 .row:after { clear: both }
 
 .center-block {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .pull-right { float: right !important }
@@ -42,16 +52,16 @@
 .invisible { visibility: hidden }
 
 .text-hide {
-    font: 0/0 a;
-    color: transparent;
-    text-shadow: none;
-    background-color: transparent;
-    border: 0;
+	font: 0/0 a;
+	color: transparent;
+	text-shadow: none;
+	background-color: transparent;
+	border: 0;
 }
 
-/*.hidden {
-    display: none !important;
-    visibility: hidden !important;
-}*/
+.hidden {
+	display: none !important;
+	visibility: hidden !important;
+}
 
 .affix { position: fixed }