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