fix: SASS deprecated functions

This commit is contained in:
2024-11-12 14:06:17 +01:00
parent 9ed4f1dbd9
commit 9e46d79ba7
4 changed files with 14 additions and 7 deletions

View File

@@ -1,3 +1,5 @@
@use "sass:color";
.button { .button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -116,7 +118,7 @@
// Hover // Hover
&:not([disabled]):hover { &:not([disabled]):hover {
color: $color-text; color: $color-text;
background-color: darken($color-secondary, 7); background-color: color.adjust($color-secondary, $lightness: -7%);
} }
} }
@@ -128,7 +130,7 @@
&[disabled] { &[disabled] {
background: none; background: none;
border: 2px solid darken($color-button, 2); border: 2px solid color.adjust($color-button, $lightness: -2%);
} }
// Hover // Hover
@@ -138,7 +140,7 @@
} }
} }
&:not([disabled]):hover { &:not([disabled]):hover {
background: darken($color-button, 2.5); background: color.adjust($color-button, $lightness: -2.5%);
} }
} }

View File

@@ -1,3 +1,5 @@
@use "sass:color";
.button-circle { .button-circle {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -97,7 +99,7 @@
background: $color-secondary; background: $color-secondary;
&:hover { &:hover {
background: darken($color-secondary, 7); background: color.adjust($color-secondary, $lightness: -7%);
} }
} }

View File

@@ -1,3 +1,5 @@
@use "sass:color";
.poster { .poster {
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
@@ -93,7 +95,7 @@
&:hover { &:hover {
@include bp (md) { @include bp (md) {
background-color: darken($color-secondary, 7); background-color: color.adjust($color-secondary, $lightness: -7%);
} }
} }
} }

View File

@@ -1,4 +1,5 @@
@use "sass:math"; @use "sass:math";
@use "sass:map";
// Hide text // Hide text
%hide-text { %hide-text {
@@ -51,8 +52,8 @@
// Based on Width // Based on Width
@mixin bp ($size, $to: min, $sizes: $breakpoints) { @mixin bp ($size, $to: min, $sizes: $breakpoints) {
// Size is in map // Size is in map
@if map-has-key($sizes, $size) { @if map.has-key($sizes, $size) {
$size: map-get($sizes, $size); $size: map.get($sizes, $size);
@if ($to == max) { @if ($to == max) {
@media (max-width: #{$size}) { @media (max-width: #{$size}) {