Some css improvements

dist/vis.css

@@ -7,7 +7,6 @@
   overflow: hidden;
 
   border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
   /* FIXME: there is an issue with the height of the items when panel height is animated
@@ -20,7 +19,6 @@
   position: absolute;
   overflow: hidden;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -39,7 +37,6 @@
 
   overflow: hidden;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -50,7 +47,6 @@
   width: 100%;
   color: #4d4d4d;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -75,7 +71,6 @@
   padding: 0;
   margin: 0;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
   /* FIXME: get transition working for rootpanel and itemset
@@ -114,6 +109,7 @@
   position: absolute;
   color: #1A1A1A;
   border-color: #97B0F8;
+  border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
@@ -136,50 +132,30 @@
 
 .vis.timeline .item.point.selected {
   background-color: #FFF785;
-  z-index: 999;
-}
-.vis.timeline .item.point.selected .dot,
-.vis.timeline .item.dot.selected {
-  border-color: #FFC200;
-}
-
-.vis.timeline .item.cluster {
-  /* TODO: use another color or pattern? */
-  background: #97B0F8 url('img/cluster_bg.png');
-  color: white;
-}
-.vis.timeline .item.cluster.point {
-  border-color: #D5DDF6;
 }
 
 .vis.timeline .item.box {
   text-align: center;
   border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+  border-radius: 2px;
 }
 
 .vis.timeline .item.point {
   background: none;
 }
 
-.vis.timeline .dot,
 .vis.timeline .item.dot {
-  padding: 0;
-  border: 5px solid #97B0F8;
   position: absolute;
-  border-radius: 5px;
-  -moz-border-radius: 5px;  /* For Firefox 3.6 and older */
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
 }
 
 .vis.timeline .item.range,
 .vis.timeline .item.rangeoverflow{
   border-style: solid;
-  border-width: 1px;
   border-radius: 2px;
-  -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.7.5-SNAPSHOT
- * @date    2014-05-01
+ * @date    2014-05-02
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -6242,7 +6242,6 @@ ItemPoint.prototype.repaint = function repaint() {
 
     // dot at start
     dom.dot = document.createElement('div');
-    dom.dot.className  = 'dot';
     dom.point.appendChild(dom.dot);
 
     // attach this item as attribute
@@ -6285,6 +6284,7 @@ ItemPoint.prototype.repaint = function repaint() {
   if (this.className != className) {
     this.className = className;
     dom.point.className  = 'item point' + className;
+    dom.dot.className  = 'item dot' + className;
 
     this.dirty = true;
   }
@@ -7158,7 +7158,7 @@ function Timeline (container, items, options) {
     orientation: 'bottom',
     direction: 'horizontal', // 'horizontal' or 'vertical'
     autoResize: true,
-    stacking: true,
+    stack: true,
 
     editable: {
       updateTime: false,

docs/timeline.html

@@ -568,7 +568,7 @@ var options = {
   <td>stack</td>
   <td>Boolean</td>
   <td>true</td>
-  <td>If true (default), items will be stacked on top of each other such that they are not overlapping.</td>
+  <td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
 </tr>
 
 <tr>

src/timeline/component/css/item.css

@@ -3,6 +3,7 @@
   position: absolute;
   color: #1A1A1A;
   border-color: #97B0F8;
+  border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
@@ -25,50 +26,30 @@
 
 .vis.timeline .item.point.selected {
   background-color: #FFF785;
-  z-index: 999;
-}
-.vis.timeline .item.point.selected .dot,
-.vis.timeline .item.dot.selected {
-  border-color: #FFC200;
-}
-
-.vis.timeline .item.cluster {
-  /* TODO: use another color or pattern? */
-  background: #97B0F8 url('img/cluster_bg.png');
-  color: white;
-}
-.vis.timeline .item.cluster.point {
-  border-color: #D5DDF6;
 }
 
 .vis.timeline .item.box {
   text-align: center;
   border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+  border-radius: 2px;
 }
 
 .vis.timeline .item.point {
   background: none;
 }
 
-.vis.timeline .dot,
 .vis.timeline .item.dot {
-  padding: 0;
-  border: 5px solid #97B0F8;
   position: absolute;
-  border-radius: 5px;
-  -moz-border-radius: 5px;  /* For Firefox 3.6 and older */
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
 }
 
 .vis.timeline .item.range,
 .vis.timeline .item.rangeoverflow{
   border-style: solid;
-  border-width: 1px;
   border-radius: 2px;
-  -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 

src/timeline/component/css/itemset.css

@@ -4,7 +4,6 @@
   padding: 0;
   margin: 0;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
   /* FIXME: get transition working for rootpanel and itemset

src/timeline/component/css/labelset.css

@@ -5,7 +5,6 @@
 
   overflow: hidden;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -16,7 +15,6 @@
   width: 100%;
   color: #4d4d4d;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 

src/timeline/component/css/panel.css

@@ -4,7 +4,6 @@
   overflow: hidden;
 
   border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
   /* FIXME: there is an issue with the height of the items when panel height is animated
@@ -17,7 +16,6 @@
   position: absolute;
   overflow: hidden;
 
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 

src/timeline/component/item/ItemPoint.js

@@ -65,7 +65,6 @@ ItemPoint.prototype.repaint = function repaint() {
 
     // dot at start
     dom.dot = document.createElement('div');
-    dom.dot.className  = 'dot';
     dom.point.appendChild(dom.dot);
 
     // attach this item as attribute
@@ -108,6 +107,7 @@ ItemPoint.prototype.repaint = function repaint() {
   if (this.className != className) {
     this.className = className;
     dom.point.className  = 'item point' + className;
+    dom.dot.className  = 'item dot' + className;
 
     this.dirty = true;
   }