Update SCSS to module system (fixes #266)
Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
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;