From 2fce570837a6ecc12adcc133fb2651d350c55a5d Mon Sep 17 00:00:00 2001 From: Julian Kniephoff Date: Thu, 23 May 2024 15:19:42 +0200 Subject: [PATCH] Fix SCSS deprecation warnings This also touches our vendored copy of fontawesome. See #429. --- src/styles/base/fontawesome/_core.scss | 4 +++- src/styles/base/fontawesome/_fixed-width.scss | 4 +++- src/styles/base/fontawesome/_larger.scss | 6 ++++-- src/styles/base/fontawesome/_list.scss | 6 ++++-- src/styles/base/fontawesome/_mixins.scss | 4 +++- src/styles/base/fontawesome/_variables.scss | 4 +++- src/styles/components/_stats.scss | 4 +++- src/styles/components/modals/_modal-base.scss | 4 ++-- src/styles/components/modals/_nav.scss | 2 +- src/styles/components/video/_video-editor.scss | 16 ++++++++-------- src/styles/mixins/_mixins-config.scss | 2 +- 11 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/styles/base/fontawesome/_core.scss b/src/styles/base/fontawesome/_core.scss index 7425ef85fc..bb0c29187c 100644 --- 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 index b221c98133..aec43ec593 100644 --- 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 index 41e9a8184a..a20ddf578d 100644 --- 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 index 7d1e4d54d6..887901c1ee 100644 --- 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 index c3bbd5745d..0c1aa771ec 100644 --- 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 index 6840f96ee9..115ca61968 100644 --- 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 index e38ab7c0be..4a07be1601 100644 --- 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 index 94815dec1d..913b803506 100644 --- 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 index a43464aa50..3ee845e684 100644 --- 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 index 9bb552e3f3..b8cb752608 100644 --- 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 index c1490874d1..146bd7bbc8 100644 --- 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;