flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: SASS deprecated functions

Browse Source
This commit is contained in:
Félix Péault
2024-11-12 14:06:17 +01:00
parent 9ed4f1dbd9
commit 9e46d79ba7
4 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/website/src/components/atoms/Button/Button.scss
View File

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

4
apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
View File

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

4
apps/website/src/components/molecules/Poster/Poster.scss
View File

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

5
apps/website/src/style/tools/_mixins.scss
View File

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