diff options
1 files changed, 44 insertions, 6 deletions
| -rw-r--r-- | docs/elements.html | 50 |
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 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation class: is-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <<span class="tag">/form</span>> </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 <img> or <video> 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><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> </code></pre> <section class="notes"> |