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