fix reactive file upload button

[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 5971bb72a46422cc6283160edb0981032347e956..c6822b714592003d0ab650d959a867fe06bd8152 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -48,6 +48,11 @@
 }
 
 @mixin apply-svg-color ($color) {
+  ::ng-deep .feather,
+  ::ng-deep .material {
+    color: $color;
+  }
+
   ::ng-deep svg {
     path[fill="#000"],
     g[fill="#000"],
@@ -170,11 +175,8 @@
 
 @mixin grey-button {
   @include button-focus($grey-button-outline-color);
-
-  &, &:active, &:focus {
-    background-color: $grey-background-color;
-    color: pvar(--greyForegroundColor);
-  }
+  background-color: $grey-background-color;
+  color: pvar(--greyForegroundColor);
 
   &:hover, &:active, &:focus, &[disabled], &.disabled {
     color: pvar(--greyForegroundColor);
@@ -190,6 +192,27 @@
   }
 }
 
+@mixin danger-button {
+  $color: lighten($color: #c54130, $amount: 10);
+  $text: #fff6f5;
+
+  @include button-focus(scale-color($color, $alpha: -95%));
+  background-color: $color;
+  color: $text;
+
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
+    background-color: lighten($color: $color, $amount: 10);
+  }
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
+
+  my-global-icon {
+    @include apply-svg-color($text)
+  }
+}
+
 @mixin peertube-button {
   border: none;
   font-weight: $font-semibold;
@@ -235,7 +258,6 @@
   min-height: 30px;
 
   @include peertube-button;
-  @include orange-button;
 
   input[type=file] {
     position: absolute;
@@ -804,10 +826,12 @@
 }
 
 @mixin chip {
+  --chip-radius: 5rem;
+  --chip-padding: .2rem .4rem;
   $avatar-height: 1.2rem;
 
   align-items: center;
-  border-radius: 5rem;
+  border-radius: var(--chip-radius);
   display: inline-flex;
   font-size: 90%;
   color: pvar(--mainForegroundColor);
@@ -816,12 +840,17 @@
   margin: .1rem;
   max-width: 320px;
   overflow: hidden;
-  padding: .2rem .4rem;
+  padding: var(--chip-padding);
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
 
+  &.rectangular {
+    --chip-radius: .2rem;
+    --chip-padding: .2rem .3rem;
+  }
+
   .avatar {
     margin-left: -.4rem;
     margin-right: .2rem;
@@ -856,15 +885,6 @@
   }
 }
 
-@mixin empty-state {
-  min-height: 40vh;
-  max-height: 500px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 @mixin admin-sub-header-responsive ($horizontal-margins) {
   flex-direction: column;