Merge pull request #29 from himedlooff/gh-pages

Adds focus styles, finally!
cfpb · Sep 5, 2014 · 7e90aa8 · 7e90aa8
2 parents e32f8ce + a1ecf44
commit 7e90aa8
Show file tree

Hide file tree

Showing 8 changed files with 411 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,17 @@
+All notable changes to this project will be documented in this file.
+We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.
+
+
+## 1.2.0 - 2014-09-05
+
+### Added
+- Focus styles.
+
+### Deprecated
+- Nothing.
+
+### Removed
+- Nothing.
+
+### Fixed
+- Nothing.
diff --git a/TERMS.md b/TERMS.md
@@ -1,13 +1,16 @@
 As a work of the United States Government, this package (excluding any
 exceptions listed below) is in the public domain within the United States.
 Additionally, we waive copyright and related rights in the work worldwide
-through the CC0 1.0 Universal public domain dedication.
+through the [CC0 1.0 Universal public domain dedication][CC0].
 
 Software source code previously released under an open source license and then
-modified by CFPB staff or its contractors is considered a "joint work" (see 17 USC § 101); 
-it is partially copyrighted, partially public domain, and as a whole is protected by
-the copyrights of the non-government authors and must be released according to
-the terms of the original open-source license.
+modified by CFPB staff or its contractors is considered a "joint work"
+(see 17 USC § 101); it is partially copyrighted, partially public domain,
+and as a whole is protected by the copyrights of the non-government authors and
+must be released according to the terms of the original open-source license.
+Segments written by CFPB staff, and by contractors who are developing software
+on behalf of CFPB are also in the public domain, and copyright and related
+rights for that work are waived through the CC0 1.0 Universal dedication.
 
 For further details, please see the CFPB [Source Code Policy][policy].
 
