Improve navigation sub-menu and tabs effects (#2971)

[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 ab9f982a27f24f782c220c45ab3c952abae190f2..eec7b4a564542c08f865840ef7ae9967cc2bdd42 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -107,6 +107,10 @@
     color: pvar(--inputPlaceholderColor);
   }
 
+  &[readonly] {
+    opacity: 0.7;
+  }
+
   @media screen and (max-width: $width) {
     width: 100%;
   }
@@ -175,11 +179,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);
@@ -195,6 +196,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;
@@ -240,7 +262,6 @@
   min-height: 30px;
 
   @include peertube-button;
-  @include orange-button;
 
   input[type=file] {
     position: absolute;
@@ -908,3 +929,23 @@
     @content;
   }
 }
+
+@mixin sub-menu-h1 {
+  ::ng-deep h1 {
+    font-size: 1.3rem;
+    border-bottom: 2px solid $grey-background-color;
+    padding-bottom: 15px;
+    margin-bottom: $sub-menu-margin-bottom;
+
+    my-global-icon {
+      margin-right: 10px;
+      vertical-align: bottom;
+      width: 24px;
+      height: 24px;
+    }
+
+    .badge {
+      margin-left: 7px;
+    }
+  }
+}