Changeset 26592

Timestamp:

12/03/2013 09:13:14 PM (13 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;
         }