Fixes #3 - Add some transitions and markers for hover-state on nodes.

jhfrench · Aug 14, 2013 · 99124fe · 99124fe
1 parent 50eaeae
commit 99124fe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/bootstrap-combined.min.css b/bootstrap-combined.min.css
diff --git a/less/bootstrap-tree.less b/less/bootstrap-tree.less
@@ -32,12 +32,14 @@
 			height: 100%;
 			top: 0;
 			width: 1px;
+			.transition("border-color 0.1s ease 0.1s");
 		}
 		&::after {
 			border-top: 1px solid @grayLight;
 			height: 20px;
 			top: 13px;
 			width: 23px;
+			.transition("border-color 0.1s ease 0.1s");
 		}
 		span {
 			-moz-border-radius: 5px;
@@ -48,13 +50,23 @@
 			line-height: 14px;
 			padding: 2px 4px;
 			text-decoration: none;
+			.transition(~"color 0.2s ease 0.1s, background-color 0.2s ease 0.1s, border-color 0.3s ease 0.2s");
 		}
 		&.parent_li > span {
 			cursor: pointer;
 			/*Time for some hover effects*/
-			&:hover, &:hover+ul li span {
-				background: @grayLighter;
-				border: 1px solid @gray;
+			&:hover {
+				background-color: darken(@orange, 5%);
+				border: 1px solid darken(@orange, 10%);
+				color: #fff;
+			}
+			&:hover+ul li {
+				&::after { border-top-color: @orange; }
+				&::before { border-left-color: @orange; }
+			}
+			&:hover+ul li span {
+				background: lighten(@orange, 35%);
+				border: 1px solid lighten(@orange, 10%);
 				color: #000;
 			}
 		}

diff --git a/less/style.less b/less/style.less
@@ -5,4 +5,4 @@
 
 /* custom settings that deviate from Bootstrap's default values; set *after* the bootstrap imports */
 @iconSpritePath: "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png";
-@iconWhiteSpritePath: "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings-white.png";
+@iconWhiteSpritePath: "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings-white.png";