Merge branch 'gh-pages'

Conflicts:
	_config.yml
	_layouts/default.html
	index.md

README.md

@@ -6,10 +6,9 @@
 
 ---
 
-### Contribute
-
-Open an issue or a pull request to suggest changes or additions.
+### Contributing
 
+Open an issue or a pull request to suggest changes or additions. **Please submit pull requests to the `gh-pages` branch.**
 
 ### License
 

_includes/progress-ie9.html

@@ -0,0 +1,7 @@
+<progress class="progress" value="25" max="100">
+  <div class="progress">
+    <span class="progress-bar" style="width: 25%;">
+      25%
+    </span>
+  </div>
+</progress>

_includes/progress.html

@@ -0,0 +1,12 @@
+<progress class="progress" value="25" max="100">
+  25%
+</progress>
+<progress class="progress" value="50" max="100">
+  50%
+</progress>
+<progress class="progress" value="75" max="100">
+  75%
+</progress>
+<progress class="progress" value="100" max="100">
+  100%
+</progress>

index.html

@@ -45,6 +45,8 @@ <h1>WTF, forms?</h1>
 
 
     <div class="container">
+      <script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=wtfforms" id="_fusionads_js"></script>
+
       <h3>Checkboxes and radios</h3>
 
 <form class="controls-stacked">
@@ -99,7 +101,7 @@ <h3>Checkboxes and radios</h3>
 
 <h4>Alternate icons</h4>
 
-<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>
+<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>
 
 <form class="controls-inline">
   <label class="control checkbox control-x">
@@ -168,6 +170,19 @@ <h3>Select menu</h3>
 
 <p>Any ideas on improving these are most welcome.</p>
 
+<h3>Multiple select</h3>
+
+<form class="controls-stacked">
+  <label class="select-multiple">
+    <select multiple>
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </label>
+</form>
+
 <h3>File browser</h3>
 
 <form class="controls-stacked">

test.html

@@ -0,0 +1,28 @@
+---
+layout: default
+title: Test
+---
+
+<br><br><br><br>
+
+<form class="controls-stacked">
+  {% include checkbox.html %}
+</form>
+
+<form class="controls-stacked">
+  {% include radio.html %}
+</form>
+
+<form class="controls-stacked">
+  {% include select.html %}
+</form>
+
+<form class="controls-stacked">
+  {% include file.html %}
+</form>
+
+<form class="controls-stacked">
+  {% include progress.html %}
+</form>
+
+<br><br><br><br>

wtf-forms.css

@@ -109,6 +109,7 @@
 }
 .select select {
   display: inline-block;
+  width: 100%;
   margin: 0;
   padding: .5rem 2.25rem .5rem 1rem;
   line-height: 1.5;
@@ -274,17 +275,89 @@
 
 
 
+/*
+ * Progress
+ */
+
+.progress {
+  display: inline-block;
+  height: 1rem;
+}
+.progress[value] {
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  /* Remove Firefox and Opera border */
+  border: 0;
+  /* IE10 uses `color` to set the bar background-color */
+  color: #0074d9;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
+  border-radius: .2rem;
+}
+.progress[value]::-webkit-progress-value {
+  background-color: #0074d9;
+  border-top-left-radius: .2rem;
+  border-bottom-left-radius: .2rem;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+}
+
+/* Firefox styles must be entirely separate or it busts Webkit styles. */
+@-moz-document url-prefix() {
+  .progress[value] {
+    background-color: #eee;
+    border-radius: .2rem;
+  }
+  .progress[value]::-moz-progress-bar {
+    background-color: #0074d9;
+    border-top-left-radius: .2rem;
+    border-bottom-left-radius: .2rem;
+  }
+  .progress[value="100"]::-moz-progress-bar {
+    border-top-right-radius: .2rem;
+    border-bottom-right-radius: .2rem;
+  }
+}
+
+/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */
+@media screen and (min-width:0\0) {
+  .progress {
+    background-color: #eee;
+    border-radius: .2rem;
+  }
+  .progress-bar {
+    display: inline-block;
+    height: 1rem;
+    text-indent: -999rem; /* Simulate hiding of value as in native `<progress>` */
+    background-color: #0074d9;
+    border-top-left-radius: .2rem;
+    border-bottom-left-radius: .2rem;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: .2rem;
+    border-bottom-right-radius: .2rem;
+  }
+}
+
+
 /*
  * Control layouts
  */
 
 .controls-stacked {
   margin: 1rem 0;
 }
-.controls-stacked .control {
+.controls-stacked .control,
+.controls-stacked .progress {
   display: block;
 }
-.controls-stacked .control + .control {
+.controls-stacked .control + .control,
+.controls-stacked .progress + .progress {
   margin-top: .5rem;
 }