Refactored css of ColorPicker and Popup

lib/network/css/network-colorpicker.css

@@ -1,174 +1,175 @@
 
-div.vis-network-colorPicker-frame {
-    position:absolute;
-    margin-top:-140px;
-    margin-left:30px;
-    width:293px;
-    height:425px;
-    padding: 10px;
-    border-radius:15px;
-    background-color:#ffffff;
-    display:none;
-    box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
-}
-
-
-
-div.vis-network-colorPicker-arrowDiv {
-    position: absolute;
-    top:147px;
-    left:5px;
-}
-div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
-    right: 100%;
-    top: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-div.vis-network-colorPicker-arrowDiv:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-right-color: #ffffff;
-    border-width: 30px;
-    margin-top: -30px;
+div.vis-color-picker {
+  position:absolute;
+  margin-top:-140px;
+  margin-left:30px;
+  width:293px;
+  height:425px;
+  padding: 10px;
+  border-radius:15px;
+  background-color:#ffffff;
+  display:none;
+  box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
+}
+
+div.vis-color-picker div.vis-arrow {
+  position: absolute;
+  top:147px;
+  left:5px;
+}
+
+div.vis-color-picker div.vis-arrow:after,
+div.vis-color-picker div.vis-arrow:before {
+  right: 100%;
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+div.vis-color-picker div.vis-arrow:after {
+  border-color: rgba(255, 255, 255, 0);
+  border-right-color: #ffffff;
+  border-width: 30px;
+  margin-top: -30px;
+}
+
+div.vis-color-picker div.vis-color {
+  position:absolute;
+  width: 289px;
+  height: 289px;
+  cursor: pointer;
+}
+
+
+
+div.vis-color-picker div.vis-brightness {
+  position: absolute;
+  top:313px;
+}
+
+div.vis-color-picker div.vis-opacity {
+  position:absolute;
+  top:350px;
+}
+
+div.vis-color-picker div.vis-selector {
+  position:absolute;
+  top:137px;
+  left:137px;
+  width:15px;
+  height:15px;
+  border-radius:15px;
+  border:1px solid #ffffff;
+  background: #4c4c4c; /* Old browsers */
+  background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
 }
 
-div.vis-network-colorPicker-color {
-    position:absolute;
-    width: 289px;
-    height: 289px;
-    cursor: pointer;
-}
-
-
-
-div.vis-network-colorPicker-brightness {
-    position: absolute;
-    top:313px;
-}
-
-div.vis-network-colorPicker-opacity {
-    position:absolute;
-    top:350px;
-}
-
-div.vis-network-colorPicker-selector{
-    position:absolute;
-    top:137px;
-    left:137px;
-    width:15px;
-    height:15px;
-    border-radius:15px;
-    border:1px solid #ffffff;
-    background: #4c4c4c; /* Old browsers */
-    background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
-}
 
 
-
-div.vis-network-colorPicker-newColor {
-    position:absolute;
-    width:140px;
-    height:20px;
-    border:1px solid rgba(0,0,0,0.1);
-    border-radius:5px;
-    top:380px;
-    left:159px;
-    text-align:right;
-    padding-right:2px;
-    font-size:10px;
-    color:rgba(0,0,0,0.4);
-    vertical-align:middle;
-    line-height:20px;
+div.vis-color-picker div.vis-new-color {
+  position:absolute;
+  width:140px;
+  height:20px;
+  border:1px solid rgba(0,0,0,0.1);
+  border-radius:5px;
+  top:380px;
+  left:159px;
+  text-align:right;
+  padding-right:2px;
+  font-size:10px;
+  color:rgba(0,0,0,0.4);
+  vertical-align:middle;
+  line-height:20px;
 
 }
 
-div.vis-network-colorPicker-initialColor {
-    position:absolute;
-    width:140px;
-    height:20px;
-    border:1px solid rgba(0,0,0,0.1);
-    border-radius:5px;
-    top:380px;
-    left:10px;
-    text-align:left;
-    padding-left:2px;
-    font-size:10px;
-    color:rgba(0,0,0,0.4);
-    vertical-align:middle;
-    line-height:20px;
+div.vis-color-picker div.vis-initial-color {
+  position:absolute;
+  width:140px;
+  height:20px;
+  border:1px solid rgba(0,0,0,0.1);
+  border-radius:5px;
+  top:380px;
+  left:10px;
+  text-align:left;
+  padding-left:2px;
+  font-size:10px;
+  color:rgba(0,0,0,0.4);
+  vertical-align:middle;
+  line-height:20px;
 }
 
-div.vis-network-colorPicker-label {
-    position:absolute;
-    width:300px;
-    left:10px;
+div.vis-color-picker div.vis-label {
+  position:absolute;
+  width:300px;
+  left:10px;
 }
 
-div.vis-network-colorPicker-label.brightness {
-    top:300px;
+div.vis-color-picker div.vis-label.vis-brightness {
+  top:300px;
 }
 
-div.vis-network-colorPicker-label.opacity {
-    top:338px;
+div.vis-color-picker div.vis-label.vis-opacity {
+  top:338px;
 }
 
-div.vis-network-colorPicker-button {
-    position:absolute;
-    width:68px;
-    height:25px;
-    border-radius:10px;
-    vertical-align: middle;
-    text-align:center;
-    line-height: 25px;
-    top:410px;
-    border:2px solid #d9d9d9;
-    background-color: #f7f7f7;
-    cursor:pointer;
+div.vis-color-picker div.vis-button {
+  position:absolute;
+  width:68px;
+  height:25px;
+  border-radius:10px;
+  vertical-align: middle;
+  text-align:center;
+  line-height: 25px;
+  top:410px;
+  border:2px solid #d9d9d9;
+  background-color: #f7f7f7;
+  cursor:pointer;
 }
 
-div.vis-network-colorPicker-button.cancel {
-    /*border:2px solid #ff4e33;*/
-    /*background-color: #ff7761;*/
-    left:5px;
+div.vis-color-picker div.vis-button.vis-cancel {
+  /*border:2px solid #ff4e33;*/
+  /*background-color: #ff7761;*/
+  left:5px;
 }
-div.vis-network-colorPicker-button.load {
-    /*border:2px solid #a153e6;*/
-    /*background-color: #cb8dff;*/
-    left:82px;
+div.vis-color-picker div.vis-button.vis-load {
+  /*border:2px solid #a153e6;*/
+  /*background-color: #cb8dff;*/
+  left:82px;
 }
-div.vis-network-colorPicker-button.apply {
-    /*border:2px solid #4588e6;*/
-    /*background-color: #82b6ff;*/
-    left:159px;
+div.vis-color-picker div.vis-button.vis-apply {
+  /*border:2px solid #4588e6;*/
+  /*background-color: #82b6ff;*/
+  left:159px;
 }
-div.vis-network-colorPicker-button.save {
-    /*border:2px solid #45e655;*/
-    /*background-color: #6dff7c;*/
-    left:236px;
-}
-
+div.vis-color-picker div.vis-button.vis-save {
+  /*border:2px solid #45e655;*/
+  /*background-color: #6dff7c;*/
+  left:236px;
+}
+
 
-input.vis-network-configuration.range.colorPicker{
-    width: 290px;
-    height:20px;
+div.vis-color-picker input.vis-range {
+  width: 290px;
+  height:20px;
 }
 
-input.vis-network-brightnessRange {
-    width: 289px !important;
+/* TODO: is this redundant?
+div.vis-color-picker input.vis-range-brightness {
+  width: 289px !important;
 }
 
 
-input.vis-network-saturationRange {
-    width: 289px !important;
-}
+div.vis-color-picker input.vis-saturation-range {
+  width: 289px !important;
+}*/

lib/network/css/network-configuration.css

@@ -5,7 +5,7 @@ div.vis-network-configuration {
     font-size:12px;
 }
 
-div.vis-network-configuration.optionContainer{
+div.vis-network-configuration.vis-option-container{
     display:block;
     width:495px;
     background-color: #ffffff;

lib/network/css/network-tooltip.css

@@ -1,4 +1,4 @@
-div.network-tooltip {
+div.vis-network-tooltip {
   position: absolute;
   visibility: hidden;
   padding: 5px;

lib/network/modules/ConfigurationSystem.js

@@ -302,7 +302,7 @@ class ConfigurationSystem {
     generateButton.onmouseout =  () => {generateButton.className = 'vis-network-configuration button';};
 
     this.optionsContainer = document.createElement('div');
-    this.optionsContainer.className = 'vis-network-configuration optionContainer';
+    this.optionsContainer.className = 'vis-network-configuration vis-option-container';
 
     this.domElements.push(this.optionsContainer);
     this.domElements.push(generateButton);

lib/network/modules/components/ColorPicker.js

@@ -297,14 +297,12 @@ class ColorPicker {
    * @private
    */
   _create() {
-    let visPrefix = 'vis-network-'
-
     this.frame = document.createElement('div');
-    this.frame.className = visPrefix + 'colorPicker-frame';
+    this.frame.className = 'vis-color-picker';
 
     this.colorPickerDiv = document.createElement('div');
     this.colorPickerSelector = document.createElement('div');
-    this.colorPickerSelector.className = visPrefix + 'colorPicker-selector';
+    this.colorPickerSelector.className = 'vis-selector';
     this.colorPickerDiv.appendChild(this.colorPickerSelector);
 
     this.colorPickerCanvas = document.createElement('canvas');
@@ -329,73 +327,73 @@ class ColorPicker {
       this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
     }
 
-    this.colorPickerDiv.className = visPrefix + 'colorPicker-color';
+    this.colorPickerDiv.className = 'vis-color';
 
     this.opacityDiv = document.createElement('div');
-    this.opacityDiv.className = visPrefix + 'colorPicker-opacity';
+    this.opacityDiv.className = 'vis-opacity';
 
     this.brightnessDiv = document.createElement('div');
-    this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
+    this.brightnessDiv.className = 'vis-brightness';
 
     this.arrowDiv = document.createElement('div');
-    this.arrowDiv.className = visPrefix + 'colorPicker-arrowDiv';
+    this.arrowDiv.className = 'vis-arrow';
 
     this.opacityRange = document.createElement('input');
     this.opacityRange.type = 'range';
     this.opacityRange.min = '0';
     this.opacityRange.max = '100';
     this.opacityRange.value = '100';
-    this.opacityRange.className = visPrefix + 'configuration range colorPicker';
+    this.opacityRange.className = 'vis-range';
 
     this.brightnessRange = document.createElement('input');
     this.brightnessRange.type = 'range';
     this.brightnessRange.min = '0';
     this.brightnessRange.max = '100';
     this.brightnessRange.value = '100';
-    this.brightnessRange.className = visPrefix + 'configuration range colorPicker';
+    this.brightnessRange.className = 'vis-range';
 
     this.opacityDiv.appendChild(this.opacityRange);
     this.brightnessDiv.appendChild(this.brightnessRange);
 
     var me = this;
-    this.opacityRange.onchange = function () {me._setOpacity(this.value);}
-    this.opacityRange.oninput  = function () {me._setOpacity(this.value);}
-    this.brightnessRange.onchange = function () {me._setBrightness(this.value);}
-    this.brightnessRange.oninput  = function () {me._setBrightness(this.value);}
+    this.opacityRange.onchange = function () {me._setOpacity(this.value);};
+    this.opacityRange.oninput  = function () {me._setOpacity(this.value);};
+    this.brightnessRange.onchange = function () {me._setBrightness(this.value);};
+    this.brightnessRange.oninput  = function () {me._setBrightness(this.value);};
 
     this.brightnessLabel = document.createElement("div");
-    this.brightnessLabel.className = visPrefix + "colorPicker-label brightness";
+    this.brightnessLabel.className = "vis-label vis-brightness";
     this.brightnessLabel.innerHTML = 'brightness:';
 
     this.opacityLabel = document.createElement("div");
-    this.opacityLabel.className = visPrefix + "colorPicker-label opacity";
+    this.opacityLabel.className = "vis-label vis-opacity";
     this.opacityLabel.innerHTML = 'opacity:';
 
     this.newColorDiv = document.createElement("div");
-    this.newColorDiv.className = visPrefix + "colorPicker-newColor";
+    this.newColorDiv.className = "vis-new-color";
     this.newColorDiv.innerHTML = 'new';
 
     this.initialColorDiv = document.createElement("div");
-    this.initialColorDiv.className = visPrefix + "colorPicker-initialColor";
+    this.initialColorDiv.className = "vis-initial-color";
     this.initialColorDiv.innerHTML = 'initial';
 
     this.cancelButton = document.createElement("div");
-    this.cancelButton.className = visPrefix + "colorPicker-button cancel";
+    this.cancelButton.className = "vis-button vis-cancel";
     this.cancelButton.innerHTML = 'cancel';
     this.cancelButton.onclick = this._hide.bind(this, false);
 
     this.applyButton = document.createElement("div");
-    this.applyButton.className = visPrefix + "colorPicker-button apply";
+    this.applyButton.className = "vis-button vis-apply";
     this.applyButton.innerHTML = 'apply';
     this.applyButton.onclick = this._apply.bind(this);
 
     this.saveButton = document.createElement("div");
-    this.saveButton.className = visPrefix + "colorPicker-button save";
+    this.saveButton.className = "vis-button vis-save";
     this.saveButton.innerHTML = 'save';
     this.saveButton.onclick = this._save.bind(this);
 
     this.loadButton = document.createElement("div");
-    this.loadButton.className = visPrefix + "colorPicker-button load";
+    this.loadButton.className = "vis-button vis-load";
     this.loadButton.innerHTML = 'load last';
     this.loadButton.onclick = this._loadLast.bind(this);
 

lib/network/modules/components/Popup.js

@@ -52,7 +52,7 @@ class Popup {
 
     // create the frame
     this.frame = document.createElement('div');
-    this.frame.className = 'network-tooltip';
+    this.frame.className = 'vis-network-tooltip';
     this.frame.style.color = style.fontColor;
     this.frame.style.backgroundColor = style.color.background;
     this.frame.style.borderColor = style.color.border;