Design second video upload step

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

diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index ddc9c6766695802df1cbc082840ba29a06d13017..d9c9e45ec09537fbecefa6a6439f4f1378537cbe 100644 (file)
--- 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;
   }
@@ -23,18 +23,30 @@
   color: #fff;
   background-color: $orange-color;
 
-  &:hover {
+  &: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 {
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
+    color: #585858;
     background-color: $grey-hoover-color;
   }
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
 }
 
 @mixin peertube-button {
@@ -60,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;
+}