Cleanup deployment
diff --git a/dev/scss/vc.scss b/dev/scss/vc.scss
new file mode 100644
index 0000000..1ed7959
--- /dev/null
+++ b/dev/scss/vc.scss
@@ -0,0 +1,250 @@
+@charset "utf-8";
+@import "util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 2px;
+
+.vc {
+ background-color: $light-green;
+ margin-top: 10px;
+ .docGroup {
+ position: relative;
+ display: inline-block;
+ color: $nearly-white;
+
+ margin-left: $left-padding; // 2.8em
+
+ // .6em .5em
+ border-width: 0 (2 * $border-size);
+
+ padding: {
+ top: 10pt;
+ bottom: 2pt;
+ left: 0pt;
+ right: 6pt;
+ }
+
+ border: {
+ radius: $standard-border-radius * 2;
+ style: solid;
+ }
+
+ .docGroup {
+ display: block;
+ }
+
+ > .operators {
+ position: absolute;
+ display: block;
+ top: 10px;
+ vertical-align: middle;
+ left: 3px;
+ border-width: 2px 2px 2px 0;
+ border-top-right-radius: 7px;
+ border-bottom-right-radius: 7px;
+ margin-left: 100%;
+ padding: 0;
+ }
+
+ &:hover {
+ background-color: rgba(255,255,255,.05);
+ }
+
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ > .doc::before,
+ > .docGroup::before {
+ content: "oder";
+ }
+ > .operators {
+ border-color: $dark-orange;
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ }
+
+ &[data-operation=and] {
+ > .doc::before,
+ > .docGroup::before {
+ content: "und";
+ }
+ }
+
+ &[data-operation] {
+ > .doc:first-child::before,
+ > .docGroup:first-child::before {
+ content: '';
+ }
+ > .doc::before,
+ > .docGroup::before {
+ display: inline-block;
+ text-align: right;
+// width: 2.2em;
+ width: $left-padding;
+ color: $dark-green;
+ }
+ > .doc::before {
+ padding-right: 1.2em;
+ margin-right: .1em;
+ }
+ > .docGroup::before {
+ position: absolute;
+ }
+ }
+ }
+
+ .doc {
+ > span + span {
+ margin-left: 5pt;
+ }
+ > span.key,
+ > span.value {
+ font-weight: bold;
+ }
+ > .operators {
+ display: inline-block;
+ border-color: $dark-orange;
+ border-width: 2px 2px 2px 2px;
+ border-radius: 7px;
+
+ margin-left: 10px;
+ > span {
+ &.and {
+ border: {
+ radius: inherit;
+ top-right-radius: 0;
+ bottom-right-radius: 0;
+ }
+ &.delete {
+ border: {
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
+ }
+ }
+ }
+ }
+ > span.key {
+ position: relative;
+ > ul {
+ margin: 0;
+ margin-left: 3.3em;
+ }
+ }
+ }
+
+ .rewritten {
+ .rewrite {
+ margin-left: 4pt;
+ display: inline-block;
+ color: $dark-orange;
+ &::after {
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ content: "\f040"; // "\f14b";
+ text-decoration: underline;
+ }
+ span {
+ display: none;
+ }
+ }
+ }
+
+ .operators {
+ opacity: 0;
+ white-space: nowrap;
+ padding: 0;
+ font-size: 0;
+ line-height: 0;
+ color: $light-green;
+ border-color: $nearly-white;
+ text-align: center;
+ font-weight: bold;
+ border-style: solid;
+
+ > span {
+ cursor: pointer;
+ font-size: 9pt;
+ line-height: 1.3em;
+ padding: 0 4px;
+ display: inline-block;
+ &.and {
+ background-color: $nearly-white;
+ color: $light-green;
+ }
+ &.or {
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ &.delete {
+ background-color: red;
+ border-radius: inherit;
+ color: $nearly-white;
+ }
+ }
+ }
+
+ > .docGroup {
+ margin-left: 0;
+ }
+
+
+ .docGroup > .docGroup::before {
+ background-color: red;
+ margin-left: -1 * $left-padding; // -3.4em;
+ }
+
+ .doc, .docGroup {
+ &:hover > .operators {
+ opacity: 1;
+ }
+ }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+ background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+ > .operators {
+ z-index: $dg-index;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 1;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 2;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 3;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 4;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 5;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 6;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}