Changeset 26592

Timestamp:

12/03/2013 09:13:14 PM (10 years ago)

Author:

iammattthomas

Message:

Ensure that theme customizer buttons don't overlap on small screens; allow small-screen theme popup to use the full height of the viewport since the adminmenu is no longer fixed; ensure that buttons in the theme customizer wrap as efficiently as they can on mobile. Fixes #26361, props mattheu, iammattthomas.

Location:

trunk

Files:

• Gruntfile.js (modified) (3 diffs)
• src/wp-admin/css/colors/_admin.scss (modified) (1 diff)
• src/wp-admin/css/wp-admin.css (modified) (14 diffs)

trunk/Gruntfile.js

@@ -83 +83 @@
                 dest: BUILD_DIR,
                 ext: '.css',
-                src: ['wp-admin/css/color-schemes/*/colors.scss'],
+                src: ['wp-admin/css/colors/*/colors.scss'],
                 options: {
                     outputStyle: 'expanded'
@@ -119 +119 @@
                 ext: '.min.css',
                 src: [
-                    'wp-admin/css/color-schemes/**/*.css'
+                    'wp-admin/css/colors/**/*.css'
                 ]
             }
@@ -320 +320 @@
             },
             colors: {
-                files: [SOURCE_DIR + 'wp-admin/css/color-schemes/**'],
+                files: [SOURCE_DIR + 'wp-admin/css/colors/**'],
                 tasks: ['sass:colors']
             },

trunk/src/wp-admin/css/colors/_admin.scss

@@ -411 +411 @@
 }
 
+.theme-overlay .theme-header .close:hover,
+.theme-overlay .theme-header .right:hover,
+.theme-overlay .theme-header .left:hover {
+    background: $highlight-color;
+}
+
 /* jQuery UI Slider */
 

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

@@ -6699 +6699 @@
     right: 0;
     height: 48px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ddd;
 }
 
@@ -6708 +6708 @@
     text-align: center;
     float: right;
-    border-left: 1px solid #eee;
-}
-
-.theme-overlay .theme-header .close:hover {
-    background: #333;
+    border-left: 1px solid #ddd;
 }
 
@@ -6720 +6716 @@
 
 .theme-overlay .theme-header .close:before {
-    font: normal 30px/48px 'dashicons' !important;
-    color: #bbb;
+    font: normal 30px/50px 'dashicons' !important;
+    color: #777;
     display: inline-block;
     content: '\f335';
@@ -6731 +6727 @@
 .theme-overlay .theme-header .left {
     cursor: pointer;
+    color: #777;
     height: 48px;
     width: 54px;
     float: left;
     text-align: center;
-    border-right: 1px solid #eee;
+    border-right: 1px solid #ddd;
     -webkit-user-select: none;
     -moz-user-select:    none;
@@ -6742 +6739 @@
 }
 
+.theme-overlay .theme-header .close:hover,
 .theme-overlay .theme-header .right:hover,
 .theme-overlay .theme-header .left:hover {
-    background: #333;
+    background: #0074a2;
     color: #fff;
 }
@@ -6759 +6757 @@
 .theme-overlay .theme-header .right:before,
 .theme-overlay .theme-header .left:before {
-    font: normal 16px/54px 'dashicons' !important;
+    font: normal 20px/50px 'dashicons' !important;
     display: inline;
     font-weight: 300;
@@ -6765 +6763 @@
 
 .theme-overlay .theme-header .left:before {
-    content: '\f341';
+    content: '\f340';
 }
 
 .theme-overlay .theme-header .right:before {
-    content: '\f345';
+    content: '\f344';
 }
 
@@ -6809 +6807 @@
     position: absolute;
     top: 49px;
-    bottom: 69px;
+    bottom: 57px;
     left: 0;
     right: 0;
@@ -6829 +6827 @@
     left: 0;
     right: 0;
-    padding: 20px 25px;
+    padding: 10px 25px 5px;
     background: #f3f3f3;
     z-index: 30;
@@ -6838 +6836 @@
 .theme-overlay .theme-actions a {
     margin-right: 5px;
-    margin-bottom: 0;
+    margin-bottom: 5px;
 }
 
@@ -6845 +6843 @@
     position: absolute;
     right: 10px;
-    bottom: 20px;
+    bottom: 5px;
     text-decoration: none;
     border-color: transparent;
@@ -7113 +7111 @@
     body.folded .theme-overlay .theme-wrap,
     .theme-overlay .theme-wrap {
-        top: 45px;
+        top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
         right: 0;
         bottom: 0;
@@ -7119 +7117 @@
         padding: 70px 20px 20px;
         border: none;
+        z-index: 999999999;
+        position: fixed;
     }
 
@@ -7152 +7152 @@
         margin-top: 6px;
         margin-right: 0;
+    }
+    
+    .theme-overlay .theme-actions .delete-theme {
+        position: relative;
+        right: auto;
+        bottom: auto;
+    }
+    
+    .theme-overlay .theme-actions .inactive-theme {
+        display: inline;
     }