Theme Customizer: Fix scrolling on iOS and Kindle Fire. props azaozz, helenyhou. fixes #20805.

Also fixes uploader UIs on iOS and Kindle Fire by improving wp.Uploader.
Adds mobile viewport specifications.
Moves scrollbar back to fixed positioning.


git-svn-id: http://core.svn.wordpress.org/trunk@21014 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls.dev.css

@@ -402,10 +402,6 @@ body {
 	text-align: right;
 }
 
-.customize-section .customize-control-image .actions a {
-	display: block;
-}
-
 .customize-section .customize-control-image .library ul {
 	border-bottom: 1px solid #dfdfdf;
 	float: left;
@@ -456,7 +452,7 @@ body {
 
 .customize-section .customize-control-image .library .thumbnail img {
 	display: block;
-	max-width: 220px;
+	max-width: 90%;
 	max-height: 80px;
 
 	margin: 5px auto;
@@ -479,6 +475,7 @@ body {
 	text-align: center;
 	color: #777;
 	position: relative;
+	cursor: default;
 }
 
 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
@@ -491,7 +488,29 @@ body {
 	transition:         border-color 0.1s;
 }
 
+.customize-section .customize-control-upload .library ul li,
+.customize-section .customize-control-image .library ul li {
+	cursor: pointer;
+}
+
 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
 	border-color: #83b4d8;
-}
+}
+
+/**
+ * iOS can't scroll iframes,
+ * instead it expands the iframe size to match the size of the content
+ */
+.ios .wp-full-overlay {
+	position: relative;
+}
+
+.ios #customize-preview {
+	position: relative;
+}
+
+.ios #customize-controls .wp-full-overlay-sidebar-content {
+	-webkit-overflow-scrolling: touch;
+}
+

wp-admin/css/wp-admin-rtl.dev.css

@@ -1566,19 +1566,10 @@ table .column-rating {
 /*------------------------------------------------------------------------------
   26.0 - Full Overlay w/ Sidebar
 ------------------------------------------------------------------------------*/
-.wp-full-overlay {
-	left: 0;
-	right: 300px;
-}
-
-.wp-full-overlay.collapsed {
-	right: 0 !important;
-}
-
 .wp-full-overlay .wp-full-overlay-sidebar {
 	margin: 0;
-	left: 100%;
-	right: auto;
+	left: auto;
+	right: 0;
 	border-right: 0;
 	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
 }
@@ -1589,6 +1580,21 @@ table .column-rating {
 	box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.1);
 }
 
+.wp-full-overlay.collapsed,
+.wp-full-overlay.expanded .wp-full-overlay-sidebar {
+	margin-right: 0 !important;
+}
+
+.wp-full-overlay.expanded {
+	margin-right: 300px;
+	margin-left: 0;
+}
+
+.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+	margin-right: -300px;
+	margin-left: 0;
+}
+
 /* Collapse Button */
 .wp-full-overlay .collapse-sidebar {
 	right: 0;

wp-admin/css/wp-admin.dev.css

@@ -5255,27 +5255,23 @@ body.full-overlay-active {
 	overflow: visible;
 	top: 0;
 	bottom: 0;
-	left: 300px;
+	left: 0;
 	right: 0;
 	height: 100%;
 	min-width: 0;
 }
 
-.wp-full-overlay.collapsed {
-	left: 0 !important;
-}
-
 .wp-full-overlay-sidebar {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing:    border-box;
 	box-sizing:         border-box;
 
-	position: absolute;
+	position: fixed;
 	width: 300px;
 	height: 100%;
 	top: 0;
 	bottom: 0;
-	right: 100%;
+	left: 0;
 	padding: 0;
 	margin: 0;
 	z-index: 10;
@@ -5288,6 +5284,19 @@ body.full-overlay-active {
 	overflow: visible;
 }
 
+.wp-full-overlay.collapsed,
+.wp-full-overlay.expanded .wp-full-overlay-sidebar {
+	margin-left: 0 !important;
+}
+
+.wp-full-overlay.expanded {
+	margin-left: 300px;
+}
+
+.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+	margin-left: -300px;
+}
+
 .wp-full-overlay-sidebar:after {
 	content: '';
 	display: block;
@@ -5404,11 +5413,11 @@ body.full-overlay-active {
 .wp-full-overlay-sidebar,
 .wp-full-overlay .collapse-sidebar,
 .wp-full-overlay-main {
-	-webkit-transition-property: left, right, top, bottom, width;
-	-moz-transition-property:    left, right, top, bottom, width;
-	-ms-transition-property:     left, right, top, bottom, width;
-	-o-transition-property:      left, right, top, bottom, width;
-	transition-property:         left, right, top, bottom, width;
+	-webkit-transition-property: left, right, top, bottom, width, margin;
+	-moz-transition-property:    left, right, top, bottom, width, margin;
+	-ms-transition-property:     left, right, top, bottom, width, margin;
+	-o-transition-property:      left, right, top, bottom, width, margin;
+	transition-property:         left, right, top, bottom, width, margin;
 
 	-webkit-transition-duration: 0.2s;
 	-moz-transition-duration:    0.2s;