Fix scss lint

diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 3b6a465e17e771399727305010cdfd4a3dffae97..9f8afa29c321994688560597dcda9b537f4f52d8 100644 (file)
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -4,7 +4,6 @@
     "scss/at-import-no-partial-leading-underscore": null,
     "color-hex-case": null,
     "color-hex-length": null,
-    "order/properties-alphabetical-order": null,
     "selector-pseudo-element-no-unknown": [
       true,
       {
@@ -24,7 +23,6 @@
     "rule-empty-line-before": null,
     "selector-max-id": null,
     "scss/at-function-pattern": null,
-    "function-parentheses-space-inside": "never-single-line",
     "property-no-vendor-prefix": [
       true,
       {

diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index 6986281497f3d64048f9f482482606beb48e76bd..73a23eb7fe209ebc8f9c2cb2f96431b3928a7548 100644 (file)
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -8,7 +10,7 @@ $form-base-input-width: 340px;
   @include settings-big-title;
 
   &.account-title-danger {
-    color: lighten($color: #c54130, $amount: 10);
+    color: color.adjust($color: #c54130, $lightness: 10%);
   }
 }
 

diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 559a00251d96967e124a57cfbf32f23e2c3529ab..1c4ca533f7513e4b73081dea1edab77ee730daa6 100644 (file)
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -1,9 +1,12 @@
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
+
 @use 'bootstrap/scss/functions' as *;
 
 tr.banned > td {
-  background-color: lighten($color: $red, $amount: 40) !important;
+  background-color: color.adjust($color: $red, $lightness: 40%) !important;
 }
 
 .banned-info {

diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 3d686a1467aecbb4b659878f0fb972ea640e7f74..5d406ed5d8dad73e5417ae848cebad9f4202e39e 100644 (file)
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 @use 'bootstrap/scss/functions' as *;
@@ -6,7 +8,7 @@
   @include settings-big-title;
 
   &.account-title-danger {
-    color: lighten($color: #c54130, $amount: 10);
+    color: color.adjust($color: #c54130, $lightness: 10%);
   }
 }
 

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2c364afb45a157007f76b40562f19ce02b3e4041..4cac94f67196909aefcd9fb52bd049b7ec72084c 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 
 @use '_variables' as *;
 @use '_mixins' as *;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 7a100a53d7a8bc58c8f350591f41ae678ebadfd3..a25741d91036708c048e24351753ab602408f0ce 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 
 @import '_bootstrap-mixins';
@@ -220,7 +222,7 @@
 }
 
 @mixin danger-button {
-  $color: lighten($color: #c54130, $amount: 10);
+  $color: color.adjust($color: #c54130, $lightness: 10%);
   $text: #fff6f5;
 
   @include button-focus(scale-color($color, $alpha: -95%));
@@ -233,7 +235,7 @@
   &:focus,
   &[disabled],
   &.disabled {
-    background-color: lighten($color: $color, $amount: 10);
+    background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
   &[disabled],
@@ -676,7 +678,7 @@
     transition: width 0.6s ease;
 
     &.red {
-      background-color: lighten($color: #c54130, $amount: 10);
+      background-color: color.adjust($color: #c54130, $lightness: 10%);
     }
   }
 }
@@ -721,7 +723,7 @@
 
   > div {
     box-sizing: border-box;
-    flex: 0 0 percentage(math.div(1, 3));
+    flex: 0 0 math.percentage(math.div(1, 3));
     padding: 0 5px;
     margin-bottom: 10px;
 
@@ -832,7 +834,7 @@
 // an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
-  $padding-percent: percentage($inverted-ratio);
+  $padding-percent: math.percentage($inverted-ratio);
 
   position: relative;
   height: 0;
@@ -889,7 +891,7 @@
 
 @mixin on-small-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $small-view + $menu-width) {
+    @media screen and (max-width: #{$small-view + $menu-width}) {
       @content;
     }
   }
@@ -903,7 +905,7 @@
 
 @mixin on-mobile-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $mobile-view + $menu-width) {
+    @media screen and (max-width: #{$mobile-view + $menu-width}) {
       @content;
     }
   }

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1eb3135f4e970bceea605cd3f676848bea632872..43a0057748d958320c64f9f5063542d0f9ce10cb 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -17,11 +17,11 @@ $grey-foreground-hover-color: #303030;
 $grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%);
 
 $main-color: hsl(24, 90%, 50%);
-$main-color-lighter: lighten($main-color, 10%);
-$main-color-lightest: lighten($main-color, 40%);
+$main-color-lighter: color.adjust($main-color, $lightness: 10%);
+$main-color-lightest: color.adjust($main-color, $lightness: 40%);
 $main-color-very-light: #fff5eb;
 
-$main-hover-color: lighten($main-color, 5%);
+$main-hover-color: color.adjust($main-color, $lightness: 5%);
 $main-background-hover-color: #e9ecef;
 
 $support-button: inherit;

diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 4c7258232a5fc22679c675241750cf8e5cbe0b68..ba7905c890612ae35055d058efc772abf773f559 100644 (file)
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,3 +1,6 @@
+@use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -9,7 +12,7 @@ $ng-select-border: $input-border-color;
 $ng-select-bg: pvar(--mainBackgroundColor);
 
 // Cannot use a CSS variable as the default them use darken on this variable
-$ng-select-selected: lighten($main-color, 40%);
+$ng-select-selected: color.adjust($main-color, $lightness: 40%);
 // $ng-select-selected-text: $ng-select-primary-text !default;
 
 $ng-select-marked: pvar(--mainColorLightest);

diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index d5f24dd913632f2a3960e88adb17dd7110cdf5b0..47d3d2b0da4014ace857f534f78c70962300d8f8 100644 (file)
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use 'bootstrap/scss/functions' as *;
 
 $primary-foreground-color: #fff;
@@ -18,7 +20,7 @@ $control-bar-button-width: 38px;
 
 $control-bar-total-height: $control-bar-height - $control-bar-slider-top;
 
-$slider-bg-color: lighten($primary-background-color, 33%);
+$slider-bg-color: color.adjust($primary-background-color, $lightness: 33%);
 
 $progress-margin: 10px;