Add small visual cue when label is active

Resolves #51.

Author: jakezatecky

CHANGELOG.md

@@ -7,6 +7,10 @@
 * [#49]: Add the ability to specify `disabled` to individual nodes
 * [#50]: Allow `node.label` to be any valid React node
 
+### Usability
+
+* [#51]: Apply additional background color when a node is active
+
 ## [v0.6.4](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.6.3...v0.6.4) (2017-07-22)
 
 ### Bug Fixes

src/less/react-checkbox-tree.less

@@ -1,5 +1,6 @@
 @rct-icon-color: #33c;
 @rct-label-hover: rgba(red(@rct-icon-color), green(@rct-icon-color), blue(@rct-icon-color), .1);
+@rct-label-active: rgba(red(@rct-icon-color), green(@rct-icon-color), blue(@rct-icon-color), .15);
 
 .react-checkbox-tree {
   font-size: 16px;
@@ -34,6 +35,10 @@
     &:hover {
       background: @rct-label-hover;
     }
+
+    &:active {
+      background: @rct-label-active;
+    }
   }
 
   input {
@@ -54,12 +59,16 @@
     &:hover {
       background: transparent;
     }
+
+    &:active {
+      background: transparent;
+    }
   }
 }
 
 .rct-collapse,
-.rct-node-icon,
-.rct-checkbox {
+.rct-checkbox,
+.rct-node-icon {
   padding: 0 5px;
 
   * {

src/scss/react-checkbox-tree.scss

@@ -1,5 +1,6 @@
 $rct-icon-color: #33c !default;
 $rct-label-hover: rgba($rct-icon-color, .1) !default;
+$rct-label-active: rgba($rct-icon-color, .15) !default;
 
 .react-checkbox-tree {
   font-size: 16px;
@@ -34,6 +35,10 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     &:hover {
       background: $rct-label-hover;
     }
+
+    &:active {
+      background: $rct-label-active;
+    }
   }
 
   input {
@@ -54,12 +59,16 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     &:hover {
       background: transparent;
     }
+
+    &:active {
+      background: transparent;
+    }
   }
 }
 
 .rct-collapse,
-.rct-node-icon,
-.rct-checkbox {
+.rct-checkbox,
+.rct-node-icon {
   padding: 0 5px;
 
   * {