Use sass division function instead of deprecated operator

This effectively make the SCSS code processable only by dart-sass
because neither libsass (and node-sass in consequence) nor ruby-sass
supports new syntax. See
https://sass-lang.com/documentation/breaking-changes/slash-div for more
information.

This fixes #27
This commit is contained in:
Jarek Zgoda 2021-08-18 12:44:54 +02:00
parent cc164857b9
commit cb5b746bbb
10 changed files with 30 additions and 26 deletions

View file

@ -6,7 +6,7 @@
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing) / 2);
padding-bottom: calc(var(--spacing) * 0.5);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
@ -57,7 +57,7 @@ details {
}
~ * {
margin-top: calc(var(--spacing) / 2);
margin-top: calc(var(--spacing) * 0.5);
~ * {
margin-top: 0;
@ -69,7 +69,7 @@ details {
&[open] {
> summary {
margin-bottom: calc(var(--spacing) / 4);
margin-bottom: calc(var(--spacing) * 0.25);
&:not(:focus) {
color: var(--accordion-open-summary-color);

View file

@ -1,3 +1,5 @@
@use "sass:math";
/**
* Card (<article>)
*/
@ -15,7 +17,7 @@ article {
> pre {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
padding: calc(math.div(var(--block-spacing-vertical), 1.5)) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}

View file

@ -1,3 +1,5 @@
@use "sass:math";
/**
* Nav
*/
@ -19,17 +21,17 @@ nav {
list-style: none;
&:first-of-type {
margin-left: calc(var(--spacing) * -0.5);
margin-left: calc(math.div(var(--spacing), -0.5));
}
&:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(math.div(var(--spacing), -0.5));
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) / 2);
padding: var(--spacing) calc(var(--spacing) * 0.5);
// HACK: Input & Button inside Nav
> *,
@ -40,8 +42,8 @@ nav {
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) / 2);
margin: calc(var(--spacing) * -1) calc(math.div(var(--spacing), -0.5));
padding: var(--spacing) calc(var(--spacing) * 0.5);
border-radius: var(--border-radius);
text-decoration: none;
@ -64,11 +66,11 @@ aside {
}
li {
padding: calc(var(--spacing) / 2);
padding: calc(var(--spacing) * 0.5);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) / 2);
padding: calc(var(--spacing) * 0.5);
}
}
}

View file

@ -30,7 +30,7 @@ progress {
display: inline-block;
width: 100%;
height: .5rem;
margin-bottom: calc(var(--spacing) / 2);
margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border