Move to sass module

client/src/app/+about/about-follows/about-follows.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .subtitle {
   font-size: 18px;

client/src/app/+about/about-instance/about-instance.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .about-instance-title {
   display: flex;

client/src/app/+about/about-instance/contact-admin-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .modal-body {
   text-align: left;

client/src/app/+about/about-peertube/about-peertube-contributors.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-contributors {
   .framasoft {

client/src/app/+about/about-peertube/about-peertube.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   max-width: 1200px;

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -1,6 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .margin-content {
   @include grid-videos-miniature-margins;
@@ -100,7 +101,7 @@ my-subscribe-button {
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
-  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+  padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
   z-index: z(miniature) + 1;
 
   a {

client/src/app/+accounts/accounts.component.scss

@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
 
 .root {
   --myGlobalTopPadding: 60px;

client/src/app/+admin/admin.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-top-menu-dropdown {
   flex-grow: 1;

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $form-base-input-width: 340px;
 

client/src/app/+admin/follows/followers-list/followers-list.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/following-list/following-list.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/follows.component.scss

@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 .form-sub-title {
   @include margin-right(30px);

client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss

@@ -1,2 +1,2 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .label {
   display: inline-block;

client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .unblock-button {
   @include peertube-button;

client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss

@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 my-global-icon {
   width: 24px;

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss

@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 my-feed {
   @include margin-left(5px);

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .update-button[disabled=true] ::ng-deep .action-button {
   cursor: default !important;

client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .search-bar {
   display: flex;

client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h2 {
   margin-bottom: 20px;

client/src/app/+admin/plugins/shared/plugin-list.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .plugin {
   margin: 15px 0;

client/src/app/+admin/plugins/shared/toggle-plugin-type.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .toggle-plugin-type {
   display: flex;

client/src/app/+admin/system/debug/debug.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   font-size: 15px;

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .select-job-state {
   min-width: 120px;

client/src/app/+admin/system/logs/logs.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .logs {
   font-family: monospace;

client/src/app/+admin/system/system.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .form-sub-title {
   @include margin-right(30px);

client/src/app/+admin/users/user-edit/user-edit.component.scss

@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $form-base-input-width: 340px;
 

client/src/app/+admin/users/user-edit/user-password.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]):not([type=checkbox]) {
   @include peertube-input-text(340px);

client/src/app/+admin/users/user-list/user-list.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .add-button {
   @include create-button;

client/src/app/+login/login.component.scss

@@ -1,8 +1,8 @@
-@use '_variables';
-@use '_mixins';
-@use './_bootstrap-variables';
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
 label {
   display: block;

client/src/app/+my-account/my-account-applications/my-account-applications.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .header {
   display: flex;

client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .delete-me {
   button {

client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .custom-row {
   display: flex;

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-settings.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .account-title {
   @include settings-big-title;

client/src/app/+my-account/my-account.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .row {
   @include sub-menu-h1;

client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h1 my-global-icon {
   position: relative;

client/src/app/+my-library/my-history/my-history.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .no-history {
   display: flex;

client/src/app/+my-library/my-library.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .row {
   @include sub-menu-h1;

client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-select-container {
   @include peertube-select-container(350px);

client/src/app/+my-library/my-ownership/my-ownership.component.scss

@@ -1,5 +1,6 @@
-@use '_miniature';
-@use '_mixins';
+@use 'sass:math';
+@use '_miniature' as *;
+@use '_mixins' as *;
 
 .chip {
   @include chip;
@@ -19,7 +20,7 @@
     @include margin-right(0.5rem);
 
     height: $image-height;
-    width: #{(16/9) * $image-height};
+    width: #{math.div(16, 9) * $image-height};
     border-radius: 2px;
     border: 0;
     background: transparent;

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input[type=text] {
   @include peertube-input-text(300px);

client/src/app/+my-library/my-video-imports/my-video-imports.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 pre {
   font-size: 11px;

client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss

@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .root {
   display: grid;

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h1 {
   display: flex;

client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 p-autocomplete {
   display: block;

client/src/app/+my-library/my-videos/my-videos.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input[type=text] {
   @include peertube-input-text(300px);

client/src/app/+page-not-found/page-not-found.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   @include margin-left(auto);

client/src/app/+remote-interaction/remote-interaction.component.scss

@@ -1,2 +1,2 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;

client/src/app/+reset-password/reset-password.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);

client/src/app/+search/search-filters.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 form {
   margin-top: 40px;

client/src/app/+search/search.component.scss

@@ -1,9 +1,10 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin build-channel-img-size ($video-img-width) {
   $image-size: min(130px, $video-img-width);
-  $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
+  $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
 
   @include actor-avatar-size($image-size);
 

client/src/app/+signup/+register/custom-stepper.component.scss

@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $grey-color: #9CA3AB;
 $index-block-height: 32px;
@@ -69,7 +70,7 @@ header {
 
   .connector {
     flex: auto;
-    margin: $index-block-height/2 10px 0 10px;
+    margin: math.div($index-block-height, 2) 10px 0 10px;
     height: 2px;
     background-color: $grey-color;
   }

client/src/app/+signup/+register/register.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .alert {
   font-size: 15px;

client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);

client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss

@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .playlists {
   display: flex;

client/src/app/+video-channels/video-channels.component.scss

@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
 
 .root {
   --myGlobalTopPadding: 60px;

client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;

client/src/app/+videos/+video-edit/shared/video-edit.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label,
 my-dynamic-form-field ::ng-deep label {

client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .first-step-block {
   .torrent-or-magnet {

client/src/app/+videos/+video-edit/video-add-components/video-send.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $width-size: 190px;
 

client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .first-step-block {
   .form-group-channel {

client/src/app/+videos/+video-edit/video-add.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $border-width: 3px;
 $border-type: solid;

client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $markdown-icon-height: 18px;
 $markdown-icon-width: 30px;

client/src/app/+videos/+video-watch/comment/video-comment.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root-comment {
   font-size: 15px;

client/src/app/+videos/+video-watch/comment/video-comments.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 #highlighted-comment {
   margin-bottom: 25px;

client/src/app/+videos/+video-watch/player-styles.component.scss

@@ -1,4 +1,5 @@
 @use 'node_modules/video.js/dist/video-js';
 
 $assets-path: '../../assets/';
+
 @use '../../../sass/player/index';

client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .title-page-container {
   display: flex;

client/src/app/+videos/+video-watch/video-avatar-channel.component.scss

@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 @mixin main {
   @include actor-avatar-size(35px);

client/src/app/+videos/+video-watch/video-watch-playlist.component.scss

@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 @use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
 
 .playlist {
   min-width: 200px;

client/src/app/+videos/+video-watch/video-watch.component.scss

@@ -1,9 +1,10 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 @use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
 
-$player-factor: 16/9;
+$player-factor: math.div(16, 9);
 $video-info-margin-left: 44px;
 
 @function getPlayerHeight ($width) {

client/src/app/+videos/video-list/overview/video-overview.component.scss

@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .section-title {
   // make the element span a full grid row within .videos grid

client/src/app/+videos/video-list/trending/video-trending-header.component.scss

@@ -1,4 +1,4 @@
-@import '_mixins';
+@use '_mixins' as *;
 
 .btn-group label {
   border: 1px solid transparent;

client/src/app/app.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-container {
   padding-bottom: 20px;

client/src/app/core/hotkeys/hotkeys.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .cfp-hotkeys-container {
   display: flex !important;

client/src/app/header/header.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-search-typeahead {
   @include margin-right(15px);

client/src/app/header/search-typeahead.component.scss

@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 #search-video {
   @include peertube-input-text($search-input-width);
@@ -122,7 +122,7 @@ li.suggestion {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
 
-      @include media-breakpoint-up(lg) {
+      @media screen and (min-width: 1000px) {
         width: 500px;
       }
     }

client/src/app/header/suggestion.component.scss

@@ -1,4 +1,5 @@
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;

client/src/app/menu/language-chooser.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .help-to-translate {
   @include peertube-button-link;

client/src/app/menu/menu.component.scss

@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $menu-link-icon-size: 22px;
 $menu-link-icon-margin-right: 18px;
@@ -220,7 +221,7 @@ my-actor-avatar {
 
   a {
     $icon-size: 13px;
-    $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
+    $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 
     font-size: 14px;
     width: 100%;

client/src/app/menu/notification.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .content {
   scrollbar-color: auto;

client/src/app/modal/confirm.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/custom-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/instance-config-warning-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/welcome-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;

client/src/app/shared/shared-abuse-list/abuse-details.component.scss

@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .comment-html {
   background-color: #ececec;

client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .comment-flagged-account,
 .account-flagged-handle {

client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 form {
   margin: 20px 20px 0 0;

client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 textarea {
   @include peertube-textarea(100%, 100px);

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .actor {
   display: flex;

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .banner-placeholder {
   @include block-ratio('> div, > img', $banner-inverted-ratio);

client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .actor ::ng-deep .popover-image-info .popover-body {
   padding: 0;

client/src/app/shared/shared-actor-image/actor-avatar.component.scss

@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .avatar {
   --avatarSize: 100%;

client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss

@@ -1,3 +1,3 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;