Changeset 31952

Timestamp:

04/01/2015 12:21:08 PM (11 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;