X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2F_mixins.scss;h=d9c9e45ec09537fbecefa6a6439f4f1378537cbe;hb=cadb46d832724ea1a17b085b992142aa32e212be;hp=6a18f7a76d31d77f4552f25fed97b0d32eb8d28d;hpb=ce0e281d46a7b574dcccb47958743656532bd312;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 6a18f7a76..d9c9e45ec 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -1,5 +1,5 @@
 @mixin disable-default-a-behaviour {
-  &:hover, &:focus {
+  &:hover, &:focus, &:active {
     text-decoration: none !important;
     outline: none !important;
   }
@@ -19,22 +19,46 @@
   }
 }
 
+@mixin orange-button {
+  color: #fff;
+  background-color: $orange-color;
+
+  &:hover, &:active, &:focus {
+    color: #fff;
+    background-color: $orange-hoover-color;
+  }
+
+  &[disabled], &.disabled {
+    cursor: default;
+    color: #fff;
+    background-color: #C6C6C6;
+  }
+}
+
+@mixin grey-button {
+  background-color: $grey-color;
+  color: #585858;
+
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
+    color: #585858;
+    background-color: $grey-hoover-color;
+  }
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
+}
+
 @mixin peertube-button {
   border: none;
-  color: #fff;
   font-weight: $font-semibold;
   font-size: 15px;
   height: $button-height;
   line-height: $button-height;
   border-radius: 3px;
   text-align: center;
-  background-color: $orange-color;
   padding: 0 17px 0 13px;
   cursor: pointer;
-
-  &:hover {
-    background-color: $orange-hoover-color;
-  }
 }
 
 @mixin peertube-button-link {
@@ -48,3 +72,23 @@
   width: $size;
   height: $size;
 }
+
+@mixin icon ($size) {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: $size;
+  height: $size;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+
+@mixin peertube-select ($width) {
+  background-color: #fff;
+  border: 1px solid #C6C6C6;
+  height: $button-height;
+  width: $width;
+  border-radius: 3px;
+  padding-left: 15px;
+}