Update SCSS to module system (fixes #266)
Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 3c329b7..93c7752 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -1,26 +1,28 @@
-@import "../util";
-@import "alertify/alertify-core";
-@import "alertify/alertify-default";
+@use "../util";
+@use "alertify/alertify-core";
+@use "alertify/alertify-default";
+@use "../base/colors";
+@use "../base/lengths";
/**
* Alertify styles.
*/
article.alertify-log-warn {
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
code.src {
- color: $darkest-orange;
+ color: colors.$darkest-orange;
}
}
article.alertify-log code.src {
display: block;
- color: $dark-red;
+ color: colors.$dark-red;
font-size: 70%;
}
.alertify-log-error {
- background-color: $alert-red;
+ background-color: colors.$alert-red;
}
#notifications {
@@ -35,14 +37,14 @@
display: block;
padding: .5em;
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
max-width: 30em;
- background-color: $alert-red;
- color: $nearly-white;
+ background-color: colors.$alert-red;
+ color: colors.$nearly-white;
&.notify-success {
- background-color: $ids-green-1
+ background-color: colors.$ids-green-1
}
&.notify-warn {
- background-color: $ids-orange-2
+ background-color: colors.$ids-orange-2
}
}
\ No newline at end of file
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
index 5db0e27..ea19431 100644
--- a/dev/scss/main/announcements.scss
+++ b/dev/scss/main/announcements.scss
@@ -1,13 +1,17 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
section#announcements {
- background-color: $ids-green-2;
+ background-color: colors.$ids-green-2;
mix-blend-mode: soft-light;
padding: 1em;
padding-right: 2em;
- border-radius: $standard-border-radius;
- border-left: 5px solid $ids-green-1;
+ border-radius: lengths.$standard-border-radius;
+ border-left: 5px solid colors.$ids-green-1;
height: 20rem;
overflow-y: scroll;
font-size: .8rem;
@@ -30,9 +34,9 @@
}
dd.maintenance > h4::after {
- @include icon-font;
- color: $ids-pink-1;
- content: " " + $fa-warn;
+ @include mixins.icon-font;
+ color: colors.$ids-pink-1;
+ content: " " + icons.$fa-warn;
}
dd {
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index f667759..d7c650e 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,6 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
/**
* Styles for the intro page
@@ -8,18 +10,18 @@
&-container {
margin-top: 3rem;
display: flex;
- gap: $standard-size-and-spacing;
+ gap: lengths.$standard-size-and-spacing;
}
// Visited links
a:visited {
- color: $darkest-orange
+ color: colors.$darkest-orange
}
div.announcement {
- background-color: $light-orange;
- padding: $base-padding;
- border: 5px dashed $dark-orange;
+ background-color: colors.$light-orange;
+ padding: lengths.$base-padding;
+ border: 5px dashed colors.$dark-orange;
border-radius: 1em;
width: 90%;
margin: auto;
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 89496b1..44b3ff6 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
/**
* Styles overriding introJS styles
@@ -21,5 +22,5 @@
.tgreeting {
- color: $darkest-orange;
+ color: colors.$darkest-orange;
}
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index 53dd64d..bcba160 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,5 +1,7 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
/**
* Styles for the KoralQuery view.
@@ -10,13 +12,13 @@
> div {
// TODO:
// Mark this with result-view
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
overflow-x: auto;
font-size: 85%;
margin: {
top: 2pt;
- right: $right-view-distance;
+ right: lengths.$right-view-distance;
bottom: 2pt;
left: 2pt;
}
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; }
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index e27f1d6..e35d7c7 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/mixins";
+@use "../base/paths";
/**
* Rules for logos.
@@ -29,7 +32,7 @@
}
> span {
- @include blind;
+ @include mixins.blind;
}
> div.logoaddon {
@@ -43,9 +46,9 @@
top: 2.1rem;
transform: rotate(-5deg);
// text-align:right;
- color: $nearly-white;
+ color: colors.$nearly-white;
// padding: 3pt;
- text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+ text-shadow: 1pt 1pt 0 colors.$light-green, -1pt -1pt 0 colors.$light-green, -1pt 1pt 0 colors.$light-green, 1pt -1pt 0 colors.$light-green;
// Values from new logo:
// font-size: 45%;
@@ -58,7 +61,7 @@
}
aside.active + header .logo div.logoaddon {
- text-shadow: 1pt 1pt 0 $dark-green, -1pt -1pt 0 $dark-green, -1pt 1pt 0 $dark-green, 1pt -1pt 0 $dark-green;
+ text-shadow: 1pt 1pt 0 colors.$dark-green, -1pt -1pt 0 colors.$dark-green, -1pt 1pt 0 colors.$dark-green, 1pt -1pt 0 colors.$dark-green;
}
/**
@@ -75,7 +78,7 @@
z-index: 105;
background: {
size: 78% !important;
- image: url('#{$img-path}/korap-logo.svg');
+ image: url('#{paths.$img-path}/korap-logo.svg');
}
transform: translateY(-50%);
-o-transform: translateY(-50%);
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 2e67113..21e0596 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,29 +1,30 @@
@use 'sass:math';
-@import 'highlight'; // JSON highlighting
-@import 'kwic'; // Kwic view information
-@import 'logos'; // Logo images
-@import 'matchinfo'; // Match table
-@import 'pagination'; // Pagination
-@import 'query'; // View query
-@import 'resultinfo'; // Information on results
-@import 'tutorial'; // Embedded and non-embedded tutorial
-@import 'koralquery'; // KoralQuery
-@import 'alertify'; // Styling alerts
-@import 'intro'; // Intro page
-@import 'panel'; // Base panel system
-@import 'introjs'; // Guided Tour
-@import 'introjs-ids'; // Guided Tour: IDS specific
-@import 'oauth'; // OAuth Management styles
-@import 'announcements'; // Styling for announcements
-@import 'news'; // View for optional news
-@import 'plugin'; // Rules for embedded plugins
-@import 'marketplace'; // Plugin Marketplace styles
+@use 'highlight'; // JSON highlighting
+@use 'kwic'; // Kwic view information
+@use 'logos'; // Logo images
+@use 'matchinfo'; // Match table
+@use 'pagination'; // Pagination
+@use 'query'; // View query
+@use 'resultinfo'; // Information on results
+@use 'tutorial'; // Embedded and non-embedded tutorial
+@use 'koralquery'; // KoralQuery
+@use 'alertify'; // Styling alerts
+@use 'intro'; // Intro page
+@use 'panel'; // Base panel system
+@use 'introjs'; // Guided Tour
+@use 'introjs-ids'; // Guided Tour: IDS specific
+@use 'oauth'; // OAuth Management styles
+@use 'announcements'; // Styling for announcements
+@use 'news'; // View for optional news
+@use 'plugin'; // Rules for embedded plugins
+@use 'marketplace'; // Plugin Marketplace styles
// @import "tagger"; // Tagger
-@import '../util';
+@use '../util';
+@use "../base/lengths";
main {
- padding: 0 $standard-size-and-spacing;
+ padding: 0 lengths.$standard-size-and-spacing;
// margin: {
// left: $standard-margin;
@@ -31,7 +32,7 @@
// }
&.shifted {
- padding-left: calc($standard-size-and-spacing + $logo-left-distance);
+ padding-left: calc(lengths.$standard-size-and-spacing + lengths.$logo-left-distance);
}
&.embedded {
diff --git a/dev/scss/main/marketplace.scss b/dev/scss/main/marketplace.scss
index 6f8a8aa..40bd291 100644
--- a/dev/scss/main/marketplace.scss
+++ b/dev/scss/main/marketplace.scss
@@ -1,4 +1,5 @@
-@import "../base/base";
+@use "../base/base";
+@use "../base/lengths";
/*
* Styles for marketplace
@@ -39,7 +40,7 @@
margin-top: 0;
width: 20%;
min-width: 20em;
- padding: $base-padding;
+ padding: lengths.$base-padding;
cursor: pointer;
border-width: thin;
text-align: center;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index a0f98c4..3df52b7 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,8 +1,10 @@
@charset "utf-8";
-@import "../util";
-@import "view/matchtable";
-@import "view/matchtree";
-@import "view/metatable";
+@use "../util";
+@use "view/matchtable";
+@use "view/matchtree";
+@use "view/metatable";
+@use "../base/colors";
+@use "../base/lengths";
/**
@@ -14,7 +16,7 @@
div.matchinfo {
position: relative;
width: 100%;
- padding-top: $border-size;
+ padding-top: lengths.$border-size;
height: auto;
font-size: 10pt;
text-align: left;
@@ -24,7 +26,7 @@
}
.view + .view {
- margin-top: 4 * $border-size !important;
+ margin-top: 4 * lengths.$border-size !important;
}
}
@@ -33,7 +35,7 @@
div.matchtable,
div.matchtree {
position: relative;
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
}
div.button-group.button-panel.button-matchinfo {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index c1c0911..619ccfa 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/mixins";
section#news {
margin: 2rem 0;
@@ -21,9 +24,9 @@
}
dd.maintenance > h4::after {
- @include icon-font;
- color: $ids-pink-1;
- content: " " + $fa-warn;
+ @include mixins.icon-font;
+ color: colors.$ids-pink-1;
+ content: " " + icons.$fa-warn;
}
dd {
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index e5702e6..590cf78 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,4 +1,8 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
/**
* Styles for OAuth management form.
@@ -33,17 +37,17 @@
font-weight: bold;
&::before {
- @include icon-font;
+ @include mixins.icon-font;
display: inline-block;
width: 1.5em;
- content: $fa-client;
- color: $ids-blue-1;
+ content: icons.$fa-client;
+ color: colors.$ids-blue-1;
font-size: 100%;
}
}
.client-type-confidential::after {
- @include icon-font;
+ @include mixins.icon-font;
margin-left: .3em;
display: inline-block;
width: 1.5em;
@@ -53,16 +57,16 @@
}
.client-type-confidential::after {
- content: $fa-confidential;
- color: $ids-blue-1;
+ content: icons.$fa-confidential;
+ color: colors.$ids-blue-1;
}
#client_source {
white-space: pre;
- border-radius: $standard-border-radius;
- border-color: $ids-grey-2;
+ border-radius: lengths.$standard-border-radius;
+ border-color: colors.$ids-grey-2;
border-style: solid;
- background-color: $light-orange;
+ background-color: colors.$light-orange;
}
li.token {
@@ -74,13 +78,13 @@
font-weight: bold;
&::before {
- @include icon-font;
+ @include mixins.icon-font;
font-feature-settings: "ss01" on;
margin-left: -1.5em;
display: inline-block;
width: 1.5em;
- content: $fa-token;
- color: $ids-blue-1 !important;
+ content: icons.$fa-token;
+ color: colors.$ids-blue-1 !important;
font-size: 100%;
font-weight: 900;
}
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index f261fc7..07015c8 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,6 +1,10 @@
@charset "utf-8";
@use 'sass:math';
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
/**
* The pagination view
@@ -23,8 +27,8 @@
*/
position: fixed;
font-size: 0;
- right: math.div($standard-margin,4);
- bottom: math.div($standard-margin,2);
+ right: math.div(lengths.$standard-margin,4);
+ bottom: math.div(lengths.$standard-margin,2);
z-index: 35;
padding: 0;
height: auto;
@@ -36,40 +40,40 @@
vertical-align: bottom;
&:not(:link):not([rel=self]) {
- color: $choose-blind-color;
+ color: choose.$choose-blind-color;
}
&.ellipsis, &[rel=prev], &[rel=next] {
> span {
- @include blind;
+ @include mixins.blind;
}
}
&.ellipsis::after {
- @include icon-font;
- content: $fa-elipsis;
+ @include mixins.icon-font;
+ content: icons.$fa-elipsis;
line-height: 1em;
}
&[rel=self] {
- @include choose-active;
+ @include choose.choose-active;
border: {
- left-width: $border-size;
- right-width: $border-size;
+ left-width: lengths.$border-size;
+ right-width: lengths.$border-size;
left-style: solid;
right-style: solid;
}
}
&[rel=prev]::after {
- @include icon-font;
- content: $fa-previous;
+ @include mixins.icon-font;
+ content: icons.$fa-previous;
line-height: 1em;
}
&[rel=next]::after {
- @include icon-font;
- content: $fa-next;
+ @include mixins.icon-font;
+ content: icons.$fa-next;
line-height: 1em;
}
}
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 568ba5b..94893b9 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/lengths";
/**
* Base styles for all panels and views,
@@ -13,7 +14,7 @@
div.view {
position: relative;
- padding-top: $border-size;
+ padding-top: lengths.$border-size;
display: block;
width: 100%;
}
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index 5b289a6..e0ac886 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,10 +1,13 @@
+@use "../base/colors";
+@use "../base/lengths";
+
/**
* Base rules for all plugin related styles,
* like widgets.
*/
div.view.widget {
- padding-right: $right-view-distance;
+ padding-right: lengths.$right-view-distance;
> iframe {
margin: 0;
@@ -16,5 +19,5 @@
}
div.panel.result > div > div.widget > iframe {
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
}
\ No newline at end of file
diff --git a/dev/scss/main/query.scss b/dev/scss/main/query.scss
index 7f99696..407cf10 100644
--- a/dev/scss/main/query.scss
+++ b/dev/scss/main/query.scss
@@ -1,30 +1,33 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
pre.query {
overflow-x: hidden;
padding: .5em;
- @include choose-item;
+ @include choose.choose-item;
position:relative;
border: {
width: 2px;
style: solid;
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
}
- box-shadow: $choose-box-shadow;
+ box-shadow: choose.$choose-box-shadow;
&:not(.unsupported) {
cursor: pointer;
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
&:active {
- @include choose-active;
+ @include choose.choose-active;
}
}
&.unsupported span {
vertical-align: super;
- color: $dark-blue;
+ color: colors.$dark-blue;
font-size: 90%;
font-weight: bold;
cursor: help;
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 0255161..2fbae69 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
/**
* Rules applicable for the result panel
@@ -54,8 +57,8 @@
div.result.panel .view {
- border: 1px solid $kwic-border;
- background-color: $dark-orange;
+ border: 1px solid colors.$kwic-border;
+ background-color: colors.$dark-orange;
}
@@ -68,21 +71,21 @@
> span {
line-height: 1.5em;
- border-width: $result-border-size 0;
+ border-width: lengths.$result-border-size 0;
&:first-child {
- border-left-width: $result-border-size;
+ border-left-width: lengths.$result-border-size;
}
&:last-child {
- border-right-width: $result-border-size;
+ border-right-width: lengths.$result-border-size;
}
}
}
#total-results {
- color: $light-green;
+ color: colors.$light-green;
font-weight: bold;
}
@@ -102,15 +105,15 @@
// TODO:
// Add icon via data-icon
&.align.left::after {
- content: $fa-left-align;
+ content: icons.$fa-left-align;
}
&.align.right::after {
- content: $fa-right-align;
+ content: icons.$fa-right-align;
}
&.align.center::after {
- content: $fa-center-align;
+ content: icons.$fa-center-align;
}
&.show-kq::after {
- content: $fa-code;
+ content: icons.$fa-code;
}
}
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index d6f8459..44654dd 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,5 +1,9 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
+@use "../base/paths";
/**
* Rules for the embedded documentation.
@@ -12,19 +16,19 @@
bottom: 5%;
left: 2%;
right: 2%;
- padding-right: $right-view-distance;
- background-color: $nearly-white;
- box-shadow: $choose-box-shadow;
+ padding-right: lengths.$right-view-distance;
+ background-color: colors.$nearly-white;
+ box-shadow: choose.$choose-box-shadow;
border: {
- width: 2 * $border-size;
- color: $dark-grey;
+ width: 2 * lengths.$border-size;
+ color: colors.$dark-grey;
style: solid;
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
}
.button-group.button-view {
- background-color: $middle-grey;
+ background-color: colors.$middle-grey;
display: block;
height: 100%;
}
@@ -36,7 +40,7 @@
// Hack for a Firefox bug
min-height: 100.1%;
background: {
- image: url('#{$img-path}/korap-bg.svg');
+ image: url('#{paths.$img-path}/korap-bg.svg');
repeat: no-repeat;
position: center center;
size: 15%;
@@ -55,11 +59,11 @@
}
body.embedded {
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
aside {
- @include choose-item;
+ @include choose.choose-item;
padding-top: 0;
- background-color: $middle-grey;
+ background-color: colors.$middle-grey;
> div {
position: relative;
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;
}
}
}