Standardize transition-animations on modal close/arrow buttons.

props celloexpressions.
fixes #29021.
Built from https://develop.svn.wordpress.org/trunk@29365


git-svn-id: http://core.svn.wordpress.org/trunk@29141 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.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,

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,

wp-admin/css/customize-controls-rtl.css

@@ -176,8 +176,8 @@ body {
 	border-left: 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-left: 1px solid #ddd;
 	cursor: pointer;
-	-webkit-transition: right ease-in-out .18s, color ease-in .1s;
-	transition: right ease-in-out .18s, color ease-in .1s;
+	-webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
+	transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 }
 
 .collapsed .control-panel-back {

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 {

wp-admin/css/themes-rtl.css

@@ -427,6 +427,8 @@
 	border: 0;
 	border-right: 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-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;
 }
 
 .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,

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,

wp-includes/css/media-views-rtl.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-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;
 }
 
 .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,

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,