From fa12eacc014aae8094d108634371640f2695bf9f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 27 May 2021 17:45:36 +0200 Subject: Move to sass @use --- client/src/sass/application.scss | 16 +++---- client/src/sass/bootstrap.scss | 6 +-- client/src/sass/classes.scss | 4 +- client/src/sass/include/_actor.scss | 2 +- client/src/sass/include/_bootstrap.scss | 74 +++++++++++++++---------------- client/src/sass/include/_miniature.scss | 4 +- client/src/sass/include/_mixins.scss | 2 +- client/src/sass/include/_variables.scss | 5 ++- client/src/sass/ng-select.scss | 4 +- client/src/sass/player/context-menu.scss | 6 +-- client/src/sass/player/index.scss | 18 ++++---- client/src/sass/player/mobile.scss | 4 +- client/src/sass/player/peertube-skin.scss | 13 +++--- client/src/sass/player/settings-menu.scss | 6 +-- client/src/sass/player/spinner.scss | 4 +- client/src/sass/player/stats.scss | 2 +- client/src/sass/primeng-custom.scss | 6 +-- 17 files changed, 89 insertions(+), 87 deletions(-) (limited to 'client/src/sass') diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 799b8c881..51c21107b 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,16 +1,16 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@import '_bootstrap-variables'; -@import '_variables'; -@import '_mixins'; +@use '_bootstrap-variables'; +@use '_variables'; +@use '_mixins'; -@import '_fonts'; +@use '_fonts'; -@import './bootstrap'; -@import './primeng-custom'; -@import './ng-select'; +@use './bootstrap'; +@use './primeng-custom'; +@use './ng-select'; -@import './classes'; +@use './classes'; [hidden] { display: none !important; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 501587eb2..9c734c4fe 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,8 +1,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@import '_bootstrap'; +@use '_bootstrap'; -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; // 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 85bfce7f4..44c584d1c 100644 --- a/client/src/sass/classes.scss +++ b/client/src/sass/classes.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; .peertube-button { @include peertube-button; diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index ab2038dde..31c145319 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -1,4 +1,4 @@ -@import '_variables'; +@use '_variables'; @mixin section-label-responsive { color: pvar(--mainColor); diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index d9e5efc02..4f4f48e58 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -1,40 +1,40 @@ -@import './_bootstrap-variables'; +@use './_bootstrap-variables'; -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; +@use '~bootstrap/scss/functions'; +@use '~bootstrap/scss/variables'; -@import '~bootstrap/scss/mixins'; -@import '~bootstrap/scss/root'; -@import '~bootstrap/scss/reboot'; -@import '~bootstrap/scss/type'; -//@import '~bootstrap/scss/images'; -//@import '~bootstrap/scss/code'; -@import '~bootstrap/scss/grid'; -@import '~bootstrap/scss/tables'; -@import '~bootstrap/scss/forms'; -@import '~bootstrap/scss/buttons'; -//@import '~bootstrap/scss/transitions'; -@import '~bootstrap/scss/dropdown'; -@import '~bootstrap/scss/button-group'; -@import '~bootstrap/scss/input-group'; -//@import '~bootstrap/scss/custom-forms'; -@import '~bootstrap/scss/nav'; -//@import '~bootstrap/scss/navbar'; -@import '~bootstrap/scss/card'; -//@import '~bootstrap/scss/breadcrumb'; -//@import '~bootstrap/scss/pagination'; -@import '~bootstrap/scss/badge'; -//@import '~bootstrap/scss/jumbotron'; -@import '~bootstrap/scss/alert'; -//@import '~bootstrap/scss/progress'; -//@import '~bootstrap/scss/media'; -//@import '~bootstrap/scss/list-group'; -@import '~bootstrap/scss/close'; -@import '~bootstrap/scss/modal'; -@import '~bootstrap/scss/tooltip'; -@import '~bootstrap/scss/popover'; -//@import '~bootstrap/scss/carousel'; -@import '~bootstrap/scss/utilities'; -//@import '~bootstrap/scss/print'; +@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'; -@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; +@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 0d3f2b6e0..fb12da49e 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; @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 62e1ca163..bf7504d91 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,4 +1,4 @@ -@import '_variables'; +@use '_variables'; @mixin disable-default-a-behaviour { &:hover, diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index d54563df6..b9c82ea77 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -1,4 +1,5 @@ -@import '_bootstrap-variables'; +@use 'sass:math'; +@use '_bootstrap-variables'; $small-view: 800px; $mobile-view: 500px; @@ -53,7 +54,7 @@ $sub-menu-height: 81px; $channel-background-color: #f6ede8; -$banner-inverted-ratio: 1/6; +$banner-inverted-ratio: #{math.div(1, 6)}; $max-channels-width: 1200px; diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index ecd33babe..6c9d3a407 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -1,4 +1,4 @@ -@import '_variables'; +@use '_variables'; $ng-select-highlight: #f2690d; // $ng-select-primary-text: #333 !default; @@ -14,7 +14,7 @@ $ng-select-height: 30px; $ng-select-value-padding-left: 15px; $ng-select-value-font-size: 15px; -@import '~@ng-select/ng-select/scss/default.theme'; +@use '~@ng-select/ng-select/scss/default.theme'; .ng-select { font-size: $ng-select-value-font-size; diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index 501c68ffd..a207d8a28 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -1,6 +1,6 @@ -@import '_variables'; -@import '_mixins'; -@import './_player-variables'; +@use '_variables'; +@use '_mixins'; +@use './_player-variables'; $context-menu-width: 350px; diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss index e674fa2f6..385365b6d 100644 --- a/client/src/sass/player/index.scss +++ b/client/src/sass/player/index.scss @@ -1,9 +1,9 @@ -@import './peertube-skin'; -@import './mobile'; -@import './context-menu'; -@import './settings-menu'; -@import './spinner'; -@import './upnext'; -@import './bezels'; -@import './playlist'; -@import './stats'; +@use './peertube-skin'; +@use './mobile'; +@use './context-menu'; +@use './settings-menu'; +@use './spinner'; +@use './upnext'; +@use './bezels'; +@use './playlist'; +@use './stats'; diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss index 26066d218..dde2c3127 100644 --- a/client/src/sass/player/mobile.scss +++ b/client/src/sass/player/mobile.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; /* Special mobile style */ diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 148992089..1a84bd7f0 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -1,6 +1,7 @@ -@import '_variables'; -@import '_mixins'; -@import './_player-variables'; +@use 'sass:math'; +@use '_variables'; +@use '_mixins'; +@use './_player-variables'; body { --embedForegroundColor: #{$primary-foreground-color}; @@ -11,8 +12,8 @@ body { @mixin big-play-button-triangle-size($triangle-size) { width: $triangle-size; height: $triangle-size; - top: calc(50% - #{$triangle-size / 2}); - left: calc(53% - #{($triangle-size / 2)}); + top: calc(50% - math.div($triangle-size / 2)); + left: calc(53% - math.div($triangle-size / 2)); } .video-js.vjs-peertube-skin { @@ -69,7 +70,7 @@ body { width: $big-play-width; height: $big-play-height; line-height: $big-play-height; - margin-top: -($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/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 2183a7dbc..2d0b58a1d 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -1,6 +1,6 @@ -@import '_variables'; -@import '_mixins'; -@import './_player-variables'; +@use '_variables'; +@use '_mixins'; +@use './_player-variables'; $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 94f4d1008..bd7efd3b8 100644 --- a/client/src/sass/player/spinner.scss +++ b/client/src/sass/player/spinner.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; // 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 c6388ed13..18b3f0413 100644 --- a/client/src/sass/player/stats.scss +++ b/client/src/sass/player/stats.scss @@ -1,4 +1,4 @@ -@import './_player-variables'; +@use './_player-variables'; $stats-width: 420px; $contextmenu-background-color: rgba(0, 0, 0, 0.6); diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 4cd27bea8..e6d4b6060 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -1,8 +1,8 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables'; +@use '_mixins'; /* stylelint-disable */ -@import '~primeng/resources/primeng.css'; +@use '~primeng/resources/primeng.css'; // Override primeng style we don't want input[type=button] { -- cgit v1.2.3