Make unspecified values in VC a button

Change-Id: I8c743fff7c9173f38b4477873842982900847ba4
diff --git a/dev/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
index 3edfdf8..1b1ea01 100644
--- a/dev/js/spec/vcSpec.js
+++ b/dev/js/spec/vcSpec.js
@@ -336,6 +336,7 @@
     it('should be serializale to String', function () {
       // Empty doc
       var doc = docClass.create();
+      
       expect(doc.toQuery()).toEqual("");
 
       // Serialize string
@@ -631,8 +632,8 @@
       var doc = unspecifiedClass.create();
       var docElement = doc.element();
       expect(docElement.getAttribute('class')).toEqual('doc unspecified');
-      expect(docElement.firstChild.firstChild.data).toEqual('⋯');
-      expect(docElement.lastChild.lastChild.data).toEqual('⋯');
+      expect(docElement.firstChild.firstChild.data).toEqual(KorAP.Locale.EMPTY);
+      expect(docElement.lastChild.lastChild.data).toEqual(KorAP.Locale.EMPTY);
       expect(doc.toQuery()).toEqual('');
 
       // Only removable
@@ -735,7 +736,7 @@
 
       // No operators on root
       op = vc.root().element().lastChild;
-      expect(op.lastChild.textContent).toEqual('⋯');
+      expect(op.lastChild.textContent).toEqual(KorAP.Locale.EMPTY);
 
       // Replace
       expect(vc.root().key("baum")).not.toBeNull();
@@ -754,7 +755,8 @@
         ["pubDate", "date"]
       ]);
       expect(vc.toQuery()).toEqual("");
-      expect(vc.builder().firstChild.textContent).toEqual("⋯");
+      expect(vc.builder().firstChild.textContent).toEqual(KorAP.Locale.EMPTY);
+      expect(vc.builder().firstChild.classList.contains('unspecified')).toEqual(true);
       vc.builder().firstChild.firstChild.click();
 
       // Click on pubDate
@@ -811,7 +813,8 @@
 
       expect(vcE.firstChild.children.length).toEqual(1);
 
-      expect(vcE.firstChild.textContent).toEqual("⋯");
+      expect(vcE.firstChild.textContent).toEqual(KorAP.Locale.EMPTY);
+      expect(vcE.firstChild.classList.contains("unspecified")).toBeTruthy();
       vcE.firstChild.firstChild.click();
       
       // Click on pubDate
@@ -842,7 +845,8 @@
 
       expect(vcE.firstChild.children.length).toEqual(1);
 
-      expect(vcE.firstChild.textContent).toEqual("⋯");
+      expect(vcE.firstChild.textContent).toEqual(KorAP.Locale.EMPTY);
+      expect(vcE.firstChild.classList.contains('unspecified')).toEqual(true);
       vcE.firstChild.firstChild.click();
       
       // Click on referTo
@@ -1738,7 +1742,8 @@
       expect(vc.root().element().lastChild.lastChild.getAttribute('class')).toEqual('delete');
       _delOn(vc.root());
       expect(vc.root().toQuery()).toEqual('');
-      expect(vc.root().element().lastChild.lastChild.data).toEqual('⋯');
+      expect(vc.root().element().lastChild.lastChild.data).toEqual(KorAP.Locale.EMPTY);
+      expect(vc.root().element().classList.contains('unspecified')).toEqual(true);
     });
 
     it('should remove on nested docs', function () {
@@ -2698,7 +2703,8 @@
       expect(vc.builder().firstChild.children[1].innerText).toEqual("ne");
 
       // Click on text
-      expect(vc.builder().firstChild.children[2].innerText).toEqual("⋯");
+      expect(vc.builder().firstChild.children[2].innerText).toEqual(KorAP.Locale.EMPTY);
+      expect(vc.builder().firstChild.children[2].classList.contains('unspecified')).toEqual(true);
       vc.builder().firstChild.children[2].click();
 
       // Blur text element
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 2d38b56..821aa64 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -112,6 +112,7 @@
       }
       else {
         this._valueE.addT(loc.EMPTY);
+        this._valueE.classList.add('unspecified');
       };
 
       // Change value
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d880e55..b9567bd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -131,6 +131,21 @@
       }
     }
 
+    // Unspecified value
+    &.unspecified > span, span.unspecified {
+      padding: 0 4px;
+      box-shadow: $choose-box-shadow;
+      border: {
+        style: solid;
+        width: $border-size;
+        radius: $standard-border-radius;
+      }
+      @include choose-item;
+      &:hover {
+	      @include choose-hover;
+      }
+    }
+
     > span.key.fixed {
       color: $light-green;
     }