Updates styles with Bootstrap v3

css/laps.css

@@ -20,83 +20,33 @@
   overflow: hidden;
   height: 20px;
   margin: 6px 0;
-  background-color: #f7f7f7;
+  background-color: #f5f5f5;
-  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
-  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   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);
 }
 #wpadminbar .laps-timeline .event {
-  width: 0%;
-  height: 20px;
-  color: #fff;
   float: left;
+  width: 0%;
+  height: 100%;
   font-size: 12px;
+  color: #fff;
   text-align: center;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #428bca;
-  background-color: #dd514c;
-  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  -moz-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-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
   -webkit-transition: width 0.6s ease;
-  -moz-transition: width 0.6s ease;
-  -o-transition: width 0.6s ease;
   transition: width 0.6s ease;
   position: absolute;
 }
-#wpadminbar .laps-timeline .event + .event {
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
-  box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
-}
 #wpadminbar .laps-timeline .event-theme {
-  background-color: #5eb95e;
+  background-color: #5cb85c;
-  background-image: -moz-linear-gradient(top, #62c462, #57a957);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
-  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
-  background-image: -o-linear-gradient(top, #62c462, #57a957);
-  background-image: linear-gradient(to bottom, #62c462, #57a957);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
 }
 #wpadminbar .laps-timeline .event-plugin {
-  background-color: #4bb1cf;
+  background-color: #428bca;
-  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
-  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
 }
 #wpadminbar .laps-timeline .event-core {
-  background-color: #faa732;
+  background-color: #f0ad4e;
-  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
-  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
-  background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(to bottom, #fbb450, #f89406);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
 }
 #wpadminbar [data-hint]:after {
   font-size: 13px;

css/laps.less

@@ -4,13 +4,12 @@
 
 	#wp-admin-bar-laps {
 		.ab-sub-wrapper {
-			//			display: block !important;
 			min-width: 90%;
 			width: 90%;
 			position: fixed;
 			left: 5%;
-
 		}
+
 		.ab-submenu {
 			padding: 0;
 		}
@@ -27,48 +26,40 @@
 		.ab-empty-item {
 			display: none;
 		}
-
 	}
 
 	.laps-timeline {
 		overflow: hidden;
 		height: 20px;
 		margin: 6px 0;
-		#gradient > .vertical(#f5f5f5, #f9f9f9);
+		background-color: #f5f5f5;
+		border-radius: 4px;
 		.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
-		.border-radius(4px);
 	}
 
 	.laps-timeline .event {
-		width: 0%;
-		height: 20px;
-		color: #fff;
 		float: left;
+		width: 0%;
+		height: 100%;
 		font-size: 12px;
+		color: #fff;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+		background-color: #428bca;
-		#gradient > .vertical(#ee5f5b, #c43c35);
+		.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
-		.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
-		.box-sizing(border-box);
 		.transition(width .6s ease);
-
+		position: absolute; // disable stacking at start
-		position: absolute;
-	}
-
-	.laps-timeline .event + .event {
-		.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
 	}
 
 	.laps-timeline .event-theme {
-		#gradient > .vertical(#62c462, #57a957);
+		background-color: #5cb85c;
 	}
 
 	.laps-timeline .event-plugin {
-		#gradient > .vertical(#5bc0de, #339bb9);
+		background-color: #428bca;
 	}
 
 	.laps-timeline .event-core {
-		#gradient > .vertical(lighten(#f89406, 15%), #f89406);
+		background-color: #f0ad4e;
 	}
 
 	[data-hint]:after {

css/mixins.less

@@ -1,38 +1,9 @@
 .transition(@transition) {
 	-webkit-transition: @transition;
-	-moz-transition: @transition;
-	-o-transition: @transition;
 	transition: @transition;
 }
 
-.box-sizing(@boxmodel) {
-	-webkit-box-sizing: @boxmodel;
-	-moz-box-sizing: @boxmodel;
-	box-sizing: @boxmodel;
-}
-
-.border-radius(@radius) {
-	-webkit-border-radius: @radius;
-	-moz-border-radius: @radius;
-	border-radius: @radius;
-}
-
 .box-shadow(@shadow) {
-	-webkit-box-shadow: @shadow;
+	-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
-	-moz-box-shadow: @shadow;
 	box-shadow: @shadow;
 }
-
-#gradient {
-
-	.vertical(@startColor: #555, @endColor: #333) {
-		background-color: mix(@startColor, @endColor, 60%);
-		background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
-		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-		background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-		background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
-		background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
-		background-repeat: repeat-x;
-		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor), argb(@endColor))); // IE9 and down
-	}
-}