From a42ca795d17c86ea749dab4310ca0ec7cc7489cd Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 29 Jul 2021 20:22:52 +0200
Subject: [PATCH] Using / for division is deprecated and will be removed in
Dart Sass 2.0.0.
---
.../src/sass/apply/abstracts/_functions.scss | 6 ++++--
hypha/static_src/src/sass/apply/abstracts/_mixins.scss | 10 ++++++----
hypha/static_src/src/sass/apply/base/_typography.scss | 6 ++++--
hypha/static_src/src/sass/apply/components/_form.scss | 4 +++-
.../src/sass/public/abstracts/_functions.scss | 6 ++++--
.../static_src/src/sass/public/abstracts/_mixins.scss | 10 ++++++----
hypha/static_src/src/sass/public/base/_typography.scss | 6 ++++--
hypha/static_src/src/sass/public/components/_form.scss | 4 +++-
8 files changed, 34 insertions(+), 18 deletions(-)
diff --git a/hypha/static_src/src/sass/apply/abstracts/_functions.scss b/hypha/static_src/src/sass/apply/abstracts/_functions.scss
index 604d90ef4..686d2b953 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_functions.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_functions.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
// Strip the unit from the given value and return the value
@function strip-unit($value) {
- @return $value / ($value * 0 + 1);
+ @return math.div($value, ($value * 0 + 1));
}
// Return an em unit based on the pixel value and context
@function rem($px, $context: $base-font-size) {
- @return #{strip-unit($px / strip-unit($context))}rem;
+ @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
}
// Returns the opposite direction of each direction in a list
diff --git a/hypha/static_src/src/sass/apply/abstracts/_mixins.scss b/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
index c76679e56..f571da69b 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
// Media queries
@mixin media-query($queries...) {
@each $query in $queries {
@@ -120,17 +122,17 @@
@mixin responsive-font-sizes($min, $max) {
$vw-context: (1260 * .1) * 1px;
- $responsive: ($max / $vw-context) * 10vw;
+ $responsive: math.div($max, $vw-context) * 10vw;
- $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+ $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
- $min-breakpoint: $min / $responsive-unitless * 100;
+ $min-breakpoint: math.div($min, $responsive-unitless) * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
- $max-breakpoint: $max / $responsive-unitless * 100;
+ $max-breakpoint: math.div($max, $responsive-unitless) * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
diff --git a/hypha/static_src/src/sass/apply/base/_typography.scss b/hypha/static_src/src/sass/apply/base/_typography.scss
index 8462c47b9..f79778cbe 100644
--- a/hypha/static_src/src/sass/apply/base/_typography.scss
+++ b/hypha/static_src/src/sass/apply/base/_typography.scss
@@ -1,8 +1,10 @@
+@use 'sass:math';
+
// $TYPOGRAPHY
// Base font
html {
- font-size: ($base-font-size / 16px) * 100%;
- line-height: $base-line-height / $base-font-size;
+ font-size: math.div($base-font-size, 16px) * 100%;
+ line-height: math.div($base-line-height, $base-font-size);
color: $color--default;
}
diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss
index 380e1aa42..afacb6f7d 100644
--- a/hypha/static_src/src/sass/apply/components/_form.scss
+++ b/hypha/static_src/src/sass/apply/components/_form.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
.form {
$root: &;
@@ -418,7 +420,7 @@
padding: .4em;
margin-bottom: 1em;
border: 1px solid $color--mid-grey;
- line-height: $base-line-height / $base-font-size;
+ line-height: math.div($base-line-height, $base-font-size);
@include media-query(tablet-portrait) {
max-width: 70%;
diff --git a/hypha/static_src/src/sass/public/abstracts/_functions.scss b/hypha/static_src/src/sass/public/abstracts/_functions.scss
index 604d90ef4..686d2b953 100644
--- a/hypha/static_src/src/sass/public/abstracts/_functions.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_functions.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
// Strip the unit from the given value and return the value
@function strip-unit($value) {
- @return $value / ($value * 0 + 1);
+ @return math.div($value, ($value * 0 + 1));
}
// Return an em unit based on the pixel value and context
@function rem($px, $context: $base-font-size) {
- @return #{strip-unit($px / strip-unit($context))}rem;
+ @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
}
// Returns the opposite direction of each direction in a list
diff --git a/hypha/static_src/src/sass/public/abstracts/_mixins.scss b/hypha/static_src/src/sass/public/abstracts/_mixins.scss
index 405db5f95..835535c87 100644
--- a/hypha/static_src/src/sass/public/abstracts/_mixins.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
// Media queries
@mixin media-query($queries...) {
@each $query in $queries {
@@ -105,17 +107,17 @@
@mixin responsive-font-sizes($min, $max) {
$vw-context: (1260 * .1) * 1px;
- $responsive: ($max / $vw-context) * 10vw;
+ $responsive: math.div($max, $vw-context) * 10vw;
- $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+ $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
- $min-breakpoint: $min / $responsive-unitless * 100;
+ $min-breakpoint: math.div($min, $responsive-unitless) * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
- $max-breakpoint: $max / $responsive-unitless * 100;
+ $max-breakpoint: math.div($max, $responsive-unitless) * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
diff --git a/hypha/static_src/src/sass/public/base/_typography.scss b/hypha/static_src/src/sass/public/base/_typography.scss
index 8462c47b9..f79778cbe 100644
--- a/hypha/static_src/src/sass/public/base/_typography.scss
+++ b/hypha/static_src/src/sass/public/base/_typography.scss
@@ -1,8 +1,10 @@
+@use 'sass:math';
+
// $TYPOGRAPHY
// Base font
html {
- font-size: ($base-font-size / 16px) * 100%;
- line-height: $base-line-height / $base-font-size;
+ font-size: math.div($base-font-size, 16px) * 100%;
+ line-height: math.div($base-line-height, $base-font-size);
color: $color--default;
}
diff --git a/hypha/static_src/src/sass/public/components/_form.scss b/hypha/static_src/src/sass/public/components/_form.scss
index 5f2859bde..06b1178a8 100644
--- a/hypha/static_src/src/sass/public/components/_form.scss
+++ b/hypha/static_src/src/sass/public/components/_form.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
.form {
&--header-search-desktop {
max-width: 300px;
@@ -424,7 +426,7 @@
width: 100%;
padding: .4em;
border: 1px solid $color--mid-grey;
- line-height: $base-line-height / $base-font-size;
+ line-height: math.div($base-line-height, $base-font-size);
}
// Radio + Checkbox
--
GitLab