Use warning class instead of inline styles.

Author: scottgonzalez

entries/fixedtoolbar.xml

@@ -104,14 +104,14 @@
 		<option name="fullscreen" default="false" example-value="true">
 			<desc>Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled, instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.
 				<p>This option is also exposed as a data attribute: <code>data-fullscreen="true"</code>.</p>
-				<div style="padding: 0.4em 15px; background: #FFF3A5; "><b>Note:</b> While the data attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </div>
+				<div class="warning"><b>Note:</b> While the data attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element.</div>
 			</desc>
 			<type name="Boolean" />
 		</option>
 		<option name="tapToggle" default="true" example-value="false">
 			<desc>Enable or disable the user's ability to toggle toolbar visibility with a tap on the screen (or a click, for mouse users).
 				<p>This option is also exposed as a data attribute: <code>data-tap-toggle="false"</code>.</p>
-				<div style="padding: 0.4em 15px; background: #FFF3A5; "><b>Note:</b> This behavior was formerly configurable as follows, but as of version 1.1 this syntax is no longer supported: <br /><code>$.mobile.fixedToolbars.setTouchToggleEnabled(false);</code></div>
+				<div class="warning"><b>Note:</b> This behavior was formerly configurable as follows, but as of version 1.1 this syntax is no longer supported: <br /><code>$.mobile.fixedToolbars.setTouchToggleEnabled(false);</code></div>
 			</desc>
 			<type name="Boolean" />
 		</option>
@@ -171,7 +171,7 @@ $( document ).on( "mobileinit", function() {
 	<methods>
 		<method name="show">
 			<desc>show the toolbar
-				<p><div style="padding: 0.4em 15px; background: #FFF3A5; "><b>Note:</b> Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:<br />
+				<p><div class="warning"><b>Note:</b> Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:<br />
 <code>$.mobile.fixedToolbars.show(true);</code></div></p>
 			</desc>
 		</method>

entries/listview.xml

@@ -23,7 +23,7 @@
 			<h3>Nested lists</h3>
 			<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger. Please also note that the title of subpages will contain the text of the first element in the parent list item including its elements. So make sure to use a single element for the list item caption and put other elements like count bubbles behind that caption as shown in the demo below.</p>
 			<p>To set the swatch color of the child listviews, set the <code>data-theme</code> attribute on each list inside.</p>
-			<div style="padding: 0.4em 15px; background: #FFF3A5; "><b>Note:</b> Nested lists are deprecated in version 1.3.0</div>
+			<div class="warning"><b>Note:</b> Nested lists are deprecated in version 1.3.0</div>
 			<p><iframe src="/resources/listview/example2.html" style="width:100%;height:640px;border:0px"></iframe></p>
 
 			<h3>Numbered lists</h3>

entries/orientationchange.xml

@@ -6,7 +6,7 @@
 		<p>The jQuery Mobile <code>orientationchange</code> event triggers when a device orientation changes, either by turning the device vertically or horizontally. When bound to this event the callback function has the event object. The event object contains an <code>orientation</code> property equal to either <code>"portrait"</code> or <code>"landscape"</code>.</p>
 		<p>Note that we bind to the browser's resize event when <code>orientationchange</code> is not natively supported or if <code>$.mobile.orientationChangeEnabled</code> is set to <code>false</code>.</p>
 
-		<div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;">
+		<div class="warning">
 			<h3>orientationchange timing</h3>
 
 			<p>The timing of the <code>orientationchange</code> event with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable <code>orientationChange</code> altogether with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>

pages/global-config.html

@@ -102,19 +102,19 @@ <h2>Configurable options</h2>
 	<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
 	<dd>
     Set the text that appears when a page is loading. If set to false, the message will not appear at all.
-    <div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.text</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
+    <div class="warning"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.text</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
   </dd>
 
 	<dt><code>loadingMessageTextVisible</code> <em>boolean</em>, default: false</dt>
 	<dd>
     Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
-    <div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.textVisible</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
+    <div class="warning"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.textVisible</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
   </dd>
 
 	<dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
 	<dd>
     The theme that the loading message box uses when text is visible.
-    <div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.theme</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
+    <div class="warning"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loader.prototype.options.theme</code> instead. See the <a href="page-loading">loader docs</a> for more.</div>
 	</dd>
 
 	<dt><code>maxTransitionWidth</code> <em>integer, boolean</em>, default: false</dt>
@@ -150,7 +150,7 @@ <h2>Configurable options</h2>
 	<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
 	<dd>
 	Enable smoother page transitions and true fixed toolbars in devices that support both the <code>overflow:</code> and <code>overflow-scrolling: touch; </code> CSS properties.
-	<div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;"><strong>Deprecated</strong> in 1.1.0</div>
+	<div class="warning"><strong>Deprecated</strong> in 1.1.0</div>
 	</dd>
 
 	<dt><code>transitionFallbacks.[transition]</code> <em>string</em>, default: "fade"</dt>