Changeset 32475

Timestamp:

05/09/2015 08:34:13 PM (9 years ago)

Author:

ocean90

Message:

Improve focus styles for:

• Welcome Panel dismiss link
• Welcome Panel assembled links
• At a Glance links
• Recently Published/Publishing Soon and latest Comments links in the Dashboard Activity box

props afercia.
fixes #32287, #32288, #32289, #32292.

Location:

trunk/src/wp-admin/css

Files:

• common.css (modified) (3 diffs)
• dashboard.css (modified) (10 diffs)

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

@@ -738 +738 @@
 
 /* @todo can we combine these into a class or use an existing dashicon one? */
-#welcome-panel.welcome-panel .welcome-panel-close:before,
+.welcome-panel .welcome-panel-close:before,
 .tagchecklist span a:before,
 #bulk-titles div a:before,
@@ -745 +745 @@
     color: #b4b9be;
     content: '\f153';
-    display: block !important;
+    display: block;
     font: normal 16px/1 'dashicons';
     speak: none;
-    height: 20px;
+    height: 16px;
     text-align: center;
     width: 20px;
-    -webkit-font-smoothing: antialiased !important;
-}
-
-#welcome-panel.welcome-panel .welcome-panel-close:before {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.welcome-panel .welcome-panel-close:before {
     margin: 0;
 }
@@ -763 +764 @@
 }
 
-#welcome-panel.welcome-panel .welcome-panel-close:hover:before,
+.welcome-panel .welcome-panel-close:hover:before,
+.welcome-panel .welcome-panel-close:focus:before,
 .tagchecklist span a:hover:before,
 #bulk-titles div a:hover:before {

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

@@ -147 +147 @@
 .welcome-panel .welcome-panel-close {
     position: absolute;
-    top: 5px;
+    top: 10px;
     right: 10px;
-    padding: 20px 15px 0 3px;
+    padding: 10px 15px 10px 21px;
     font-size: 13px;
+    line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
     text-decoration: none;
-    line-height: 1;
-}
-
-#welcome-panel.welcome-panel .welcome-panel-close:before {
+}
+
+.welcome-panel .welcome-panel-close:before {
     position: absolute;
-    left: -18px;
-    margin-top: -2px;
+    top: 10px;
+    left: 0;
     -webkit-transition: all .1s ease-in-out;
     transition: all .1s ease-in-out;
@@ -178 +178 @@
 .welcome-panel .welcome-panel-column-container {
     clear: both;
-    overflow: hidden;
     position: relative;
 }
@@ -206 +205 @@
 
 .welcome-panel .welcome-icon {
-    display: block;
-    padding: 0 0 8px;
     background: transparent !important;
 }
@@ -266 +263 @@
     line-height: 16px;
     list-style-type: none;
+    padding: 0 0 8px;
 }
 
@@ -329 +327 @@
 #dashboard_right_now ul {
     margin: 0;
-    overflow: hidden;
+    /* contain floats but don't use overflow: hidden */
+    display: inline-block;
+    width: 100%;
 }
 
@@ -339 +339 @@
 
 #dashboard_right_now .inside {
-    overflow: hidden;
     padding: 0;
 }
 
 #dashboard_right_now .main {
-    overflow: hidden;
     padding: 0 12px 11px;
 }
@@ -659 +657 @@
 #future-posts li,
 #published-posts li {
-    overflow: hidden;
     margin-bottom: 8px;
 }
@@ -665 +662 @@
 #future-posts ul span,
 #published-posts ul span {
+    display: inline-block;
+    margin-right: 5px;
+    min-width: 150px;
     color: #777;
-    float: left;
-    margin-right: 8px;
-    min-width: 150px;
 }
 
@@ -918 +915 @@
 
 .dashboard-comment-wrap {
-    overflow: hidden;
     word-wrap: break-word;
 }
@@ -1096 +1092 @@
     .welcome-panel .welcome-panel-close {
         overflow: hidden;
-        text-indent: 100%;
+        text-indent: 40px;
         white-space: nowrap;
         width: 20px;
         height: 20px;
-        right: 0;
         padding: 5px;
+        top: 5px;
+        right: 5px;
     }
 
     /* Make the close icon larger for tappability. */
-    #welcome-panel.welcome-panel .welcome-panel-close:before {
+    .welcome-panel .welcome-panel-close:before {
         font-size: 20px;
-        margin: 0;
-    }
-}
+        top: 5px;
+        left: -35px;
+    }
+}