Fix SASS deprecation

This is a super annoying breaking change in sass (it also happens in `node-sass`/`node-scss`), but there seems to be no way around it.

context: https://sass-lang.com/documentation/breaking-changes/slash-div
This commit is contained in:
Marcus Blättermann 2022-09-13 01:01:43 +02:00
parent 2ea50bd2fb
commit b4117ebc94
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
5 changed files with 16 additions and 10 deletions

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base
$triangle-size: 2rem
@ -55,14 +56,14 @@ $border-radius: 6px
// Banner effect
&:after
position: absolute
bottom: -$triangle-size / 2
left: $border-radius / 2
bottom: math.div(-$triangle-size, 2)
left: math.div($border-radius, 2)
width: 0
height: 0
border-color: transparent
border-style: solid
border-top-color: var(--color-dark)
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
border-width: math.div($triangle-size, 2) 0 0 calc(#{$triangle-size} - #{math.div($border-radius, 2)})
content: ""
@include breakpoint(max, sm)

View File

@ -1,3 +1,5 @@
@use 'sass:math'
.root
margin-bottom: var(--spacing-md)
@ -7,7 +9,7 @@
@each $ratio1, $ratio2 in (16, 9), (4, 3)
.ratio#{$ratio1}x#{$ratio2}
padding-bottom: (100% * $ratio2 / $ratio1)
padding-bottom: (100% * math.div($ratio2, $ratio1))
.iframe
position: absolute

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base
$grid-gap-wide: 5rem
@ -9,7 +10,7 @@ $flex-gap: 2rem
@if $gap == 0
flex: 0 0 100% / $cols
@else
flex: 0 0 calc(#{100% / $cols} - #{$gap * ($cols - 1)})
flex: 0 0 calc(#{math.div(100%, $cols)} - #{$gap * ($cols - 1)})
.root
display: flex

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base
.root
@ -82,7 +83,7 @@
vertical-align: middle
margin-right: 0.5rem
cursor: pointer
border-radius: $size / 4
border-radius: math.div($size, 4)
background: var(--color-back)
position: relative
top: -1px

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base
$crumb-bullet: 14px
@ -58,7 +59,7 @@ $crumb-bar: 2px
position: relative
.crumb
margin-bottom: $crumb-bullet / 2
margin-bottom: math.div($crumb-bullet, 2)
position: relative
padding-left: 2rem
color: var(--color-theme)
@ -71,7 +72,7 @@ $crumb-bar: 2px
width: $crumb-bullet
height: $crumb-bullet
position: absolute
top: $crumb-bullet / 4
top: math.div($crumb-bullet, 4)
left: 0
content: ""
border-radius: 50%
@ -83,13 +84,13 @@ $crumb-bar: 2px
height: 100%
position: absolute
top: $crumb-bullet
left: ($crumb-bullet - $crumb-bar) / 2
left: math.div(($crumb-bullet - $crumb-bar), 2)
content: ""
background: var(--color-subtle)
&:first-child:before
height: calc(100% + #{$crumb-bullet * 2})
top: -$crumb-bullet / 2
top: math.div(-$crumb-bullet, 2)
.crumb-active
color: var(--color-dark)