Merge pull request #180 from picturepan2/feature/0.2.12 v0.2.12

Feature/0.2.12

1 files changed, 44 insertions, 6 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 88d64c8..b673be5 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -800,7 +800,7 @@
               <div class="form-group">
                 <label class="form-label" for="input-example-17">Name</label>
                 <input class="form-input is-danger" type="text" id="input-example-17" placeholder="Name" />
-                <p class="form-input-hint">The name is invaild.</p>
+                <p class="form-input-hint">The name is invalid.</p>
               </div>
               <div class="form-group has-success">
                 <label class="form-label" for="input-example-18">Email</label>
@@ -818,7 +818,7 @@
                   <option>Skype</option>
                   <option>Hipchat</option>
                 </select>
-                <p class="form-input-hint">The option is invaild.</p>
+                <p class="form-input-hint">The option is invalid.</p>
               </div>
               <div class="form-group has-success">
                 <select class="form-select">
@@ -838,14 +838,14 @@
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group has-success&quot;</span>&gt;
     &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
     &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
-    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invaild.&lt;<span class="tag">/p</span>&gt;
+    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 
   <span class="com">&lt;!-- form validation class: is-success --&gt;</span>
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
     &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
     &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
-    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invaild.&lt;<span class="tag">/p</span>&gt;
+    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/form</span>&gt;
 </code></pre>
@@ -1079,9 +1079,15 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-caret"></i>
+                <i class="icon icon-resize-horiz"></i>
               </button>
-              <p>icon-caret</p>
+              <p>icon-resize-horiz</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-resize-vert"></i>
+              </button>
+              <p>icon-resize-vert</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1097,6 +1103,12 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-caret"></i>
+              </button>
+              <p>icon-caret</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-plus"></i>
               </button>
               <p>icon-plus</p>
@@ -1139,6 +1151,12 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-bookmark"></i>
+              </button>
+              <p>icon-bookmark</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-edit"></i>
               </button>
               <p>icon-edit</p>
@@ -1253,7 +1271,27 @@
             </div>
           </div>
 
+          <section class="notes">
+            <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in development</a>.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-6 col-xs-12">
+              <figure class="figure">
+                <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/>
+                <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
+              </figure>
+            </div>
+            <div class="column col-6 col-xs-12">
+              <figure class="figure">
+                <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/>
+                <figcaption class="figure-caption text-center">img-fit-cover</figcaption>
+              </figure>
+            </div>
+          </div>
+
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-contain ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-cover ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
 </code></pre>
 
           <section class="notes">