Skip to content

Commit 28953db

Browse files
amberjasmijnamberjasmijn
committed
Renaming of several classes (formlabel-bottom > label bottom, etc.)
1 parent 6533a7a commit 28953db

File tree

1 file changed

+65
-67
lines changed

1 file changed

+65
-67
lines changed

‎views/forms.html

Lines changed: 65 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -27,43 +27,41 @@ <h3>Standard input</h3>
2727
</div>
2828
<div class="b0_12 b3_12">
2929
<h3>Input with button</h3>
30-
<ul class="fields g">
31-
<li class="b0_12 ">
30+
<form class="form">
31+
<div class="fields">
3232
<div class="form-field">
3333
<label for="search">Search</label>
34-
<div class="combined-item">
34+
<div class="input-combined">
3535
<input type="search" name="search" class="form-input" id="search">
3636
<button type="submit" class="btn btn-submit">Submit</button>
3737
</div>
3838
</div>
39-
</li>
40-
</ul>
39+
</div>
40+
</form>
4141
</div>
4242
</div>
4343
</section>
4444
<section class="inputs js-forms">
4545
<h3>Label placement</h3>
46-
<p>Add the classes <code>.formlabel-top</code> or <code>.formlabel-bottom</code> to your field to adjust the position of the label. This not only works with inputs, but with textareas as well!</p>
46+
<p>Add the classes <code>.label-top</code> or <code>.label-bottom</code> to your field to adjust the position of the label. This not only works with inputs, but with textareas as well!</p>
4747
<div class="g">
4848
<div class="b0_12 b3_12">
4949
<h5>Moves to top</h5>
50-
<ul class="g fields formlabel-top">
51-
<li class="b0_12">
52-
<div class="form-field">
50+
<form class="form">
51+
<ul class="fields label-top">
52+
<li class="form-field">
5353
<label for="lable2a">Email</label>
5454
<input class="text" type="text" name="Naam" id="lable2a" value="">
55-
</div>
56-
</li>
57-
</ul>
55+
</li>
56+
</ul>
57+
</form>
5858
</div>
5959
<div class="b0_12 b3_12">
6060
<h5>Moves inside</h5>
61-
<ul class="g fields formlabel-bottom">
62-
<li class="b0_12">
63-
<div class="form-field">
64-
<label for="lable3a">Email</label>
65-
<input class="text" type="text" name="Naam" id="lable3a" value="">
66-
</div>
61+
<ul class="fields label-bottom">
62+
<li class="form-field">
63+
<label for="lable3a">Email</label>
64+
<input class="text" type="text" name="Naam" id="lable3a" value="">
6765
</li>
6866
</ul>
6967
</div>
@@ -73,15 +71,13 @@ <h5>Moves inside</h5>
7371
<h2>Textarea</h2>
7472
<div class="g">
7573
<div class="gi b0_12 b3_12">
76-
<ul class="g fields formlabel-top">
77-
<li class="b0_12 ">
78-
<div class="form-field">
79-
<label for="textarea">Example</label>
80-
<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
81-
</div>
74+
<ul class="fields label-top">
75+
<li class="form-field">
76+
<label for="textarea">Example</label>
77+
<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
8278
</li>
8379
</ul>
84-
<div class="alert mb-2x">Remember the label placements mentioned above? The classes <code>.formlabel-bottom</code> and <code>.formlabel-top</code> also work well with textareas.</div>
80+
<div class="alert mb-2x">Remember the label placements mentioned above? The classes <code>.label-bottom</code> and <code>.label-top</code> also work well with textareas.</div>
8581
</div>
8682
</div>
8783
</section>
@@ -93,8 +89,8 @@ <h3>Standard checkbox</h3>
9389
<div class="g">
9490
<div class="b0_12 b3_12">
9591
<b>Select your favorite fruit</b>
96-
<ul class="g fields">
97-
<li class="b0_12">
92+
<ul class="fields">
93+
<li class="form-field">
9894
<label class="input-control input-checkbox">Orange
9995
<input type="checkbox" />
10096
<div class="input-indicator"></div>
@@ -116,8 +112,8 @@ <h3>Standard checkbox</h3>
116112
</div>
117113
<div class="b0_12 b3_12">
118114
<b>Select your favorite fruit</b>
119-
<ul class="g fields label-left">
120-
<li class="b0_12">
115+
<ul class="fields label-left">
116+
<li class="form-field">
121117
<label class="input-control input-checkbox">Orange
122118
<input type="checkbox" />
123119
<div class="input-indicator"></div>
@@ -162,10 +158,10 @@ <h5>Vertical radios</h5>
162158
<div class="b0_12 b3_12">
163159
<h5>Horizontal radios</h5>
164160
<p>Sed ligula eros, sollicitudin nec luctus ac, consectetur quis massa. Praesent nec dictum leo.</p>
165-
<code>.form-inline</code>
166-
<ul class="g fields">
167-
<li class="b0_12">
168-
<div class="form-field form-inline">
161+
<code>.form-horizontal</code>
162+
<form class="form form-horizontal">
163+
<div class="fields">
164+
<div class="form-field">
169165
<label for="gender" class="label"><b>Gender</b></label>
170166
<label class="input-control input-radio">Male
171167
<input type="radio" name="radio2" checked="checked"/>
@@ -176,8 +172,8 @@ <h5>Horizontal radios</h5>
176172
<div class="input-indicator"></div>
177173
</label>
178174
</div>
179-
</li>
180-
</ul>
175+
</div>
176+
</form>
181177
</div>
182178
</section>
183179
<section class="select">
@@ -193,48 +189,50 @@ <h2>Select</h2>
193189
</li>
194190
</ul>
195191
</section>
196-
<section class="inline-forms js-forms">
192+
<section class="horizontal-forms js-forms">
197193
<h2>Inline forms</h2>
198194
<p>Sed ligula eros, sollicitudin nec luctus ac, consectetur quis massa. Praesent nec dictum leo.</p>
199195
<h5>Input with add-on and button</h5>
200-
<ul class="g fields formlabel-bottom">
201-
<li class="b0_12 ">
196+
<form class="form form-horizontal">
197+
<div class="fields label-bottom">
202198
<div class="form-field input-icon">
203199
<label for="search">Product sku</label>
204-
<div class="combined-item fa fa-star">
200+
<div class="input-combined fa fa-star">
205201
<input type="search" name="search" class="form-input" id="search">
206202
<button type="submit" class="btn btn-submit">Search</button>
207203
</div>
208204
</div>
209-
</li>
210-
</ul>
205+
</div>
206+
</form>
211207

