Corner styling for dialog and popup header/content/footer. Also fixes #4277

Author: jaspermdegroot

css/structure/jquery.mobile.core.css

@@ -65,9 +65,27 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
 .ui-footer .ui-title { margin: .6em 15px .8em; }
 
-/*content area*/
+/* content area*/
 .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
 
+/* corner styling for dialogs and popups */
+.ui-corner-all > .ui-header:first-child,
+.ui-corner-all > .ui-content:first-child,
+.ui-corner-all > .ui-footer:first-child {
+	-webkit-border-top-left-radius: inherit;
+	border-top-left-radius: inherit;
+	-webkit-border-top-right-radius: inherit;
+	border-top-right-radius: inherit;
+}
+.ui-corner-all > .ui-header:last-child,
+.ui-corner-all > .ui-content:last-child,
+.ui-corner-all > .ui-footer:last-child {
+	-webkit-border-bottom-left-radius: inherit;
+	border-bottom-left-radius: inherit;
+	-webkit-border-bottom-right-radius: inherit;
+	border-bottom-right-radius: inherit;
+}
+
 /* icons sizing */
 .ui-icon { width: 18px; height: 18px; }
 

css/structure/jquery.mobile.popup.css

@@ -131,44 +131,4 @@
 .ui-popup > .ui-btn-left { left: -9px; }
 .ui-popup > .ui-btn-right { right: -9px; }
 
-.ui-popup.ui-corner-all > .ui-header,
-.ui-popup.ui-corner-all ~ .ui-content,
-.ui-popup.ui-corner-all > .ui-content:first-child {
-	-webkit-border-top-left-radius:  inherit;
-	border-top-left-radius:          inherit;
-	-webkit-border-top-right-radius: inherit;
-	border-top-right-radius:         inherit;
-}
-
-.ui-popup.ui-corner-all > .ui-content,
-.ui-popup.ui-corner-all > .ui-footer,
-.ui-popup.ui-corner-all > .ui-header:nth-child(n):last-child {
-	-webkit-border-bottom-left-radius:  inherit;
-	border-bottom-left-radius:          inherit;
-	-webkit-border-bottom-right-radius: inherit;
-	border-bottom-right-radius:         inherit;
-}
-
-.ui-popup.ui-corner-all > .ui-content:nth-child(2),
-.ui-popup.ui-corner-all > .ui-header:nth-child(2) {
-	-webkit-border-top-left-radius:  0;
-	border-top-left-radius:          0;
-	-webkit-border-top-right-radius: 0;
-	border-top-right-radius:         0;
-}
-
-.ui-popup.ui-corner-all > .ui-content:nth-last-child(1n+2),
-.ui-popup.ui-corner-all > .ui-footer:nth-last-child(1n+2) {
-	-webkit-border-bottom-left-radius:  0;
-	border-bottom-left-radius:          0;
-	-webkit-border-bottom-right-radius: 0;
-	border-bottom-right-radius:         0;
-}
-
-.ui-popup.ui-corner-all > .ui-header:only-child,
-.ui-popup.ui-corner-all > .ui-footer:only-child {
-	-webkit-border-radius: inherit;
-	border-radius:         inherit;
-}
-
 .ui-popup-hidden { top: -99999px; left: -9999px; }

js/widgets/dialog.js

@@ -32,13 +32,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
 			.wrapInner( dialogWrap )
 			.children()
 				.find( ":jqmData(role='header')" )
-					.prepend( headerCloseButton )
-				.end()
-				.children( ':first-child')
-					.addClass( "ui-corner-top" )
-				.end()
-				.children( ":last-child" )
-					.addClass( "ui-corner-bottom" );
+					.prepend( headerCloseButton );
 
 		// this must be an anonymous function so that select menu dialogs can replace
 		// the close method. This is a change from previously just defining data-rel=back