Revise positioning rules for slate.

dev-onenetworkecommerce · Nov 12, 2015 · b8eabe7 · b8eabe7
1 parent 75f7325
commit b8eabe7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/docs/dist/script.js b/docs/dist/script.js
@@ -29859,7 +29859,7 @@
 	              "Simple Slate"
 	            ),
 	            _react2["default"].createElement(
-	              "small",
+	              "p",
 	              null,
 	              "simple slate with padding 30px on all sides and 10px margin on all sides."
 	            )
@@ -29887,7 +29887,7 @@
 	              "Slate spacious"
 	            ),
 	            _react2["default"].createElement(
-	              "small",
+	              "p",
 	              null,
 	              "Adds padding to your contents"
 	            )
@@ -29918,7 +29918,7 @@
 	                "Slate with No Background"
 	              ),
 	              _react2["default"].createElement(
-	                "small",
+	                "p",
 	                null,
 	                "No border-radius and white background"
 	              )
@@ -29947,7 +29947,7 @@
 	              "Centered Half Slate"
 	            ),
 	            _react2["default"].createElement(
-	              "small",
+	              "p",
 	              null,
 	              "Centered slate with 50% width"
 	            )
@@ -29982,7 +29982,7 @@
 	              "Half Slate with Icons"
 	            ),
 	            _react2["default"].createElement(
-	              "small",
+	              "p",
 	              null,
 	              "Centered slate with 50% width"
 	            )

diff --git a/docs/dist/style.css b/docs/dist/style.css
diff --git a/docs/sections/Docs-Slate/index.jsx b/docs/sections/Docs-Slate/index.jsx
@@ -9,7 +9,7 @@ export default class Slate extends React.Component {
           <p className="lead">Use this for empty collections or loading resources.</p>
           <div className="slate">
           	<h2>Simple Slate</h2>
-          	<small>simple slate with padding 30px on all sides and 10px margin on all sides.</small>
+          	<p>simple slate with padding 30px on all sides and 10px margin on all sides.</p>
           </div>
         </section>
 
@@ -18,7 +18,7 @@ export default class Slate extends React.Component {
           <p>Add the .-spacious class to your slate.</p>
           <div className="slate -spacious">
             <h3>Slate spacious</h3>
-            <small>Adds padding to your contents</small>
+            <p>Adds padding to your contents</p>
           </div>
         </section>
 
@@ -28,7 +28,7 @@ export default class Slate extends React.Component {
           <div className="row">
             <div className="slate -plain">
               <h2>Slate with No Background</h2>
-              <small>No border-radius and white background</small>
+              <p>No border-radius and white background</p>
             </div>
           </div>
         </section>
@@ -38,7 +38,7 @@ export default class Slate extends React.Component {
           <p>With the centered grid column, you can center a slate.</p>
           <div className="slate col-md-6 _centered">
             <h2>Centered Half Slate</h2>
-            <small>Centered slate with 50% width</small>
+            <p>Centered slate with 50% width</p>
           </div>
         </div>
 
@@ -48,7 +48,7 @@ export default class Slate extends React.Component {
           <div className="slate">
             <i className="icon icon-cog -x8" />
             <h2>Half Slate with Icons</h2>
-            <small>Centered slate with 50% width</small>
+            <p>Centered slate with 50% width</p>
           </div>
         </section>
 

diff --git a/styles/components/_slate.scss b/styles/components/_slate.scss
@@ -8,13 +8,14 @@
 	&.-spacious { padding: 60px; }
 	&.-plain { background: $brand-white; }
 
-  > .icon:first-child {
-    display: block;
+  // For consistency
+  h1, h2, h3, h4, h5, h6, p {
+    margin-bottom: $spacer-large;
   }
 
-  > .icon:first-child,
-  > .tri-circle-loader:first-child {
-    margin-bottom: $spacer-large;
+  // To put a margin for preceding elements like icon and loader
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: $spacer-large;
   }
 
   > *:last-child { margin-bottom: 0; }