From 7dce206dc250070821b7c3f9ac12f6db9b3e0a3f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 14 May 2014 11:19:32 -0700
Subject: [PATCH 01/12] merge changes from #11

---
 wtf-forms.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/wtf-forms.css b/wtf-forms.css
index 40ad798..160d26e 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -117,7 +117,7 @@
           appearance: none;
 }
 /* Undo the Firefox inner focus ring */
-.select select:-moz-focusring {
+.select select:focus:-moz-focusring {
   color: transparent;
   text-shadow: 0 0 0 #000;
 }
@@ -161,13 +161,19 @@
   display: none;
 }
 
-/* Firefox hack to hide the arrow */
+/* Media query to target Firefox only */
 @-moz-document url-prefix() {
+  /* Firefox hack to hide the arrow */
   .select select {
     text-indent: 0.01px;
     text-overflow: '';
     padding-right: 1rem;
   }
+
+  /* <option> elements inherit styles from <select>, so reset them. */
+  .select option {
+    background-color: white;
+  }
 }
 
 /* IE9 hack to hide the arrow */

From 8e0509e3459d1e49a8812cfaf88d48cb2b09a9b9 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 14:45:52 -0700
Subject: [PATCH 02/12] custom progress element

---
 _includes/progress-ie9.html |  7 ++++
 _includes/progress.html     | 12 ++++++
 index.md                    | 36 +++++++++++++++++
 wtf-forms.css               | 77 ++++++++++++++++++++++++++++++++++++-
 4 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 _includes/progress-ie9.html
 create mode 100644 _includes/progress.html

diff --git a/_includes/progress-ie9.html b/_includes/progress-ie9.html
new file mode 100644
index 0000000..6014e34
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_includes/progress.html b/_includes/progress.html
new file mode 100644
index 0000000..b532fd1
--- /dev/null
+++ b/_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>
diff --git a/index.md b/index.md
index 3f84a7c..6b2bc8b 100644
--- a/index.md
+++ b/index.md
@@ -99,6 +99,42 @@ In other words, it's an entirely custom element, all generated via CSS.
 **Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
 
 
