Add inline forms

picturepan2 · Jun 18, 2018 · 97127ed · 97127ed
1 parent aeb2faa
commit 97127ed
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 26 deletions.
diff --git a/dist/spectre.css b/dist/spectre.css
@@ -998,7 +998,7 @@ textarea.form-input {
 .form-checkbox,
 .form-radio,
 .form-switch {
-  display: inline-block;
+  display: block;
   line-height: 1.2rem;
   margin: .2rem 0;
   min-height: 1.2rem;
@@ -1344,6 +1344,10 @@ input.disabled + .form-icon {
   flex-wrap: wrap;
 }
 
+.form-inline {
+  display: inline-block;
+}
+
 .label {
   background: #f0f1f4;
   border-radius: .1rem;

diff --git a/dist/spectre.min.css b/dist/spectre.min.css
diff --git a/docs/components.html b/docs/components.html
@@ -1118,16 +1118,16 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                   <div class="panel-body">
                     <div class="tile tile-centered">
                       <div class="tile-content">
-                        <div class="tile-title">E-mail</div>
+                        <div class="tile-title text-bold">E-mail</div>
                         <div class="tile-subtitle">bruce.banner@hulk.com</div>
                       </div>
                       <div class="tile-action">
-                        <button class="btn btn-link btn-action btn-lg tooltip" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button>
+                        <button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button>
                       </div>
                     </div>
                     <div class="tile tile-centered">
                       <div class="tile-content">
-                        <div class="tile-title">Skype</div>
+                        <div class="tile-title text-bold">Skype</div>
                         <div class="tile-subtitle">bruce.banner</div>
                       </div>
                       <div class="tile-action">
@@ -1136,7 +1136,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                     </div>
                     <div class="tile tile-centered">
                       <div class="tile-content">
-                        <div class="tile-title">Location</div>
+                        <div class="tile-title text-bold">Location</div>
                         <div class="tile-subtitle">Dayton, Ohio</div>
                       </div>
                       <div class="tile-action">
@@ -1160,7 +1160,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                         <figure class="avatar"><img src="img/avatar-1.png" alt="Avatar"></figure>
                       </div>
                       <div class="tile-content">
-                        <p class="tile-title">Thor Odinson</p>
+                        <p class="tile-title text-bold">Thor Odinson</p>
                         <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                       </div>
                     </div>
@@ -1169,7 +1169,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                         <figure class="avatar"><img src="img/avatar-2.png" alt="Avatar"></figure>
                       </div>
                       <div class="tile-content">
-                        <p class="tile-title">Bruce Banner</p>
+                        <p class="tile-title text-bold">Bruce Banner</p>
                         <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                       </div>
                     </div>
@@ -1178,7 +1178,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                         <figure class="avatar" data-initial="TS"></figure>
                       </div>
                       <div class="tile-content">
-                        <p class="tile-title">Tony Stark</p>
+                        <p class="tile-title text-bold">Tony Stark</p>
                         <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                       </div>
                     </div>
@@ -1187,7 +1187,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                         <figure class="avatar"><img src="img/avatar-4.png" alt="Avatar"></figure>
                       </div>
                       <div class="tile-content">
-                        <p class="tile-title">Steve Rogers</p>
+                        <p class="tile-title text-bold">Steve Rogers</p>
                         <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                       </div>
                     </div>
@@ -1196,7 +1196,7 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                         <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"></figure>
                       </div>
                       <div class="tile-content">
-                        <p class="tile-title">Natasha Romanoff</p>
+                        <p class="tile-title text-bold">Natasha Romanoff</p>
                         <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                       </div>
                     </div>

diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
@@ -999,7 +999,7 @@ textarea.form-input {
 .form-checkbox,
 .form-radio,
 .form-switch {
-  display: inline-block;
+  display: block;
   line-height: 1.2rem;
   margin: .2rem 0;
   min-height: 1.2rem;
@@ -1345,6 +1345,10 @@ input.disabled + .form-icon {
   flex-wrap: wrap;
 }
 
+.form-inline {
+  display: inline-block;
+}
+
 .label {
   background: #f0f1f4;
   border-radius: .1rem;

diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -998,7 +998,7 @@ textarea.form-input {
 .form-checkbox,
 .form-radio,
 .form-switch {
-  display: inline-block;
+  display: block;
   line-height: 1.2rem;
   margin: .2rem 0;
   min-height: 1.2rem;
@@ -1344,6 +1344,10 @@ input.disabled + .form-icon {
   flex-wrap: wrap;
 }
 
+.form-inline {
+  display: inline-block;
+}
+
 .label {
   background: #f0f1f4;
   border-radius: .1rem;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -696,6 +696,48 @@ <h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a
 
             </script>
             <p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p>
+            <h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <form>
+                  <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>
+                </form>
+              </div>
+            </div>
+            <p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 1
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 2
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
             <h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4>
             <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container.
               And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.

diff --git 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
@@ -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,36 +53,36 @@ 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
           .tile-icon
             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
           .tile-icon
             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

diff --git a/src/_forms.scss b/src/_forms.scss
@@ -193,7 +193,7 @@ textarea.form-input {
 .form-checkbox,
 .form-radio,
 .form-switch {
-  display: inline-block;
+  display: block;
   line-height: $line-height;
   margin: ($control-size - $control-size-sm) / 2 0;
   min-height: 1.2rem;
@@ -529,7 +529,7 @@ input {
   }
 }
 
-// Form Horizontal
+// Form horizontal
 .form-horizontal {
   padding: $layout-spacing 0;
 
@@ -538,3 +538,8 @@ input {
     flex-wrap: wrap;
   }
 }
+
+// Form inline
+.form-inline {
+  display: inline-block;
+}