Move to sass module

19 files changed, 91 insertions, 98 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 51c21107b..6b32d4cd6 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,8 +1,7 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
-@use '_bootstrap-variables';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @use '_fonts';
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 9c734c4fe..058033166 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,8 +1,35 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@use '_bootstrap';
 
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import './_bootstrap-variables';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/utilities';
+
+@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
 
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 44c584d1c..2d8117ee5 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-button {
   @include peertube-button;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 31c145319..b135bbb6d 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin section-label-responsive {
   color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
deleted file mode 100644
index 4f4f48e58..000000000
--- a/client/src/sass/include/_bootstrap.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use './_bootstrap-variables';
-
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
-
-@use '~bootstrap/scss/mixins';
-@use '~bootstrap/scss/root';
-@use '~bootstrap/scss/reboot';
-@use '~bootstrap/scss/type';
-//@use '~bootstrap/scss/images';
-//@use '~bootstrap/scss/code';
-@use '~bootstrap/scss/grid';
-@use '~bootstrap/scss/tables';
-@use '~bootstrap/scss/forms';
-@use '~bootstrap/scss/buttons';
-//@use '~bootstrap/scss/transitions';
-@use '~bootstrap/scss/dropdown';
-@use '~bootstrap/scss/button-group';
-@use '~bootstrap/scss/input-group';
-//@use '~bootstrap/scss/custom-forms';
-@use '~bootstrap/scss/nav';
-//@use '~bootstrap/scss/navbar';
-@use '~bootstrap/scss/card';
-//@use '~bootstrap/scss/breadcrumb';
-//@use '~bootstrap/scss/pagination';
-@use '~bootstrap/scss/badge';
-//@use '~bootstrap/scss/jumbotron';
-@use '~bootstrap/scss/alert';
-//@use '~bootstrap/scss/progress';
-//@use '~bootstrap/scss/media';
-//@use '~bootstrap/scss/list-group';
-@use '~bootstrap/scss/close';
-@use '~bootstrap/scss/modal';
-@use '~bootstrap/scss/tooltip';
-@use '~bootstrap/scss/popover';
-//@use '~bootstrap/scss/carousel';
-@use '~bootstrap/scss/utilities';
-//@use '~bootstrap/scss/print';
-
-@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index fb12da49e..a1b963400 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bf7504d91..4d4c52b34 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use 'sass:math';
+@use '_variables' as *;
 
 @mixin disable-default-a-behaviour {
   &:hover,
@@ -745,7 +746,7 @@
 
   > div {
     box-sizing: border-box;
-    flex: 0 0 percentage(1/3);
+    flex: 0 0 percentage(math.div(1, 3));
     padding: 0 5px;
     margin-bottom: 10px;
 
@@ -867,7 +868,7 @@
 // applies ratio (default to 16:9) to a child element (using $selector) only using
 // 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: 9/16) {
+@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
   $padding-percent: percentage($inverted-ratio);
 
   position: relative;
@@ -916,8 +917,8 @@
   top: 50%;
   transform: translate(-50%, -50%) scale(0.5);
 
-  border-top: ($height / 2) solid transparent;
-  border-bottom: ($height / 2) solid transparent;
+  border-top: #{math.div($height, 2)} solid transparent;
+  border-bottom: #{math.div($height, 2)} solid transparent;
 
   border-left: $width solid rgba(255, 255, 255, 0.95);
 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b9c82ea77..8f3d3c3b4 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,5 +1,4 @@
 @use 'sass:math';
-@use '_bootstrap-variables';
 
 $small-view: 800px;
 $mobile-view: 500px;
@@ -54,7 +53,8 @@ $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
 
-$banner-inverted-ratio: #{math.div(1, 6)};
+// FIXME: cannot use math.div here because of compilation error
+$banner-inverted-ratio: 0.1666666666;
 
 $max-channels-width: 1200px;
 
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 6c9d3a407..c40b355be 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index b8c3325d0..629a677b1 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -1,3 +1,5 @@
+@use '_mixins' as *;
+
 @keyframes bezels-fadeout {
   from {
     opacity: 1;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index a207d8a28..5548e2712 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $context-menu-width: 350px;
 
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index dde2c3127..86c090200 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 /* Special mobile style */
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 1a84bd7f0..17fd14342 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 body {
   --embedForegroundColor: #{$primary-foreground-color};
@@ -12,8 +12,8 @@ body {
 @mixin big-play-button-triangle-size($triangle-size) {
   width: $triangle-size;
   height: $triangle-size;
-  top: calc(50% - math.div($triangle-size / 2));
-  left: calc(53% - math.div($triangle-size / 2));
+  top: calc(50% - math.div($triangle-size, 2));
+  left: calc(53% - math.div($triangle-size, 2));
 }
 
 .video-js.vjs-peertube-skin {
@@ -57,7 +57,7 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    @include margin-left(-($big-play-width / 2));
+    @include margin-left(-(math.div($big-play-width, 2)));
 
     outline: 0;
     font-size: 6em;
@@ -70,7 +70,7 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-top: -(math.div($big-play-height / 2));
+    margin-top: -(math.div($big-play-height, 2));
     transition: 0.4s opacity;
 
     &::-moz-focus-inner {
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 3279bd263..f7e67ba16 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -1,3 +1,7 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
 $playlist-menu-width: 350px;
 
 .vjs-playlist-menu {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2d0b58a1d..d495785b3 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $setting-transition-duration: 0.15s;
 $setting-transition-easing: ease-out;
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index bd7efd3b8..84ebbe8ee 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 // Thanks: https://projects.lukehaas.me/css-loaders/
 .vjs-loading-spinner {
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 18b3f0413..0e337aa19 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,6 @@
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $stats-width: 420px;
 $contextmenu-background-color: rgba(0, 0, 0, 0.6);
@@ -6,7 +8,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
 .video-js {
 
   .vjs-stats-content {
-    @include transition(opacity 0.1s);
+    transition: opacity 0.1s;
 
     position: absolute;
     background-color: $contextmenu-background-color;
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 922a9674d..2618d79d4 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -4,14 +4,10 @@ $browser-context: 16;
   @return #{$pixels/$context}em;
 }
 
-@mixin transition($string: $transition--default) {
-  transition: $string;
-}
-
 .video-js {
 
   .vjs-upnext-content {
-    @include transition(opacity 0.1s);
+    transition: opacity 0.1s;
 
     font-size: 1.8em;
     pointer-events: auto;
@@ -93,7 +89,7 @@ $browser-context: 16;
   }
 
   .vjs-upnext-autoplay-icon {
-    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
+    transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
 
     position: absolute;
     top: 50%;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index e6d4b6060..1f50eea54 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,8 +1,8 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 /* stylelint-disable */
-@use '~primeng/resources/primeng.css';
+@use 'primeng/resources/primeng';
 
 // Override primeng style we don't want
 input[type=button] {
@@ -620,20 +620,20 @@ p-table {
       background-color: pvar(--submenuBackgroundColor) !important;
 
       .pi {
-        @extend .glyphicon;
+        @extend .glyphicon !optional;
 
         color: #000 !important;
         font-size: 11px !important;
         top: 0 !important;
 
         &.pi-sort-amount-up-alt {
-          @extend .glyphicon-triangle-top;
+          @extend .glyphicon-triangle-top !optional;
 
           color: pvar(--mainForegroundColor) !important;
         }
 
         &.pi-sort-amount-down {
-          @extend .glyphicon-triangle-bottom;
+          @extend .glyphicon-triangle-bottom !optional;
 
           color: pvar(--mainForegroundColor) !important;
         }
@@ -711,23 +711,23 @@ p-table {
         }
 
         &.p-paginator-first {
-          @extend .glyphicon-step-backward;
+          @extend .glyphicon-step-backward !optional;
         }
 
         &.p-paginator-prev {
-          @extend .glyphicon-chevron-left;
+          @extend .glyphicon-chevron-left !optional;
 
           @include margin-right(10px);
         }
 
         &.p-paginator-next {
-          @extend .glyphicon-chevron-right;
+          @extend .glyphicon-chevron-right !optional;
 
           @include margin-left(10px);
         }
 
         &.p-paginator-last {
-          @extend .glyphicon-step-forward;
+          @extend .glyphicon-step-forward !optional;
         }
       }
 
@@ -806,7 +806,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .glyphicon-chevron-right;
+      @extend .glyphicon-chevron-right !optional;
       @include glyphicon-light;
 
       color: #000 !important;
@@ -818,7 +818,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .glyphicon-chevron-left;
+      @extend .glyphicon-chevron-left !optional;
       @include glyphicon-light;
 
       color: #000 !important;
@@ -833,14 +833,14 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .glyphicon-chevron-up;
+      @extend .glyphicon-chevron-up !optional;
       @include glyphicon-light;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .glyphicon-chevron-down;
+      @extend .glyphicon-chevron-down !optional;
       @include glyphicon-light;
 
       color: #000 !important;