From df2c74e87841d7df974b909072c4f6b50ac08b90 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Wed, 18 Mar 2015 01:57:18 +0000
Subject: [PATCH] Press This: fix styling on the Tools screen. Props
 Michael-Arestad, see #31462.

git-svn-id: https://develop.svn.wordpress.org/trunk@31806 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/forms.css | 132 ++++++++++++++++++-------------------
 src/wp-admin/tools.php     |  23 +++----
 2 files changed, 75 insertions(+), 80 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 256a51f795..133713fbfd 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -674,17 +674,46 @@ table.form-table td .updated p {
 	line-height: 24px;
 }
 
-.pressthis {
-	margin: 20px 0;
+/* Card styles */
+
+.card {
+	position: relative;
+	margin-top: 20px;
+	padding: 0.7em 2em 1em;
+	min-width: 255px;
+	max-width: 520px;
+	border: 1px solid #e5e5e5;
+	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+	background: #fff;
+}
+
+/* Press this styles */
+
+.pressthis h4 {
+	margin: 2em 0 1em;
+}
+
+.pressthis textarea {
+	width: 100%;
+	font-size: 1em;
+}
+
+#pressthis-code-wrap {
+	overflow: auto;
+}
+
+.pressthis-bookmarklet-wrapper {
+	margin: 20px 0 8px;
 	vertical-align: top;
 	position: relative;
 	z-index: 1;
 }
 
