}
@mixin apply-svg-color ($color) {
+ ::ng-deep .feather,
+ ::ng-deep .material {
+ color: $color;
+ }
+
::ng-deep svg {
path[fill="#000"],
g[fill="#000"],
@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);
}
}
+@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;
min-height: 30px;
@include peertube-button;
- @include orange-button;
input[type=file] {
position: absolute;