Skip to content

Commit

Permalink
Add responsive horizontal form support #375
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Jan 16, 2018
1 parent be24aac commit 5451052
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 21 deletions.
5 changes: 4 additions & 1 deletion dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -955,6 +955,7 @@ textarea.form-input {
top: 50%;
transform: translateY(-50%);
width: .8rem;
z-index: 2;
}

.has-icon-left .form-icon {
Expand Down Expand Up @@ -1309,8 +1310,10 @@ input.disabled + .form-icon {
}

.form-horizontal .form-group {
display: flex;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.label {
Expand Down
2 changes: 1 addition & 1 deletion dist/spectre.min.css
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion docs/dist/spectre-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -956,6 +956,7 @@ textarea.form-input {
top: 50%;
transform: translateY(-50%);
width: .8rem;
z-index: 2;
}

.has-icon-left .form-icon {
Expand Down Expand Up @@ -1310,8 +1311,10 @@ input.disabled + .form-icon {
}

.form-horizontal .form-group {
display: flex;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.label {
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre-rtl.min.css
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion docs/dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -955,6 +955,7 @@ textarea.form-input {
top: 50%;
transform: translateY(-50%);
width: .8rem;
z-index: 2;
}

.has-icon-left .form-icon {
Expand Down Expand Up @@ -1309,8 +1310,10 @@ input.disabled + .form-icon {
}

.form-horizontal .form-group {
display: flex;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.label {
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre.min.css
View file

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions docs/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1030,32 +1030,32 @@ <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Form

<h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
<div class="docs-note">
<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> class to the child elements for form row layout. </p>
<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. </p>
</div>
<div class="columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
<div class="form-group">
<div class="col-3">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-4">Name</label>
</div>
<div class="col-9">
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-example-4" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-3">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-5">Email</label>
</div>
<div class="col-9">
<div class="col-9 col-sm-12">
<input class="form-input" type="email" id="input-example-5" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-3">
<div class="col-3 col-sm-12">
<label class="form-label">Gender</label>
</div>
<div class="col-9">
<div class="col-9 col-sm-12">
<label class="form-radio">
<input type="radio" name="gender">
<i class="form-icon"></i> Male
Expand All @@ -1067,10 +1067,10 @@ <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
</div>
</div>
<div class="form-group">
<div class="col-3">
<div class="col-3 col-sm-12">
<label class="form-label">Source</label>
</div>
<div class="col-9">
<div class="col-9 col-sm-12">
<select class="form-select" multiple>
<option>Slack</option>
<option>Skype</option>
Expand All @@ -1079,23 +1079,23 @@ <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
</div>
</div>
<div class="form-group">
<div class="col-9 col-ml-auto">
<div class="col-9 col-sm-12 col-ml-auto">
<label class="form-switch">
<input type="checkbox">
<i class="form-icon"></i> Send me emails with news and tips
</label>
</div>
</div>
<div class="form-group">
<div class="col-3">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-6">Message</label>
</div>
<div class="col-9">
<div class="col-9 col-sm-12">
<textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-9 col-ml-auto">
<div class="col-9 col-sm-12 col-ml-auto">
<label class="form-checkbox">
<input type="checkbox">
<i class="form-icon"></i> Remember me
Expand All @@ -1109,10 +1109,10 @@ <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
<!-- forms -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3 col-sm-12&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">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9 col-sm-12&quot;</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;Name&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
Expand Down
1 change: 1 addition & 0 deletions src/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,5 +522,6 @@ input {

.form-group {
display: flex;
flex-wrap: wrap;
}
}

0 comments on commit 5451052

Please sign in to comment.