Merge pull request #195 from interactivellama/tree-selection-styling

Modify tree selection CSS to be inline block
ExactTarget · Mar 17, 2015 · ca6e6ae · ca6e6ae
2 parents 6c7f08f + 6b4f56b
commit ca6e6ae
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/examples/fuelux/fuelux-examples.css b/examples/fuelux/fuelux-examples.css
@@ -32,4 +32,8 @@
 
 #myPlacard1, #myPlacard2, #myPlacard3 {
 	width: 300px;
+}
+
+.thin-box .tree {
+	overflow: auto;
 }
diff --git a/examples/fuelux/main.js b/examples/fuelux/main.js
@@ -555,10 +555,10 @@ define(function(require) {
 			dataSource: function(options, callback){
 				setTimeout(function () {
 					callback({ data: [
-						{ name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
+						{ name: 'lakdjflksjdfalkjfkfjaslkdfjlksjdflkjslkfjalkfjlksadjflksjf', type: 'folder', dataAttributes: { id: 'folder1' } },
 						{ name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
 						{ name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
-						{ name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
+						{ name: 'lakdjflksjdfalkjfkfjaslkdfjlksjdflkjslkfjalkfjlksadjflksjf', type: 'item', dataAttributes: { id: 'item2' } },
 						{ name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
 						{ name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
 						{ name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },

diff --git a/less/colors.less b/less/colors.less
@@ -39,6 +39,9 @@
 //  It's a bit more of a catalog look. I use it for footwear sometimes."
 @blue-steel:                 #4E8ABE;
 
+// text color for selected items
+@gray-slate:                 #385b6b;
+
 // Link color, button color
 @brand-primary-medium:       @blue-steel;
 @brand-primary-light:        @blue-slate;

diff --git a/less/fuelux-override/tree.less b/less/fuelux-override/tree.less
@@ -3,7 +3,6 @@
 	width: @tree-caret-size;
 	height: @tree-caret-size;
 	top: 2px;
-	left: -6px;
 
 }
 .tree-caret() {
@@ -35,27 +34,27 @@
 	overflow-x: visible;
 	overflow-y: visible;
 
-	button:focus .tree-label {
-		color: inherit;
-	}
+	// button:focus .tree-label {
+	// 	color: inherit;
+	// }
 
 	.tree-label {
 		line-height: 24px;
 	}
 
 	li {
-		margin-top: 0;
-		margin-bottom: 0;
-		margin: 0 5px;
+		margin: 2px 5px 2px 5px;
 	}
 
 	// ICONS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 	.icon-caret {
 		.tree-caret;
 		.tree-caret-sizes;
+		left: -6px;
 	}
 
 	&.tree-folder-select .icon-caret {
+		left: -3px;
 	}
 
 	.icon-caret:before, &.tree-folder-select .tree-branch-header .icon-caret:before {
@@ -83,13 +82,13 @@
 	.tree-branch.tree-selected > .tree-branch-header .tree-branch-name,
 	&.tree-folder-select .tree-branch.tree-selected > .tree-branch-header .tree-branch-name,
 	.tree-item.tree-selected > .tree-item-name {
-		background: transparent;
-		color: #385b6b;
+		background: @blue-slate;
+		color: @gray-slate;
 	}
 
 	.tree-selected > .tree-branch-header,
 	.tree-item.tree-selected {
-		background: @blue-slate;
+		// background: @blue-slate;
 	}
 
 	// text and icon alignment - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -105,8 +104,8 @@
 
 	.tree-item-name, .tree-branch-name {
 		line-height: 16px;
-		padding: 0px 0 0px 2px;
-		background: transparent;
+		padding: 0px 5px 0px 5px;
+		// background: transparent;
 	}
 
 	.tree-item-name:hover,
@@ -125,14 +124,14 @@
 	}
 
 	.icon-item {
+		margin-right: 4px;
 		margin-right: 4px;
 		.fuelux-icon;
 		.fuelux-icon-dot;
 		left: -1px;
 		top: 3px;
 		width: 13px;
 		height: 13px;
-		margin-right:4px;
 	}
 
 	.icon-item:before {
@@ -149,7 +148,7 @@
 	.tree-branch {
 
 		.tree-branch-children {
-			margin-left: 18px;
+			margin-left: 17px;
 		}
 	}