From e4e625270223789c2b5cc596784ab1037e65954a Mon Sep 17 00:00:00 2001
From: Ian Obermiller <iano@fb.com>
Date: Tue, 28 Apr 2015 05:19:26 -0700
Subject: [PATCH] Minor doc fixes

---
 docs/api/README.md | 56 +++++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/docs/api/README.md b/docs/api/README.md
index 7cfd78c8..f6701dfd 100644
--- a/docs/api/README.md
+++ b/docs/api/README.md
@@ -6,51 +6,56 @@
 {
 var styles = {
   base: {
-    backgroundColor: "#0074d9",
+    backgroundColor: '#0074d9',
     border: 0,
-    borderRadius: "0.3em",
-    color: "#fff",
-    cursor: "pointer",
+    borderRadius: '0.3em',
+    color: '#fff',
+    cursor: 'pointer',
     fontSize: 16,
-    outline: "none",
-    padding: "0.4em 1em",
+    outline: 'none',
+    padding: '0.4em 1em',
 
-    // Media queries must start with @media, and follow the same syntax as CSS
-    '@media (min-width: 992px)': {
-      padding: "0.6em 1.2em"
+    ':hover': {
+      backgroundColor: '#0088FF'
     },
 
-    '@media (min-width: 1200px)': {
-      padding: "0.8em 1.5em"
+    ':focus': {
+      backgroundColor: '#0088FF'
     },
 
-    ':hover': {
-      backgroundColor: "#0088FF"
+    ':active': {
+      backgroundColor: '#005299',
+      transform: 'translateY(2px)',
     },
 
-    ':focus': {
-      backgroundColor: "#0088FF"
+    // Media queries must start with @media, and follow the same syntax as CSS
+    '@media (min-width: 992px)': {
+      padding: '0.6em 1.2em'
     },
 
-    ':active': {
-      backgroundColor: "#005299",
-      transform: "translateY(2px)",
+    '@media (min-width: 1200px)': {
+      padding: '0.8em 1.5em',
+
+      // Media queries can also have nested :hover, :focus, or :active states
+      ':hover': {
+        backgroundColor: '#329FFF'
+      }
     }
   },
 
   red: {
-    backgroundColor: "#d90000",
+    backgroundColor: '#d90000',
 
     ':hover': {
-      backgroundColor: "#FF0000"
+      backgroundColor: '#FF0000'
     },
 
     ':focus': {
-      backgroundColor: "#FF0000"
+      backgroundColor: '#FF0000'
     },
 
     ':active': {
-      backgroundColor: "#990000"
+      backgroundColor: '#990000'
     }
   }
 };
@@ -69,6 +74,7 @@ Usage is simple:
 var MyComponent = React.createClass(Radium.wrap({
   // write your component as normal
 }));
+```
 
 ## Style Component
 
@@ -87,12 +93,12 @@ An array of CSS rules to render. Each rule is an object with a CSS selector as a
   {
     body: {
       margin: 0,
-      fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
+      fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif'
     }
   },
   {
     html: {
-      background: "#ccc"
+      background: '#ccc'
     }
   }
 ]} />
@@ -108,7 +114,7 @@ A string that any included selectors in `rules` will be appended to. Use to scop
   scopeSelector=".TestClass"
     rules={[
       h1: {
-        fontSize: "2em"
+        fontSize: '2em'
       }
     ]}
   />