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

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3941cf374..a25741d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,21 +1,25 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 
 @import '_bootstrap-mixins';
 
-
 @mixin disable-default-a-behaviour {
   &:hover,
   &: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;
   }
 }
 
@@ -25,20 +29,6 @@
   text-overflow: ellipsis;
 }
 
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
-  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: $font-size;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: $font-size * $number-of-lines;
-}
-
 @mixin muted {
   color: pvar(--greyForegroundColor) !important;
 }
@@ -92,8 +82,16 @@
   }
 }
 
-@mixin peertube-input-text($width) {
-  padding: 4px 15px;
+@mixin rounded-line-height-1-5 ($font-size) {
+  line-height: $font-size + math.round(math.div($font-size, 2));
+}
+
+@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
+  @include rounded-line-height-1-5($font-size);
+
+  font-size: $font-size;
+
+  padding: 3px 15px;
   display: inline-block;
   width: $width;
   max-width: $width;
@@ -101,8 +99,6 @@
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
-  font-size: $form-input-font-size;
-  line-height: $form-input-line-height;
 
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
@@ -156,6 +152,7 @@
 @mixin orange-button-inverted {
   @include button-focus(pvar(--mainColorLightest));
 
+  padding: 2px 13px;
   border: 2px solid pvar(--mainColor);
   font-weight: $font-semibold;
 
@@ -225,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%));
@@ -238,7 +235,7 @@
   &:focus,
   &[disabled],
   &.disabled {
-    background-color: lighten($color: $color, $amount: 10);
+    background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
   &[disabled],
@@ -252,6 +249,8 @@
 }
 
 @mixin peertube-button {
+  @include rounded-line-height-1-5($button-font-size);
+
   padding: 4px 13px;
 
   border: 0;
@@ -403,15 +402,17 @@
   }
 
   select {
-    padding: 4px 35px 4px 12px;
+    @include rounded-line-height-1-5($form-input-font-size);
+
+    font-size: $form-input-font-size;
+
+    padding: 3px 35px 3px 12px;
     position: relative;
     border: 1px solid pvar(--inputBorderColor);
     background: transparent none;
     appearance: none;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
-    font-size: $form-input-font-size;
-    line-height: $form-input-line-height;
 
     &:focus {
       outline: none;
@@ -438,6 +439,9 @@
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
+
+      // No border, add +1 to vertical padding
+      padding: 4px 35px 4px 12px;
     }
   }
 }
@@ -602,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;
@@ -680,7 +678,7 @@
     transition: width 0.6s ease;
 
     &.red {
-      background-color: lighten($color: #c54130, $amount: 10);
+      background-color: color.adjust($color: #c54130, $lightness: 10%);
     }
   }
 }
@@ -725,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;
 
@@ -836,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;
@@ -893,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;
     }
   }
@@ -907,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;
     }
   }
@@ -920,11 +918,11 @@
 }
 
 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
-  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+  @if $arg2 == null and $arg3 == null and $arg4 == null {
     @include margin-original($arg1, $arg1, $arg1, $arg1);
-  } @else if $arg3 ==null and $arg4 ==null {
+  } @else if $arg3 == null and $arg4 == null {
     @include margin-original($arg1, $arg2, $arg1, $arg2);
-  } @else if $arg4 ==null {
+  } @else if $arg4 == null {
     @include margin-original($arg1, $arg2, $arg3, $arg2);
   } @else {
     @include margin-original($arg1, $arg2, $arg3, $arg4);
@@ -967,11 +965,11 @@
 
 
 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
-  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+  @if $arg2 == null and $arg3 == null and $arg4 == null {
     @include padding-original($arg1, $arg1, $arg1, $arg1);
-  } @else if $arg3 ==null and $arg4 ==null {
+  } @else if $arg3 == null and $arg4 == null {
     @include padding-original($arg1, $arg2, $arg1, $arg2);
-  } @else if $arg4 ==null {
+  } @else if $arg4 == null {
     @include padding-original($arg1, $arg2, $arg3, $arg2);
   } @else {
     @include padding-original($arg1, $arg2, $arg3, $arg4);