@mixin disable-default-a-behaviour {
- &:hover, &:focus {
+ &:hover, &:focus, &:active {
text-decoration: none !important;
outline: none !important;
}
}
}
+@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: #F97D46;
- }
+ outline: 0;
}
@mixin peertube-button-link {
display: inline-block;
- @include peertube-button;
@include disable-default-a-behaviour;
+ @include peertube-button;
}
@mixin avatar ($size) {
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;
+}