Move to sass module

5 files changed, 12 insertions, 50 deletions

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;