mainbar trigger label size and ellipsis

catkrahl · May 17, 2019 · b6db6a0 · b6db6a0
1 parent f29f9ab
commit b6db6a0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/UI/templates/default/MainControls/mainbar.less b/src/UI/templates/default/MainControls/mainbar.less
@@ -2,6 +2,7 @@
 .il-maincontrols-mainbar {
 	.btn-bulky {
 		font-size: @il-mainbar-btn-label-size;
+		line-height: @il-mainbar-btn-label-size * 1.11111111;
 	}
 	.bulky-label {
 		white-space: normal;
@@ -59,9 +60,14 @@
 			outline: none;
 		}
 		.bulky-label {
-			white-space: normal;
+			display: -webkit-box;
 			margin-top: @il-mainbar-bulky-label-margin-top;
-    		display: block;
+			white-space: normal;
+			word-break: break-word;
+    		padding: 0 2px;
+			overflow: hidden;
+			-webkit-line-clamp: 2;
+		    -webkit-box-orient: vertical;
 		}
 	}
 	&.engaged {
@@ -211,6 +217,10 @@
 		   border: 0;
 		   height: @il-mainbar-small-btn-height;
 		   width: @il-mainbar-small-btn-width;
+		   .icon.small {
+			   height: @icon-size-xsmall;
+			   width: @icon-size-xsmall;
+		   }
 	   }
 	}
 	.il-mainbar-tools-entries {

diff --git a/templates/default/less/variables.less b/templates/default/less/variables.less
@@ -775,6 +775,8 @@
 //
 //## Icons are used to represent (and quickly identify) objects.
 
+//** Size for icons: Small is used in the tree. e.g.
+@icon-size-xsmall: 17px;
 //** Size for icons: Small is used in the tree. e.g.
 @icon-size-small: 20px;
 //** Size for icons: Medium is used in the content-listing. e.g.
@@ -864,7 +866,7 @@
 @il-mainbar-btn-color-engaged: #4a4a4a;
 @il-mainbar-btn-bg-color-engaged: #fff;
 @il-mainbar-btn-border: 1px solid @il-standard-page-border-light-color;
-@il-mainbar-btn-label-size: .7rem;
+@il-mainbar-btn-label-size: .9rem;
 @il-mainbar-bulky-label-margin-top: 5px;
 
 //** tools
@@ -902,4 +904,4 @@
 //== Tree
 //
 //## Basic adjustments for the tree
-@il-tree-node-indentation: 20px;
+@il-tree-node-indentation: 20px;