Changeset 35616

Timestamp:

11/11/2015 09:53:54 PM (9 years ago)

Author:

wonderboymusic

Message:

Help/About: unify tab styling.

Props afercia.
Fixes #34214.

Location:

trunk/src/wp-admin

Files:

• credits.php (modified) (1 diff)
• css/about.css (modified) (2 diffs)
• css/common.css (modified) (6 diffs)
• freedoms.php (modified) (1 diff)

trunk/src/wp-admin/credits.php

@@ -26 +26 @@
 
 <h2 class="nav-tab-wrapper">
-    <a href="about.php" class="nav-tab">
-        <?php _e( 'What&#8217;s New' ); ?>
-    </a><a href="credits.php" class="nav-tab nav-tab-active">
-        <?php _e( 'Credits' ); ?>
-    </a><a href="freedoms.php" class="nav-tab">
-        <?php _e( 'Freedoms' ); ?>
-    </a>
+    <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
+    <a href="credits.php" class="nav-tab nav-tab-active"><?php _e( 'Credits' ); ?></a>
+    <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
 </h2>
 

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

@@ -80 +80 @@
 /* Tabs */
 
-.about-wrap h2.nav-tab-wrapper {
-    padding-left: 6px;
-}
-
 .about-wrap h2 .nav-tab {
-    padding: 4px 15px 6px;
-    margin: 0 3px -1px 0;
     font-size: 18px;
-    vertical-align: top;
-    border-width: 1px;
-    white-space: nowrap;
 }
 
@@ -430 +421 @@
     }
 
-    .about-wrap h2.nav-tab-wrapper {
-        padding-left: 0;
-        border-bottom: 0;
-    }
-
-    .about-wrap h2 .nav-tab {
-        margin-top: 10px;
-        margin-right: 10px;
-        border-bottom: 1px solid #ccc;
-    }
-
     .about-wrap .feature-section .svg-container {
         padding-top: 20px;

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

@@ -1998 +1998 @@
 
 .nav-tab {
+    display: inline-block;
     border: 1px solid #ccc;
     border-bottom: none;
+    margin: 0 5px 0 0;
+    padding: 6px 10px;
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 600;
     background: #e4e4e4;
     color: #555;
-}
-
-.nav-tab,
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+h3 .nav-tab, /* Back-compat for pre-4.4 */
 .nav-tab-small .nav-tab {
-    display: inline-block;
-    margin: -4px 4px -1px 0;
     padding: 5px 14px;
     font-size: 12px;
     line-height: 16px;
-    text-decoration: none;
 }
 
@@ -2020 +2025 @@
 }
 
+.nav-tab-active,
+.nav-tab:focus:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
 .nav-tab-active {
+    margin-bottom: -1px;
     color: #464646;
 }
@@ -2026 +2038 @@
 .nav-tab-active,
 .nav-tab-active:hover,
-.nav-tab-active:focus {
+.nav-tab-active:focus,
+.nav-tab-active:focus:active {
     border-bottom: 1px solid #f1f1f1;
     background: #f1f1f1;
@@ -2032 +2045 @@
 }
 
+/* @todo: consider to use flexbox to reset white space between inline-block elements. */
 h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
@@ -2037 +2051 @@
     border-bottom: 1px solid #ccc;
     margin: 0;
-    padding: 9px 15px 0 10px;
-    font-size: 23px;
-    font-weight: 400;
-    line-height: 29px;
-}
-
-h1 .nav-tab, /* Back-compat for pre-4.4 */
-h2 .nav-tab {
-    padding: 6px 10px;
-    font-weight: 600;
-    font-size: 15px;
-    line-height: 24px;
+    padding: 9px 15px 0 6px;
+    font-size: 1px; /* normalize white space between inline-block elements */
+    line-height: inherit;
 }
 
@@ -3598 +3603 @@
         overflow-x: hidden;
     }
+
+    h1.nav-tab-wrapper,
+    .wrap h2.nav-tab-wrapper,
+    h3.nav-tab-wrapper {
+        padding-left: 0;
+        border-bottom: 0;
+    }
+
+    h1 .nav-tab,
+    h2 .nav-tab,
+    h3 .nav-tab {
+        margin-top: 10px;
+        margin-right: 10px;
+        border-bottom: 1px solid #ccc;
+    }
 }
 

trunk/src/wp-admin/freedoms.php

@@ -25 +25 @@
 
 <h2 class="nav-tab-wrapper">
-    <a href="about.php" class="nav-tab">
-        <?php _e( 'What&#8217;s New' ); ?>
-    </a><a href="credits.php" class="nav-tab">
-        <?php _e( 'Credits' ); ?>
-    </a><a href="freedoms.php" class="nav-tab nav-tab-active">
-        <?php _e( 'Freedoms' ); ?>
-    </a>
+    <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
+    <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
+    <a href="freedoms.php" class="nav-tab nav-tab-active"><?php _e( 'Freedoms' ); ?></a>
 </h2>