Update SCSS to module system (fixes #266)
Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
index 05ec880..ca2d3ed 100644
--- a/dev/scss/main/view/matchtable.scss
+++ b/dev/scss/main/view/matchtable.scss
@@ -1,5 +1,9 @@
@use 'sass:math';
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/icons";
+@use "../../base/lengths";
+@use "../../base/mixins";
/**
* Table view
@@ -11,8 +15,8 @@
> div {
z-index: 20;
- margin-left: $left-distance - math.div($border-size,2);
- margin-right: $right-view-distance;
+ margin-left: lengths.$left-distance - math.div(lengths.$border-size,2);
+ margin-right: lengths.$right-view-distance;
padding: 0;
overflow-x: auto;
overflow-y: visible;
@@ -26,7 +30,7 @@
}
th {
- color: $nearly-white;
+ color: colors.$nearly-white;
}
// Use matchinfo cells for query creation
@@ -51,9 +55,9 @@
&.matchkeyvalues {
padding: 0;
> div {
- @include cell-info;
+ @include mixins.cell-info;
> span {
- color: $darkest-orange;
+ color: colors.$darkest-orange;
text-align: right;
padding-right: .5em;
&::after {
@@ -66,7 +70,7 @@
td, div {
&.notinindex {
- background-color: $ids-grey-2 !important;
+ background-color: colors.$ids-grey-2 !important;
cursor: default;
}
}
@@ -78,8 +82,8 @@
td.chosen,
th.chosen,
div.chosen {
- background-color: $light-green !important;
- color: $nearly-white;
+ background-color: colors.$light-green !important;
+ color: colors.$nearly-white;
}
/**
@@ -87,7 +91,7 @@
*/
> th:nth-of-type(1),
> th:nth-of-type(2) {
- @include matchinfo-head;
+ @include mixins.matchinfo-head;
position: absolute;
z-index: 80;
vertical-align: middle;
@@ -95,29 +99,29 @@
}
> th:nth-of-type(2) {
- left: math.div($left-width,2) + $border-size;
+ left: math.div(lengths.$left-width,2) + lengths.$border-size;
}
// Includes header line as well
> * {
- @include cell-info;
- border: math.div($border-size,2) solid $dark-orange;
+ @include mixins.cell-info;
+ border: math.div(lengths.$border-size,2) solid colors.$dark-orange;
}
> td {
- background-color: $middle-orange;
+ background-color: colors.$middle-orange;
white-space: nowrap;
vertical-align: top;
text-align: center;
&.mark {
- background-color: $light-orange;
+ background-color: colors.$light-orange;
}
}
&:nth-child(even) > td {
- background-color: $light-orange;
+ background-color: colors.$light-orange;
&.mark {
- background-color: $middle-orange;
+ background-color: colors.$middle-orange;
}
}
}
@@ -127,7 +131,7 @@
text-align: center;
&:not(.no-anno) {
- background-color: $darker-orange;
+ background-color: colors.$darker-orange;
}
&:nth-of-type(1),
@@ -136,16 +140,16 @@
}
&.mark {
- background-color: $darkest-orange;
+ background-color: colors.$darkest-orange;
}
&.cutted {
- background-color: $light-orange;
+ background-color: colors.$light-orange;
&::after {
- @include icon-font;
- content: $fa-cut;
- color: $light-green;
+ @include mixins.icon-font;
+ content: icons.$fa-cut;
+ color: colors.$light-green;
padding: {
left: 4pt;
right: 4pt;
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
index 4f5edbc..e62bb5a 100644
--- a/dev/scss/main/view/matchtree.scss
+++ b/dev/scss/main/view/matchtree.scss
@@ -1,5 +1,8 @@
-@import "../../util";
-@import "tree";
+@use "../../util";
+@use "tree";
+@use "../../base/colors";
+@use "../../base/lengths";
+@use "../../base/mixins";
/**
* Matchtree view
@@ -15,19 +18,19 @@
h6 {
display: inline;
font-size: inherit;
- color: $nearly-white;
+ color: colors.$nearly-white;
margin: 0;
padding: 0 !important;
float: left;
> span {
- @include matchinfo-head;
- @include cell-info;
+ @include mixins.matchinfo-head;
+ @include mixins.cell-info;
display: inline-block !important;
margin: 0;
&:nth-of-type(2) {
- margin-left: $border-size;
+ margin-left: lengths.$border-size;
}
}
}
@@ -36,10 +39,10 @@
position: unset;
z-index: 4;
overflow-x: auto;
- margin: $border-size;
- margin-left: $left-distance;
- margin-right: $right-view-distance;
- background-color: $light-orange;
+ margin: lengths.$border-size;
+ margin-left: lengths.$left-distance;
+ margin-right: lengths.$right-view-distance;
+ background-color: colors.$light-orange;
}
svg {
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
index 7467c11..55f0ea0 100644
--- a/dev/scss/main/view/metatable.scss
+++ b/dev/scss/main/view/metatable.scss
@@ -1,26 +1,28 @@
@charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/lengths";
// Metatable
div.metatable > dl {
- margin-right: $right-view-distance;
- margin-top: $border-size;
+ margin-right: lengths.$right-view-distance;
+ margin-top: lengths.$border-size;
> div {
- border-color: $dark-orange;
+ border-color: colors.$dark-orange;
> * {
padding: .2em;
}
> dt {
- background: $darker-orange;
- color: $nearly-white;
+ background: colors.$darker-orange;
+ color: colors.$nearly-white;
width: 12.5em;
}
> dd {
- background-color: $light-orange;
+ background-color: colors.$light-orange;
cursor: pointer;
&.metakeyvalues {
@@ -30,12 +32,12 @@
text-indent: -5pt;
margin-left: 6pt;
padding-left: 4pt;
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
margin-bottom: 2pt;
&::before {
content: "\2022\00A0";
- color: $dark-orange;
+ color: colors.$dark-orange;
width: 5pt;
display: inline-block;
}
@@ -45,13 +47,13 @@
// equal to td.chosen
&.chosen,
> div.chosen {
- background-color: $light-green !important;
- color: $nearly-white;
+ background-color: colors.$light-green !important;
+ color: colors.$nearly-white;
}
&[data-type="type:store"],
&[data-type="type:attachement"] {
- background-color: $middle-orange;
+ background-color: colors.$middle-orange;
cursor: default;
a {
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
index c7e064b..7242116 100644
--- a/dev/scss/main/view/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,65 +1,66 @@
@charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
/**
* SVG tree
*/
path.edge {
- stroke: $darker-orange;
+ stroke: colors.$darker-orange;
stroke-width: 2px;
fill: none;
}
g.arc.infocus > path.edge {
- stroke: $dark-green;
+ stroke: colors.$dark-green;
}
marker#arr {
overflow: visible;
path {
- stroke: $darkest-orange;
- fill: $darkest-orange;
+ stroke: colors.$darkest-orange;
+ fill: colors.$darkest-orange;
fill-opacity: 1;
stroke-width: 2;
}
}
path.anchor {
- stroke: $darkest-orange;
+ stroke: colors.$darkest-orange;
stroke-width: 3;
stroke-linecap: round;
z-index: 20;
}
g.root rect.empty {
- stroke: $darker-orange;
- fill: $darker-orange;
+ stroke: colors.$darker-orange;
+ fill: colors.$darker-orange;
stroke-width: 2px;
}
g.middle,
g.label {
rect {
- stroke: $darker-orange;
+ stroke: colors.$darker-orange;
stroke-width: 2px;
- fill: $middle-orange;
+ fill: colors.$middle-orange;
}
}
g.label.infocus rect {
- stroke: $dark-green;
- fill: $lightest-green;
+ stroke: colors.$dark-green;
+ fill: colors.$lightest-green;
}
g.middle.mark {
rect {
- fill: $darker-orange;
+ fill: colors.$darker-orange;
}
> text {
- fill: $light-orange;
+ fill: colors.$light-orange;
> tspan {
- stroke: $light-orange;
+ stroke: colors.$light-orange;
}
}
}