Update Empty state style

1 files changed, 68 insertions, 42 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 8b5b70c..1250210 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="font/style.css" />
 </head>
 <body>
-  <section class="section section-header bg-grey">
+  <section class="section section-header bg-gray">
     <section class="grid-header container grid-960">
       <nav class="navbar">
         <section class="navbar-section">
@@ -72,61 +72,61 @@
           </section>
           <div class="columns">
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
             <div class="column">
-              <div class="bg-grey"></div>
+              <div class="bg-gray"></div>
             </div>
           </div>
 
           <div class="columns">
             <div class="column col-12">
-              <div class="bg-grey">col-12 (100%)</div>
+              <div class="bg-gray">col-12 (100%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-9">
-              <div class="bg-grey">col-9 (75%)</div>
+              <div class="bg-gray">col-9 (75%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-6">
-              <div class="bg-grey">col-6 (50%)</div>
+              <div class="bg-gray">col-6 (50%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-3">
-              <div class="bg-grey">col-3 (25%)</div>
+              <div class="bg-gray">col-3 (25%)</div>
             </div>
           </div>
 
@@ -137,10 +137,10 @@
 
           <div class="columns col-gapless">
             <div class="column col-6">
-              <div class="bg-grey">col-6 (gapless)</div>
+              <div class="bg-gray">col-6 (gapless)</div>
             </div>
             <div class="column col-6">
-              <div class="bg-grey">col-6 (gapless)</div>
+              <div class="bg-gray">col-6 (gapless)</div>
             </div>
           </div>
 
@@ -150,10 +150,10 @@
 
           <div class="columns col-oneline">
             <div class="column col-8">
-              <div class="bg-grey">col-8</div>
+              <div class="bg-gray">col-8</div>
             </div>
             <div class="column col-8">
-              <div class="bg-grey">col-8</div>
+              <div class="bg-gray">col-8</div>
             </div>
           </div>
 
@@ -179,37 +179,37 @@
           <header class="text-center"><h3>Responsive grid</h3></header>
           <div class="columns col-multiline">
             <div class="column col-md-6 col-xs-12">
-              <div class="bg-grey">col-md-6</div>
+              <div class="bg-gray">col-md-6</div>
             </div>
             <div class="column col-md-3 col-xs-12">
-              <div class="bg-grey">col-md-3</div>
+              <div class="bg-gray">col-md-3</div>
             </div>
             <div class="column col-md-3 col-xs-12">
-              <div class="bg-grey">col-md-3</div>
+              <div class="bg-gray">col-md-3</div>
             </div>
           </div>
 
           <div class="columns">
             <div class="column col-sm-6">
-              <div class="bg-grey">col-sm-6</div>
+              <div class="bg-gray">col-sm-6</div>
             </div>
             <div class="column col-sm-3">
-              <div class="bg-grey">col-sm-3</div>
+              <div class="bg-gray">col-sm-3</div>
             </div>
             <div class="column col-sm-3">
-              <div class="bg-grey">col-sm-3</div>
+              <div class="bg-gray">col-sm-3</div>
             </div>
           </div>
 
           <div class="columns">
             <div class="column col-xs-6">
-              <div class="bg-grey">col-xs-6</div>
+              <div class="bg-gray">col-xs-6</div>
             </div>
             <div class="column col-xs-3">
-              <div class="bg-grey">col-xs-3</div>
+              <div class="bg-gray">col-xs-3</div>
             </div>
             <div class="column col-xs-3">
-              <div class="bg-grey">col-xs-3</div>
+              <div class="bg-gray">col-xs-3</div>
             </div>
           </div>
 
@@ -305,17 +305,39 @@
           <div class="columns">
             <div class="column col-8 col-xs-12">
               <section class="empty">
-                <i class="icon icon-markunread"></i>
-                <p class="empty-title">You have no new messages</p>
-                <p class="empty-meta">Click the button to start a conversation.</p>
-                <button class="empty-action btn btn-primary">Send a message</button>
+                <div class="empty-icon">
+                  <i class="icon icon-markunread"></i>
+                </div>
+                <h4 class="empty-title">You have no new messages</h4>
+                <p class="empty-meta">Click the button to start a conversation</p>
+                <div class="empty-action">
+                  <button class="btn btn-primary">Send a message</button>
+                </div>
+              </section>
+            </div>
+            <div class="column col-8 col-xs-12">
+              <section class="empty">
+                <div class="empty-icon">
+                  <i class="icon icon-drafts"></i>
+                </div>
+                <h4 class="empty-title">You've successfully signed up</h4>
+                <p class="empty-meta">Click the button to invite your friends</p>
+                <div class="empty-action">
+                  <button class="btn btn-primary">Invite your friends</button>
+                </div>
+                <div class="empty-action">
+                  <button class="btn btn-link">Skip</button>
+                </div>
               </section>
             </div>
             <div class="column col-8 col-xs-12">
               <section class="empty">
-                <i class="icon icon-people"></i>
-                <p class="empty-title">You are not following anyone</p>
-                <div class="empty-action input-group">
+                <div class="empty-icon">
+                  <i class="icon icon-people"></i>
+                </div>
+                <h4 class="empty-title">You are not following anyone</h4>
+                <p class="empty-meta">Start to meet new friends</p>
+                <div class="empty-action input-group input-inline">
                   <input type="text" class="form-input" placeholder="" />
                   <button class="btn btn-primary input-group-btn">Search</button>
                 </div>
@@ -324,15 +346,19 @@
           </div>
 
           <section class="notes">
-            <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
+            <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
           </section>
 
 <!-- empty states example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
-  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
-  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-icon&quot;</span>&gt;
+    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/h4</span>&gt;
   &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
@@ -374,7 +400,7 @@
     </section>
   </section>
 
-  <footer class="bg-grey">
+  <footer class="bg-gray">
     <section id="copyright" class="grid-footer container grid-960">
       <p>
         <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | Version <span class="version"></span>