Skip to content

Commit 193b6a4

Browse files
Maarten84Maarten84
committed
Added form specific variables + refinement classnames and extra label positioning
1 parent 03ba796 commit 193b6a4

File tree

2 files changed

+57
-33
lines changed

2 files changed

+57
-33
lines changed

‎scss/variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
Color 01 and 02 reservered for white and black
1313
*/
1414
$color03: #eeeeee;
15+
$color04: #aaa;
16+
$color05: #ccc;
17+
$color06: #797979;
1518

1619
/*
1720
Theme colors
@@ -120,3 +123,7 @@ $font-size-default: 1.6rem;
120123
$line-height-default: 1.5;
121124

122125

126+
/* Form specific variables */
127+
$input-height: 48px;
128+
$input-border: 1px solid $color03;
129+
$input-transition: 0.1s ease-in-out;

‎views/forms.html

Lines changed: 50 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% set currentPageId = 'forms' %}{% set pageTitle = 'Forms - CastleCSS' %}{% include "inc/header.html" %}
2-
2+
33
<!-- Main -->
44
<div class="b0_12 b4_14 b4_push_01">
55
<div class="p p-b3-3x">
@@ -11,7 +11,7 @@ <h2>Basic example</h2>
1111

1212
<div class="p-2x mb-2x" style="border: 1px solid #eee">
1313
<form class="form">
14-
<div class="fields">
14+
<div class="form-fields">
1515
<div class="form-field">
1616
<label for="gender" class="label">Gender</label>
1717
<label class="input-control input-radio">Male
@@ -24,7 +24,7 @@ <h2>Basic example</h2>
2424
</label>
2525
</div>
2626
</div>
27-
<div class="fields">
27+
<div class="form-fields">
2828
<div class="form-field">
2929
<label for="email">Email</label>
3030
<input type="email" name="Email" id="email" value="">
@@ -38,7 +38,7 @@ <h2>Basic example</h2>
3838
<input type="file" id="file-input">
3939
</div>
4040
</div>
41-
<div class="fields">
41+
<div class="form-fields">
4242
<div class="form-field">
4343
<label class="input-control input-checkbox">I want to receive the newsletter
4444
<input type="checkbox">
@@ -51,7 +51,7 @@ <h2>Basic example</h2>
5151

