From 8cbc40b2fe9d36ef0505b9441276ca561342e9e9 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 27 May 2021 18:25:00 +0200 Subject: Move to sass module --- client/src/sass/application.scss | 5 ++-- client/src/sass/bootstrap.scss | 33 ++++++++++++++++++++++--- client/src/sass/classes.scss | 4 ++-- client/src/sass/include/_actor.scss | 3 ++- client/src/sass/include/_bootstrap.scss | 40 ------------------------------- client/src/sass/include/_miniature.scss | 4 ++-- client/src/sass/include/_mixins.scss | 11 +++++---- client/src/sass/include/_variables.scss | 4 ++-- client/src/sass/ng-select.scss | 3 ++- client/src/sass/player/bezels.scss | 2 ++ client/src/sass/player/context-menu.scss | 6 ++--- client/src/sass/player/mobile.scss | 4 ++-- client/src/sass/player/peertube-skin.scss | 14 +++++------ client/src/sass/player/playlist.scss | 4 ++++ client/src/sass/player/settings-menu.scss | 6 ++--- client/src/sass/player/spinner.scss | 4 ++-- client/src/sass/player/stats.scss | 6 +++-- client/src/sass/player/upnext.scss | 8 ++----- client/src/sass/primeng-custom.scss | 28 +++++++++++----------- 19 files changed, 91 insertions(+), 98 deletions(-) delete mode 100644 client/src/sass/include/_bootstrap.scss (limited to 'client/src/sass') 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; -- cgit v1.2.3