Merge pull request #36 from Scotchester/gh-pages

Improve .expandable_target focus styles
cfpb · Oct 8, 2014 · a7c3ec7 · a7c3ec7
2 parents bf017d7 + 8a3407d
commit a7c3ec7
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file.
 We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.
 
 
+## 0.5.2 - 2014-10-08
+
+### Added
+- Nothing.
+
+### Deprecated
+- Nothing.
+
+### Removed
+- Nothing.
+
+### Fixed
+- Improved focus states on `.expandable_target`.
+
+
 ## 0.5.1 - 2014-10-03
 
 ### Added

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "cf-expandables",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Standard expandable (show/hide) component for Capital Framework.",
   "keywords": ["capital-framework", "capital", "expandables", "jquery", "js", "less"],
   "authors": [

diff --git a/demo/static/css/main.css b/demo/static/css/main.css
diff --git a/demo/static/js/component.min.js b/demo/static/js/component.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -199,6 +199,10 @@ <h3 class="docs-pattern_header">.expandable__expanded (modifier)</h3>
   background-color: transparent;
   cursor: pointer;
 }
+.expandable_target:focus {
+  outline: 1px dotted #101820;
+  outline-offset: 1px;
+}
 .expandable_cue-close {
   display: none;
 }
@@ -480,6 +484,13 @@ <h3 class="docs-pattern_header">.expandable__padded (modifier)</h3>
 }
 .expandable__padded .expandable_content {
   margin: 0 1em 1.375em;
+}
+.expandable__padded .expandable_content:before {
+  content: '';
+  display: block;
+  height: 1px;
+  margin-bottom: 1em;
+  background: #babbbd;
 }</code></pre>
       </div>
     </div>

diff --git a/docs/static/css/main.css b/docs/static/css/main.css
diff --git a/docs/static/js/component.min.js b/docs/static/js/component.min.js
diff --git a/src/less/cf-expandables.less b/src/less/cf-expandables.less
@@ -131,6 +131,11 @@
     border: 0;
     background-color: transparent;
     cursor: pointer;
+
+    &:focus {
+        outline: 1px dotted @black;
+        outline-offset: 1px;
+    }
 }
 
 .expandable_cue-close {
@@ -298,6 +303,14 @@
         margin: 0
                 unit(16px / @base-font-size-px, em)
                 unit(22px / @base-font-size-px, em);
+
+        &:before {
+            content: '';
+            display: block;
+            height: 1px;
+            margin-bottom: unit(16px / @base-font-size-px, em);
+            background: @gray-50;
+        }
     }
 }