Fix SCSS deprecation warnings

This also touches our vendored copy of fontawesome. See opencast#429.
JulianKniephoff · May 23, 2024 · da2ca5d · da2ca5d
1 parent 5dd7547
commit da2ca5d
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 21 deletions.
diff --git a/src/styles/base/fontawesome/_core.scss b/src/styles/base/fontawesome/_core.scss
@@ -1,9 +1,11 @@
+@use "sass:list";
+
 // Base Class Definition
 // -------------------------
 
 .#{$fa-css-prefix} {
   display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration
   font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;

diff --git a/src/styles/base/fontawesome/_fixed-width.scss b/src/styles/base/fontawesome/_fixed-width.scss
@@ -1,6 +1,8 @@
+@use "sass:math";
+
 // Fixed Width Icons
 // -------------------------
 .#{$fa-css-prefix}-fw {
-  width: (18em / 14);
+  width: math.div(18em, 14);
   text-align: center;
 }
diff --git a/src/styles/base/fontawesome/_larger.scss b/src/styles/base/fontawesome/_larger.scss
@@ -1,10 +1,12 @@
+@use "sass:math";
+
 // Icon Sizes
 // -------------------------
 
 /* makes the font 33% larger relative to the icon container */
 .#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
+  font-size: math.div(4em, 3);
+  line-height: (3em * 0.25);
   vertical-align: -15%;
 }
 .#{$fa-css-prefix}-2x { font-size: 2em; }

diff --git a/src/styles/base/fontawesome/_list.scss b/src/styles/base/fontawesome/_list.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // List Icons
 // -------------------------
 
@@ -11,9 +13,9 @@
   position: absolute;
   left: -$fa-li-width;
   width: $fa-li-width;
-  top: (2em / 14);
+  top: math.div(2em, 14);
   text-align: center;
   &.#{$fa-css-prefix}-lg {
-    left: -$fa-li-width + (4em / 14);
+    left: -$fa-li-width + math.div(4em, 14);
   }
 }
diff --git a/src/styles/base/fontawesome/_mixins.scss b/src/styles/base/fontawesome/_mixins.scss
@@ -1,9 +1,11 @@
+@use "sass:list";
+
 // Mixins
 // --------------------------
 
 @mixin fa-icon() {
   display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration
   font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;

diff --git a/src/styles/base/fontawesome/_variables.scss b/src/styles/base/fontawesome/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Variables
 // --------------------------
 
@@ -9,7 +11,7 @@ $fa-css-prefix:       fa !default;
 $fa-version:          "4.6.3" !default;
 $fa-border-color:     #eee !default;
 $fa-inverse:          #fff !default;
-$fa-li-width:         (30em / 14) !default;
+$fa-li-width:         math.div(30em, 14) !default;
 
 $fa-var-500px: "\f26e";
 $fa-var-adjust: "\f042";

diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss
@@ -18,6 +18,8 @@
  * the License.
  *
  */
+@use "sass:math";
+
 .stats-container {
   text-align: right;
 
@@ -28,7 +30,7 @@
     box-sizing: border-box;
     display: inline-block;
     vertical-align: top;
-    min-width: (40% / $num-cols);
+    min-width: math.div(40%, $num-cols);
     margin-bottom: 20px;
     margin-top: 12px;
     padding: 0 5px;

diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss
@@ -35,7 +35,7 @@
 
 .medium-modal {
     width: $modal-width;
-    margin-left: -($modal-width / 2);
+    margin-left: -($modal-width * 0.5);
 }
 
 .large-modal {
@@ -62,7 +62,7 @@
     position: absolute;
     top: 100px;
     left: 50%;
-    margin-left: -($modal-width / 2);
+    margin-left: -($modal-width * 0.5);
     background: $body-background;
     border-radius: $main-border-radius;
     box-shadow: 0 0 20px 2px rgba($black, 0.3);

diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss
@@ -61,7 +61,7 @@
             font-weight: 600;
 
             $size: 8px;
-            $position-from-right: ($width/2) - $size;
+            $position-from-right: ($width*0.5) - $size;
 
             @include triangle-point(bottom, $size, $size, $position-from-right, $off-white, 1px, $modal-nav-border-color, -8px);
         }

diff --git a/src/styles/components/video/_video-editor.scss b/src/styles/components/video/_video-editor.scss
@@ -18,7 +18,7 @@
  * the License.
  *
  */
-
+@use "sass:math";
 
 // Timeline styles
 // ----------------------------------------
@@ -171,14 +171,14 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%);
             $sliver-active-stops: ();
             $sliver-deleted-stops: ();
 
-            @for $j from 0 through floor($segment-sliver-vert-length/$num-colors) {
+            @for $j from 0 through floor(math.div($segment-sliver-vert-length, $num-colors)) {
               @for $i from 1 through $num-colors {
                 $active-color: nth($segment-sliver-active-colors, $i);
                 $deleted-color: nth($segment-sliver-deleted-colors, $i);
-                $new-active-stops: $active-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length),
-                                 $active-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length);
-                $new-deleted-stops: $deleted-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length),
-                                 $deleted-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length);
+                $new-active-stops: $active-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)),
+                                 $active-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length));
+                $new-deleted-stops: $deleted-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)),
+                                 $deleted-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length));
                 $sliver-active-stops: join($sliver-active-stops, $new-active-stops, comma);
                 $sliver-deleted-stops: join($sliver-deleted-stops, $new-deleted-stops, comma);
               }
@@ -465,8 +465,8 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%);
 
             $handle-size: 14px;
             .handle {
-                bottom: ($handle-size/-2) + 1;
-                left: ($handle-size/-2);
+                bottom: math.div($handle-size, -2) + 1;
+                left: math.div($handle-size, -2);
                 width: $handle-size;
                 height: $handle-size;
                 border-radius: $handle-size;

diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss
@@ -99,7 +99,7 @@
     // Base styles
     position: absolute;
     top: 52px;
-    left: -($width / 2 - 20);
+    left: -($width * 0.5 - 20);
     z-index: $max-z - 9;
     visibility: hidden;
     opacity: 0;