1.4.2 preview: Move styling to CSS file and toggle ui-alt-icon on swa…

…tches
jquery · Jun 2, 2014 · 228ac93 · 228ac93
1 parent f36f1bf
commit 228ac93
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/css/tr.preview.css b/css/tr.preview.css
@@ -79,4 +79,40 @@
 
 .preview .ui-content{
 	overflow-y: hidden !important;
-}
+}
+
+/* Copying some things from the default theme's swatch a */
+#alt-icon-preview-form {
+	background: none;
+	color: #333333;
+	text-shadow: 0 1px 0 #f3f3f3;
+}
+
+#alt-icon-preview-form .ui-btn {
+	background-color: #f6f6f6;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #dddddd;
+}
+
+#alt-icon-preview-form a,
+#alt-icon-preview-form a:visited {
+	color: #3388cc;
+	font-weight: bold;
+}
+
+#alt-icon-preview-form a:hover {
+	color: #005599;
+}
+
+#alt-icon-preview-form .ui-btn:hover {
+	background-color: #ededed;
+}
+
+#alt-icon-preview-form .ui-btn:active {
+	background-color: #e8e8e8;
+}
+
+#alt-icon-preview-form .ui-btn.ui-checkbox-on:after {
+	background-color: #3388cc;
+}
diff --git a/jqm/1.4.2/preview.html b/jqm/1.4.2/preview.html
@@ -28,21 +28,17 @@
 		event.preventDefault();
 	})
 	.on( "change", "#alt-icon-preview-checkbox", function() {
-		$( "body" ).toggleClass( "ui-alt-icon",
-			$( "#alt-icon-preview-checkbox" ).prop( "checked" ) );
+		$( ".swatch" )
+			.toggleClass( "ui-alt-icon",
+				$( "#alt-icon-preview-checkbox" ).prop( "checked" ) );
 	})
   </script>
-  <style>
-#alt-icon-preview-form {
-	border: 0;
-}
-  </style>
 </head>
 <body>
 
-<form id="alt-icon-preview-form" class="ui-body-a">
+<form id="alt-icon-preview-form">
 	<label>Show alternative icons in preview<input type="checkbox" id="alt-icon-preview-checkbox" data-mini="true" data-wrapper-class="ui-btn-inline"></label>
-	See <a id="demo-link" class="ui-link" target="_blank" href="http://demos.jquerymobile.com/icons/#Blackvs.whiteiconsets">icon demos</a> for usage.
+	See <a id="demo-link" target="_blank" href="http://demos.jquerymobile.com/icons/#Blackvs.whiteiconsets">icon demos</a> for usage.
 </form>
 
 <div class="preview ui-shadow swatch">