Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
new file mode 100644
index 0000000..6239c61
--- /dev/null
+++ b/dev/scss/main/view/matchtable.scss
@@ -0,0 +1,148 @@
+@import "../../util";
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+div.matchtable {
+
+ > div {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ margin-right: $right-view-distance;
+ padding: 0;
+ overflow-x: auto;
+ overflow-y: visible;
+ width: auto;
+ }
+
+ table {
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0px;
+ }
+
+ th {
+ color: $nearly-white;
+ }
+
+ // Use matchinfo cells for query creation
+ td,
+ tbody th,
+ thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
+ cursor: pointer;
+ }
+
+ td {
+ &:empty {
+ cursor: default;
+ // Fix for empty annotation lines:
+ &::after {
+ content: " ";
+ white-space: pre;
+ }
+ }
+
+ // table for key-value pairs
+ &.matchkeyvalues {
+ padding: 0;
+ > div {
+ @include cell-info;
+ > span {
+ color: $darkest-orange;
+ text-align: right;
+ padding-right: .5em;
+ &::after {
+ content: ":"
+ }
+ }
+ }
+ }
+ }
+
+ tr {
+ outline: none;
+
+ // equal to dd.chosen
+ td.chosen,
+ th.chosen,
+ div.chosen {
+ background-color: $light-green !important;
+ color: $nearly-white;
+ }
+
+ /**
+ * The first two columns.
+ */
+ > th:nth-of-type(1),
+ > th:nth-of-type(2) {
+ @include matchinfo-head;
+ position: absolute;
+ z-index: 80;
+ vertical-align: middle;
+ left: 0px;
+ }
+
+ > th:nth-of-type(2) {
+ left: ($left-width / 2) + $border-size;
+ }
+
+ // Includes header line as well
+ > * {
+ @include cell-info;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+
+ > td {
+ background-color: $middle-orange;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: center;
+ &.mark {
+ background-color: $light-orange;
+ }
+ }
+
+ &:nth-child(even) > td {
+ background-color: $light-orange;
+ &.mark {
+ background-color: $middle-orange;
+ }
+ }
+ }
+
+ thead th {
+ background-color: $darker-orange;
+ border-top-width: 0px !important;
+ text-align: center;
+
+ &:nth-of-type(1),
+ &:nth-of-type(2) {
+ text-align: left;
+ }
+
+ &.mark {
+ background-color: $darkest-orange;
+ }
+
+ &.cutted {
+ background-color: $light-orange;
+
+ &::after {
+ @include icon-font;
+ content: $fa-cut;
+ color: $light-green;
+ padding: {
+ left: 4pt;
+ right: 4pt;
+ }
+ }
+ }
+ }
+
+ tbody > tr:nth-of-type(1) > th {
+ border-top-color: transparent;
+ }
+}
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
new file mode 100644
index 0000000..96fb86a
--- /dev/null
+++ b/dev/scss/main/view/matchtree.scss
@@ -0,0 +1,44 @@
+@import "../../util";
+@import "tree";
+
+/**
+ * Matchtree view
+ */
+
+div.matchtree {
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding: 0;
+ margin-top: 1pt;
+
+ // Label
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+
+ > span {
+ @include matchinfo-head;
+ @include cell-info;
+ display: inline-block !important;
+ margin: 0;
+
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+
+ > div {
+ position: unset;
+ z-index: 4;
+ overflow-x: auto;
+ margin: $border-size;
+ margin-left: $left-distance;
+ margin-right: $right-view-distance;
+ background-color: $light-orange;
+ }
+}
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
new file mode 100644
index 0000000..8be5679
--- /dev/null
+++ b/dev/scss/main/view/metatable.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+@import "../../util";
+
+// Metatable
+div.metatable > dl {
+ margin-right: $right-view-distance;
+ margin-top: $border-size;
+
+ > div {
+ border-color: $dark-orange;
+
+ > * {
+ padding: .2em;
+ }
+
+ > dt {
+ background: $darker-orange;
+ color: $nearly-white;
+ width: 12.5em;
+ }
+
+ > dd {
+ background-color: $light-orange;
+ cursor: pointer;
+
+ &.metakeyvalues {
+ padding: 0;
+
+ > div {
+ padding: .2em;
+
+ &::before {
+ content: "\2022\00A0";
+ color: $dark-orange
+ }
+ }
+ }
+
+ // equal to td.chosen
+ &.chosen,
+ > div.chosen {
+ background-color: $light-green !important;
+ color: $nearly-white;
+ }
+
+ &[data-type="type:store"],
+ &[data-type="type:attachement"] {
+ background-color: $middle-orange;
+ cursor: default;
+
+ a {
+ color: inherit;
+ }
+ }
+ }
+ }
+
+ // This is a temporary feature to disable
+ // corpusByMatch assistant. See corpusByMatch.js
+ // for reasons.
+ &.cbm-disabled > div > dd {
+ cursor: default !important;
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
new file mode 100644
index 0000000..c7e064b
--- /dev/null
+++ b/dev/scss/main/view/tree.scss
@@ -0,0 +1,86 @@
+@charset "utf-8";
+@import "../../util";
+
+/**
+ * SVG tree
+ */
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+g.arc.infocus > path.edge {
+ stroke: $dark-green;
+}
+
+marker#arr {
+ overflow: visible;
+ path {
+ stroke: $darkest-orange;
+ fill: $darkest-orange;
+ fill-opacity: 1;
+ stroke-width: 2;
+ }
+}
+
+path.anchor {
+ stroke: $darkest-orange;
+ stroke-width: 3;
+ stroke-linecap: round;
+ z-index: 20;
+}
+
+g.root rect.empty {
+ stroke: $darker-orange;
+ fill: $darker-orange;
+ stroke-width: 2px;
+}
+
+g.middle,
+g.label {
+ rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $middle-orange;
+ }
+}
+
+g.label.infocus rect {
+ stroke: $dark-green;
+ fill: $lightest-green;
+}
+
+g.middle.mark {
+ rect {
+ fill: $darker-orange;
+ }
+ > text {
+ fill: $light-orange;
+
+ > tspan {
+ stroke: $light-orange;
+ }
+ }
+}
+
+g.leaf.mark text > tspan {
+ font-weight: bold;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+g > text > tspan {
+ text-anchor: middle;
+ font-size: 9pt;
+}
+
+g.leaf > text,
+text.leaf {
+ > tspan {
+ font-size: 10pt;
+ overflow: visible;
+ }
+}