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.

git-svn-id: https://develop.svn.wordpress.org/trunk@26592 602fd350-edb4-49c9-b593-d223f7449a82

Gruntfile.js

@@ -82,7 +82,7 @@ module.exports = function(grunt) {
 				cwd: SOURCE_DIR,
 				dest: BUILD_DIR,
 				ext: '.css',
-				src: ['wp-admin/css/color-schemes/*/colors.scss'],
+				src: ['wp-admin/css/colors/*/colors.scss'],
 				options: {
 					outputStyle: 'expanded'
 				}
@@ -118,7 +118,7 @@ module.exports = function(grunt) {
 				dest: BUILD_DIR,
 				ext: '.min.css',
 				src: [
-					'wp-admin/css/color-schemes/**/*.css'
+					'wp-admin/css/colors/**/*.css'
 				]
 			}
 		},
@@ -319,7 +319,7 @@ module.exports = function(grunt) {
 				}
 			},
 			colors: {
-				files: [SOURCE_DIR + 'wp-admin/css/color-schemes/**'],
+				files: [SOURCE_DIR + 'wp-admin/css/colors/**'],
 				tasks: ['sass:colors']
 			},
 			rtl: {

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

@@ -410,6 +410,12 @@ ul#adminmenu > li.current > a.current:after {
 	color: $highlight-color;
 }
 
+.theme-overlay .theme-header .close:hover,
+.theme-overlay .theme-header .right:hover,
+.theme-overlay .theme-header .left:hover {
+	background: $highlight-color;
+}
+
 /* jQuery UI Slider */
 
 .wp-slider .ui-slider-handle,

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

@@ -6698,7 +6698,7 @@ body.theme-overlay-open {
 	left: 0;
 	right: 0;
 	height: 48px;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid #ddd;
 }
 
 .theme-overlay .theme-header .close {
@@ -6707,11 +6707,7 @@ body.theme-overlay-open {
 	width: 50px;
 	text-align: center;
 	float: right;
-	border-left: 1px solid #eee;
+	border-left: 1px solid #ddd;
-}
-
-.theme-overlay .theme-header .close:hover {
-	background: #333;
 }
 
 .theme-overlay .theme-header .close:hover:before {
@@ -6719,8 +6715,8 @@ body.theme-overlay-open {
 }
 
 .theme-overlay .theme-header .close:before {
-	font: normal 30px/48px 'dashicons' !important;
+	font: normal 30px/50px 'dashicons' !important;
-	color: #bbb;
+	color: #777;
 	display: inline-block;
 	content: '\f335';
 	font-weight: 300;
@@ -6730,20 +6726,22 @@ body.theme-overlay-open {
 .theme-overlay .theme-header .right,
 .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;
 	-ms-user-select:     none;
 	user-select:         none;
 }
 
+.theme-overlay .theme-header .close:hover,
 .theme-overlay .theme-header .right:hover,
 .theme-overlay .theme-header .left:hover {
-	background: #333;
+	background: #0074a2;
 	color: #fff;
 }
 
@@ -6758,17 +6756,17 @@ body.theme-overlay-open {
 
 .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;
 }
 
 .theme-overlay .theme-header .left:before {
-	content: '\f341';
+	content: '\f340';
 }
 
 .theme-overlay .theme-header .right:before {
-	content: '\f345';
+	content: '\f344';
 }
 
 .rtl .theme-overlay .theme-header .left:before {
@@ -6808,7 +6806,7 @@ body.folded .theme-overlay .theme-wrap {
 .theme-overlay .theme-about {
 	position: absolute;
 	top: 49px;
-	bottom: 69px;
+	bottom: 57px;
 	left: 0;
 	right: 0;
 	overflow: auto;
@@ -6828,7 +6826,7 @@ body.folded .theme-overlay .theme-wrap {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	padding: 20px 25px;
+	padding: 10px 25px 5px;
 	background: #f3f3f3;
 	z-index: 30;
 	box-sizing: border-box;
@@ -6837,14 +6835,14 @@ body.folded .theme-overlay .theme-wrap {
 
 .theme-overlay .theme-actions a {
 	margin-right: 5px;
-	margin-bottom: 0;
+	margin-bottom: 5px;
 }
 
 .theme-overlay .theme-actions .delete-theme {
 	color: #a00;
 	position: absolute;
 	right: 10px;
-	bottom: 20px;
+	bottom: 5px;
 	text-decoration: none;
 	border-color: transparent;
 	box-shadow: none;
@@ -7112,12 +7110,14 @@ body.folded .theme-overlay .theme-wrap {
 
 	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;
 		left: 0;
 		padding: 70px 20px 20px;
 		border: none;
+		z-index: 999999999;
+		position: fixed;
 	}
 
 	.theme-overlay .theme-screenshots {
@@ -7153,6 +7153,16 @@ body.folded .theme-overlay .theme-wrap {
 		margin-right: 0;
 	}
 	
+	.theme-overlay .theme-actions .delete-theme {
+		position: relative;
+		right: auto;
+		bottom: auto;
+	}
+	
+	.theme-overlay .theme-actions .inactive-theme {
+		display: inline;
+	}
+
 	.theme-overlay .theme-screenshots {
 		width: 100%;
 		float: none;