Merge branch 'release/2.1.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 099a909bbc4c42e590ad2ead5ab23bd097245bff..317781e0e9755ad077db1f27d205a1f1a6e3cd1a 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -77,11 +77,17 @@
   }
 }
 
+@mixin button-focus-visible-shadow($color) {
+  &.focus-visible {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
   width: $width;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   padding-left: 15px;
@@ -118,6 +124,8 @@
 }
 
 @mixin orange-button {
+  @include button-focus-visible-shadow(var(--mainHoverColor));
+
   &, &:active, &:focus {
     color: #fff;
     background-color: var(--mainColor);
@@ -169,7 +177,6 @@
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
-  outline: 0;
 }
 
 @mixin peertube-button-link {
@@ -179,6 +186,15 @@
   @include peertube-button;
 }
 
+@mixin peertube-button-outline {
+  display: inline-block;
+
+  @include disable-default-a-behaviour;
+  @include peertube-button;
+
+  border: 1px solid;
+}
+
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
   my-global-icon {
     position: relative;
@@ -245,7 +261,7 @@
   width: $width;
   border-radius: 3px;
   overflow: hidden;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
 
@@ -453,7 +469,7 @@
 }
 
 @mixin sub-menu-with-actor {
-  height: 160px;
+  height: max-content;
   display: flex;
   flex-direction: column;
   align-items: flex-start;