Changeset 40653

Timestamp:

05/12/2017 05:50:00 PM (9 years ago)

Author:

afercia

Message:

Customize: Make the media control buttons natural-width.

Natural-width buttons are better for translations, and don't feel as
overpowering as the half-width (and full-width) buttons.

Props melchoyce, timmydcrawford, afercia.
Fixes #40220.

Location:

trunk/src/wp-admin/css

Files:

• customize-controls.css (modified) (5 diffs)
• widgets.css (modified) (1 diff)

trunk/src/wp-admin/css/customize-controls.css

@@ -711 +711 @@
 }
 
-.customize-control .thumbnail-image {
+.customize-control .thumbnail-image,
+.customize-control-header .current,
+.customize-control .wp-media-wrapper.wp-video {
         line-height: 0;
 }
@@ -933 +935 @@
 /* Media controls */
 
-.customize-control .attachment-media-view .actions {
-        margin-top: 8px;
-}
-
-.customize-control-header .current {
-        margin-bottom: 8px;
+.customize-control .actions .button {
+        margin-top: 12px;
 }
 
@@ -966 +964 @@
 .customize-control-header button.new,
 .customize-control-header button.remove {
+        width: auto;
+        height: auto;
         white-space: normal;
-        width: 48%;
-        height: auto;
 }
 
@@ -1014 +1012 @@
         position: relative;
         width: 100%;
-        margin-bottom: 5px;
+        margin-bottom: 12px;
 }
 
@@ -1138 +1136 @@
 .customize-control .attachment-media-view .default-button,
 .customize-control-header .remove {
-        float: left;
-        margin-right: 3px;
-}
-
-.customize-control .attachment-media-view .upload-button,
-.customize-control-header .new {
-        float: right;
+        margin-right: 8px;
 }
 

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

@@ -69 +69 @@
 .media-widget-buttons {
         text-align: left;
-        margin-bottom: 10px;
+        margin-top: 0;
 }
 
 .media-widget-control .media-widget-buttons .button {
-        margin-left: 8px;
         width: auto;
-}
-.media-widget-control:not(.selected) .media-widget-buttons .button,
+        height: auto;
+        margin-top: 12px;
+        white-space: normal;
+}
+
 .media-widget-buttons .button:first-child {
-        margin-left: 0;
+        margin-right: 8px;
 }