Changeset 11206 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

Timestamp:

08/26/2021 11:34:14 PM (3 years ago)

Author:

coffee2code

Message:

Developer, Dashicons: Use human-readable labels for icons instead of character codes.

Makes it clear when scanning grid what a particular icon represents and facilitates in-page (ctrl-f) browser searches for finding an icon.

• Outputs icons as list items instead of divs
• Reformats output markup of dashicons to avoid use of hidden text
• Embeds keywords and character codes as data attributes
• Preserves filtered keyword search

Props dufresnesteven, ryelle, coffee2code.
Fixes #5014

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

@@ -104 +104 @@
         }
 
+        ul {
+            margin: 0;
+        }
+
         .dashicons {
             position: relative;
@@ -111 +115 @@
             width: $size;
             height: $size;
-            overflow: hidden;
             white-space: nowrap;
             font-size: $iconsize;
@@ -117 +120 @@
             cursor: pointer;
 
-            &:before {
-                margin-right: $size;
-                position: relative;
-                left: 20px;
-            }
-
-            &:after {
-                content: attr(alt);
+            &:hover {
+                color: #d54e21;
+            }
+
+            span {
                 display: block;
                 font-size: 14px;
-                color: #999;
+                color: #888;
+                margin-top: $gutter;
                 text-align: center;
-                margin-top: $gutter;
-            }
-
-            &:hover {
-                color: #d54e21;
+                word-wrap: break-word;
+                white-space: normal;
             }
         }