Refactored less workflow to reference Bootstrap sources.

css/laps.css

@@ -19,29 +19,43 @@
 #wpadminbar .laps-timeline {
   overflow: hidden;
   height: 20px;
-  margin: 6px 0;
+  margin-bottom: 20px;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  margin: 6px 0;
   position: relative;
 }
 #wpadminbar .laps-timeline .event {
   float: left;
   width: 0%;
-  height: 20px;
+  height: 100%;
   font-size: 12px;
-  color: #fff;
+  line-height: 20px;
+  color: #ffffff;
   text-align: center;
   background-color: #5bc0de;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
+  -o-transition: width 0.6s ease;
   transition: width 0.6s ease;
   position: absolute;
   border-left: 1px solid #f5f5f5;
   min-width: 2px;
 }
+#wpadminbar .laps-timeline .event[aria-valuenow="1"],
+#wpadminbar .laps-timeline .event[aria-valuenow="2"] {
+  min-width: 30px;
+}
+#wpadminbar .laps-timeline .event[aria-valuenow="0"] {
+  color: #777777;
+  min-width: 30px;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
 #wpadminbar .laps-timeline .event-theme {
   background-color: #5cb85c;
 }

css/laps.less

@@ -1,5 +1,7 @@
+@import (reference) "../vendor/twbs/bootstrap/less/variables.less";
+@import (reference) "../vendor/twbs/bootstrap/less/mixins.less";
+@import (reference) "../vendor/twbs/bootstrap/less/progress-bars.less";
 @import "variables.less";
-@import "mixins.less";
 
 #wpadminbar {
 
@@ -7,9 +9,9 @@
 
 		.ab-sub-wrapper {
 			min-width: 90%;
-			width: 90%;
+			width:     90%;
-			position: fixed;
+			position:  fixed;
-			left: 5%;
+			left:      5%;
 		}
 
 		.ab-submenu {
@@ -31,51 +33,35 @@
 	}
 
 	.laps-timeline {
-		overflow: hidden;
+		.progress;
-		height: 20px;
+		margin:   6px 0;
-		margin: 6px 0;
-		background-color: @timeline-bg;
-		border-radius: 4px;
-		.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 		position: relative;
+
+		.event {
+			.progress-bar;
+			position:    absolute; // disable stacking at start
+			border-left: 1px solid @timeline-bg;
+			min-width:   2px;
+		}
+
+		.event-theme {
+			background-color: @event-theme-color;
+		}
+		.event-plugin {
+			background-color: @event-plugin-color;
+		}
+		.event-core {
+			background-color: @event-core-color;
+		}
+		.event-query {
+			background-color: @event-info-color;
+		}
+		.event-http {
+			background-color: @event-warning-color;
+		}
 	}
 
-	.laps-timeline .event {
+	@import "../vendor/twbs/bootstrap/less/tooltip.less";
-		float: left;
-		width: 0%;
-		height: 20px;
-		font-size: @font-size-small;
-		color: #fff;
-		text-align: center;
-		background-color: @event-info-color;
-		.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
-		.transition(width .6s ease);
-		position: absolute; // disable stacking at start
-		border-left: 1px solid @timeline-bg;
-		min-width: 2px;
-	}
-
-	.laps-timeline .event-theme {
-		background-color: @event-theme-color;
-	}
-
-	.laps-timeline .event-plugin {
-		background-color: @event-plugin-color;
-	}
-
-	.laps-timeline .event-core {
-		background-color: @event-core-color;
-	}
-
-	.laps-timeline .event-query {
-		background-color: @event-info-color;
-	}
-
-	.laps-timeline .event-http {
-		background-color: @event-warning-color;
-	}
-
-	@import "tooltip.less";
 
 	.tooltip.in {
 		.opacity(1);
@@ -83,7 +69,7 @@
 
 	.tooltip-inner {
 		line-height: 20px;
-		text-align: left;
+		text-align:  left;
 	}
 }
 

css/mixins.less

@@ -1,16 +0,0 @@
-.transition(@transition) {
-	-webkit-transition: @transition;
-	transition: @transition;
-}
-
-.box-shadow(@shadow) {
-	-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
-	box-shadow: @shadow;
-}
-
-.opacity(@opacity) {
-  opacity: @opacity;
-  // IE8 filter
-  @opacity-ie: (@opacity * 100);
-  filter: ~"alpha(opacity=@{opacity-ie})";
-}

css/tooltip.less

@@ -1,94 +0,0 @@
-//
-// Tooltips
-// --------------------------------------------------
-
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: @zindex-tooltip;
-  display: block;
-  visibility: visible;
-  font-size: @font-size-small;
-  line-height: 1.4;
-  .opacity(0);
-
-  &.in     { .opacity(.9); }
-  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
-  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
-  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
-  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: @tooltip-max-width;
-  padding: 3px 8px;
-  color: @tooltip-color;
-  text-align: center;
-  text-decoration: none;
-  background-color: @tooltip-bg;
-  border-radius: @border-radius-base;
-}
-
-// Arrows
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
-  }
-  &.top-left .tooltip-arrow {
-    bottom: 0;
-    left: @tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
-  }
-  &.top-right .tooltip-arrow {
-    bottom: 0;
-    right: @tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
-  }
-  &.right .tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-right-color: @tooltip-arrow-color;
-  }
-  &.left .tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-left-color: @tooltip-arrow-color;
-  }
-  &.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -@tooltip-arrow-width;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
-  }
-  &.bottom-left .tooltip-arrow {
-    top: 0;
-    left: @tooltip-arrow-width;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
-  }
-  &.bottom-right .tooltip-arrow {
-    top: 0;
-    right: @tooltip-arrow-width;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
-  }
-}

css/variables.less

@@ -1,4 +1,5 @@
 @font-size-small: 12px;
+@line-height-computed: 20px;
 
 // colors
 @timeline-bg: #f5f5f5;
@@ -7,6 +8,8 @@
 @event-core-color: #f0ad4e;
 @event-info-color: #5bc0de;
 @event-warning-color: #d9534f;
+@progress-bg: @timeline-bg;
+@progress-bar-bg: @event-info-color;
 
 // because admin bar is 99999
 @zindex-tooltip: 100000;