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