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