From 197c388d9de519056ab663e5149523c2f723066e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 20 Sep 2021 21:20:16 +0200 Subject: [PATCH] Replace deprecated sass div / https://sass-lang.com/documentation/breaking-changes/slash-div --- frontend/src/global_styles/content/_tooltips.sass | 10 ++++++---- .../foundation-apps/scss/components/_block-list.scss | 2 +- .../vendor/foundation-apps/scss/components/_forms.scss | 2 +- .../vendor/foundation-apps/scss/components/_grid.scss | 8 +++++--- .../vendor/foundation-apps/scss/components/_label.scss | 4 +++- .../foundation-apps/scss/components/_notification.scss | 2 +- .../foundation-apps/scss/components/_title-bar.scss | 2 +- .../foundation-apps/scss/helpers/_breakpoints.scss | 6 ++++-- .../foundation-apps/scss/helpers/_functions.scss | 6 ++++-- .../vendor/foundation-apps/scss/helpers/_mixins.scss | 6 +++--- 10 files changed, 29 insertions(+), 19 deletions(-) diff --git a/frontend/src/global_styles/content/_tooltips.sass b/frontend/src/global_styles/content/_tooltips.sass index f459da12d4..afd04d9b9d 100644 --- a/frontend/src/global_styles/content/_tooltips.sass +++ b/frontend/src/global_styles/content/_tooltips.sass @@ -30,6 +30,8 @@ // tooltips used for arbitrary elements +@use "sass:math" + $tooltip--background-color: #e3f5ff $tooltip--border: none $tooltip--height: 22px @@ -56,7 +58,7 @@ $advanced-tooltip--border: 1px solid #a7cbe1 &:before margin-bottom: $tooltip--arrow-size * -1 + 1 &:after - margin-bottom: $tooltip--height/-1.5 + margin-bottom: math.div($tooltip--height, -1.5) &.-multiline &:before, &:after @@ -86,9 +88,9 @@ $advanced-tooltip--border: 1px solid #a7cbe1 %tooltip--after height: $tooltip--height - padding: $tooltip--height/2 $tooltip--height/2 0 $tooltip--height/2 + padding: $tooltip--height*0.5 $tooltip--height*0.5 0 $tooltip--height*0.5 font-size: 13px - line-height: $tooltip--height/2 + line-height: $tooltip--height*0.5 white-space: nowrap content: attr(data-tooltip) border: $tooltip--border @@ -125,7 +127,7 @@ $advanced-tooltip--border: 1px solid #a7cbe1 &:after height: auto width: 150px - padding: $tooltip--height/2 + padding: $tooltip--height*0.5 line-height: $tooltip--height - 3px white-space: normal text-align: left diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_block-list.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_block-list.scss index 8cbcfc49d7..388e36bd79 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_block-list.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_block-list.scss @@ -224,7 +224,7 @@ $blocklist-check-icons: true !default; + get-side($blocklist-item-padding, top); $icon-height: $item-height * $blocklist-item-icon-size; - $icon-offset: ($item-height - $icon-height) / 2; + $icon-offset: ($item-height - $icon-height) * 0.5; #{$item-selector} { > a, > span, > label { diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_forms.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_forms.scss index ecad4b8be0..29e8cdd315 100755 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_forms.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_forms.scss @@ -265,7 +265,7 @@ select { // Range slider // - - - - - - - - - - - - - - - - - - - - - - - - - input[type="range"] { - $margin: ($slider-thumb-height - $slider-height) / 2; + $margin: ($slider-thumb-height - $slider-height) * 0.5; @include no-appearance; display: block; diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_grid.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_grid.scss index dceb63e25c..4c9cfbcc66 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_grid.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @import "panel"; /* @@ -38,7 +40,7 @@ $block-grid-max-size: 6 !default; */ @mixin grid-size($size: expand) { @if (type-of($size) == 'number') { - $pct: percentage($size / $total-columns); + $pct: percentage(math.div($size, $total-columns)); flex: 0 0 $pct; // max-width prevents columns from wrapping early in IE10/11 max-width: $pct; @@ -188,7 +190,7 @@ $block-grid-max-size: 6 !default; */ @mixin grid-offset($offset: false) { @if ($offset != false) { - margin-left: percentage($offset / $total-columns); + margin-left: percentage(math.div($offset, $total-columns)); } } @@ -276,7 +278,7 @@ $block-grid-max-size: 6 !default; > li, > div, > section { padding: 0 1rem 1rem; - flex: 0 0 percentage(1 / $up); + flex: 0 0 percentage(math.div(1, $up)); } } diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_label.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_label.scss index 0d172473d5..ecda1fd4a9 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_label.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_label.scss @@ -4,8 +4,10 @@ /// @Foundation.settings // Label +@use "sass:math"; + $label-fontsize: 0.8rem !default; -$label-padding: ($global-padding / 3) ($global-padding / 2) !default; +$label-padding: math.div($global-padding, 3) ($global-padding * 0.5) !default; $label-radius: 0 !default; $label-background: $primary-color !default; $label-color: isitlight($primary-color) !default; diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_notification.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_notification.scss index ef54456e22..2820f9fa26 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_notification.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_notification.scss @@ -76,7 +76,7 @@ $notification-icon-align: top !default; } @else if $x == middle { left: 50%; - margin-left: -($size / 2); + margin-left: -($size * 0.5); } @if $y == top { diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_title-bar.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_title-bar.scss index ca64124068..8d412400c5 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/components/_title-bar.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/components/_title-bar.scss @@ -13,7 +13,7 @@ /// @Foundation.settings // Title Bar $titlebar-center-width: 50% !default; -$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default; +$titlebar-side-width: (100% - $titlebar-center-width) * 0.5 !default; $titlebar-background: #eee !default; $titlebar-color: #000 !default; $titlebar-border: 1px solid #ccc !default; diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_breakpoints.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_breakpoints.scss index 36300d7f69..da30a5848c 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_breakpoints.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_breakpoints.scss @@ -15,6 +15,8 @@ /// @Foundation.settings // Breakpoints // These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles } +@use "sass:math"; + $breakpoints: ( small: rem-calc(0), medium: rem-calc(640), @@ -66,7 +68,7 @@ $breakpoint-classes: (small medium large) !default; $bpMax: null; } @else { - $bpMax: $next-bp - (1/16); + $bpMax: $next-bp - math.div(1, 16); } } $bp: map-get($breakpoints, $bp); @@ -99,7 +101,7 @@ $breakpoint-classes: (small medium large) !default; } } @else if $dir == 'down' { - $max: $bp - (1/16); + $max: $bp - math.div(1, 16); $str: $str + ' and (max-width: #{$max})'; } @else { diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_functions.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_functions.scss index 1d2379341f..a2e34a27e5 100755 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_functions.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_functions.scss @@ -3,6 +3,8 @@ // foundation.zurb.com // Licensed under MIT Open Source +@use "sass:math"; + $include-css: () !default; $modules: () !default; $rem-base: 16px !default; @@ -296,7 +298,7 @@ $rem-base: 16px !default; /// /// @return The same number, sans unit. @function strip-unit($num) { - @return $num / ($num * 0 + 1); + @return math.div($num, $num * 0 + 1); } /// Turn to Degrees @@ -316,7 +318,7 @@ $rem-base: 16px !default; /// /// @return A number in rems, calculated based on the given value and the base pixel value. @function convert-to-rem($value, $base-value: $rem-base) { - $value: strip-unit($value) / strip-unit($base-value) * 1rem; + $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem; @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 @return $value; } diff --git a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_mixins.scss b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_mixins.scss index 403fe61516..d016288e9d 100644 --- a/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_mixins.scss +++ b/frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_mixins.scss @@ -60,18 +60,18 @@ } @else { top: 50%; - margin-top: -$width/2; + margin-top: -$width*0.5; } @if $left { left: $left; } @else { - left: ($tabbar-menu-icon-width - $width)/2; + left: ($tabbar-menu-icon-width - $width)*0.5; } } @else { top: 50%; - margin-top: -$width/2; + margin-top: -$width*0.5; #{$opposite-direction}: $topbar-link-padding; }