@@ -49,6 +52,5 @@ author or the affirmer.
 - [Rainbow](https://github.com/ccampbell/rainbow) by Craig Campbell is licensed
  under Apache 2.0.
 - The Brackets Theme by Garth Braithwaite is licensed under Apache 2.0.
-- [Normalize](http://necolas.github.io/normalize.css/) by Nicolas Gallagher,
+- [Normalize](https://necolas.github.io/normalize.css/) by Nicolas Gallagher,
  co-created with Jonathan Neal, is licensed under MIT.
-
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "cf-buttons",
- "version": "1.1.0",
+ "version": "1.2.0",
  "description": "Button styles including default, secondary, destructive, disabled, super, and compound buttons, button links, buttons with icons, and button groups for Capital Framework.",
  "keywords": [
  "capital-framework",

diff --git a/demo/index.html b/demo/index.html
@@ -34,6 +34,13 @@
 <a href="#" class="btn hover">Anchor Tag</a>
 <button class="btn hover">Button Tag</button>
 <input type="submit" value="Input Tag" class="btn hover">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn focus">Anchor Tag</a>
+<button class="btn focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn focus">
 </div><br>
  </div>
  <div>
@@ -57,6 +64,13 @@
 <a href="#" class="btn btn__secondary hover">Anchor Tag</a>
 <button class="btn btn__secondary hover">Button Tag</button>
 <input type="submit" value="Input Tag" class="btn btn__secondary hover">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn btn__secondary focus">Anchor Tag</a>
+<button class="btn btn__secondary focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__secondary focus">
 </div><br>
  </div>
  <div>
@@ -80,6 +94,13 @@
 <a href="#" class="btn btn__warning hover">Anchor Tag</a>
 <button class="btn btn__warning hover">Button Tag</button>
 <input type="submit" value="Input Tag" class="btn btn__warning hover">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn btn__warning focus">Anchor Tag</a>
+<button class="btn btn__warning focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__warning focus">
 </div><br>
  </div>
  <div>
@@ -96,6 +117,20 @@
 <a href="#" class="btn btn__disabled">Anchor Tag</a>
 <button class="btn btn__disabled">Button Tag</button>
 <input type="submit" value="Input Tag" class="btn btn__disabled">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn btn__disabled">Anchor Tag</a>
+<button class="btn btn__disabled">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__disabled">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn btn__disabled focus">Anchor Tag</a>
+<button class="btn btn__disabled focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__disabled focus">
 </div><br>
  </div>
  </div>
@@ -112,6 +147,13 @@
 <a href="#" class="btn btn__super hover">Anchor Tag</a>
 <button class="btn btn__super hover">Button Tag</button>
 <input type="submit" value="Input Tag" class="btn btn__super hover">
+</div><br>
+ </div>
+ <div>
+ <div>
+<a href="#" class="btn btn__super focus">Anchor Tag</a>
+<button class="btn btn__super focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__super focus">
 </div><br>
  </div>
  <div>

diff --git a/demo/static/css/main.css b/demo/static/css/main.css
diff --git a/docs/index.html b/docs/index.html
@@ -66,7 +66,7 @@ <h3 class="docs-pattern_header">Default state</h3>
  </footer>
  </div>
  <div class="docs-pattern">
- <h3 class="docs-pattern_header">Hovered/focused state</h3>
+ <h3 class="docs-pattern_header">Hovered state</h3>
  <section class="docs-pattern_pattern">
 <a href="#" class="btn hover">Anchor Tag</a>
 <button class="btn hover">Button Tag</button>
@@ -83,6 +83,24 @@ <h3 class="docs-pattern_header">Hovered/focused state</h3>
  </form>
  </footer>
  </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Focused state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn focus">Anchor Tag</a>
+<button class="btn focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn focus">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn focus&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn focus&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn focus&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn focus\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn focus\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn focus\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
  <div class="docs-pattern">
  <h3 class="docs-pattern_header">Active state</h3>
  <section class="docs-pattern_pattern">
@@ -137,10 +155,15 @@ <h3 class="docs-pattern_header">Active state</h3>
  color: #ffffff;
 }
 .btn:hover,
-.btn:focus,
 .btn.hover {
  background-color: #328ed8;
 }
+.btn:focus,
+.btn.focus {
+ background-color: #328ed8;
+ outline: 1px dotted #0072ce;
+ outline-offset: 1px;
+}
 .btn:active,
 .btn.active {
  background-color: #33578e;
@@ -190,7 +213,7 @@ <h3 class="docs-pattern_header">Default state</h3>
  </footer>
  </div>
  <div class="docs-pattern">
- <h3 class="docs-pattern_header">Hovered/focused state</h3>
+ <h3 class="docs-pattern_header">Hovered state</h3>
  <section class="docs-pattern_pattern">
 <a href="#" class="btn btn__secondary hover">Anchor Tag</a>
 <button class="btn btn__secondary hover">Button Tag</button>
@@ -207,6 +230,24 @@ <h3 class="docs-pattern_header">Hovered/focused state</h3>
  </form>
  </footer>
  </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Focused state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn btn__secondary focus">Anchor Tag</a>
+<button class="btn btn__secondary focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__secondary focus">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn btn__secondary focus&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn btn__secondary focus&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn btn__secondary focus&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn btn__secondary focus\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn btn__secondary focus\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn btn__secondary focus\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
  <div class="docs-pattern">
  <h3 class="docs-pattern_header">Active state</h3>
  <section class="docs-pattern_pattern">
@@ -234,10 +275,14 @@ <h3 class="docs-pattern_header">Active state</h3>
  color: #ffffff;
 }
 .btn__secondary:hover,
-.btn__secondary:focus,
 .btn__secondary.hover {
  background-color: #919395;
 }
+.btn__secondary:focus,
+.btn__secondary.focus {
+ background-color: #919395;
+ outline-color: #75787b;
+}
 .btn__secondary:active,
 .btn__secondary.active {
  background-color: #43484e;
@@ -271,7 +316,7 @@ <h3 class="docs-pattern_header">Default state</h3>
  </footer>
  </div>
  <div class="docs-pattern">
- <h3 class="docs-pattern_header">Hovered/focused state</h3>
+ <h3 class="docs-pattern_header">Hovered state</h3>
  <section class="docs-pattern_pattern">
 <a href="#" class="btn btn__warning hover">Anchor Tag</a>
 <button class="btn btn__warning hover">Button Tag</button>
@@ -288,6 +333,24 @@ <h3 class="docs-pattern_header">Hovered/focused state</h3>
  </form>
  </footer>
  </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Focused state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn btn__warning focus">Anchor Tag</a>
+<button class="btn btn__warning focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__warning focus">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn btn__warning focus&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn btn__warning focus&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn btn__warning focus&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn btn__warning focus\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn btn__warning focus\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn btn__warning focus\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
  <div class="docs-pattern">
  <h3 class="docs-pattern_header">Active state</h3>
  <section class="docs-pattern_pattern">
@@ -315,10 +378,14 @@ <h3 class="docs-pattern_header">Active state</h3>
  color: #ffffff;
 }
 .btn__warning:hover,
-.btn__warning:focus,
 .btn__warning.hover {
  background-color: #da6750;
 }
+.btn__warning:focus,
+.btn__warning.focus {
+ background-color: #da6750;
+ outline-color: #d12124;
+}
 .btn__warning:active,
 .btn__warning.active {
  background-color: #9c301b;
@@ -351,6 +418,42 @@ <h3 class="docs-pattern_header">Default/hovered/focused/active state</h3>
  </form>
  </footer>
  </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Default/hovered/active state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn btn__disabled">Anchor Tag</a>
+<button class="btn btn__disabled">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__disabled">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn btn__disabled&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn btn__disabled&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn btn__disabled&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn btn__disabled\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn btn__disabled\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn btn__disabled\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Focused state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn btn__disabled focus">Anchor Tag</a>
+<button class="btn btn__disabled focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__disabled focus">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn btn__disabled focus&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn btn__disabled focus&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn btn__disabled focus&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn btn__disabled focus\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn btn__disabled focus\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn btn__disabled focus\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
  </div>
  <div class="docs-css">
  <pre class="docs-code"><code data-language="css">.btn__disabled,
@@ -359,12 +462,17 @@ <h3 class="docs-pattern_header">Default/hovered/focused/active state</h3>
 .btn__disabled:hover,
 .btn__disabled.hover,
 .btn__disabled:focus,
+.btn__disabled.focus,
 .btn__disabled:active,
 .btn__disabled.active {
  background-color: #e3e4e5;
  color: #75787b;
  cursor: default;
  cursor: not-allowed;
+}
+.btn__disabled:focus,
+.btn__disabled.focus {
+ outline-color: #75787b;
 }</code></pre>
  </div>
  </div>
@@ -390,7 +498,7 @@ <h3 class="docs-pattern_header">Default state</h3>
  </footer>
  </div>
  <div class="docs-pattern">
- <h3 class="docs-pattern_header">Hovered/focused state</h3>
+ <h3 class="docs-pattern_header">Hovered state</h3>
  <section class="docs-pattern_pattern">
 <a href="#" class="btn btn__super hover">Anchor Tag</a>
 <button class="btn btn__super hover">Button Tag</button>
@@ -407,6 +515,24 @@ <h3 class="docs-pattern_header">Hovered/focused state</h3>
  </form>
  </footer>
  </div>
+ <div class="docs-pattern">
+ <h3 class="docs-pattern_header">Focused state</h3>
+ <section class="docs-pattern_pattern">
+<a href="#" class="btn btn__super focus">Anchor Tag</a>
+<button class="btn btn__super focus">Button Tag</button>
+<input type="submit" value="Input Tag" class="btn btn__super focus">
+
+ </section>
+ <footer class="docs-pattern_footer">
+ <pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;btn btn__super focus&quot;&gt;Anchor Tag&lt;/a&gt;
+&lt;button class=&quot;btn btn__super focus&quot;&gt;Button Tag&lt;/button&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Input Tag&quot; class=&quot;btn btn__super focus&quot;&gt;</code></pre>
+ <form action="http://codepen.io/pen/define" method="POST" target="_blank" class="docs-pattern_footer-edit">
+ <input type="hidden" name="data" value="{&amp;quot;css&amp;quot;:&amp;quot;body { padding: 1em; }&amp;quot;,&amp;quot;css_external&amp;quot;:&amp;quot;http://cfpb.github.io/cf-buttons/docs/static/css/main.css&amp;quot;,&amp;quot;html&amp;quot;:&amp;quot;\n&lt;a href=\&amp;quot;#\&amp;quot; class=\&amp;quot;btn btn__super focus\&amp;quot;&gt;Anchor Tag&lt;/a&gt;\n&lt;button class=\&amp;quot;btn btn__super focus\&amp;quot;&gt;Button Tag&lt;/button&gt;\n&lt;input type=\&amp;quot;submit\&amp;quot; value=\&amp;quot;Input Tag\&amp;quot; class=\&amp;quot;btn btn__super focus\&amp;quot;&gt;\n&amp;quot;}">
+ <input type="submit" value="edit on codepen.io" class="docs-pattern_footer-edit-btn">
+ </form>
+ </footer>
+ </div>
  <div class="docs-pattern">
  <h3 class="docs-pattern_header">Active state</h3>
  <section class="docs-pattern_pattern">