Skip to content
This repository was archived by the owner on Sep 28, 2020. It is now read-only.

Commit 6200dc7

Browse files
mdomdo
committed
Merge branch 'gh-pages'
Conflicts: _config.yml _layouts/default.html index.md
2 parents fd1bcb6 + 06034f2 commit 6200dc7

File tree

6 files changed

+140
-6
lines changed

6 files changed

+140
-6
lines changed

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66

77
---
88

9-
### Contribute
10-
11-
Open an issue or a pull request to suggest changes or additions.
9+
### Contributing
1210

11+
Open an issue or a pull request to suggest changes or additions. **Please submit pull requests to the `gh-pages` branch.**
1312

1413
### License
1514

‎_includes/progress-ie9.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<progress class="progress" value="25" max="100">
2+
<div class="progress">
3+
<span class="progress-bar" style="width: 25%;">
4+
25%
5+
</span>
6+
</div>
7+
</progress>

‎_includes/progress.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<progress class="progress" value="25" max="100">
2+
25%
3+
</progress>
4+
<progress class="progress" value="50" max="100">
5+
50%
6+
</progress>
7+
<progress class="progress" value="75" max="100">
8+
75%
9+
</progress>
10+
<progress class="progress" value="100" max="100">
11+
100%
12+
</progress>

‎index.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ <h1>WTF, forms?</h1>
4545

4646

4747
<div class="container">
48+
<script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=wtfforms" id="_fusionads_js"></script>
49+
4850
<h3>Checkboxes and radios</h3>
4951

5052
<form class="controls-stacked">
@@ -99,7 +101,7 @@ <h3>Checkboxes and radios</h3>
99101

100102
<h4>Alternate icons</h4>
101103

102-
<p>By default, checkboxes use a checkmark and radios use a filled circle. Also included are two modifier classes, <code>.control-x</code> and <code>.control-dash</code>, to change things up should the need arise.</p>
104+
<p>By default, checkboxes use a checkmark and radios use an filled circle. Also included are two modifier classes, <code>.control-x</code> and <code>.control-dash</code>, to change things up should the need arise.</p>
103105

104106
<form class="controls-inline">
105107
<label class="control checkbox control-x">
@@ -168,6 +170,19 @@ <h3>Select menu</h3>
168170

169171
<p>Any ideas on improving these are most welcome.</p>
170172

173+
<h3>Multiple select</h3>
174+
175+
<form class="controls-stacked">
176+
<label class="select-multiple">
177+
<select multiple>
178+
<option selected>Open this select menu</option>
179+
<option value="1">One</option>
180+
<option value="2">Two</option>
181+
<option value="3">Three</option>
182+
</select>
183+
</label>
184+
</form>
185+
171186
<h3>File browser</h3>
172187

173188
<form class="controls-stacked">

‎test.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: default
3+
title: Test
4+
---
5+
6+
<br><br><br><br>
7+
8+
<form class="controls-stacked">
9+
{% include checkbox.html %}
10+
</form>
11+
12+
<form class="controls-stacked">
13+
{% include radio.html %}
14+
</form>
15+
16+
<form class="controls-stacked">
17+
{% include select.html %}
18+
</form>
19+
20+
<form class="controls-stacked">
21+
{% include file.html %}
22+
</form>
23+
24+
<form class="controls-stacked">
25+
{% include progress.html %}
26+
</form>
27+
28+
<br><br><br><br>

‎wtf-forms.css

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@
109109
}
110110
.select select {
111111
display: inline-block;
112+
width: 100%;
112113
margin: 0;
113114
padding: .5rem 2.25rem .5rem 1rem;
114115
line-height: 1.5;
@@ -274,17 +275,89 @@
274275

275276

276277

278+
/*
279+
* Progress
280+
*/
281+
282+
.progress {
283+
display: inline-block;
284+
height: 1rem;
285+
}
286+
.progress[value] {
287+
/* Reset the default appearance */
288+
-webkit-appearance: none;
289+
-moz-appearance: none;
290+
appearance: none;
291+
/* Remove Firefox and Opera border */
292+
border: 0;
293+
/* IE10 uses `color` to set the bar background-color */
294+
color: #0074d9;
295+
}
296+
.progress[value]::-webkit-progress-bar {
297+
background-color: #eee;
298+
border-radius: .2rem;
299+
}
300+
.progress[value]::-webkit-progress-value {
301+
background-color: #0074d9;
302+
border-top-left-radius: .2rem;
303+
border-bottom-left-radius: .2rem;
304+
}
305+
.progress[value="100"]::-webkit-progress-value {
306+
border-top-right-radius: .2rem;
307+
border-bottom-right-radius: .2rem;
308+
}
309+
310+
/* Firefox styles must be entirely separate or it busts Webkit styles. */
311+
@-moz-document url-prefix() {
312+
.progress[value] {
313+
background-color: #eee;
314+
border-radius: .2rem;
315+
}
316+
.progress[value]::-moz-progress-bar {
317+
background-color: #0074d9;
318+
border-top-left-radius: .2rem;
319+
border-bottom-left-radius: .2rem;
320+
}
321+
.progress[value="100"]::-moz-progress-bar {
322+
border-top-right-radius: .2rem;
323+
border-bottom-right-radius: .2rem;
324+
}
325+
}
326+
327+
/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */
328+
@media screen and (min-width:0\0) {
329+
.progress {
330+
background-color: #eee;
331+
border-radius: .2rem;
332+
}
333+
.progress-bar {
334+
display: inline-block;
335+
height: 1rem;
336+
text-indent: -999rem; /* Simulate hiding of value as in native `<progress>` */
337+
background-color: #0074d9;
338+
border-top-left-radius: .2rem;
339+
border-bottom-left-radius: .2rem;
340+
}
341+
.progress[width="100%"] {
342+
border-top-right-radius: .2rem;
343+
border-bottom-right-radius: .2rem;
344+
}
345+
}
346+
347+
277348
/*
278349
* Control layouts
279350
*/
280351

281352
.controls-stacked {
282353
margin: 1rem 0;
283354
}
284-
.controls-stacked .control {
355+
.controls-stacked .control,
356+
.controls-stacked .progress {
285357
display: block;
286358
}
287-
.controls-stacked .control + .control {
359+
.controls-stacked .control + .control,
360+
.controls-stacked .progress + .progress {
288361
margin-top: .5rem;
289362
}
290363

0 commit comments

Comments
 (0)