From 2c320cc7f3b9a20f22edeadf5583b8d45b6aaec3 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Sat, 2 Aug 2014 22:01:49 +0000
Subject: [PATCH] Standardize transition-animations on modal close/arrow
 buttons.

props celloexpressions.
fixes #29021.

git-svn-id: https://develop.svn.wordpress.org/trunk@29365 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css             | 10 ++++++++++
 src/wp-admin/css/customize-controls.css |  8 ++++----
 src/wp-admin/css/themes.css             | 11 +++++++++--
 src/wp-includes/css/media-views.css     | 11 +++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 0cad481685..41c3e49ca2 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2525,15 +2525,25 @@ body.index-php .tb-close-icon {
 	line-height: 48px;
 	width: 48px;
 	height: 48px;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
+body.plugin-install-php .tb-close-icon:focus,
 body.plugin-install-php .tb-close-icon:hover,
+body.import-php .tb-close-icon:focus,
 body.import-php .tb-close-icon:hover,
+body.plugins-php .tb-close-icon:focus,
 body.plugins-php .tb-close-icon:hover,
+body.update-core-php .tb-close-icon:focus,
 body.update-core-php .tb-close-icon:hover,
+body.index-php .tb-close-icon:focus,
 body.index-php .tb-close-icon:hover {
 	background: #0074a2;
 	color: #fff;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 body.plugin-install-php .tb-close-icon:before,
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 3867466177..cdc4cb4664 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -176,8 +176,8 @@ body {
 	border-right: 1px solid #ddd;
 	color: #444;
 	cursor: pointer;
-	-webkit-transition: color ease-in .1s;
-	transition: color ease-in .1s;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .control-panel-back {
@@ -192,8 +192,8 @@ body {
 	background: #eee;
 	border-right: 1px solid #ddd;
 	cursor: pointer;
-	-webkit-transition: left ease-in-out .18s, color ease-in .1s;
-	transition: left ease-in-out .18s, color ease-in .1s;
+	-webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
+	transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .collapsed .control-panel-back {
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 99a52d3f00..1df3d9f436 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -427,6 +427,8 @@
 	border: 0;
 	border-left: 1px solid #ddd;
 	background-color: transparent;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .theme-overlay .theme-header .close:hover:before,
@@ -454,6 +456,8 @@
 	text-align: center;
 	border: 0;
 	border-right: 1px solid #ddd;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .theme-overlay .theme-header .close:hover,
@@ -464,6 +468,9 @@
 .theme-overlay .theme-header .left:focus {
 	background: #0074a2;
 	color: #fff;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 .theme-overlay .theme-header .left.disabled,
@@ -1383,8 +1390,8 @@ body.full-overlay-active {
 	color: #444;
 	cursor: pointer;
 	text-decoration: none;
-	-webkit-transition: color ease-in .1s;
-	transition: color ease-in .1s;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .theme-install-overlay .close-full-overlay:hover,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 589f9e3619..4fcb24458b 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -147,6 +147,8 @@
 	height: 48px;
 	z-index: 1000;
 	color: #777;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .media-modal-close span.media-modal-icon {
@@ -1082,8 +1084,8 @@
 	background: #1e8cbe;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
-	-webkit-transition:         width 300ms;
-	transition:         width 300ms;
+	-webkit-transition: width 300ms;
+	transition: width 300ms;
 }
 
 .media-uploader-status .media-progress-bar {
@@ -2683,6 +2685,8 @@
 	text-align: center;
 	border: 0;
 	border-left: 1px solid #ddd;
+	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+    transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .edit-attachment-frame .edit-media-header .left {
@@ -2734,6 +2738,9 @@
 .edit-attachment-frame .edit-media-header .left:focus {
 	background: #0074a2;
 	color: #fff;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 .edit-attachment-frame .media-frame-content,