Update SCSS to module system (fixes #266)
Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index c3a52fa..f6313b0 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,5 +1,10 @@
+@use 'sass:color';
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
/**
* Styles for the KWIC view.
@@ -24,7 +29,7 @@
list-style-type: none;
margin: 0;
padding: 0;
- border: $result-border-size solid $kwic-border;
+ border: lengths.$result-border-size solid colors.$kwic-border;
font-size: $font-size;
> li {
@@ -36,7 +41,7 @@
border: {
style: solid;
- color: $dark-orange;
+ color: colors.$dark-orange;
width: 0;
}
@@ -47,7 +52,7 @@
// Zebra style
&:nth-of-type(even) div.match-main div.match-wrap {
- background-color: $kwic-line-even;
+ background-color: colors.$kwic-line-even;
}
// References
@@ -70,7 +75,7 @@
> div.match-wrap {
width: 99999%;
margin-left: -49999.5%;
- background-color: $kwic-line-noneven;
+ background-color: colors.$kwic-line-noneven;
overflow-x: hidden;
overflow-y: visible;
white-space: normal;
@@ -88,13 +93,13 @@
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- background-color: lighten($middle-grey, 5%);
- color: $nearly-white;
+ background-color: color.adjust(colors.$middle-grey, $lightness: 5%, $space: hsl);
+ color: colors.$nearly-white;
font-size: 75%;
padding: 0 5pt;
border: {
- color: $dark-grey;
+ color: colors.$dark-grey;
style: solid;
width: 2px 1px 0 0;
}
@@ -112,7 +117,7 @@
}
&.flip {
- background-color: lighten($middle-grey, 17%);
+ background-color: color.adjust(colors.$middle-grey, $lightness: 17%, $space: hsl);
}
}
@@ -134,7 +139,7 @@
div.snippet {
text-overflow: ellipsis;
text-indent: 0;
- text-shadow: $light-shadow;
+ text-shadow: colors.$light-shadow;
font-size: 0;
white-space: nowrap !important;
@@ -146,16 +151,16 @@
> mark,
> span.match {
font-weight: bold;
- color: $black;
+ color: colors.$black;
text-shadow: none;
padding-left: 4pt;
padding-right: 2pt;
}
> span.match > span.cutted::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;
@@ -177,8 +182,8 @@
top: 0;
left: 0;
width: 11px;
- background-color: $dark-orange;
- border-right: 1px solid $darkest-orange;
+ background-color: colors.$dark-orange;
+ border-right: 1px solid colors.$darkest-orange;
}
}
@@ -191,7 +196,7 @@
#search > ol > li:target {
position: relative;
display: block;
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
text-align: left;
border-width: 2px;
white-space: normal;
@@ -204,22 +209,22 @@
}
+ li.active {
- border-top: $border-size solid $light-grey;
- padding-top: 3 * $border-size;
+ border-top: lengths.$border-size solid colors.$light-grey;
+ padding-top: 3 * lengths.$border-size;
.button-group.button-view {
- padding-top: 3 * $border-size;
+ padding-top: 3 * lengths.$border-size;
}
}
.snippet {
white-space: normal !important;
padding: 2pt 0 5pt 5pt;
- background-color: $light-orange;
+ background-color: colors.$light-orange;
margin: {
top: 0;
- right: $right-view-distance;
+ right: lengths.$right-view-distance;
bottom: 0;
left: 0;
}
@@ -236,7 +241,7 @@
font-size: 85%;
text-shadow:none;
font-weight: normal;
- color: $dark-grey;
+ color: colors.$dark-grey;
&::before, &::after {
display: inline-block !important;
border-width: 2px;
@@ -250,7 +255,7 @@
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right-width: 0;
- background-color: $dark-orange !important;
+ background-color: colors.$dark-orange !important;
content: attr(data-key) ':';
}
@@ -261,7 +266,7 @@
padding-left: 1pt;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
- background-color: $dark-orange !important;
+ background-color: colors.$dark-orange !important;
content: attr(data-value);
}
}
@@ -295,7 +300,7 @@
div.match-wrap {
cursor: default;
min-height: 20pt;
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
width: 100%;
margin-left: 0;
overflow-x: visible;
@@ -309,9 +314,9 @@
p.ref {
display: block;
- color: $nearly-white;
+ color: colors.$nearly-white;
padding: 3pt 10pt 3pt 3pt;
- padding-right: $right-view-distance;
+ padding-right: lengths.$right-view-distance;
margin: 0pt;
width: 100%;
bottom: 0;
@@ -320,7 +325,7 @@
> span.sigle {
font-size: 75%;
vertical-align: top;
- color: $light-orange;
+ color: colors.$light-orange;
float: right;
}
@@ -441,7 +446,7 @@
}
}
-.class-1 { border-color: $kwic-highlight-1; }
-.class-2 { border-color: $kwic-highlight-2; }
-.class-3 { border-color: $kwic-highlight-3; }
-.class-4 { border-color: $kwic-highlight-4; }
+.class-1 { border-color: colors.$kwic-highlight-1; }
+.class-2 { border-color: colors.$kwic-highlight-2; }
+.class-3 { border-color: colors.$kwic-highlight-3; }
+.class-4 { border-color: colors.$kwic-highlight-4; }