+### Progress
+
+<form class="controls-stacked">
+  {% include progress.html %}
+</form>
+```html
+{% include progress.html %}
+```
+
+The `<progress>` element is actually pretty straightforward to style, but it does have some gotchas. Here's the deal:
+
+* Unlike most other custom inputs, we don't wrap it in an extra element. We just add `.progress`.
+* Using pseudo selectors, we target aspects of the `<progress>` element. For example, in WebKit browsers, `::-webkit-progress-bar` is the background bar and `::-webkit-progress-value` is the colored progress bar within.
+* Firefox has it's own pseudo selectors that must be applied with duplicate rulesets. Chaining `::-webkit-` and `::-moz-` pseudo selectors will nullify your styles. (It's worth noting this happens with other pseudo selectors like `placeholder`).
+* IE10 is the only version of IE to support `<progress>`. The only quirk there is that you must set the `color` property on the `<progress>` element to colorize the progress bar within.
+
+For more information, [read the rather thorough CSS Tricks article](http://css-tricks.com/html5-progress-element/). There you'll find gotchas around generated content, browser quirks, and more. The MDN also has an informative [article on the progress element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
+
+#### IE9 support
+
+<form class="controls-stacked">
+  {% include progress-ie9.html %}
+</form>
+```html
+{% include progress-ie9.html %}
+```
+
+IE10 natively supports the `<progress>` element, but IE9 doesn't. Instead, they simply show as plain text values. However, IE9 support is just a few hacks away:
+
+* We add custom markup *within* the existing `<progress>` element to simulate the background and inner progress bar.
+* We copy-paste the styles from the pseudo selectors to a IE9-specific media query (like I said, a few hacks) to only apply when necessary.
+* Lastly, to simulate the native `<progress>` behavior, we add `text-indent: -999rem;` to the custom `.progress-bar` to hide the text value.
+
+**Once applied, you can use the IE9-compatible snippet in all browsers.** However, I encourage you to only do so should you need IE9 support.
+
+
 ### FAQs
 
 #### What about every other form control?
diff --git a/wtf-forms.css b/wtf-forms.css
index 160d26e..f105466 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -268,6 +268,77 @@
 
 
 
+/*
+ * Progress
+ */
+
+.progress {
+  display: inline-block;
+  width: 100%;
+  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; /* Simular 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
  */
@@ -275,10 +346,12 @@
 .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;
 }
 

From 81a14a371a556f885d112b7572649a35657a7aa0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 14:46:46 -0700
Subject: [PATCH 03/12] fixes #24: set width: 100%; on selects

---
 wtf-forms.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/wtf-forms.css b/wtf-forms.css
index 160d26e..cb93699 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -103,6 +103,7 @@
 }
 .select select {
   display: inline-block;
+  width: 100%;
   margin: 0;
   padding: .5rem 2.25rem .5rem 1rem;
   line-height: 1.5;

From e874154ff0c5c0e4c371f0b3e4170e9769e00f45 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 10 Jun 2014 15:09:44 -0700
Subject: [PATCH 04/12] new line life

---
 _includes/progress-ie9.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/progress-ie9.html b/_includes/progress-ie9.html
index 6014e34..f4dbcc2 100644
--- a/_includes/progress-ie9.html
+++ b/_includes/progress-ie9.html
@@ -4,4 +4,4 @@
       25%
     </span>
   </div>
-</progress>
\ No newline at end of file
+</progress>

From 8c7b434310ccd9ddf736ee88845022af14e6bf10 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 16:19:35 -0700
Subject: [PATCH 05/12] fix paths for other pages

---
 _layouts/default.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 4f39f37..aea1560 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,8 +10,8 @@
       {{ site.name }}
     </title>
 
-    <link rel="stylesheet" href="wtf-forms.css">
-    <link rel="stylesheet" href="docs.css">
+    <link rel="stylesheet" href="/wtf-forms.css">
+    <link rel="stylesheet" href="/docs.css">
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|PT+Mono&amp;subset=latin,cyrillic">
 
     <script>

From 553554fcceed208598e97587711fd8db82bd0b95 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 16:19:40 -0700
Subject: [PATCH 06/12] add test page

---
 test.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 test.html

diff --git a/test.html b/test.html
new file mode 100644
index 0000000..e387e14
--- /dev/null
+++ b/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>
\ No newline at end of file

From d42e3d1c08255959414dcfe6f6bf80f85bd21d0b Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 16:23:21 -0700
Subject: [PATCH 07/12] don't width: 100%; it by default, and clean up docs
 organization

---
 index.md      | 14 ++++++++++++--
 wtf-forms.css |  1 -
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.md b/index.md
index 6b2bc8b..ed0aec7 100644
--- a/index.md
+++ b/index.md
@@ -117,7 +117,17 @@ The `<progress>` element is actually pretty straightforward to style, but it doe
 
 For more information, [read the rather thorough CSS Tricks article](http://css-tricks.com/html5-progress-element/). There you'll find gotchas around generated content, browser quirks, and more. The MDN also has an informative [article on the progress element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
 
-#### IE9 support
+#### Custom width
+
+The `width` is autmatically set by the browser, but you can easily change it by adding some CSS to `.progress`.
+
+```css
+.progress {
+  width: 100%;
+}
+```
+
+#### Internet Explorer 9 support
 
 <form class="controls-stacked">
   {% include progress-ie9.html %}
@@ -138,7 +148,7 @@ IE10 natively supports the `<progress>` element, but IE9 doesn't. Instead, they
 ### FAQs
 
 #### What about every other form control?
-For the time being, **WTF, forms?** is limited to checkboxes, radio buttons, select menus, and file inputs. Additional custom inputs will depend on browser support.
+For the time being, **WTF, forms?** is limited to checkboxes, radio buttons, select menus, file inputs, and progress bars. Additional custom inputs will depend on browser support.
 
 #### Why are there no `for` attributes?
 We nest our `<input>`s and `<select>`s within a `<label>`, so there's no need to specify a `for` attribute as the browser will automatically associate the two.
diff --git a/wtf-forms.css b/wtf-forms.css
index 1cc300e..3d599b2 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -275,7 +275,6 @@
 
 .progress {
   display: inline-block;
-  width: 100%;
   height: 1rem;
 }
 .progress[value] {

From 364a5212ea11e3fba0dedaf54eabc238d2c700d4 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 17:01:05 -0700
Subject: [PATCH 08/12] jekyll 2.x change

---
 _config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index c8fc7c7..9a4c9fa 100644
--- a/_config.yml
+++ b/_config.yml
@@ -5,4 +5,4 @@ twitter:       https://twitter.com/mdo/
 
 markdown:      redcarpet
 permalink:     pretty
-pygments:      true
+highlighter:   pygments

From 0655a7aeace3a3631a90edb7dd418f112c15da08 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 17:01:12 -0700
Subject: [PATCH 09/12] copy over master changes

---
 wtf-forms.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/wtf-forms.css b/wtf-forms.css
index cb93699..f0d72c2 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -66,6 +66,12 @@
   background-color: #0074d9;
 }
 
+/* Active */
+.control input:active ~ .control-indicator {
+  color: #fff;
+  background-color: #84c6ff;
+}
+
 /* Checkbox modifiers */
 .checkbox .control-indicator {
   border-radius: .25rem;

From 24cd4fa4bd6b85d2ab849b6ab5417b41f8024c72 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 17:02:04 -0700
Subject: [PATCH 10/12] contributing

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2778c7c..1db5c54 100644
--- a/README.md
+++ b/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
 

From 44c3fff09317ed8962825e97948e0709537e7c8d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 18:23:37 -0700
Subject: [PATCH 11/12] typo

---
 wtf-forms.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wtf-forms.css b/wtf-forms.css
index 3d599b2..74d3c5a 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -327,7 +327,7 @@
   .progress-bar {
     display: inline-block;
     height: 1rem;
-    text-indent: -999rem; /* Simular hiding of value as in native `<progress>` */
+    text-indent: -999rem; /* Simulate hiding of value as in native `<progress>` */
     background-color: #0074d9;
     border-top-left-radius: .2rem;
     border-bottom-left-radius: .2rem;

From 38a8faa07df5ab555564ce1437c9c80d1de67a75 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 10 Jun 2014 19:03:33 -0700
Subject: [PATCH 12/12] select multiple is fubared

---
 index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.md b/index.md
index 3f84a7c..ec3bfc9 100644
--- a/index.md
+++ b/index.md
@@ -73,6 +73,7 @@ The `<select>` has quite a few styles to override and includes a few hacks to ge
 * Clickability is limited in IE9.
 * Firefox's dropdown of `option`s looks rather ugly.
 * The custom caret is unable to receive the selected state's `color`.
+* Styling of `select[multiple]` elements is basically impossible because `<option>`s are presently unstylable in all browsers.
 
 Any ideas on improving these are most welcome.