Changeset 22887

Timestamp:

11/28/2012 01:51:15 AM (12 years ago)

Author:

koopersmith

Message:

Responsive CSS for the media modal. props azaozz. see #22615, #21390.

File:

• trunk/wp-includes/css/media-views.css (modified) (3 diffs)

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

@@ -16 +16 @@
 .media-frame select,
 .wp-admin .media-frame select {
-    height: 28px;
     line-height: 28px;
     margin-top: 3px;
@@ -465 +464 @@
     color: #464646;
     font-family: sans-serif;
+    -webkit-appearance: none;
 }
 
@@ -1336 +1336 @@
     margin: 1px 0;
 }
+
+/**
+ * Responsive layout
+ */
+@media only screen and (max-width: 900px) {
+    .media-modal {
+        bottom: 30px;
+        left: 30px;
+        right: 30px;
+        top: 50px;
+    }
+
+    .media-menu {
+        width: 119px;
+    }
+
+    .media-menu li {
+        padding: 4px 10px;
+    }
+
+    .media-frame .region-content,
+    .media-frame-toolbar > .media-toolbar {
+        left: 120px;
+    }
+
+    .media-sidebar {
+        width: 147px;
+    }
+
+    .attachments-browser .attachments,
+    .attachments-browser .media-toolbar {
+        right: 180px;
+    }
+
+    .media-sidebar .setting {
+        width: 125px;
+    }
+
+    .media-sidebar .setting input,
+    .media-sidebar .setting textarea,
+    .media-sidebar .setting span,
+    .compat-item label span {
+        float: none;
+    }
+
+    .media-sidebar .setting span,
+    .compat-item label span {
+        text-align: inherit;
+        display: inline-block;
+        min-height: 16px;
+        padding: 8px 2px 0;
+        width: 95%;
+    }
+
+    .media-sidebar .setting input,
+    .media-sidebar .setting textarea,
+    .media-sidebar .setting select {
+        width: 100%;
+        max-width: none;
+    }
+
+    .media-sidebar .setting select.columns {
+        width: auto;
+    }
+
+    .media-frame-content .media-toolbar-primary,
+    .media-frame-content .media-toolbar-secondary {
+        display: inline;
+        float: none;
+    }
+
+    .media-frame-content .media-toolbar-primary .search,
+    .media-frame-content .media-toolbar-secondary select {
+        max-width: 45%;
+    }
+
+    .media-frame input,
+    .media-frame textarea,
+    .media-frame .search {
+        padding: 3px 6px;
+    }
+
+    .media-frame-content .attachment .icon {
+        top: 40%;
+    }
+}
+
+/* Use the same min-width as in the admin */
+@media only screen and (max-width: 600px) {
+    .media-modal {
+        width: 540px;
+        position: absolute;
+    }
+
+    .media-modal-backdrop {
+        width: 600px;
+        position: absolute;
+    }
+}