Changeset 31952

Timestamp:

04/01/2015 12:21:08 PM (10 years ago)

Author:

ocean90

Message:

Themes: Improve focus styling of add-new-theme link.

props celloexpressions, mrahmadawais.
fixes #31203.

Location:

trunk/src/wp-admin/css

Files:

• colors/_admin.scss (modified) (1 diff)
• themes.css (modified) (4 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -434 +434 @@
 
 .theme-browser .theme.active .theme-name,
-.theme-browser .theme.add-new-theme:hover:after {
+.theme-browser .theme.add-new-theme a:hover:after,
+.theme-browser .theme.add-new-theme a:focus:after {
     background: $highlight-color;
 }
 
-.theme-browser .theme.add-new-theme:hover span:after {
+.theme-browser .theme.add-new-theme a:hover span:after,
+.theme-browser .theme.add-new-theme a:focus span:after {
     color: $highlight-color;
 }

trunk/src/wp-admin/css/themes.css

@@ -311 +311 @@
 }
 
-.theme-browser .theme.add-new-theme:after {
+.theme-browser .theme.add-new-theme a:after {
     display: block;
     content: '';
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-    opacity: 1;
     background: transparent;
     background: rgba(0, 0, 0, 0);
@@ -323 +321 @@
     right: 0;
     bottom: 0;
-    padding: 10% 0 0 0;
+    padding: 0;
     text-shadow: none;
     border: 5px dashed #d5d2ca;
     border: 5px dashed rgba(0, 0, 0, 0.1);
-    -webkit-transition: opacity 0.2s ease-in-out;
-    transition: opacity 0.2s ease-in-out;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -362 +358 @@
 }
 
-.theme-browser .theme.add-new-theme:hover .theme-screenshot,
-.theme-browser .theme.add-new-theme:focus .theme-screenshot {
+.theme-browser .theme.add-new-theme a:hover .theme-screenshot,
+.theme-browser .theme.add-new-theme a:focus .theme-screenshot {
     background: none;
 }
 
-.theme-browser .theme.add-new-theme:hover span:after,
-.theme-browser .theme.add-new-theme:focus span:after {
+.theme-browser .theme.add-new-theme a:hover span:after,
+.theme-browser .theme.add-new-theme a:focus span:after {
     background: #fff;
     color: #0073aa;
 }
 
-.theme-browser .theme.add-new-theme:hover:after,
-.theme-browser .theme.add-new-theme:focus:after {
+.theme-browser .theme.add-new-theme a:hover:after,
+.theme-browser .theme.add-new-theme a:focus:after {
     border-color: transparent;
     color: #fff;
@@ -389 +385 @@
     position: relative;
     top: 0;
-    margin-top: -10%;
-    margin-bottom: 10%;
-}
-
-.theme-browser .theme.add-new-theme:hover .theme-name,
-.theme-browser .theme.add-new-theme:focus .theme-name {
+    margin-top: -18px;
+    padding-top: 0;
+    padding-bottom: 48px;
+}
+
+.theme-browser .theme.add-new-theme a:hover .theme-name,
+.theme-browser .theme.add-new-theme a:focus .theme-name {
     color: #fff;
     z-index: 2;