Add warning toast style

1 files changed, 11 insertions, 7 deletions

diff --git a/docs/components.html b/docs/components.html
index 7d7aca1..bff66af 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1734,21 +1734,27 @@
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </div>
             </div>
+            <div class="column col-9 col-sm-12">
+              <div class="toast toast-primary">
+                <button class="btn btn-clear float-right"></button>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </div>
+            </div>
           </div>
           <section class="notes">
             <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p>
           </section>
           <div class="columns">
             <div class="column col-sm-12">
-              <div class="toast toast-primary">
+              <div class="toast toast-success">
                 <button class="btn btn-clear float-right"></button>
-                Toast primary
+                Toast success
               </div>
             </div>
             <div class="column col-sm-12">
-              <div class="toast toast-success">
+              <div class="toast toast-warning">
                 <button class="btn btn-clear float-right"></button>
-                Toast success
+                Toast warning
               </div>
             </div>
             <div class="column col-sm-12">
@@ -1759,18 +1765,16 @@
             </div>
           </div>
           <section class="notes">
-            <p>And you can add the <code>toast-primary</code>, <code>toast-success</code> or <code>toast-error</code> class for additional toast colors.</p>
+            <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
           </section>
 
 <!-- toasts example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 &lt;<span class="tag">/div</span>&gt;
 
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
   &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-error_outline&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>