Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

6 files changed, 100 insertions, 6 deletions

diff --git a/docs/src/elements/code.pug b/docs/src/elements/code.pug
index 894b617..920fea9 100644
--- a/docs/src/elements/code.pug
+++ b/docs/src/elements/code.pug
@@ -11,8 +11,21 @@ block docs-content
     include ../_layout/_ad-g.pug
 
     p Code is used for styling inline and multiline code snippets.
+
+    +docs-subheading('code-inline', 'Inline code')
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- inline code -->
+          <code>code</code>
+
     p
       | For inline code, you can use the #{'<code>'} element. 
+
+    +docs-subheading('code-snippet', 'Code snippet')
+
+    p
       | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
       | The #[code data-lang] attribute is rendered as the language name in the top right.
 
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
index 5532860..cf39916 100644
--- a/docs/src/elements/forms.pug
+++ b/docs/src/elements/forms.pug
@@ -13,6 +13,8 @@ block docs-content
     p
       | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
 
+    +docs-subheading('forms-input', 'Form input')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -31,6 +33,8 @@ block docs-content
             <input class="form-input" type="text" id="input-example-1" placeholder="Name">
           </div>
 
+    +docs-subheading('forms-textarea', 'Form textarea')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -46,6 +50,8 @@ block docs-content
             <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
           </div>
 
+    +docs-subheading('forms-select', 'Form select')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -74,6 +80,8 @@ block docs-content
             </select>
           </div>
 
+    +docs-subheading('forms-radio', 'Form radio')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         form
@@ -104,6 +112,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-switch', 'Form switch')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -128,6 +138,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-checkbox', 'Form checkbox')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug
index 1430fe4..6128b3e 100644
--- a/docs/src/elements/icons.pug
+++ b/docs/src/elements/icons.pug
@@ -141,6 +141,10 @@ block docs-content
         button.btn.btn-primary.btn-action.btn-lg
           i.icon.icon-upload
         p icon-upload
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-copy
+        p icon-copy
 
     +docs-subheading('icons-object', 'Object icons')
 
diff --git a/docs/src/elements/labels.pug b/docs/src/elements/labels.pug
index 7232d42..7c6c55b 100644
--- a/docs/src/elements/labels.pug
+++ b/docs/src/elements/labels.pug
@@ -32,6 +32,8 @@ block docs-content
           <span class="label">default label</span>
           <span class="label label-primary">primary label</span>
 
+    +docs-subheading('labels-rounded', 'Rounded labels')
+    
     .docs-demo.columns
       .column
         span.label.label-rounded.mr-1 default label
diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug
index 05cd719..3cd4c2c 100644
--- a/docs/src/elements/media.pug
+++ b/docs/src/elements/media.pug
@@ -17,10 +17,15 @@ block docs-content
     p
       | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
 
-    .columns
+    .docs-demo.columns
       .column.col-12
         img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+
     p
       | Add the #[code img-fit-contain] or #[code img-fit-cover] 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 classic background image trick. Microsoft Edge support 
@@ -40,7 +45,6 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
@@ -59,6 +63,14 @@ block docs-content
           img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
           figcaption.figure-caption.text-center macOS Yosemite wallpaper
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="figure">
+            <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+            <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+          </figure>
+
     +docs-subheading('media-video', 'Video')
 
     p
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
index 3e087d9..5eec15d 100644
--- a/docs/src/elements/tables.pug
+++ b/docs/src/elements/tables.pug
@@ -14,7 +14,7 @@ block docs-content
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped
+        table.table
           thead
             tr
               th Name
@@ -40,7 +40,57 @@ block docs-content
 
     p
       | Add the #[code table] class to any #{'<table>'} element. 
-      | The class will add padding, border and emphasized table header. 
+      | The class will add padding, border and emphasized table header.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+    
+    +docs-subheading('tables-striped', 'Striped tables')
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped.table-hover
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr.active
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
       | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
       | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
     p
@@ -66,10 +116,11 @@ block docs-content
             </tbody>
           </table>
 
+    +docs-subheading('tables-scroll', 'Scrollable tables')
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped.table-scroll
+        table.table.table-scroll
           thead
             tr
               th Name
@@ -114,7 +165,7 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <table class="table table-striped table-scroll">
+          <table class="table table-scroll">
             ...
           </table>