X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_mixins.scss;h=a25741d91036708c048e24351753ab602408f0ce;hb=HEAD;hp=cafe830fe15a7a7216c68a930b8c235ec5e0f628;hpb=30f939c4b785e8cf2ad829a86f4b2f5892c2fda8;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index cafe830fe..a25741d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 
 @import '_bootstrap-mixins';
@@ -8,13 +10,16 @@
   &:focus,
   &:active {
     text-decoration: none !important;
+  }
+
+  &:focus:not(.focus-visible) {
     outline: none !important;
   }
 }
 
 @mixin disable-outline {
   &:focus:not(.focus-visible) {
-    outline: none;
+    outline: none !important;
   }
 }
 
@@ -24,20 +29,6 @@
   text-overflow: ellipsis;
 }
 
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
-  display: block;
-  /* Fallback for non-webkit */
-  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
-  -webkit-line-clamp: $number-of-lines;
-  -webkit-box-orient: vertical;
-  /* Fallback for non-webkit */
-  font-size: $font-size;
-  line-height: $line-height;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: $font-size * $number-of-lines;
-}
-
 @mixin muted {
   color: pvar(--greyForegroundColor) !important;
 }
@@ -231,7 +222,7 @@
 }
 
 @mixin danger-button {
-  $color: lighten($color: #c54130, $amount: 10);
+  $color: color.adjust($color: #c54130, $lightness: 10%);
   $text: #fff6f5;
 
   @include button-focus(scale-color($color, $alpha: -95%));
@@ -244,7 +235,7 @@
   &:focus,
   &[disabled],
   &.disabled {
-    background-color: lighten($color: $color, $amount: 10);
+    background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
   &[disabled],
@@ -615,12 +606,6 @@
   margin-bottom: 10px;
 }
 
-@mixin create-button {
-  @include peertube-button-link;
-  @include orange-button;
-  @include button-with-icon(20px, 5px, -1px);
-}
-
 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
   display: flex;
   min-height: $min-height;
@@ -693,7 +678,7 @@
     transition: width 0.6s ease;
 
     &.red {
-      background-color: lighten($color: #c54130, $amount: 10);
+      background-color: color.adjust($color: #c54130, $lightness: 10%);
     }
   }
 }
@@ -738,7 +723,7 @@
 
   > div {
     box-sizing: border-box;
-    flex: 0 0 percentage(math.div(1, 3));
+    flex: 0 0 math.percentage(math.div(1, 3));
     padding: 0 5px;
     margin-bottom: 10px;
 
@@ -849,7 +834,7 @@
 // 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: math.div(9, 16)) {
-  $padding-percent: percentage($inverted-ratio);
+  $padding-percent: math.percentage($inverted-ratio);
 
   position: relative;
   height: 0;
@@ -906,7 +891,7 @@
 
 @mixin on-small-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $small-view + $menu-width) {
+    @media screen and (max-width: #{$small-view + $menu-width}) {
       @content;
     }
   }
@@ -920,7 +905,7 @@
 
 @mixin on-mobile-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $mobile-view + $menu-width) {
+    @media screen and (max-width: #{$mobile-view + $menu-width}) {
       @content;
     }
   }