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

Timestamp:

08/26/2021 10:58:30 PM (3 years ago)

Author:

coffee2code

Message:

Developer, Dashicons: Increase sizes for icons and captions to facilitate imminently longer captions.

• Increase font for icons
• Increase font for icon labels
• Increase spacing around icons

Props dufresnesteven, coffee2code.
See #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

@@ -94 +94 @@
 
     #iconlist {
-        $size: 40px;
+        $size: 96px;
+        $iconsize: 60px;
+        $gutter: 10px;
+
         margin-top: 1.5em;
+
+        h4 {
+            padding-left: $gutter;
+        }
 
         .dashicons {
             position: relative;
             box-sizing: content-box;
-            padding: 10px;
+            padding: $gutter;
+            margin-bottom: $gutter * 2;
             width: $size;
             height: $size;
             overflow: hidden;
             white-space: nowrap;
-            font-size: $size;
+            font-size: $iconsize;
             line-height: 1;
             cursor: pointer;
@@ -111 +119 @@
             &:before {
                 margin-right: $size;
+                position: relative;
+                left: 20px;
             }
 
@@ -116 +126 @@
                 content: attr(alt);
                 display: block;
-                font-size: 9px;
+                font-size: 14px;
                 color: #999;
                 text-align: center;
+                margin-top: $gutter;
             }