Changeset 40358 for trunk

Timestamp:

03/31/2017 04:50:42 PM (9 years ago)

Author:

afercia

Message:

Administration: Fix minor misalignments caused by the button-link CSS class.

After [40059] the CSS class button-link uses text-align: left by default.
This change now requires to limit as much as possible the use of button-link
to controls that should really look like links and to explicitly set
text-align: center in a few other cases.

Fixes #39983.

Location:

trunk/src

Files:

• wp-admin/css/customize-nav-menus.css (modified) (3 diffs)
• wp-includes/css/media-views.css (modified) (2 diffs)
• wp-includes/css/wp-auth-check.css (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

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

@@ -151 +151 @@
         overflow: hidden;
         cursor: pointer;
+        text-align: center;
 }
 
@@ -522 +523 @@
         outline: none;
         cursor: pointer;
+        text-align: center;
 }
 
@@ -613 +615 @@
         outline: none;
         cursor: pointer;
+        text-align: center;
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -184 +184 @@
         width: 50px;
         height: 50px;
+        margin: 0;
         padding: 0;
+        border: 1px solid transparent;
+        background: none;
+        color: #666;
         z-index: 1000;
+        cursor: pointer;
+        outline: none;
         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
         transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
-.media-modal-close.button-link {
-        text-decoration: none;
-}
-
+.media-modal-close:hover,
 .media-modal-close:active {
-        -webkit-box-shadow: none;
-        box-shadow: none;
+        color: #00a0d2;
+}
+
+.media-modal-close:focus {
+        color: #00a0d2;
+        border-color: #5b9dd9;
+        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
 }
 
@@ -210 +219 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        color: #666;
-}
-
-.media-modal-close:hover .media-modal-icon:before {
-        color: #00a0d2;
-}
-
-.media-modal-close:active {
-        outline: 0;
 }
 

trunk/src/wp-includes/css/wp-auth-check.css

@@ -94 +94 @@
         color: #72777c;
         text-decoration: none;
+        text-align: center;
 }
 

trunk/src/wp-includes/media-template.php

@@ -164 +164 @@
         <script type="text/html" id="tmpl-media-modal">
                 <div class="<?php echo $class; ?>">
-                        <button type="button" class="button-link media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
+                        <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
                         <div class="media-modal-content"></div>
                 </div>