-.pressthis a,
-.pressthis a:hover,
-.pressthis a:focus,
-.pressthis a:active {
+.pressthis-bookmarklet,
+.pressthis-bookmarklet:hover,
+.pressthis-bookmarklet:focus,
+.pressthis-bookmarklet:active {
 	display: inline-block;
 	position: relative;
 	cursor: move;
@@ -699,35 +728,11 @@ table.form-table td .updated p {
 	text-decoration: none;
 }
 
-.pressthis a:active {
+.pressthis-bookmarklet:active {
 	outline: none;
 }
 
-.pressthis a:hover:after {
-	-webkit-transform: skew(20deg) rotate(9deg);
-	-ms-transform: skew(20deg) rotate(9deg);
-	transform: skew(20deg) rotate(9deg);
-	-webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
-	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
-}
-
-.pressthis a span {
-	display: inline-block;
-	margin: 0px 0 0;
-	padding: 0px 12px 8px 9px;
-}
-
-.pressthis a span:before {
-	color: #777;
-	font: normal 20px/1 'dashicons';
-	content:'\f157';
-	position: relative;
-	display: inline-block;
-	top: 4px;
-	margin-right: 4px;
-}
-
-.pressthis a:after {
+.pressthis-bookmarklet:after {
 	content: '';
 	width: 70%;
 	height: 55%;
@@ -743,62 +748,55 @@ table.form-table td .updated p {
 	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 }
 
-.pressthis .button {
+.pressthis-bookmarklet:hover:after {
+	-webkit-transform: skew(20deg) rotate(9deg);
+	-ms-transform: skew(20deg) rotate(9deg);
+	transform: skew(20deg) rotate(9deg);
+	-webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
+	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
+}
+
+.pressthis-bookmarklet span {
+	display: inline-block;
+	margin: 0px 0 0;
+	padding: 0px 12px 8px 9px;
+}
+
+.pressthis-bookmarklet span:before {
+	color: #777;
+	font: normal 20px/1 'dashicons';
+	content:'\f157';
+	position: relative;
+	display: inline-block;
+	top: 4px;
+	margin-right: 4px;
+}
+
+.pressthis-js-toggle {
 	margin-left: 10px;
 	padding: 0;
 	height: auto;
 	vertical-align: top;
 }
 
-.pressthis button .dashicons {
+.pressthis-js-toggle .dashicons {
 	margin: 5px 8px 6px 7px;
 	color: #777;
 }
 
-.press-this-install {
-	margin: 20px 0 0 0;
-	padding: 0.7em 2em 1em;
-	max-width: 520px;
-}
-
-.press-this-install textarea {
-	width: 100%;
-	font-size: 1em;
-}
-
-.press-this-install h4 {
-	margin: 2em 0 1em;
-}
-
 /* to override the button class being applied */
-.pressthis .button.button {
+.pressthis-js-toggle.button.button {
 	margin-left: 10px;
 	padding: 0;
 	height: auto;
 	vertical-align: top;
 }
 
-.pressthis button .dashicons {
+.pressthis-js-toggle .dashicons {
 	margin: 5px 8px 6px 7px;
 	color: #777;
 }
 
-.press-this-install {
-	margin: 20px 0 0 0;
-	padding: 0.7em 2em 1em;
-	max-width: 520px;
-}
-
-.press-this-install textarea {
-	width: 100%;
-	font-size: 1em;
-}
-
-.press-this-install h4 {
-	margin: 2em 0 1em;
-}
-
-
 /*------------------------------------------------------------------------------
   20.0 - Settings
 ------------------------------------------------------------------------------*/
diff --git a/src/wp-admin/tools.php b/src/wp-admin/tools.php
index 0b28f3e2a7..be12268732 100644
--- a/src/wp-admin/tools.php
+++ b/src/wp-admin/tools.php
@@ -36,28 +36,26 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 <h2><?php echo esc_html( $title ); ?></h2>
 
 <?php if ( current_user_can('edit_posts') ) : ?>
-<div class="tool-box">
-	<h3 class="title"><?php _e('Press This') ?></h3>
-	<div class="postbox press-this-install">
-		<p><?php _e( 'Press This is a little app that lets you grab bits of the web and create new posts with ease.' );?></p>
-		<p><?php _e( 'Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.' ); ?></p>
-	</div>
+<div class="card pressthis">
+	<h3><?php _e('Press This') ?></h3>
+	<p><?php _e( 'Press This is a little app that lets you grab bits of the web and create new posts with ease.' );?></p>
+	<p><?php _e( 'Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.' ); ?></p>
+
 
 	<form>
-	<div class="postbox press-this-install">
 		<h3><?php _e( 'Install Press This' ); ?></h3>
 		<h4><?php _e( 'Bookmarklet' ); ?></h4>
 		<p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?></p>
 
-		<p class="pressthis">
-			<a class="" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ) ?></span></a>
-			<button type="button" class="button button-secondary js-show-pressthis-code-wrap" aria-expanded="false" aria-controls="pressthis-code-wrap">
+		<p class="pressthis-bookmarklet-wrapper">
+			<a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
+			<button type="button" class="button button-secondary pressthis-js-toggle js-show-pressthis-code-wrap" aria-expanded="false" aria-controls="pressthis-code-wrap">
 				<span class="dashicons dashicons-clipboard"></span>
 				<span class="screen-reader-text"><?php _e( 'Copy &#8220;Press This&#8221; bookmarklet code' ) ?></span>
 			</button>
 		</p>
 
-		<div class="hidden js-pressthis-code-wrap" id="pressthis-code-wrap">
+		<div class="hidden js-pressthis-code-wrap clear" id="pressthis-code-wrap">
 			<p id="pressthis-code-desc">
 				<?php _e( 'If you can&#8217;t drag the bookmarklet to your bookmarks, copy the following code and create a new bookmark. Paste the code into the new bookmark&#8217;s URL field.' ) ?>
 			</p>
@@ -92,7 +90,6 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
 			});
 		</script>
-	</div>
 	</form>
 </div>
 <?php
@@ -102,7 +99,7 @@ if ( current_user_can( 'import' ) ) :
 $cats = get_taxonomy('category');
 $tags = get_taxonomy('post_tag');
 if ( current_user_can($cats->cap->manage_terms) || current_user_can($tags->cap->manage_terms) ) : ?>
-<div class="tool-box">
+<div class="card">
     <h3 class="title"><?php _e( 'Categories and Tags Converter' ) ?></h3>
     <p><?php printf( __('If you want to convert your categories to tags (or vice versa), use the <a href="%s">Categories and Tags Converter</a> available from the Import screen.'), 'import.php' ); ?></p>
 </div>