Add inline forms

2 files changed, 57 insertions, 9 deletions

diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index 838b9e4..e812aef 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -154,6 +154,54 @@ script.
 p
   | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
 
++docs-subheading('forms-inline', 'Inline forms')
+
+.docs-demo.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-radio.form-inline
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio.form-inline
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-checkbox.form-inline
+          input(type="checkbox")
+          i.form-icon
+          |  Checkbox 1
+        label.form-checkbox.form-inline
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Checkbox 2
+
+p
+  | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="form-group">
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+        </label>
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender"><i class="form-icon"></i> Female
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label class="form-checkbox form-inline">
+          <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+        </label>
+        <label class="form-checkbox form-inline">
+          <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+        </label>
+      </div>
+
 +docs-subheading('forms-horizontal', 'Horizontal forms')
 
 p
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
index 4da5ac7..a30d75c 100644
--- a/docs/src/contents/panels.pug
+++ b/docs/src/contents/panels.pug
@@ -22,21 +22,21 @@ p Panels are flexible view container with auto-expand content section.
       .panel-body
         .tile.tile-centered
           .tile-content
-            .tile-title E-mail
+            .tile-title.text-bold E-mail
             .tile-subtitle bruce.banner@hulk.com
           .tile-action
-            button.btn.btn-link.btn-action.btn-lg.tooltip(data-tooltip="Edit E-mail")
+            button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail")
               i.icon.icon-edit
         .tile.tile-centered
           .tile-content
-            .tile-title Skype
+            .tile-title.text-bold Skype
             .tile-subtitle bruce.banner
           .tile-action
             button.btn.btn-link.btn-action.btn-lg
               i.icon.icon-edit
         .tile.tile-centered
           .tile-content
-            .tile-title Location
+            .tile-title.text-bold Location
             .tile-subtitle Dayton, Ohio
           .tile-action
             button.btn.btn-link.btn-action.btn-lg
@@ -53,7 +53,7 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-1.png" alt="Avatar")
           .tile-content
-            p.tile-title Thor Odinson
+            p.tile-title.text-bold Thor Odinson
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
         .tile
@@ -61,13 +61,13 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-2.png" alt="Avatar")
           .tile-content
-            p.tile-title Bruce Banner
+            p.tile-title.text-bold Bruce Banner
             p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
         .tile
           .tile-icon
             figure.avatar(data-initial="TS")
           .tile-content
-            p.tile-title Tony Stark
+            p.tile-title.text-bold Tony Stark
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
         .tile
@@ -75,14 +75,14 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-4.png" alt="Avatar")
           .tile-content
-            p.tile-title Steve Rogers
+            p.tile-title.text-bold Steve Rogers
             p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
         .tile
           .tile-icon
             figure.avatar
               img(src="img/avatar-3.png" alt="Avatar")
           .tile-content
-            p.tile-title Natasha Romanoff
+            p.tile-title.text-bold Natasha Romanoff
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
       .panel-footer