Update SCSS to module system (fixes #266)
Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
diff --git a/dev/scss/base/banner.scss b/dev/scss/base/banner.scss
index 811cafe..3607002 100644
--- a/dev/scss/base/banner.scss
+++ b/dev/scss/base/banner.scss
@@ -1,3 +1,5 @@
+@use "colors";
+
.banner {
position: fixed;
width: 10em;
@@ -32,8 +34,8 @@
transform-origin: 0 0 ;
transform:rotate(45deg);
- background-color: $light-orange;
- color: $dark-orange;
- border: 1px solid $dark-orange;
+ background-color: colors.$light-orange;
+ color: colors.$dark-orange;
+ border: 1px solid colors.$dark-orange;
}
}
\ No newline at end of file
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index 7750665..b004494 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -1,16 +1,20 @@
@charset "utf-8";
-@import "../util";
-@import "fonts";
-@import "flextable";
-@import "fragment";
-@import "load";
-@import "form";
-@import "view";
-@import "menu";
-@import "banner";
-@import "showPWD";
-@import "copyToClipboard";
-@import "buttongroup";
+@use "../util";
+@use "fonts";
+@use "flextable";
+@use "fragment";
+@use "load";
+@use "form";
+@use "view";
+@use "menu";
+@use "banner";
+@use "showPWD";
+@use "copyToClipboard";
+@use "buttongroup";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
/**
* Basic global CSS rules for Kalamar
@@ -18,7 +22,7 @@
* {
- @include box-sizing-box;
+ @include mixins.box-sizing-box;
}
body,
@@ -26,12 +30,12 @@
select,
g > text {
font-family: verdana, tahoma, arial, Helvetica, sans-serif;
- color: $dark-grey;
+ color: colors.$dark-grey;
margin: 0;
}
g > text {
- fill: $dark-grey;
+ fill: colors.$dark-grey;
}
// html {
@@ -49,14 +53,14 @@
a {
&:visited {
- color: $darkest-orange;
+ color: colors.$darkest-orange;
}
&:link {
text-decoration: none;
- color: $dark-orange;
+ color: colors.$dark-orange;
&:hover {
- color: $darkest-orange;
+ color: colors.$darkest-orange;
transition: color 0.3s ease 0s;
}
}
@@ -64,8 +68,8 @@
// External links
&[href^="http://"]::after,
&[href^="https://"]::after {
- @include icon-font;
- content: " " + $fa-extlink;
+ @include mixins.icon-font;
+ content: " " + icons.$fa-extlink;
font-size: 75%;
}
}
@@ -94,21 +98,21 @@
}
blockquote {
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
padding: 2pt 5pt 2pt 20pt;
margin: 0;
- border-left: 5px solid $ids-blue-1;
- background-color: $ids-blue-2;
- color: $ids-blue-1;
+ border-left: 5px solid colors.$ids-blue-1;
+ background-color: colors.$ids-blue-2;
+ color: colors.$ids-blue-1;
-webkit-mix-blend-mode: normal; // Safari
mix-blend-mode: soft-light;
&.bug,
&.missing,
&.warning {
- border-left-color: $dark-red;
- background-color: $middle-red;
- color: $nearly-white;
+ border-left-color: colors.$dark-red;
+ background-color: colors.$middle-red;
+ color: colors.$nearly-white;
mix-blend-mode: multiply;
}
}
@@ -124,11 +128,11 @@
border-width: 0;
&[data-type=token]::after {
- color: $ids-blue-1;
+ color: colors.$ids-blue-1;
}
&[data-type=span]::after {
- color: $ids-pink-1;
+ color: colors.$ids-pink-1;
}
&::after {
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
index 1937e53..fc9c6a6 100644
--- a/dev/scss/base/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -1,5 +1,10 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "choose";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
/*
* Define the base layout of horizontal button groups
@@ -15,34 +20,34 @@
> span,
input[type=submit],
a {
- @include choose-item;
- box-shadow: $choose-box-shadow;
+ @include choose.choose-item;
+ box-shadow: choose.$choose-box-shadow;
font-size: 9pt;
font-weight: normal;
line-height: 1.5em;
padding: 0 4px;
display: inline-block;
border-style: solid;
- border-width: $border-size 0;
+ border-width: lengths.$border-size 0;
&:not(.inactive):hover {
- @include choose-hover;
+ @include choose.choose-hover;
transition: none;
}
&:first-child {
border: {
- left-width: $border-size;
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
+ left-width: lengths.$border-size;
+ top-left-radius: lengths.$standard-border-radius;
+ bottom-left-radius: lengths.$standard-border-radius;
}
}
&:last-child {
border: {
- right-width: $border-size;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
+ right-width: lengths.$border-size;
+ top-right-radius: lengths.$standard-border-radius;
+ bottom-right-radius: lengths.$standard-border-radius;
}
}
}
@@ -57,21 +62,21 @@
min-width: auto;
> span.check {
- @include icon-font;
+ @include mixins.icon-font;
width: 1em;
display: inline-block;
text-align: left;
&:not(.checked)::after {
- content: $fa-check;
+ content: icons.$fa-check;
}
&.checked::after {
- content: $fa-checked;
+ content: icons.$fa-checked;
}
> span {
- @include blind;
+ @include mixins.blind;
}
}
}
@@ -85,12 +90,12 @@
z-index: 20;
margin: 0;
padding: 0;
- width: $right-view-distance;
+ width: lengths.$right-view-distance;
font-size: 10pt;
- color: $nearly-white;
+ color: colors.$nearly-white;
> span:first-child {
- margin-top: $border-size
+ margin-top: lengths.$border-size
}
> span {
@@ -101,19 +106,19 @@
font-style: normal;
&.download::after {
- content: $fa-download;
+ content: icons.$fa-download;
}
&.close::after {
- content: $fa-close;
+ content: icons.$fa-close;
}
&.minimize::after {
- content: $fa-minimize;
+ content: icons.$fa-minimize;
}
&.plugin::after {
- content: $fa-plugin;
+ content: icons.$fa-plugin;
}
}
}
@@ -126,7 +131,7 @@
font-size: 10pt;
left: 0;
text-align: left;
- margin: -1 * $border-size;
+ margin: -1 * lengths.$border-size;
margin-top: 0;
> li:first-of-type {
@@ -135,10 +140,10 @@
}
.button-icon {
- @include icon-font;
+ @include mixins.icon-font;
line-height: 1.3;
> span {
- @include blind;
+ @include mixins.blind;
}
&[data-icon]::after {
content: attr(data-icon);
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
index fc3d250..93779a4 100644
--- a/dev/scss/base/choose.scss
+++ b/dev/scss/base/choose.scss
@@ -1,13 +1,14 @@
-@import "colors";
+@use 'sass:color';
+@use "colors";
/**
* Some color definitions and mixins for
* buttons and menus.
*/
-$choose-bg: $light-grey;
-$choose-color: $dark-grey;
-$choose-blind-color: $middle-grey;
-$choose-border-color: $middle-grey;
+$choose-bg: colors.$light-grey;
+$choose-color: colors.$dark-grey;
+$choose-blind-color: colors.$middle-grey;
+$choose-border-color: colors.$middle-grey;
$choose-border: 2px solid $choose-border-color;
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
@@ -19,7 +20,7 @@
color: $choose-color;
background-color: $choose-bg;
border-color: $choose-border-color;
- text-shadow: $light-shadow;
+ text-shadow: colors.$light-shadow;
}
@@ -27,9 +28,9 @@
* Chooseable items (mouse over)
*/
@mixin choose-hover {
- color: $nearly-white;
- background-color: $dark-orange;
- border-color: $darker-orange;
+ color: colors.$nearly-white;
+ background-color: colors.$dark-orange;
+ border-color: colors.$darker-orange;
text-shadow: none;
}
@@ -38,8 +39,8 @@
* Chooseable items (not available)
*/
@mixin choose-inactive {
- color: lighten($choose-color, 20%);
- background-color: lighten($choose-bg, 20%);
+ color: color.adjust($choose-color, $lightness: 20%, $space: hsl);
+ background-color: color.adjust($choose-bg, $lightness: 20%, $space: hsl);
border-color: transparent;
text-shadow: none;
}
@@ -48,9 +49,9 @@
* Chooseable items (active)
*/
@mixin choose-active {
- color: $dark-green;
- background-color: $light-green;
- border-color: $dark-green;
+ color: colors.$dark-green;
+ background-color: colors.$light-green;
+ border-color: colors.$dark-green;
text-shadow: none;
}
@@ -59,8 +60,8 @@
* Chooseable items (action: remove something)
*/
@mixin choose-remove {
- color: $nearly-white;
- background-color: $middle-red;
- border-color: $dark-red;
+ color: colors.$nearly-white;
+ background-color: colors.$middle-red;
+ border-color: colors.$dark-red;
text-shadow: none;
}
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 2873ec7..6d5acd0 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -3,6 +3,8 @@
* for Kalamar,
*/
+@use 'sass:color';
+
/**
* Official IDS colors
*/
@@ -35,10 +37,10 @@
* Green Colors
*/
$dark-green: $ids-green-1; // #496000;
-$middle-green: lighten($ids-green-1, 9%);
-$light-green: lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green: darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
+$middle-green: color.adjust($ids-green-1, $lightness: 9%, $space: hsl);
+$light-green: color.adjust($ids-green-1, $lightness: 13%, $space: hsl); // #7ba400;
+$lightest-green: color.adjust($light-green, $lightness: 35%, $saturation: -20%, $space: hsl); // #d8e38c;
+$grey-green: color.adjust($lightest-green, $saturation: -25%, $lightness: -12%, $space: hsl); // #bcc387;
/**
@@ -46,7 +48,7 @@
*/
$light-blue: $ids-blue-2;
$dark-blue: $ids-blue-1;
-$darkest-blue: darken($dark-blue, 40%);
+$darkest-blue: color.adjust($dark-blue, $lightness: -40%, $space: hsl);
/**
@@ -54,7 +56,7 @@
*/
$middle-grey: $ids-grey-1; // #999;
$light-grey: $ids-grey-2; // #ddd;
-$dark-grey: darken($middle-grey, 15%);
+$dark-grey: color.adjust($middle-grey, $lightness: -15%, $space: hsl);
$nearly-white: #fefefe;
@@ -62,8 +64,8 @@
* Red Colors (no IDS relation)
*/
$middle-red: #c1002b;
-$light-red: lighten($middle-red, 40%);
-$dark-red: darken($middle-red, 40%);
+$light-red: color.adjust($middle-red, $lightness: 40%, $space: hsl);
+$dark-red: color.adjust($middle-red, $lightness: -40%, $space: hsl);
$alert-red: rgb(254,26,0);
/**
diff --git a/dev/scss/base/copyToClipboard.scss b/dev/scss/base/copyToClipboard.scss
index 2c93b79..6903f13 100644
--- a/dev/scss/base/copyToClipboard.scss
+++ b/dev/scss/base/copyToClipboard.scss
@@ -1,10 +1,11 @@
-@import "icons";
+@use "icons";
+@use "mixins";
a.copy-to-clipboard::after {
position: absolute;
- @include icon-font;
+ @include mixins.icon-font;
width: 1em;
- content: $fa-copy;
+ content: icons.$fa-copy;
cursor: pointer;
margin-left: .4em;
margin-top: .6em;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index f10cec3..734a965 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,6 @@
@use 'sass:math';
-@import "lengths";
-@import "mixins";
+@use "lengths";
+@use "mixins";
/**
* This defines flexible table cells
@@ -21,26 +21,26 @@
flex-direction: row;
text-align: center;
width: 100%;
- border-width: math.div($border-size,2);
+ border-width: math.div(lengths.$border-size,2);
border-style: solid;
align-items: stretch;
> * {
- @include cell-info;
+ @include mixins.cell-info;
}
> dt {
text-align: left;
width: 12.5em;
- padding: $item-padding;
+ padding: lengths.$item-padding;
margin: 0;
}
> dd {
text-align: left;
- padding: $item-padding;
+ padding: lengths.$item-padding;
margin: 0;
width: 100%;
max-width: none;
max-height: 6em;
- margin-left: $border-size;
+ margin-left: lengths.$border-size;
white-space: normal;
overflow-y: auto;
overflow-x: hidden;
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index febfa57..5fef211 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
@charset "utf-8";
-@import "paths";
+@use "paths";
/**
* Load web fonts for Kalamar
@@ -7,8 +7,8 @@
@font-face {
font-family: 'FontAwesome';
- src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
- src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+ src: url('#{paths.$font-path}/fontawesome-webfont.eot?v=4.3.0');
+ src: url('#{paths.$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{paths.$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{paths.$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{paths.$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{paths.$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index 70e6bcf..a150e3b 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,5 +1,8 @@
-@import "lengths";
-@import "colors";
+@use "lengths";
+@use "colors";
+@use "choose";
+@use "icons";
+@use "mixins";
/**
* Definition of form elements for Kalamar.
@@ -27,7 +30,7 @@
background-color: transparent;
margin-left: 0;
font-weight: bold;
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
}
label,
@@ -54,7 +57,7 @@
}
legend::after {
content: ':';
- color: $ids-green-2;
+ color: colors.$ids-green-2;
}
input, label[for] {
display: inline-block;
@@ -72,13 +75,13 @@
textarea,
button,
a.form-button {
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
}
input,
textarea {
- border-color: $ids-grey-2;
- background-color: $nearly-white;
+ border-color: colors.$ids-grey-2;
+ background-color: colors.$nearly-white;
border-style: solid;
}
@@ -90,7 +93,7 @@
display: inline-block;
width: 20%;
min-width: 20em;
- padding: $base-padding;
+ padding: lengths.$base-padding;
}
input[type=radio] {
@@ -103,11 +106,11 @@
input[readonly=readonly],
textarea[readonly] {
- background-color: $light-orange;
+ background-color: colors.$light-orange;
}
.field-with-error {
- border-color: $ids-pink-1;
+ border-color: colors.$ids-pink-1;
}
input[type=submit],
@@ -117,25 +120,25 @@
cursor: pointer;
border-width: thin;
text-align: center;
- background-color: $middle-green;
- border-color: $dark-green;
+ background-color: colors.$middle-green;
+ border-color: colors.$dark-green;
// font-size: 8pt;
- color: $dark-green;
+ color: colors.$dark-green;
}
span.file-upload {
- @include choose-item;
- box-shadow: $choose-box-shadow;
- border: $choose-border;
- border-radius: $standard-border-radius;
- padding: $item-padding;
+ @include choose.choose-item;
+ box-shadow: choose.$choose-box-shadow;
+ border: choose.$choose-border;
+ border-radius: lengths.$standard-border-radius;
+ padding: lengths.$item-padding;
position: relative;
overflow: hidden;
right: 0;
display: inline-block;
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
transition: none;
}
@@ -150,15 +153,15 @@
opacity: 0;
filter: alpha(opacity=0);
&.field-with-error {
- background-color: $ids-pink-1;
+ background-color: colors.$ids-pink-1;
opacity: .3;
filter: alpha(opacity=.3);
}
}
&::after {
- @include icon-font;
- content: $fa-upload;
+ @include mixins.icon-font;
+ content: icons.$fa-upload;
}
}
@@ -167,20 +170,20 @@
}
label.field-required::after {
- color: $ids-blue-1;
+ color: colors.$ids-blue-1;
content: '*';
}
span.field-required{
- color: $ids-blue-1;
+ color: colors.$ids-blue-1;
}
}
.button-abort {
- background-color: $middle-orange !important;
- color: $darkest-orange !important;
- border-color: $darkest-orange !important;
+ background-color: colors.$middle-orange !important;
+ color: colors.$darkest-orange !important;
+ border-color: colors.$darkest-orange !important;
}
button, input[type=submit] {
@@ -191,15 +194,15 @@
}
&[type=submit] {
- @include choose-item;
+ @include choose.choose-item;
font-weight: normal;
padding: 0;
height: 100%;
top: 0;
- width: $button-width;
+ width: lengths.$button-width;
> span:nth-of-type(1) {
- @include blind;
+ @include mixins.blind;
}
&::after {
@@ -208,7 +211,7 @@
&:hover,
&:focus {
- @include choose-hover;
+ @include choose.choose-hover;
}
&::-moz-focus-inner {
@@ -216,7 +219,7 @@
}
&:active {
- @include choose-active;
+ @include choose.choose-active;
}
/*
@@ -225,24 +228,24 @@
*/
&:last-of-type {
border: {
- right-width: $border-size;
+ right-width: lengths.$border-size;
right-style: solid;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
+ top-right-radius: lengths.$standard-border-radius;
+ bottom-right-radius: lengths.$standard-border-radius;
}
}
}
}
button[type=submit] {
- border: $border-size solid $nearly-white;
+ border: lengths.$border-size solid colors.$nearly-white;
}
*[type=submit].form-submit {
- box-shadow: $choose-box-shadow;
- border-radius: $standard-border-radius;
+ box-shadow: choose.$choose-box-shadow;
+ border-radius: lengths.$standard-border-radius;
border-width: 2px !important;
- padding: $base-padding !important;
+ padding: lengths.$base-padding !important;
}
/**
@@ -266,13 +269,13 @@
margin-right: .2em;
&::after {
- @include icon-font;
- content: $fa-check;
+ @include mixins.icon-font;
+ content: icons.$fa-check;
}
}
}
&:checked + label span::after {
- content: $fa-checked;
+ content: icons.$fa-checked;
}
}
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index f68e7db..43932fb 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,7 +1,7 @@
@charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
/**
* Definitions of fragments for vc and query
@@ -10,25 +10,25 @@
.vc.fragment,
p.query.fragment {
- @include choose-item;
+ @include choose.choose-item;
position: relative;
padding: 4pt 6pt !important;
border : {
- width: $border-size;
+ width: lengths.$border-size;
style: solid;
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
}
margin: {
- left: $left-distance;
+ left: lengths.$left-distance;
top: .5em;
bottom: .5em;
- right: $right-view-distance;
+ right: lengths.$right-view-distance;
}
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
cursor: pointer;
}
@@ -45,9 +45,9 @@
&::after {
font-family: 'FontAwesome';
- content: $fa-to-query;
+ content: icons.$fa-to-query;
position: absolute;
right: 4pt;
- top: $border-size;
+ top: lengths.$border-size;
}
}
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
index 993b237..433f69e 100644
--- a/dev/scss/base/menu.scss
+++ b/dev/scss/base/menu.scss
@@ -1,7 +1,7 @@
@charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
/**
* Definitions for menu design.
@@ -34,18 +34,18 @@
> li,
> span.non-item:not(.active) {
- @include choose-item;
+ @include choose.choose-item;
}
> li,
> span.non-item:not(:empty) {
- @include choose-item;
- box-shadow: $choose-box-shadow;
+ @include choose.choose-item;
+ box-shadow: choose.$choose-box-shadow;
cursor: pointer;
- padding: $item-padding;
+ padding: lengths.$item-padding;
white-space: normal;
border: {
- width: $border-size;
+ width: lengths.$border-size;
bottom-width: 0px;
top-width: 0px;
style: solid;
@@ -59,10 +59,10 @@
div.lengthField {
border: {
color: transparent;
- width: $border-size;
+ width: lengths.$border-size;
}
overflow: hidden;
- padding: $item-padding;
+ padding: lengths.$item-padding;
padding-top: 0;
padding-bottom: 0;
span {
@@ -87,7 +87,7 @@
transition: opacity .5s ease 1s;
> span {
- @include choose-active;
+ @include choose.choose-active;
position: absolute;
display: block;
right: 0;
@@ -101,12 +101,12 @@
}
&.active > span {
- @include choose-hover;
+ @include choose.choose-hover;
}
> div {
- @include choose-item;
- box-shadow: $choose-box-shadow;
+ @include choose.choose-item;
+ box-shadow: choose.$choose-box-shadow;
position: absolute;
right: 0;
width: 10px;
@@ -138,17 +138,17 @@
> li {
&:first-of-type {
border-top: {
- width: $border-size;
- left-radius: $standard-border-radius;
- right-radius: $standard-border-radius;
+ width: lengths.$border-size;
+ left-radius: lengths.$standard-border-radius;
+ right-radius: lengths.$standard-border-radius;
}
}
&:last-of-type {
border-bottom: {
- width: $border-size;
- left-radius: $standard-border-radius;
- right-radius: $standard-border-radius;
+ width: lengths.$border-size;
+ left-radius: lengths.$standard-border-radius;
+ right-radius: lengths.$standard-border-radius;
}
}
mark {
@@ -161,18 +161,18 @@
> li.active,
span.non-item.active {
- @include choose-active;
+ @include choose.choose-active;
}
> li:hover,
span.non-item:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
span.non-item {
border: {
- radius: $standard-border-radius;
- width: $border-size !important;
+ radius: lengths.$standard-border-radius;
+ width: lengths.$border-size !important;
}
}
@@ -216,7 +216,7 @@
&:not(.no-more):before {
position: absolute;
font-family: "FontAwesome";
- content: $fa-up;
+ content: icons.$fa-up;
right: .5em;
top: .4em;
}
@@ -225,7 +225,7 @@
&:not(.no-more):before {
position: absolute;
font-family: "FontAwesome";
- content: $fa-down;
+ content: icons.$fa-down;
right: .5em;
bottom: .4em;
}
@@ -246,7 +246,7 @@
content: '';
}
> li.active:hover {
- @include choose-remove;
+ @include choose.choose-remove;
}
}
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
index 88eaaae..cc55686 100644
--- a/dev/scss/base/mixins.scss
+++ b/dev/scss/base/mixins.scss
@@ -1,5 +1,6 @@
@use 'sass:math';
-@import "colors";
+@use "colors";
+@use "lengths";
/**
* Mixin for blind elements
@@ -28,7 +29,7 @@
@mixin input-field {
outline: none;
font-size: 11pt;
- border: $border-size solid $nearly-white;
+ border: lengths.$border-size solid colors.$nearly-white;
padding: 2px;
margin: 0;
}
@@ -64,6 +65,6 @@
@mixin matchinfo-head {
- border-top: $border-size solid $darker-orange; // #ff8000;
- width: math.div($left-width, 2);
+ border-top: lengths.$border-size solid colors.$darker-orange; // #ff8000;
+ width: math.div(lengths.$left-width, 2);
}
diff --git a/dev/scss/base/showPWD.scss b/dev/scss/base/showPWD.scss
index 77de2c1..061650b 100644
--- a/dev/scss/base/showPWD.scss
+++ b/dev/scss/base/showPWD.scss
@@ -1,4 +1,5 @@
-@import "icons";
+@use "icons";
+@use "mixins";
input.show-pwd {
padding-right: 2em;
@@ -6,9 +7,9 @@
a.show-pwd::after {
position: absolute;
- @include icon-font;
+ @include mixins.icon-font;
width: 1em;
- content: $fa-show;
+ content: icons.$fa-show;
cursor: pointer;
margin-left: -1.5em;
margin-top: .6em;
@@ -16,5 +17,5 @@
}
a.show-pwd.hide::after {
- content: $fa-hide;
+ content: icons.$fa-hide;
}
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 5aa4b6e..dbb5c65 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,5 +1,5 @@
-@import "colors";
+@use "colors";
.result-view {
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
}
\ No newline at end of file
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0d85a78..650d3ef 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -1,12 +1,15 @@
@charset "utf-8";
@use 'sass:math';
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
+@use "../base/paths";
/**
* Rules for the footer section of Kalamar
*/
footer {
- background-color: $dark-grey;
+ background-color: colors.$dark-grey;
// position: absolute;
// bottom: 0;
margin-top: auto;
@@ -17,15 +20,15 @@
display: flex;
align-items: center;
- height: $footer-height;
+ height: lengths.$footer-height;
&.shifted {
- padding-left: $logo-left-distance;
+ padding-left: lengths.$logo-left-distance;
}
nav {
- margin-left: $button-width;
- padding: $item-padding;
+ margin-left: lengths.$button-width;
+ padding: lengths.$item-padding;
text-align: left;
flex-grow: 2;
display: flex;
@@ -42,7 +45,7 @@
font-size: bold;
content: " | ";
white-space: nowrap;
- color: $dark-orange;
+ color: colors.$dark-orange;
}
&:last-child {
margin-right: 0;
@@ -65,13 +68,13 @@
font-size: 10pt;
&:link {
// margin: 0 .5em;
- color: $light-grey;
+ color: colors.$light-grey;
}
&:visited {
- color: $light-grey;
+ color: colors.$light-grey;
}
&:hover {
- color: $nearly-white;
+ color: colors.$nearly-white;
}
&[href^="http://"]::after,
&[href^="https://"]::after {
@@ -84,7 +87,7 @@
* Logo table of the front page
*/
#logos {
- margin-right: $standard-margin;
+ margin-right: lengths.$standard-margin;
}
/**
@@ -94,7 +97,7 @@
display: inline-block;
width: math.div(631,30) + em;
height: math.div(200,30) + em;
- background-image: url('#{$img-path}/ids-institute-for-the-german-language-white.svg');
+ background-image: url('#{paths.$img-path}/ids-institute-for-the-german-language-white.svg');
}
aside.active:not(.off) ~ footer {
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index ecc509d..bb34823 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,5 +1,10 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
/**
* Rules for the datepicker widget
@@ -8,18 +13,18 @@
*/
div.datepicker {
- @include choose-item;
+ @include choose.choose-item;
position: absolute;
display: inline-block;
z-index: 90;
font-size: 80%;
padding: 4pt;
- box-shadow: $choose-box-shadow;
+ box-shadow: choose.$choose-box-shadow;
border: {
- width: $border-size;
+ width: lengths.$border-size;
style: solid;
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
}
> div {
@@ -39,7 +44,7 @@
&:last-child {
width: 15%;
&::before {
- @include icon-font;
+ @include mixins.icon-font;
display: inline-block;
text-align: center;
cursor: pointer;
@@ -48,11 +53,11 @@
}
&:first-child::before {
- content: $fa-previous;
+ content: icons.$fa-previous;
}
&:last-child::before {
- content: $fa-next;
+ content: icons.$fa-next;
}
&:nth-child(2) {
@@ -63,18 +68,18 @@
text-overflow: ellipsis;
border: {
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
style: solid;
- width: $border-size;
+ width: lengths.$border-size;
color: transparent;
}
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
&.selected {
- @include choose-active;
+ @include choose.choose-active;
}
}
}
@@ -86,9 +91,9 @@
}
input {
- @include choose-item;
- @include standard-text-padding;
- background-color: $nearly-white;
+ @include choose.choose-item;
+ @include mixins.standard-text-padding;
+ background-color: colors.$nearly-white;
width: 100%;
border: {
@@ -98,7 +103,7 @@
}
td {
- @include standard-text-padding;
+ @include mixins.standard-text-padding;
text-align: center;
border: {
@@ -107,22 +112,22 @@
}
&:not(.out) {
- @include choose-item;
+ @include choose.choose-item;
cursor: pointer;
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
&.today {
- background-color: $light-blue;
- color: $dark-blue;
+ background-color: colors.$light-blue;
+ color: colors.$dark-blue;
text-shadow: none;
}
&.selected {
- @include choose-active;
+ @include choose.choose-active;
}
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 6e18f93..d84ea71 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,21 +1,25 @@
@charset "utf-8";
@use 'sass:math';
-@import "../util";
-@import "hint"; // Hint specific menu list
-@import "containermenu"; // Container menu specific
-@import "searchbar"; // The search bar
-@import "vc"; // Virtual corpus builder
-@import "statistics"; // Statistics for VCs
-@import "datepicker"; // Datepicker
-@import "querylanguage"; // Query language
-@import "pipe"; // Pipe
-@import "state"; // State
-@import "panel"; // Panel
+@use "../util";
+@use "hint"; // Hint specific menu list
+@use "containermenu"; // Container menu specific
+@use "searchbar"; // The search bar
+@use "vc"; // Virtual corpus builder
+@use "statistics"; // Statistics for VCs
+@use "datepicker"; // Datepicker
+@use "querylanguage"; // Query language
+@use "pipe"; // Pipe
+@use "state"; // State
+@use "panel"; // Panel
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
.navbar {
width: 100%;
- height: $standard-size-and-spacing;
- background-color: $dark-green;
+ height: lengths.$standard-size-and-spacing;
+ background-color: colors.$dark-green;
display: flex;
flex-direction: column;
justify-content: center;
@@ -35,7 +39,7 @@
align-items: center;
h3.nav-link {
- height: $standard-size-and-spacing;
+ height: lengths.$standard-size-and-spacing;
font-size: 1rem;
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
@@ -44,13 +48,13 @@
cursor: pointer;
&:hover {
- background-color: $middle-green;
+ background-color: colors.$middle-green;
}
a {
display: block;
padding: 1.5rem 1rem;
- color: $nearly-white;
+ color: colors.$nearly-white;
cursor: pointer;
}
}
@@ -59,7 +63,7 @@
.dropdown {
display: flex;
align-items: center;
- margin-right: $standard-size-and-spacing;
+ margin-right: lengths.$standard-size-and-spacing;
position: relative;
&:hover .dropdown-content,
@@ -69,17 +73,17 @@
&:hover .dropdown-btn,
&:focus-within .dropdown-btn {
- color: $nearly-white;
- background-color: $middle-green;
+ color: colors.$nearly-white;
+ background-color: colors.$middle-green;
}
&-btn {
display: flex;
align-items: center;
- column-gap: $base-padding;
- height: $standard-size-and-spacing;
+ column-gap: lengths.$base-padding;
+ height: lengths.$standard-size-and-spacing;
padding: 1.25rem 1rem;
- color: $nearly-white;
+ color: colors.$nearly-white;
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
@@ -87,14 +91,14 @@
cursor: pointer;
&.login::before {
- @include icon-font;
- content: $fa-login;
+ @include mixins.icon-font;
+ content: icons.$fa-login;
font-size: 150%;
}
&.profile::before {
- @include icon-font;
- content: $fa-user;
+ @include mixins.icon-font;
+ content: icons.$fa-user;
font-size: 150%;
}
@@ -112,9 +116,9 @@
&-content {
display: none;
width: fit-content;
- margin-top: $standard-size-and-spacing;
+ margin-top: lengths.$standard-size-and-spacing;
padding: 0;
- background-color: $middle-green;
+ background-color: colors.$middle-green;
position: absolute;
top: 0;
z-index: 999;
@@ -134,13 +138,13 @@
align-items: center;
legend {
- padding-bottom: $base-padding;
- color: $nearly-white;
+ padding-bottom: lengths.$base-padding;
+ color: colors.$nearly-white;
}
input[type=text],
input[type=password] {
- @include input-field;
+ @include mixins.input-field;
margin-bottom: 8px;
height: 2rem;
}
@@ -149,8 +153,8 @@
width: 100%;
height: 2rem;
margin-bottom: 1rem;
- background-color: $dark-green;
- color: $nearly-white;
+ background-color: colors.$dark-green;
+ color: colors.$nearly-white;
font-size: 120%;
border: none;
border-color: unset;
@@ -164,12 +168,12 @@
-webkit-transition: all .2s ease-in-out;
&::after {
- content: $fa-login;
+ content: icons.$fa-login;
}
&:hover {
// color: $dark-orange;
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
}
}
}
@@ -177,13 +181,13 @@
p {
margin: 0;
font-size: .7rem;
- color: $nearly-white;
+ color: colors.$nearly-white;
a {
- color: $dark-orange;
+ color: colors.$dark-orange;
&:hover {
- color: $middle-orange;
+ color: colors.$middle-orange;
}
}
}
@@ -195,7 +199,7 @@
gap: 5px;
padding: .75rem;
font-size: 1rem;
- color: $nearly-white;
+ color: colors.$nearly-white;
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
@@ -203,13 +207,13 @@
cursor: pointer;
&:hover {
- color: $nearly-white;
- background-color: $light-green;
+ color: colors.$nearly-white;
+ background-color: colors.$light-green;
}
&.logout::before {
- @include icon-font;
- content: $fa-logout;
+ @include mixins.icon-font;
+ content: icons.$fa-logout;
font-size: 1rem;
}
@@ -223,23 +227,23 @@
display: none;
&::after {
- @include icon-font;
- content: $fa-bars;
+ @include mixins.icon-font;
+ content: icons.$fa-bars;
}
}
}
header {
- @include box-sizing-box();
+ @include mixins.box-sizing-box();
position: relative;
- background-color: $light-green;
+ background-color: colors.$light-green;
// padding: $base-padding 0 0 $base-padding;
- padding-top: $standard-size-and-spacing;
+ padding-top: lengths.$standard-size-and-spacing;
font-size: 10pt;
- color: $nearly-white;
+ color: colors.$nearly-white;
&.shifted {
- padding-left: $logo-left-distance;
+ padding-left: lengths.$logo-left-distance;
}
span.select {
@@ -259,15 +263,15 @@
}
&:hover {
- color: $dark-green;
- border-color: $dark-green;
+ color: colors.$dark-green;
+ border-color: colors.$dark-green;
}
&::after {
- @include icon-font;
+ @include mixins.icon-font;
pointer-events: none;
text-align: center;
- content: $fa-down;
+ content: icons.$fa-down;
padding: {
left: 4pt;
@@ -276,9 +280,9 @@
}
&.active {
- border-color: $dark-orange;
+ border-color: colors.$dark-orange;
&::after {
- content: $fa-up;
+ content: icons.$fa-up;
}
}
}
@@ -290,18 +294,18 @@
min-height: 2.7em;
&#searchform {
- margin: 0 $standard-size-and-spacing;
+ margin: 0 lengths.$standard-size-and-spacing;
}
}
input {
- @include input-field;
+ @include mixins.input-field;
}
.button {
- color: $nearly-white;
+ color: colors.$nearly-white;
line-height: 2em;
- margin-right: $right-distance;
+ margin-right: lengths.$right-distance;
&.right {
float: right;
@@ -319,29 +323,29 @@
margin-right: 0;
width: 20px;
// width: math.div($standard-margin,2);
- background-color: $dark-green;
+ background-color: colors.$dark-green;
text-align: center;
height: 100%;
z-index: 20;
> a:hover {
- color: $nearly-white
+ color: colors.$nearly-white
}
}
> a {
- color: $nearly-white;
+ color: colors.$nearly-white;
cursor: pointer;
position: relative;
font-size: 120%;
> span {
- @include blind;
+ @include mixins.blind;
}
}
> a::after {
- @include icon-font;
+ @include mixins.icon-font;
}
// > a.tutorial::after {
@@ -349,15 +353,15 @@
// }
> a.question::after {
- content: $fa-question;
+ content: icons.$fa-question;
}
> a.login::after {
- content: $fa-login;
+ content: icons.$fa-login;
}
> a.logout::after {
- content: $fa-logout;
+ content: icons.$fa-logout;
}
}
}
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 6184dc1..8716258 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
/**
* Rules for the Kalamar hint helper.
@@ -24,18 +27,18 @@
// Alert bubble
div.alert.hint {
position: absolute;
- background-color: $alert-red;
- color: $nearly-white;
- padding: $item-padding;
+ background-color: colors.$alert-red;
+ color: colors.$nearly-white;
+ padding: lengths.$item-padding;
margin-top: 8px;
- box-shadow: $choose-box-shadow;
+ box-shadow: choose.$choose-box-shadow;
width: auto;
min-width: 20em;
max-width: 23em !important;
transition: opacity 0.2s ease 0s;
border: {
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
top-left-radius: 0;
}
@@ -50,7 +53,7 @@
border: {
width: 0 8px 12px 0;
style: solid;
- color: $alert-red transparent;
+ color: colors.$alert-red transparent;
}
}
}
@@ -83,12 +86,12 @@
left: 0;
text-align: left;
padding: 0;
- border-top: 5px solid $dark-orange;
+ border-top: 5px solid colors.$dark-orange;
height: 10px;
width: 1.2em;
&:hover:not(.active) {
- border-top: 10px solid $dark-orange;
+ border-top: 10px solid colors.$dark-orange;
}
&.active {
diff --git a/dev/scss/header/panel.scss b/dev/scss/header/panel.scss
index 459ab2b..e0fe6c6 100644
--- a/dev/scss/header/panel.scss
+++ b/dev/scss/header/panel.scss
@@ -1,11 +1,13 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
// In addition to main/panel.scss
div.panel.query div.view {
- background-color: $dark-green;
- border-left: $border-size solid $dark-green;
+ background-color: colors.$dark-green;
+ border-left: lengths.$border-size solid colors.$dark-green;
iframe {
- background-color: $nearly-white;
+ background-color: colors.$nearly-white;
}
}
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
index 44978bb..2904883 100644
--- a/dev/scss/header/querylanguage.scss
+++ b/dev/scss/header/querylanguage.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
/**
* Temporary hack for language chooser
@@ -8,7 +9,7 @@
*/
#ql-field {
position: relative;
- background-color: $light-green;
+ background-color: colors.$light-green;
cursor: pointer;
margin: 0;
outline: none;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4ccb254..19fcaf8 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
/**
@@ -18,7 +21,7 @@
&.loading {
background: {
- color: $light-orange;
+ color: colors.$light-orange;
image: none;
}
}
@@ -39,13 +42,13 @@
right: 0;
&:not(.loading)::after {
- content: $fa-search;
+ content: icons.$fa-search;
}
}
}
.query.panel {
- padding-right: $button-width;
+ padding-right: lengths.$button-width;
}
// Specify result button group layout
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 500fc70..0776b13 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,5 +1,8 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
/**
@@ -9,7 +12,7 @@
div.stattable {
display: flex;
flex-direction: row;
- margin-right: $right-view-distance;
+ margin-right: lengths.$right-view-distance;
}
div.stattable {
@@ -17,10 +20,10 @@
margin-bottom:4px;
> div {
- border-color: $dark-green;
+ border-color: colors.$dark-green;
> dt {
- background-color: $middle-green;
+ background-color: colors.$middle-green;
width: 15em;
margin: 0;
@@ -29,8 +32,8 @@
}
}
> dd {
- background-color: $lightest-green;
- color: $dark-grey;
+ background-color: colors.$lightest-green;
+ color: colors.$dark-grey;
}
}
}
@@ -38,8 +41,8 @@
&.stdisabled {
dt,
dd {
- background-color: $grey-green;
- color: $dark-green;
+ background-color: colors.$grey-green;
+ color: colors.$dark-green;
text-shadow: none;
}
}
@@ -53,7 +56,7 @@
span.refresh::after{
vertical-align: sub;
- content : $fa-redo;
+ content : icons.$fa-redo;
}
// Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 5ba1b51..a8acb09 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,5 +1,10 @@
@charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
/**
* Virtual Collection Builder
@@ -17,7 +22,7 @@
+ .action {
.minimize::after {
- color: $dark-grey !important;
+ color: colors.$dark-grey !important;
}
}
}
@@ -29,7 +34,7 @@
padding: 4pt 2pt 4pt 0pt;
border: {
- radius: $standard-border-radius * 2;
+ radius: lengths.$standard-border-radius * 2;
style: solid;
width: 0 $bracket-size;
}
@@ -53,7 +58,7 @@
width: $left-padding;
margin-left: -1 * ($left-padding + .5em);
line-height: 1.5em;
- border-top: $border-size solid transparent;
+ border-top: lengths.$border-size solid transparent;
}
> .docGroup::before {
@@ -140,7 +145,7 @@
}
&.fixed {
- color: $light-green;
+ color: colors.$light-green;
}
}
}
@@ -148,14 +153,14 @@
// Unspecified value
&.unspecified > span,
span.unspecified {
- @include choose-item;
+ @include choose.choose-item;
padding: 0 4px;
- box-shadow: $choose-box-shadow;
+ box-shadow: choose.$choose-box-shadow;
border: {
style: solid;
- width: $border-size;
- radius: $standard-border-radius;
+ width: lengths.$border-size;
+ radius: lengths.$standard-border-radius;
}
}
@@ -169,12 +174,12 @@
.rewritten .rewrite {
display: inline-block;
margin-left: 4pt;
- color: $dark-orange;
+ color: colors.$dark-orange;
&::after {
- @include icon-font;
+ @include mixins.icon-font;
font-style: normal;
font-weight: normal;
- content: $fa-rewrite;
+ content: icons.$fa-rewrite;
text-decoration: underline;
}
@@ -206,8 +211,8 @@
// referTo entries
.menu li[data-type=ref]::before,
span.key.ref::before {
- @include icon-font;
- content: $fa-referto;
+ @include mixins.icon-font;
+ content: icons.$fa-referto;
padding-right: 4pt;
font: {
style: normal;
@@ -224,8 +229,8 @@
margin-top: -6pt;
border: {
- radius: $standard-border-radius;
- width: $border-size;
+ radius: lengths.$standard-border-radius;
+ width: lengths.$border-size;
style: solid;
}
@@ -235,7 +240,7 @@
}
> div {
- @include choose-item;
+ @include choose.choose-item;
display: inline-block;
padding: 0 4pt;
margin-left: 4pt;
@@ -246,9 +251,9 @@
}
border: {
- width: $border-size;
+ width: lengths.$border-size;
style: solid;
- radius: $standard-border-radius;
+ radius: lengths.$standard-border-radius;
}
}
@@ -258,7 +263,7 @@
}
> div {
- @include choose-active;
+ @include choose.choose-active;
}
}
}
@@ -271,7 +276,7 @@
.docGroup,
.doc {
- color: $dark-grey;
+ color: colors.$dark-grey;
}
/**
@@ -285,7 +290,7 @@
.doc > span:not(.fixed) {
cursor: pointer;
&:hover {
- color: $dark-orange;
+ color: colors.$dark-orange;
}
}
@@ -293,7 +298,7 @@
.doc.unspecified > span,
span.unspecified {
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
}
@@ -307,22 +312,22 @@
&[data-operation] {
> .doc::before,
> .docGroup::before {
- color: $dark-orange;
+ color: colors.$dark-orange;
}
}
&[data-operation=or] {
- border-color: $dark-orange;
+ border-color: colors.$dark-orange;
}
}
div.value {
- @include choose-item;
- box-shadow: $choose-box-shadow;
+ @include choose.choose-item;
+ box-shadow: choose.$choose-box-shadow;
> div {
cursor: pointer;
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
}
}
}
@@ -380,15 +385,15 @@
#collection {
line-height: 1em;
- border-radius: $standard-border-radius;
+ border-radius: lengths.$standard-border-radius;
}
#vc-choose > span.rewritten::after {
- @include icon-font;
- color: $dark-orange;
+ @include mixins.icon-font;
+ color: colors.$dark-orange;
padding: 0;
padding-left: 4px;
- content: $fa-rewrite;
+ content: icons.$fa-rewrite;
text-decoration: underline;
font-style: normal;
font-weight: normal;
@@ -400,8 +405,8 @@
> div.vc {
display: none;
margin: 1.3em 0 .5em 0;
- border: 2px solid $dark-green;
- background-color: $nearly-white;
+ border: 2px solid colors.$dark-green;
+ background-color: colors.$nearly-white;
&.active {
display: block;
@@ -415,7 +420,7 @@
div.panel.vcinfo {
padding: 3pt 0pt 3pt 3pt;
- background-color: $dark-green;
+ background-color: colors.$dark-green;
div.button-group > span {
box-shadow: none;
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 48eb432..bdd2828 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,10 +5,10 @@
*/
// Global variables and mixins
-@import "base/base"; // Base styles
-@import "main/main"; // Main frame styles
-@import "header/header"; // Top frame styles
-@import "footer/footer"; // Bottom frame styles
-@import "sidebar/sidebar"; // Left frame styles
-@import "no-js"; // Script disabled
-@import "media"; // Media queries
+@use "base/base"; // Base styles
+@use "main/main"; // Main frame styles
+@use "header/header"; // Top frame styles
+@use "footer/footer"; // Bottom frame styles
+@use "sidebar/sidebar"; // Left frame styles
+@use "no-js"; // Script disabled
+@use "media"; // Media queries
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;
}
}
}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 5abf92d..ba6de14 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -1,12 +1,15 @@
@charset "utf-8";
-@import "util";
+@use "util";
+@use "base/colors";
+@use "base/lengths";
+@use "base/mixins";
/**
* Media rules for different screen sizes.
* This will override some basic rules.
*/
-$standard-margin: 4px;
+lengths.$standard-margin: 4px;
// (orientation: portrait),
@media all and (max-width: 42.5em) {
@@ -49,10 +52,10 @@
.burger-icon {
position: relative;
display: none;
- width: $standard-size-and-spacing;
- height: $standard-size-and-spacing;
+ width: lengths.$standard-size-and-spacing;
+ height: lengths.$standard-size-and-spacing;
font-size: 1.8rem;
- color: $nearly-white;
+ color: colors.$nearly-white;
&.show {
display: block;
@@ -74,7 +77,7 @@
position: absolute;
top: 0;
right: 0;
- background-color: $middle-green;
+ background-color: colors.$middle-green;
}
&.show * {
@@ -82,13 +85,13 @@
}
&-group {
- margin-top: $standard-size-and-spacing;
+ margin-top: lengths.$standard-size-and-spacing;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
- background-color: $middle-green;
+ background-color: colors.$middle-green;
fieldset.fieldset-login {
display: block !important;
@@ -102,17 +105,17 @@
input[type=text],
input[type=password] {
- @include input-field;
+ @include mixins.input-field;
margin-right: 0 !important;
}
button.btn-login {
width: 100% !important;
align-self: center;
- background-color: $dark-green !important;
+ background-color: colors.$dark-green !important;
&:hover {
- background-color: $middle-green !important;
+ background-color: colors.$middle-green !important;
color: unset !important;
}
}
@@ -237,8 +240,8 @@
main {
padding: 1rem;
- margin-left: $standard-margin;
- margin-right: $standard-margin;
+ margin-left: lengths.$standard-margin;
+ margin-right: lengths.$standard-margin;
&.shifted {
padding-left: 0;
@@ -246,7 +249,7 @@
}
header .button {
- margin-right: $standard-margin;
+ margin-right: lengths.$standard-margin;
&.top {
height: auto;
}
@@ -317,7 +320,7 @@
aside {
&:not(:focus):not(.active) {
- margin-left: -1 * $logo-left-distance;
+ margin-left: -1 * lengths.$logo-left-distance;
&::after {
font-size: 12pt;
height: 11pt;
@@ -355,7 +358,7 @@
}
.nav.nav-doc:first-child {
- margin-top: $standard-size-and-spacing !important;
+ margin-top: lengths.$standard-size-and-spacing !important;
}
}
diff --git a/dev/scss/no-js.scss b/dev/scss/no-js.scss
index 985ac48..4abedf9 100644
--- a/dev/scss/no-js.scss
+++ b/dev/scss/no-js.scss
@@ -1,4 +1,6 @@
-@import "util";
+@use "util";
+@use "base/colors";
+@use "base/lengths";
/**
* Optimization for no-js behaviour
@@ -46,16 +48,16 @@
}
main div.intro {
- margin-left: $base-padding !important;
+ margin-left: lengths.$base-padding !important;
}
}
#activate {
text-align: right;
- background-color: $dark-orange;
+ background-color: colors.$dark-orange;
margin-top: 0;
- padding: $base-padding;
- padding-right: $standard-margin;
- color: $nearly-white;
+ padding: lengths.$base-padding;
+ padding-right: lengths.$standard-margin;
+ color: colors.$nearly-white;
font-size: 80%;
}
\ No newline at end of file
diff --git a/dev/scss/plugin.scss b/dev/scss/plugin.scss
index 2eeebe4..2352729 100644
--- a/dev/scss/plugin.scss
+++ b/dev/scss/plugin.scss
@@ -1,18 +1,20 @@
-@import "base/base";
+@use "base/base";
+@use "base/colors";
+@use "base/lengths";
body {
margin: 0;
padding: 0;
h1 {
font-size: 110%;
- background-color: $ids-orange-1;
+ background-color: colors.$ids-orange-1;
color: white;
margin-top: 0;
- padding: $base-padding;
+ padding: lengths.$base-padding;
}
section {
- padding-left: $base-padding;
- padding-bottom: $base-padding;
+ padding-left: lengths.$base-padding;
+ padding-bottom: lengths.$base-padding;
&::before{
content:'';
}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index de7465c..110c6ee 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,11 +1,16 @@
@charset "utf-8";
@use "sass:math";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
aside {
- background-color: $dark-green;
- color: $nearly-white;
- width: $logo-left-distance;
+ background-color: colors.$dark-green;
+ color: colors.$nearly-white;
+ width: lengths.$logo-left-distance;
position: fixed;
display: block;
transition: all 0.3s ease-in-out;
@@ -32,7 +37,7 @@
}
&::after {
- @include icon-font;
+ @include mixins.icon-font;
position: absolute;
display: block;
opacity: 0;
@@ -45,13 +50,13 @@
width: 16pt;
height: 17pt;
padding: 6pt;
- background-color: $dark-green;
- border-top-right-radius: $standard-border-radius;
- margin-right: -1 * math.div($standard-margin, 2);
+ background-color: colors.$dark-green;
+ border-top-right-radius: lengths.$standard-border-radius;
+ margin-right: -1 * math.div(lengths.$standard-margin, 2);
}
&.settings::after {
- content: $fa-settings;
+ content: icons.$fa-settings;
}
h2,
@@ -79,9 +84,9 @@
li {
padding: 0;
> a {
- padding: $item-padding;
+ padding: lengths.$item-padding;
&:visited {
- @include choose-item;
+ @include choose.choose-item;
}
}
@@ -98,20 +103,20 @@
}
&.active > a:link {
- @include choose-active;
+ @include choose.choose-active;
}
> a:link {
- @include choose-item;
+ @include choose.choose-item;
display: block;
border-right: {
- width: $border-size;
+ width: lengths.$border-size;
style: solid;
}
&:hover {
- @include choose-hover;
+ @include choose.choose-hover;
transition: none;
}
}
@@ -153,7 +158,7 @@
input[type="text"],
input[type="password"] {
- @include input-field;
+ @include mixins.input-field;
width: 100%;
}
@@ -166,15 +171,15 @@
position: relative;
width: 100%;
margin-top: 4px;
- padding-right: $button-width;
+ padding-right: lengths.$button-width;
}
> p {
- color: $light-green;
+ color: colors.$light-green;
}
> p.announcement {
- color: $nearly-white;
+ color: colors.$nearly-white;
> time {
display: block;
font-size: 70%;
@@ -183,7 +188,7 @@
hr {
border: none;
- border-top: 2px solid $ids-grey-2;
+ border-top: 2px solid colors.$ids-grey-2;
}
ul {
@@ -206,7 +211,7 @@
top: 0;
right: 0;
&::after {
- content: $fa-login;
+ content: icons.$fa-login;
}
}
}
@@ -214,7 +219,7 @@
// Off aside
&.off,
&:not(:focus):not(.active) {
- margin-left: -1 * ($logo-left-distance - math.div($standard-margin, 2));
+ margin-left: -1 * (lengths.$logo-left-distance - math.div(lengths.$standard-margin, 2));
&::after {
opacity: 1;
}
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 12fb54b..3828fac 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,6 +1,6 @@
-@import "base/colors";
-@import "base/icons";
-@import "base/mixins";
-@import "base/choose";
-@import "base/lengths";
-@import "base/paths";
+@use "base/colors";
+@use "base/icons";
+@use "base/mixins";
+@use "base/choose";
+@use "base/lengths";
+@use "base/paths";