5252
<pre class="brush: html">
5353
<form class="form">
54-
<div class="fields">
54+
<div class="form-fields">
5555
<div class="form-field">
5656
<label for="gender" class="label">Gender</label>
5757
<label class="input-control input-radio">Male
@@ -64,7 +64,7 @@ <h2>Basic example</h2>
6464
</label>
6565
</div>
6666
</div>
67-
<div class="fields">
67+
<div class="form-fields">
6868
<div class="form-field">
6969
<label for="email">Email</label>
7070
<input type="email" name="Email" id="email" value="">
@@ -78,7 +78,7 @@ <h2>Basic example</h2>
7878
<input type="file" id="file-input">
7979
</div>
8080
</div>
81-
<div class="fields">
81+
<div class="form-fields">
8282
<div class="form-field">
8383
<label class="input-control input-checkbox">I want to receive the newsletter
8484
<input type="checkbox">
@@ -98,7 +98,7 @@ <h3>Standard input</h3>
9898
<p>The <code>input</code> is wrapped in a div with the class <code>.formfield</code>.
9999
<div class="p-2x pb-0" style="border: 1px solid #eee">
100100
<form class="form">
101-
<div class="fields">
101+
<div class="form-fields">
102102
<div class="form-field">
103103
<label for="label">Full name</label>
104104
<input type="text" name="Naam" id="label" value="">
@@ -108,7 +108,7 @@ <h3>Standard input</h3>
108108
</div>
109109
<pre class="brush: html">
110110
<form class="form">
111-
<div class="fields">
111+
<div class="form-fields">
112112
<div class="form-field">
113113
<label for="label">Full name</label>
114114
<input type="text" name="Naam" id="label" value="">
@@ -122,7 +122,7 @@ <h3>Input with button</h3>
122122
<p>Wrap the <code>input</code> en <code>button</code> in a div with the class <code>.input-combined</code>
123123
<div class="p-2x pb-0" style="border: 1px solid #eee">
124124
<form class="form">
125-
<div class="fields">
125+
<div class="form-fields">
126126
<div class="form-field">
127127
<label for="search">Search</label>
128128
<div class="input-combined">
@@ -135,7 +135,7 @@ <h3>Input with button</h3>
135135
</div>
136136
<pre class="brush: html">
137137
<form class="form">
138-
<div class="fields">
138+
<div class="form-fields">
139139
<div class="form-field">
140140
<label for="search">Search</label>
141141
<div class="input-combined">
@@ -151,22 +151,31 @@ <h3>Input with button</h3>
151151
</section>
152152
<section class="block inputs js-forms">
153153
<h3>Label placement</h3>
154-
<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>
154+
<p>Add the classes <code>.label-above</code>, <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>
155155
<div class="g">
156-
<div class="b0_12 b3_12">
157-
<h5>Moves to top</h5>
156+
<div class="b0_12 b3_08">
157+
<h5>Moves above the input</h5>
158158
<form class="form">
159-
<ul class="fields label-top">
159+
<ul class="form-fields label-above">
160160
<li class="form-field">
161161
<label for="lable2a">Email</label>
162162
<input type="text" name="Naam" id="lable2a" value="">
163163
</li>
164164
</ul>
165165
</form>
166166
</div>
167-
<div class="b0_12 b3_12">
168-
<h5>Moves inside</h5>
169-
<ul class="fields label-bottom">
167+
<div class="b0_12 b3_08">
168+
<h5>Moves to top inside the input</h5>
169+
<ul class="form-fields label-top">
170+
<li class="form-field">
171+
<label for="lable3a">Email</label>
172+
<input type="text" name="Naam" id="lable3a" value="">
173+
</li>
174+
</ul>
175+
</div>
176+
<div class="b0_12 b3_08">
177+
<h5>Moves to bottom inside the input</h5>
178+
<ul class="form-fields label-bottom">
170179
<li class="form-field">
171180
<label for="lable3a">Email</label>
172181
<input type="text" name="Naam" id="lable3a" value="">
@@ -179,13 +188,13 @@ <h5>Moves inside</h5>
179188
<h2>Textarea</h2>
180189
<div class="g">
181190
<div class="gi b0_12">
182-
<ul class="fields label-top">
183-
<li class="form-field">
191+
<ul class="form-fields label-top">
192+
<li class="form-field input-textarea">
184193
<label for="textarea">Example</label>
185194
<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
186195
</li>
187196
</ul>
188-
<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>
197+
<div class="alert mb-2x">Remember the label placements mentioned above? The classes <code>.label-bottom</code>, <code>.label-top</code> and <code>.label-above</code> also work well with textareas. By default all labels are vertical-aligned in the middle. If you want to prevent this behaviour with textarea's you can add a parent class of <code>.input-textarea</code></div>
189198
</div>
190199
</div>
191200
</section>
@@ -195,7 +204,7 @@ <h3>Standard checkbox</h3>
195204
<div class="g">
196205
<div class="b0_12">
197206
<b>Select your favorite fruit</b>
198-
<ul class="fields">
207+
<ul class="form-fields">
199208
<li class="form-field">
200209
<label class="input-control input-checkbox">Orange
201210
<input type="checkbox" />
@@ -216,7 +225,7 @@ <h3>Standard checkbox</h3>
216225
</li>
217226
</ul>
218227
<pre class="brush: html">
219-
<ul class="fields">
228+
<ul class="form-fields">
220229
<li class="form-field">
221230
<label class="input-control input-checkbox">Orange
222231
<input type="checkbox" />
@@ -242,7 +251,7 @@ <h3>Standard checkbox</h3>
242251
<h3>Checkbox right of the label</h3>
243252
<p>Add the class <code>.label-left</code> to a parent of the <code>.input-checkbox</code>.</p>
244253
<b>Select your favorite fruit</b>
245-
<ul class="fields label-left">
254+
<ul class="form-fields label-left">
246255
<li class="form-field">
247256
<label class="input-control input-checkbox">Orange
248257
<input type="checkbox" />
@@ -271,7 +280,7 @@ <h2>Radio</h2>
271280
<div class="b0_12 b3_12">
272281
<h5>Vertical radios</h5>
273282
<form class="form">
274-
<div class="fields">
283+
<div class="form-fields">
275284
<div class="form-field">
276285
<label for="gender"><b>Gender</b></label>
277286
<label class="input-control input-radio">Male
@@ -287,7 +296,7 @@ <h5>Vertical radios</h5>
287296
</form>
288297
<pre class="brush: html">
289298
<form class="form">
290-
<div class="fields">
299+
<div class="form-fields">
291300
<div class="form-field">
292301
<label for="gender"><b>Gender</b></label>
293302
<label class="input-control input-radio">Male
@@ -307,7 +316,7 @@ <h5>Vertical radios</h5>
307316
<h5>Horizontal radios</h5>
308317
<p>Radios can be horizontal as well. Add the class <code>.form-horizontal</code> to a parent of the field(s) you want to make horizontal, as shown in the example below.</p>
309318
<form class="form form-horizontal">
310-
<div class="fields">
319+
<div class="form-fields">
311320
<div class="form-field">
312321
<label for="gender" class="label"><b>Gender</b></label>
313322
<label class="input-control input-radio">Male
@@ -323,7 +332,7 @@ <h5>Horizontal radios</h5>
323332
</form>
324333
<pre class="brush: html">
325334
<form class="form form-horizontal">
326-
<div class="fields">
335+
<div class="form-fields">
327336
<div class="form-field">
328337
<label for="gender" class="label"><b>Gender</b></label>
329338
<label class="input-control input-radio">Male
@@ -344,7 +353,7 @@ <h5>Horizontal radios</h5>
344353
<section class="block selects">
345354
<h2>Select</h2>
346355
<form class="form">
347-
<div class="fields">
356+
<div class="form-fields">
348357
<div class="form-field">
349358
<select>
350359
<option>First select</option>
@@ -362,7 +371,7 @@ <h2>Inline forms</h2>
362371
<div class="block">
363372
<h5>Horizontal checkboxes</h5>
364373
<form class="form form-horizontal">
365-
<div class="fields">
374+
<div class="form-fields">
366375
<div class="form-field">
367376
<label class="input-control input-checkbox">Orange
368377
<input type="checkbox">
@@ -388,7 +397,7 @@ <h5>Horizontal checkboxes</h5>
388397
<div class="block">
389398
<h5>Horizontal radios</h5>
390399
<form class="form form-horizontal">
391-
<div class="fields">
400+
<div class="form-fields">
392401
<div class="form-field">
393402
<label class="input-control input-radio">Male
394403
<input type="radio" name="radio2" checked="checked"/>
@@ -405,7 +414,7 @@ <h5>Horizontal radios</h5>
405414

406415
<h5>Input with add-on and button</h5>
407416
<form class="form">
408-
<div class="fields label-bottom">
417+
<div class="form-fields label-top">
409418
<div class="form-field">
410419
<div class="input-combined">
411420
<div class="input-icon fa fa-star">
@@ -419,7 +428,7 @@ <h5>Input with add-on and button</h5>
419428
</form>
420429
<pre class="brush: html">
421430
<form class="form form-horizontal">
422-
<div class="fields label-bottom">
431+
<div class="form-fields label-bottom">
423432
<div class="form-field">
424433
<div class="input-combined">
425434
<div class="input-icon fa fa-star">
@@ -490,6 +499,14 @@ <h5>Input with add-on and button</h5>
490499
});
491500
});
492501

502+
// http://www.zyxware.com/articles/3980/solved-file-input-browse-button-requiring-double-click-in-ie10
503+
// Handle custom triggering of clicks for browse button in IE10
504+
if (navigator.userAgent.indexOf("MSIE") > 0) {
505+
$("input[type='file']").mousedown(function() {
506+
$(this).trigger('click');
507+
})
508+
}
509+
493510
</script>
494511

495512
{% include "inc/footer.html" %}

0 commit comments

Comments
 (0)