For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.
<style>
- .vis.timeline .item {
+ .vis-item {
border-color: orange;
background-color: yellow;
}
@@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l
<style>
/* alternating column backgrounds */
- .vis.timeline .timeaxis .grid.odd {
+ .vis-time-axis .grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
- .vis.timeline .timeaxis .grid.saturday,
- .vis.timeline .timeaxis .grid.sunday {
+ .vis-time-axis .vis-grid.saturday,
+ .vis-time-axis .vis-grid.sunday {
background: gray;
}
- .vis.timeline .timeaxis .text.saturday,
- .vis.timeline .timeaxis .text.sunday {
+ .vis-time-axis .vis-text.saturday,
+ .vis-time-axis .vis-text.sunday {
color: white;
}
</style>
diff --git a/examples/graph2d/04_rightAxis.html b/examples/graph2d/04_rightAxis.html
index b7c09a3c..f7e64a36 100644
--- a/examples/graph2d/04_rightAxis.html
+++ b/examples/graph2d/04_rightAxis.html
@@ -8,14 +8,14 @@
font-family: sans-serif;
}
- .customStyle1 {
+ .custom-style1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
- .customStyle2 {
+ .custom-style2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
@@ -47,7 +47,7 @@
groups.add({
id: 0,
content: names[0],
- className: 'customStyle1',
+ className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@@ -60,7 +60,7 @@
groups.add({
id: 1,
content: names[1],
- className: 'customStyle2',
+ className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
diff --git a/examples/graph2d/05_bothAxis.html b/examples/graph2d/05_bothAxis.html
index 444a2702..526cb71c 100644
--- a/examples/graph2d/05_bothAxis.html
+++ b/examples/graph2d/05_bothAxis.html
@@ -8,27 +8,26 @@
font-family: sans-serif;
}
- .customStyle1 {
+ .custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
- .customStyle2 {
+ .custom-style2 {
fill: #00a0f2;
- fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
- .customStyle3 {
+ .custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
- path.customStyle3.fill {
+ path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
@@ -57,7 +56,7 @@
groups.add({
id: 0,
content: names[0],
- className: 'customStyle1',
+ className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@@ -70,7 +69,7 @@
groups.add({
id: 1,
content: names[1],
- className: 'customStyle2',
+ className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
@@ -90,7 +89,7 @@
groups.add({
id: 3,
content: names[3],
- className: 'customStyle3',
+ className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
diff --git a/examples/graph2d/09_external_legend.html b/examples/graph2d/09_external_legend.html
index c1724d93..36794c02 100644
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@@ -1,366 +1,366 @@
- Graph2d | External legend Example
-
-
-
-
-
-
+ Graph2d | External legend Example
+
+
+
+
+
+
Graph2d | External custom legend
- This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
- groups by updating the dataset.
+ This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
+ groups by updating the dataset.
-
+
diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html
index f2bd4831..2083be98 100644
--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/examples/graph2d/16_bothAxis_titles.html
@@ -8,27 +8,27 @@
font-family: sans-serif;
}
- .customStyle1 {
+ .custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
- .customStyle2 {
+ .custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
- .customStyle3 {
+ .custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
- path.customStyle3.fill {
+ path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
@@ -88,7 +88,7 @@
groups.add({
id: 0,
content: names[0],
- className: 'customStyle1',
+ className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@@ -101,7 +101,7 @@
groups.add({
id: 1,
content: names[1],
- className: 'customStyle2',
+ className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
@@ -121,7 +121,7 @@
groups.add({
id: 3,
content: names[3],
- className: 'customStyle3',
+ className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html
index 4dc4f583..5b6cdd21 100644
--- a/examples/timeline/12_custom_styling.html
+++ b/examples/timeline/12_custom_styling.html
@@ -7,14 +7,14 @@
diff --git a/examples/timeline/25_background_areas.html b/examples/timeline/25_background_areas.html
index 1b53ca87..ef06131e 100644
--- a/examples/timeline/25_background_areas.html
+++ b/examples/timeline/25_background_areas.html
@@ -9,10 +9,10 @@
font-size: 11pt;
}
- .vis.timeline .item.background.negative {
+ .vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
- .vis.timeline .item.background.marker {
+ .vis-item.vis-background.marker {
border-left: 2px solid green;
}
diff --git a/examples/timeline/30_subgroups.html b/examples/timeline/30_subgroups.html
index 324e2883..3dda8590 100644
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@@ -9,13 +9,13 @@
font-size: 11pt;
}
- .vis.timeline .item.background.negative {
+ .vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
- .vis.timeline .item.background.positive {
+ .vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.20);
}
- .vis.timeline .item.background.marker {
+ .vis-item.vis-background.marker {
border-left: 2px solid green;
}
diff --git a/examples/timeline/32_grid_styling.html b/examples/timeline/32_grid_styling.html
index 0b6b7dbb..e63a4e60 100644
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/32_grid_styling.html
@@ -12,17 +12,17 @@
}
/* alternating column backgrounds */
- .vis.timeline .timeaxis .grid.odd {
+ .vis-time-axis .vis-grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
- .vis.timeline .timeaxis .grid.saturday,
- .vis.timeline .timeaxis .grid.sunday {
+ .vis-time-axis .vis-grid.saturday,
+ .vis-time-axis .vis-grid.sunday {
background: gray;
}
- .vis.timeline .timeaxis .text.saturday,
- .vis.timeline .timeaxis .text.sunday {
+ .vis-time-axis .vis-text.saturday,
+ .vis-time-axis .vis-text.sunday {
color: white;
}
diff --git a/lib/DOMutil.js b/lib/DOMutil.js
index da476a07..81ca3471 100644
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
}
if(group.options.drawPoints.styles !== undefined) {
- point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
+ point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
}
- point.setAttributeNS(null, "class", group.className + " point");
+ point.setAttributeNS(null, "class", group.className + " vis-point");
//handle label
var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
if (labelObj){
@@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
}
if (labelObj.className) {
- label.setAttributeNS(null, "class", labelObj.className + " label");
+ label.setAttributeNS(null, "class", labelObj.className + " vis-label");
}
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 92c79e72..5e4085b0 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
this.dom.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div');
- this.dom.root.className = 'vis timeline root';
- this.dom.background.className = 'vispanel background';
- this.dom.backgroundVertical.className = 'vispanel background vertical';
- this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
- this.dom.centerContainer.className = 'vispanel center';
- this.dom.leftContainer.className = 'vispanel left';
- this.dom.rightContainer.className = 'vispanel right';
- this.dom.top.className = 'vispanel top';
- this.dom.bottom.className = 'vispanel bottom';
- this.dom.left.className = 'content';
- this.dom.center.className = 'content';
- this.dom.right.className = 'content';
- this.dom.shadowTop.className = 'shadow top';
- this.dom.shadowBottom.className = 'shadow bottom';
- this.dom.shadowTopLeft.className = 'shadow top';
- this.dom.shadowBottomLeft.className = 'shadow bottom';
- this.dom.shadowTopRight.className = 'shadow top';
- this.dom.shadowBottomRight.className = 'shadow bottom';
+ this.dom.root.className = 'vis-timeline';
+ this.dom.background.className = 'vis-panel vis-background';
+ this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
+ this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
+ this.dom.centerContainer.className = 'vis-panel vis-center';
+ this.dom.leftContainer.className = 'vis-panel vis-left';
+ this.dom.rightContainer.className = 'vis-panel vis-right';
+ this.dom.top.className = 'vis-panel vis-top';
+ this.dom.bottom.className = 'vis-panel vis-bottom';
+ this.dom.left.className = 'vis-content';
+ this.dom.center.className = 'vis-content';
+ this.dom.right.className = 'vis-content';
+ this.dom.shadowTop.className = 'vis-shadow vis-top';
+ this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
+ this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
+ this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
+ this.dom.shadowTopRight.className = 'vis-shadow vis-top';
+ this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -587,12 +587,12 @@ Core.prototype._redraw = function() {
// update class names
if (options.orientation == 'top') {
- util.addClassName(dom.root, 'top');
- util.removeClassName(dom.root, 'bottom');
+ util.addClassName(dom.root, 'vis-top');
+ util.removeClassName(dom.root, 'vis-bottom');
}
else {
- util.removeClassName(dom.root, 'top');
- util.addClassName(dom.root, 'bottom');
+ util.removeClassName(dom.root, 'vis-top');
+ util.addClassName(dom.root, 'vis-bottom');
}
// update root width and height options
diff --git a/lib/timeline/component/CurrentTime.js b/lib/timeline/component/CurrentTime.js
index a97757a8..86fb7e7a 100644
--- a/lib/timeline/component/CurrentTime.js
+++ b/lib/timeline/component/CurrentTime.js
@@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
*/
CurrentTime.prototype._create = function() {
var bar = document.createElement('div');
- bar.className = 'currenttime';
+ bar.className = 'vis-current-time';
bar.style.position = 'absolute';
bar.style.top = '0px';
bar.style.height = '100%';
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index aec7777b..4a331bce 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
*/
CustomTime.prototype._create = function() {
var bar = document.createElement('div');
- bar.className = 'customtime';
+ bar.className = 'vis-custom-time';
bar.style.position = 'absolute';
bar.style.top = '0px';
bar.style.height = '100%';
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 0af46490..6782eb1e 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
var frame = this.dom.frame;
// update classname
- frame.className = 'dataaxis';
+ frame.className = 'vis-data-axis';
// calculate character width and height
this._calculateCharSize();
@@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
- this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
+ this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
}
if (isMajor && this.options['showMajorLabels'] && this.master == true ||
this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
if (y >= 0) {
- this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
+ this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
}
- this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+ this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
}
else {
- this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+ this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
}
if (this.master == true && step.current == 0) {
@@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
// Check if the title is defined for this axes
if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
- title.className = 'yAxis title ' + orientation;
+ title.className = 'vis-y-axis vis-title vis-' + orientation;
title.innerHTML = this.options.title[orientation].text;
// Add style - if provided
@@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('div');
- measureCharMinor.className = 'yAxis minor measure';
+ measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
measureCharMinor.appendChild(textMinor);
this.dom.frame.appendChild(measureCharMinor);
@@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('majorCharHeight' in this.props)) {
var textMajor = document.createTextNode('0');
var measureCharMajor = document.createElement('div');
- measureCharMajor.className = 'yAxis major measure';
+ measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
measureCharMajor.appendChild(textMajor);
this.dom.frame.appendChild(measureCharMajor);
@@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('titleCharHeight' in this.props)) {
var textTitle = document.createTextNode('0');
var measureCharTitle = document.createElement('div');
- measureCharTitle.className = 'yAxis title measure';
+ measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
measureCharTitle.appendChild(textTitle);
this.dom.frame.appendChild(measureCharTitle);
diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js
index abc471ff..c2be606b 100644
--- a/lib/timeline/component/GraphGroup.js
+++ b/lib/timeline/component/GraphGroup.js
@@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
GraphGroup.prototype.update = function(group) {
this.group = group;
this.content = group.content || 'graph';
- this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
+ this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
this.visible = group.visible === undefined ? true : group.visible;
this.style = group.style;
this.setOptions(group.options);
@@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
outline.setAttributeNS(null, "y", y - fillHeight);
outline.setAttributeNS(null, "width", iconWidth);
outline.setAttributeNS(null, "height", 2*fillHeight);
- outline.setAttributeNS(null, "class", "outline");
+ outline.setAttributeNS(null, "class", "vis-outline");
if (this.options.style == 'line') {
path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
path.setAttributeNS(null, "class", this.className);
if(this.style !== undefined) {
- path.setAttributeNS(null, "style", this.style);
+ path.setAttributeNS(null, "style", 'vis-' + this.style);
}
path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
"L"+ (x + iconWidth) + "," + (y + fillHeight) +
"L"+ (x + iconWidth) + ","+y);
}
- fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+ fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
}
if (this.options.drawPoints.enabled == true) {
@@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
var offset = Math.round((iconWidth - (2 * barWidth))/3);
- DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
- DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+ DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
+ DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
}
};
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index b3588c2c..98a0a963 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
*/
Group.prototype._create = function() {
var label = document.createElement('div');
- label.className = 'vlabel';
+ label.className = 'vis-label';
this.dom.label = label;
var inner = document.createElement('div');
- inner.className = 'inner';
+ inner.className = 'vis-inner';
label.appendChild(inner);
this.dom.inner = inner;
var foreground = document.createElement('div');
- foreground.className = 'group';
+ foreground.className = 'vis-group';
foreground['timeline-group'] = this;
this.dom.foreground = foreground;
this.dom.background = document.createElement('div');
- this.dom.background.className = 'group';
+ this.dom.background.className = 'vis-group';
this.dom.axis = document.createElement('div');
- this.dom.axis.className = 'group';
+ this.dom.axis.className = 'vis-group';
// create a hidden marker to detect when the Timelines container is attached
// to the DOM, or the style of a parent of the Timeline is changed from
// display:none is changed to visible.
this.dom.marker = document.createElement('div');
- this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
+ this.dom.marker.style.visibility = 'hidden';
this.dom.marker.innerHTML = '?';
this.dom.background.appendChild(this.dom.marker);
};
@@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
this.dom.label.title = data && data.title || '';
if (!this.dom.inner.firstChild) {
- util.addClassName(this.dom.inner, 'hidden');
+ util.addClassName(this.dom.inner, 'vis-hidden');
}
else {
- util.removeClassName(this.dom.inner, 'hidden');
+ util.removeClassName(this.dom.inner, 'vis-hidden');
}
// update className
@@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {
// update style
if (this.style) {
- util.removeCssText(this.dom.label, this.style);
+ util.removeCssText(this.dom.label, 'vis-' + this.style);
this.style = null;
}
if (data && data.style) {
- util.addCssText(this.dom.label, data.style);
+ util.addCssText(this.dom.label, 'vis-' + data.style);
this.style = data.style;
}
};
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index afdcf090..dbe0fa1d 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -146,30 +146,30 @@ ItemSet.types = {
*/
ItemSet.prototype._create = function(){
var frame = document.createElement('div');
- frame.className = 'itemset';
+ frame.className = 'vis-itemset';
frame['timeline-itemset'] = this;
this.dom.frame = frame;
// create background panel
var background = document.createElement('div');
- background.className = 'background';
+ background.className = 'vis-background';
frame.appendChild(background);
this.dom.background = background;
// create foreground panel
var foreground = document.createElement('div');
- foreground.className = 'foreground';
+ foreground.className = 'vis-foreground';
frame.appendChild(foreground);
this.dom.foreground = foreground;
// create axis panel
var axis = document.createElement('div');
- axis.className = 'axis';
+ axis.className = 'vis-axis';
this.dom.axis = axis;
// create labelset
var labelSet = document.createElement('div');
- labelSet.className = 'labelset';
+ labelSet.className = 'vis-labelset';
this.dom.labelSet = labelSet;
// create ungrouped Group
@@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
// update class name
- frame.className = 'itemset' + (editable ? ' editable' : '');
+ frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');
// reorder the groups (if needed)
resized = this._orderGroups() || resized;
@@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
else if (type == 'rangeoverflow') {
// TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
- '.vis.timeline .item.range .content {overflow: visible;}');
+ '.vis-item.vis-range .vis-item-content {overflow: visible;}');
}
else {
throw new TypeError('Unknown item type "' + type + '"');
diff --git a/lib/timeline/component/Legend.js b/lib/timeline/component/Legend.js
index b0ce82a8..3ee1c978 100644
--- a/lib/timeline/component/Legend.js
+++ b/lib/timeline/component/Legend.js
@@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {
Legend.prototype._create = function() {
this.dom.frame = document.createElement('div');
- this.dom.frame.className = 'legend';
+ this.dom.frame.className = 'vis-legend';
this.dom.frame.style.position = "absolute";
this.dom.frame.style.top = "10px";
this.dom.frame.style.display = "block";
this.dom.textArea = document.createElement('div');
- this.dom.textArea.className = 'legendText';
+ this.dom.textArea.className = 'vis-legend-text';
this.dom.textArea.style.position = "relative";
this.dom.textArea.style.top = "0px";
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
index 16ff6b3a..0aed68b3 100644
--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
*/
LineGraph.prototype._create = function(){
var frame = document.createElement('div');
- frame.className = 'LineGraph';
+ frame.className = 'vis-line-graph';
this.dom.frame = frame;
// create svg element for graph drawing.
diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js
index f7433ce9..fba831ff 100644
--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
this.dom.foreground = document.createElement('div');
this.dom.background = document.createElement('div');
- this.dom.foreground.className = 'timeaxis foreground';
- this.dom.background.className = 'timeaxis background';
+ this.dom.foreground.className = 'vis-time-axis vis-foreground';
+ this.dom.background.className = 'vis-time-axis vis-background';
};
/**
@@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
label.style.left = x + 'px';
- label.className = 'text minor ' + className;
+ label.className = 'vis-text vis-minor ' + className;
//label.title = title; // TODO: this is a heavy operation
};
@@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
this.dom.majorTexts.push(label);
label.childNodes[0].nodeValue = text;
- label.className = 'text major ' + className;
+ label.className = 'vis-text vis-major ' + className;
//label.title = title; // TODO: this is a heavy operation
label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
@@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
line.style.height = props.minorLineHeight + 'px';
line.style.left = (x - props.minorLineWidth / 2) + 'px';
- line.className = 'grid vertical minor ' + className;
+ line.className = 'vis-grid vis-vertical vis-minor ' + className;
return line;
};
@@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
line.style.left = (x - props.majorLineWidth / 2) + 'px';
line.style.height = props.majorLineHeight + 'px';
- line.className = 'grid vertical major ' + className;
+ line.className = 'vis-grid vis-vertical vis-major ' + className;
return line;
};
@@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis
if (!this.dom.measureCharMinor) {
this.dom.measureCharMinor = document.createElement('DIV');
- this.dom.measureCharMinor.className = 'text minor measure';
+ this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
this.dom.measureCharMinor.style.position = 'absolute';
this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the major axis
if (!this.dom.measureCharMajor) {
this.dom.measureCharMajor = document.createElement('DIV');
- this.dom.measureCharMajor.className = 'text major measure';
+ this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
this.dom.measureCharMajor.style.position = 'absolute';
this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
diff --git a/lib/timeline/component/css/animation.css b/lib/timeline/component/css/animation.css
index 0b03f57f..2d5ff87f 100644
--- a/lib/timeline/component/css/animation.css
+++ b/lib/timeline/component/css/animation.css
@@ -1,18 +1,18 @@
-.vis.timeline.root {
+.vis-timeline {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
-.vis.timeline .vispanel {
+.vis-panel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
-.vis.timeline .axis {
+.vis-axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
@@ -21,12 +21,12 @@
/* TODO: get animation working nicely
-.vis.timeline .item {
+.vis-item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
-.vis.timeline .item.line {
+.vis-item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}
diff --git a/lib/timeline/component/css/currenttime.css b/lib/timeline/component/css/currenttime.css
index 093fc603..46c7b9c3 100644
--- a/lib/timeline/component/css/currenttime.css
+++ b/lib/timeline/component/css/currenttime.css
@@ -1,4 +1,4 @@
-.vis.timeline .currenttime {
+.vis-current-time {
background-color: #FF7F6E;
width: 2px;
z-index: 1;
diff --git a/lib/timeline/component/css/customtime.css b/lib/timeline/component/css/customtime.css
index c590485d..07ca746e 100644
--- a/lib/timeline/component/css/customtime.css
+++ b/lib/timeline/component/css/customtime.css
@@ -1,4 +1,4 @@
-.vis.timeline .customtime {
+.vis-custom-time {
background-color: #6E94FF;
width: 2px;
cursor: move;
diff --git a/lib/timeline/component/css/dataaxis.css b/lib/timeline/component/css/dataaxis.css
index f2c15ca3..f4c85146 100644
--- a/lib/timeline/component/css/dataaxis.css
+++ b/lib/timeline/component/css/dataaxis.css
@@ -1,105 +1,103 @@
-.vis.timeline .vispanel.background.horizontal .grid.horizontal {
- position: absolute;
- width: 100%;
- height: 0;
- border-bottom: 1px solid;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
+ position: absolute;
+ width: 100%;
+ height: 0;
+ border-bottom: 1px solid;
}
-.vis.timeline .vispanel.background.horizontal .grid.minor {
- border-color: #e5e5e5;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
+ border-color: #e5e5e5;
}
-.vis.timeline .vispanel.background.horizontal .grid.major {
- border-color: #bfbfbf;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
+ border-color: #bfbfbf;
}
-.vis.timeline .dataaxis .yAxis.major {
- width: 100%;
- position: absolute;
- color: #4d4d4d;
- white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-major {
+ width: 100%;
+ position: absolute;
+ color: #4d4d4d;
+ white-space: nowrap;
}
-.vis.timeline .dataaxis .yAxis.major.measure{
- padding: 0px 0px 0px 0px;
- margin: 0px 0px 0px 0px;
- border: 0px;
- visibility: hidden;
- width: auto;
+.vis-data-axis .vis-y-axis.vis-major.vis-measure {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ visibility: hidden;
+ width: auto;
}
-.vis.timeline .dataaxis .yAxis.minor{
- position: absolute;
- width: 100%;
- color: #bebebe;
- white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-minor {
+ position: absolute;
+ width: 100%;
+ color: #bebebe;
+ white-space: nowrap;
}
-.vis.timeline .dataaxis .yAxis.minor.measure{
- padding: 0px 0px 0px 0px;
- margin: 0px 0px 0px 0px;
- border: 0px;
- visibility: hidden;
- width: auto;
+.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ visibility: hidden;
+ width: auto;
}
-.vis.timeline .dataaxis .yAxis.title{
- position: absolute;
- color: #4d4d4d;
- white-space: nowrap;
- bottom: 20px;
- text-align: center;
+.vis-data-axis .vis-y-axis.vis-title {
+ position: absolute;
+ color: #4d4d4d;
+ white-space: nowrap;
+ bottom: 20px;
+ text-align: center;
}
-.vis.timeline .dataaxis .yAxis.title.measure{
- padding: 0px 0px 0px 0px;
- margin: 0px 0px 0px 0px;
- visibility: hidden;
- width: auto;
+.vis-data-axis .vis-y-axis.vis-title.vis-measure {
+ padding: 0;
+ margin: 0;
+ visibility: hidden;
+ width: auto;
}
-.vis.timeline .dataaxis .yAxis.title.left {
- bottom: 0px;
- -webkit-transform-origin: left top;
- -moz-transform-origin: left top;
- -ms-transform-origin: left top;
- -o-transform-origin: left top;
- transform-origin: left bottom;
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- -o-transform: rotate(-90deg);
- transform: rotate(-90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-left {
+ bottom: 0;
+ -webkit-transform-origin: left top;
+ -moz-transform-origin: left top;
+ -ms-transform-origin: left top;
+ -o-transform-origin: left top;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
}
-.vis.timeline .dataaxis .yAxis.title.right {
- bottom: 0px;
- -webkit-transform-origin: right bottom;
- -moz-transform-origin: right bottom;
- -ms-transform-origin: right bottom;
- -o-transform-origin: right bottom;
- transform-origin: right bottom;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- transform: rotate(90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-right {
+ bottom: 0;
+ -webkit-transform-origin: right bottom;
+ -moz-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ -o-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
}
-.vis.timeline .legend {
- background-color: rgba(247, 252, 255, 0.65);
- padding: 5px;
- border-color: #b3b3b3;
- border-style:solid;
- border-width: 1px;
- box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
+.vis-legend {
+ background-color: rgba(247, 252, 255, 0.65);
+ padding: 5px;
+ border: 1px solid #b3b3b3;
+ box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
-.vis.timeline .legendText {
- /*font-size: 10px;*/
- white-space: nowrap;
- display: inline-block
+.vis-legend-text {
+ /*font-size: 10px;*/
+ white-space: nowrap;
+ display: inline-block
}
\ No newline at end of file
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 8b766ab5..a7692afc 100644
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@@ -1,5 +1,5 @@
-.vis.timeline .item {
+.vis-item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
@@ -9,7 +9,7 @@
overflow: hidden;
}
-.vis.timeline .item.selected {
+.vis-item.vis-selected {
border-color: #FFC200;
background-color: #FFF785;
@@ -17,25 +17,25 @@
z-index: 2;
}
-.vis.timeline .editable .item.selected {
+.vis-editable .vis-item.vis-selected {
cursor: move;
}
-.vis.timeline .item.point.selected {
+.vis-item.vis-point.vis-selected {
background-color: #FFF785;
}
-.vis.timeline .item.box {
+.vis-item.vis-box {
text-align: center;
border-style: solid;
border-radius: 2px;
}
-.vis.timeline .item.point {
+.vis-item.vis-point {
background: none;
}
-.vis.timeline .item.dot {
+.vis-item.vis-dot {
position: absolute;
padding: 0;
border-width: 4px;
@@ -43,13 +43,13 @@
border-radius: 4px;
}
-.vis.timeline .item.range {
+.vis-item.vis-range {
border-style: solid;
border-radius: 2px;
box-sizing: border-box;
}
-.vis.timeline .item.background {
+.vis-item.background {
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
@@ -57,20 +57,20 @@
margin: 0;
}
-.vis.timeline .item.range .content {
+.vis-item.vis-range .vis-item-content {
position: relative;
display: inline-block;
max-width: 100%;
}
-.vis.timeline .item.background .content {
+.vis-item.background .vis-item-content {
position: absolute;
display: inline-block;
max-width: 100%;
margin: 5px;
}
-.vis.timeline .item.line {
+.vis-item.vis-line {
padding: 0;
position: absolute;
width: 0;
@@ -78,13 +78,13 @@
border-left-style: solid;
}
-.vis.timeline .item .content {
+.vis-item .vis-item-content {
white-space: nowrap;
box-sizing: border-box;
padding: 5px;
}
-.vis.timeline .item .delete {
+.vis-item .vis-delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
@@ -94,7 +94,7 @@
cursor: pointer;
}
-.vis.timeline .item.range .drag-left {
+.vis-item.vis-range .vis-drag-left {
position: absolute;
width: 24px;
height: 100%;
@@ -104,7 +104,7 @@
cursor: w-resize;
}
-.vis.timeline .item.range .drag-right {
+.vis-item.vis-range .vis-drag-right {
position: absolute;
width: 24px;
height: 100%;
diff --git a/lib/timeline/component/css/itemset.css b/lib/timeline/component/css/itemset.css
index 884238d1..82276f4b 100644
--- a/lib/timeline/component/css/itemset.css
+++ b/lib/timeline/component/css/itemset.css
@@ -1,5 +1,5 @@
-.vis.timeline .itemset {
+.vis-itemset {
position: relative;
padding: 0;
margin: 0;
@@ -7,15 +7,15 @@
box-sizing: border-box;
}
-.vis.timeline .itemset .background,
-.vis.timeline .itemset .foreground {
+.vis-itemset .vis-background,
+.vis-itemset .vis-foreground {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
}
-.vis.timeline .axis {
+.vis-axis {
position: absolute;
width: 100%;
height: 0;
@@ -23,12 +23,12 @@
z-index: 1;
}
-.vis.timeline .foreground .group {
+.vis-foreground .vis-group {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
-.vis.timeline .foreground .group:last-child {
+.vis-foreground .vis-group:last-child {
border-bottom: none;
}
diff --git a/lib/timeline/component/css/labelset.css b/lib/timeline/component/css/labelset.css
index a9246d77..c2690e97 100644
--- a/lib/timeline/component/css/labelset.css
+++ b/lib/timeline/component/css/labelset.css
@@ -1,5 +1,5 @@
-.vis.timeline .labelset {
+.vis-labelset {
position: relative;
overflow: hidden;
@@ -7,7 +7,7 @@
box-sizing: border-box;
}
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
position: relative;
left: 0;
top: 0;
@@ -17,19 +17,19 @@
box-sizing: border-box;
}
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
border-bottom: 1px solid #bfbfbf;
}
-.vis.timeline .labelset .vlabel:last-child {
+.vis-labelset .vis-label:last-child {
border-bottom: none;
}
-.vis.timeline .labelset .vlabel .inner {
+.vis-labelset .vis-label .vis-inner {
display: inline-block;
padding: 5px;
}
-.vis.timeline .labelset .vlabel .inner.hidden {
+.vis-labelset .vis-label .vis-inner.vis-hidden {
padding: 0;
}
diff --git a/lib/timeline/component/css/panel.css b/lib/timeline/component/css/panel.css
index 4c259f77..4c5088a9 100644
--- a/lib/timeline/component/css/panel.css
+++ b/lib/timeline/component/css/panel.css
@@ -1,16 +1,5 @@
-.vis.timeline.root {
- position: relative;
- border: 1px solid #bfbfbf;
-
- overflow: hidden;
- padding: 0;
- margin: 0;
-
- box-sizing: border-box;
-}
-
-.vis.timeline .vispanel {
+.vis-panel {
position: absolute;
padding: 0;
@@ -19,53 +8,53 @@
box-sizing: border-box;
}
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
border: 1px #bfbfbf;
}
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
border-left-style: solid;
border-right-style: solid;
}
-.vis.timeline .background {
+.vis-background {
overflow: hidden;
}
-.vis.timeline .vispanel > .content {
+.vis-panel > .vis-content {
position: relative;
}
-.vis.timeline .vispanel .shadow {
+.vis-panel .vis-shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
- /* TODO: find a nice way to ensure shadows are drawn on top of items
+ /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
z-index: 1;
*/
}
-.vis.timeline .vispanel .shadow.top {
+.vis-panel .vis-shadow.vis-top {
top: -1px;
left: 0;
}
-.vis.timeline .vispanel .shadow.bottom {
+.vis-panel .vis-shadow.vis-bottom {
bottom: -1px;
left: 0;
}
\ No newline at end of file
diff --git a/lib/timeline/component/css/pathStyles.css b/lib/timeline/component/css/pathStyles.css
index 22d97ef2..9089e6cc 100644
--- a/lib/timeline/component/css/pathStyles.css
+++ b/lib/timeline/component/css/pathStyles.css
@@ -1,91 +1,91 @@
-.vis.timeline .graphGroup0 {
+.vis-graph-group0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
-.vis.timeline .graphGroup1 {
+.vis-graph-group1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
-.vis.timeline .graphGroup2 {
+.vis-graph-group2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
-.vis.timeline .graphGroup3 {
+.vis-graph-group3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
-.vis.timeline .graphGroup4 {
+.vis-graph-group4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
-.vis.timeline .graphGroup5 {
+.vis-graph-group5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
-.vis.timeline .graphGroup6 {
+.vis-graph-group6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
-.vis.timeline .graphGroup7 {
+.vis-graph-group7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
-.vis.timeline .graphGroup8 {
+.vis-graph-group8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
-.vis.timeline .graphGroup9 {
+.vis-graph-group9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
-.vis.timeline .fill {
+.vis-fill {
fill-opacity:0.1;
stroke: none;
}
-.vis.timeline .bar {
+.vis-bar {
fill-opacity:0.5;
stroke-width:1px;
}
-.vis.timeline .point {
+.vis-point {
stroke-width:2px;
fill-opacity:1.0;
}
-.vis.timeline .legendBackground {
+.vis-legend-background {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
@@ -93,14 +93,14 @@
}
-.vis.timeline .outline {
+.vis-outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
-.vis.timeline .iconFill {
+.vis-icon-fill {
fill-opacity:0.3;
stroke: none;
}
diff --git a/lib/timeline/component/css/timeaxis.css b/lib/timeline/component/css/timeaxis.css
index d6631eb1..efe8e90f 100644
--- a/lib/timeline/component/css/timeaxis.css
+++ b/lib/timeline/component/css/timeaxis.css
@@ -1,15 +1,15 @@
-.vis.timeline .timeaxis {
+.vis-time-axis {
position: relative;
overflow: hidden;
}
-.vis.timeline .timeaxis.foreground {
+.vis-time-axis.vis-foreground {
top: 0;
left: 0;
width: 100%;
}
-.vis.timeline .timeaxis.background {
+.vis-time-axis.vis-background {
position: absolute;
top: 0;
left: 0;
@@ -17,14 +17,14 @@
height: 100%;
}
-.vis.timeline .timeaxis .text {
+.vis-time-axis .vis-text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
-.vis.timeline .timeaxis .text.measure {
+.vis-time-axis .vis-text.vis-measure {
position: absolute;
padding-left: 0;
padding-right: 0;
@@ -33,15 +33,15 @@
visibility: hidden;
}
-.vis.timeline .timeaxis .grid.vertical {
+.vis-time-axis .vis-grid.vis-vertical {
position: absolute;
border-left: 1px solid;
}
-.vis.timeline .timeaxis .grid.minor {
+.vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5;
}
-.vis.timeline .timeaxis .grid.major {
+.vis-time-axis .vis-grid.vis-major {
border-color: #bfbfbf;
}
diff --git a/lib/timeline/component/css/timeline.css b/lib/timeline/component/css/timeline.css
index 1762960d..a45d467c 100644
--- a/lib/timeline/component/css/timeline.css
+++ b/lib/timeline/component/css/timeline.css
@@ -1,2 +1,11 @@
-.vis.timeline {
+
+.vis-timeline {
+ position: relative;
+ border: 1px solid #bfbfbf;
+
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+
+ box-sizing: border-box;
}
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index b98eefc1..41ea08fb 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -109,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
}
}
- DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
+ DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
// draw points
if (group.options.drawPoints.enabled == true) {
Points.draw([combinedData[i]], group, framework, drawData.offset);
diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js
index b9e1add5..cfb7cd0d 100644
--- a/lib/timeline/component/graph2d_types/line.js
+++ b/lib/timeline/component/graph2d_types/line.js
@@ -31,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
path.setAttributeNS(null, "class", group.className);
if(group.style !== undefined) {
- path.setAttributeNS(null, "style", group.style);
+ path.setAttributeNS(null, "style", 'vis-' + group.style);
}
// construct path from dataset
@@ -52,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
else {
dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
}
- fillPath.setAttributeNS(null, "class", group.className + " fill");
+ fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
if(group.options.shaded.style !== undefined) {
- fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+ fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
}
- fillPath.setAttributeNS(null, "d", dFill);
+ fillPath.setAttributeNS(null, 'd', dFill);
}
// copy properties to path for drawing.
path.setAttributeNS(null, 'd', 'M' + d);
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index 6f906b9a..41d820d5 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@@ -39,7 +39,7 @@ function BackgroundItem (data, conversion, options) {
BackgroundItem.prototype = new Item (null, null, null);
-BackgroundItem.prototype.baseClassName = 'item background';
+BackgroundItem.prototype.baseClassName = 'vis-item vis-background';
BackgroundItem.prototype.stack = false;
/**
@@ -68,7 +68,7 @@ BackgroundItem.prototype.redraw = function() {
// contents box
dom.content = document.createElement('div');
- dom.content.className = 'content';
+ dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content);
// Note: we do NOT attach this item as attribute to the DOM,
@@ -103,7 +103,7 @@ BackgroundItem.prototype.redraw = function() {
// update class
var className = (this.data.className ? (' ' + this.data.className) : '') +
- (this.selected ? ' selected' : '');
+ (this.selected ? ' vis-selected' : '');
dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow
diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js
index f04cd6cd..e96c8e81 100644
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@@ -62,16 +62,16 @@ BoxItem.prototype.redraw = function() {
// contents box (inside the background box). used for making margins
dom.content = document.createElement('DIV');
- dom.content.className = 'content';
+ dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content);
// line to axis
dom.line = document.createElement('DIV');
- dom.line.className = 'line';
+ dom.line.className = 'vis-line';
// dot on axis
dom.dot = document.createElement('DIV');
- dom.dot.className = 'dot';
+ dom.dot.className = 'vis-dot';
// attach this item as attribute
dom.box['timeline-item'] = this;
@@ -112,10 +112,10 @@ BoxItem.prototype.redraw = function() {
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- dom.box.className = 'item box' + className;
- dom.line.className = 'item line' + className;
- dom.dot.className = 'item dot' + className;
+ (this.selected ? ' vis-selected' : '');
+ dom.box.className = 'vis-item vis-box' + className;
+ dom.line.className = 'vis-item vis-line' + className;
+ dom.dot.className = 'vis-item vis-dot' + className;
// recalculate size
this.props.dot.height = dom.dot.offsetHeight;
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 9b1e327e..a642a3c0 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -134,7 +134,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
var me = this;
var deleteButton = document.createElement('div');
- deleteButton.className = 'delete';
+ deleteButton.className = 'vis-delete';
deleteButton.title = 'Delete this item';
// TODO: be able to destroy the delete button
@@ -199,7 +199,7 @@ Item.prototype._updateTitle = function (element) {
element.title = this.data.title || '';
}
else {
- element.removeAttribute('title');
+ element.removeAttribute('vis-title');
}
};
diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js
index 8ec6db21..fbaf14cb 100644
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@@ -63,7 +63,7 @@ PointItem.prototype.redraw = function() {
// contents box, right from the dot
dom.content = document.createElement('div');
- dom.content.className = 'content';
+ dom.content.className = 'vis-item-content';
dom.point.appendChild(dom.content);
// dot at start
@@ -100,10 +100,10 @@ PointItem.prototype.redraw = function() {
this._updateStyle(this.dom.point);
// update class
- var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- dom.point.className = 'item point' + className;
- dom.dot.className = 'item dot' + className;
+ var className = (this.data.className ? ' ' + this.data.className : '') +
+ (this.selected ? ' vis-selected' : '');
+ dom.point.className = 'vis-item vis-point' + className;
+ dom.dot.className = 'vis-item vis-dot' + className;
// recalculate size
this.width = dom.point.offsetWidth;
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index c04c3765..377a0993 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -34,7 +34,7 @@ function RangeItem (data, conversion, options) {
RangeItem.prototype = new Item (null, null, null);
-RangeItem.prototype.baseClassName = 'item range';
+RangeItem.prototype.baseClassName = 'vis-item vis-range';
/**
* Check whether this item is visible inside given range
@@ -62,7 +62,7 @@ RangeItem.prototype.redraw = function() {
// contents box
dom.content = document.createElement('div');
- dom.content.className = 'content';
+ dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content);
// attach this item as attribute
@@ -96,7 +96,7 @@ RangeItem.prototype.redraw = function() {
// update class
var className = (this.data.className ? (' ' + this.data.className) : '') +
- (this.selected ? ' selected' : '');
+ (this.selected ? ' vis-selected' : '');
dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow
@@ -246,7 +246,7 @@ RangeItem.prototype._repaintDragLeft = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
// create and show drag area
var dragLeft = document.createElement('div');
- dragLeft.className = 'drag-left';
+ dragLeft.className = 'vis-drag-left';
dragLeft.dragLeftItem = this;
this.dom.box.appendChild(dragLeft);
@@ -269,7 +269,7 @@ RangeItem.prototype._repaintDragRight = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
// create and show drag area
var dragRight = document.createElement('div');
- dragRight.className = 'drag-right';
+ dragRight.className = 'vis-drag-right';
dragRight.dragRightItem = this;
this.dom.box.appendChild(dragRight);