Changeset 35200

Timestamp:

10/15/2015 04:45:14 PM (9 years ago)

Author:

helen

Message:

Circular focus styling for expand/collapse arrows.

Affects postboxes, widgets, and nav menus, all in the admin.

props grvrulz for the initial patch.
see #33808.

Location:

trunk/src/wp-admin/css

Files:

• common.css (modified) (4 diffs)
• nav-menus.css (modified) (2 diffs)

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

@@ -2801 +2801 @@
 }
 
-/* @todo: these seem misplaced */
-.js .meta-box-sortables .postbox:hover .handlediv {
-    margin-right: 0 !important;
-}
-
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
 .js .meta-box-sortables .postbox .toggle-indicator:before {
-    position: relative;
-    left: -1px; /* fix the dashicon horizontal alignment */
+    content: "\f142";
     display: inline-block;
     font: normal 20px/1 dashicons;
     speak: none;
-    padding: 8px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -2820 +2813 @@
 }
 
+.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
+.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
+    content: "\f140";
+}
+
 .js .sidebar-name .sidebar-name-arrow:before {
     padding: 10px;
@@ -2834 +2832 @@
 }
 
-/* Show the arrow only on hover */
-.js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .toggle-indicator:before {
-    content: "\f142";
-}
-
-.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
-    content: "\f140";
+.js .postbox .handlediv .toggle-indicator:before {
+    margin-top: 4px;
+    width: 20px;
+    border-radius: 50%;
+    text-indent: -1px; /* account for the dashicon alignment */
+}
+
+.js .postbox .handlediv:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.js .postbox .handlediv:focus .toggle-indicator:before {
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
 }
 
@@ -2975 +2983 @@
 
 .widget-top a.widget-action:after {
-    padding: 12px 12px 11px;
+    padding: 1px 2px 1px 0px;
+    margin-top: 10px;
+    margin-right: 10px;
+    border-radius: 50%;
 }
 
 .widget-top a.widget-action:focus:after {
-    -webkit-box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
-    box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
-}
-
-.nav-menus-php .item-edit:before {
-    line-height: 2.1;
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30,140,190,.8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30,140,190,.8);
 }
 

trunk/src/wp-admin/css/nav-menus.css

@@ -580 +580 @@
 .item-type {
     display: inline-block;
-    padding: 12px 10px;
+    padding: 12px 16px;
     color: #666;
     font-size: 12px;
@@ -617 +617 @@
     overflow: hidden;
     white-space: nowrap;
+}
+
+.nav-menus-php .item-edit:before {
+    margin-top: 10px;
+    margin-left: 4px;
+    width: 20px;
+    border-radius: 50%;
+    text-indent: -1px; /* account for the dashicon alignment */
+}
+
+.nav-menus-php .item-edit:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.nav-menus-php .item-edit:focus:before {
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
 }