212208
<h5>Horizontal checkboxes</h5>
213-
<ul class="g fields form-inline">
214-
<li class="b0_12">
215-
<label class="input-control input-checkbox">Orange
216-
<input type="checkbox">
217-
<div class="input-indicator"></div>
218-
</label>
219-
<label class="input-control input-checkbox">Banana
220-
<input type="checkbox">
221-
<div class="input-indicator"></div>
222-
</label>
223-
<label class="input-control input-checkbox">Apple
224-
<input type="checkbox">
225-
<div class="input-indicator"></div>
226-
</label>
227-
<label class="input-control input-checkbox">Pear
228-
<input type="checkbox">
229-
<div class="input-indicator"></div>
230-
</label>
231-
</li>
232-
</ul>
209+
<form class="form form-horizontal">
210+
<div class="fields">
211+
<div class="form-field">
212+
<label class="input-control input-checkbox">Orange
213+
<input type="checkbox">
214+
<div class="input-indicator"></div>
215+
</label>
216+
<label class="input-control input-checkbox">Banana
217+
<input type="checkbox">
218+
<div class="input-indicator"></div>
219+
</label>
220+
<label class="input-control input-checkbox">Apple
221+
<input type="checkbox">
222+
<div class="input-indicator"></div>
223+
</label>
224+
<label class="input-control input-checkbox">Pear
225+
<input type="checkbox">
226+
<div class="input-indicator"></div>
227+
</label>
228+
<div>
229+
</div>
230+
</form>
233231

234232
<h5>Horizontal radios</h5>
235-
<ul class="g fields">
236-
<li class="b0_12">
237-
<div class="form-field form-inline">
233+
<form class="form form-horizontal">
234+
<div class="fields">
235+
<div class="form-field">
238236
<label class="input-control input-radio">Male
239237
<input type="radio" name="radio2" checked="checked"/>
240238
<div class="input-indicator"></div>
@@ -243,9 +241,9 @@ <h5>Horizontal radios</h5>
243241
<input type="radio" name="radio2"/>
244242
<div class="input-indicator"></div>
245243
</label>
246-
</div>
247-
</li>
248-
</ul>
244+
<div>
245+
</div>
246+
</form>
249247
</section>
250248
</div>
251249
</div>

0 commit comments

Comments
 (0)