]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/shared/shared-main/buttons/button.component.scss
Fix report modal error
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / buttons / button.component.scss
1 @use '_variables' as *;
2 @use '_mixins' as *;
3
4 @mixin responsive-label {
5 .action-button {
6 padding: 0 13px;
7 }
8
9 .button-label {
10 display: none;
11 }
12 }
13
14 :host {
15 outline: none;
16 display: inline-block;
17 }
18
19 my-small-loader ::ng-deep .root {
20 display: inline-block;
21 margin: 0 3px 0 0;
22 width: 20px;
23 }
24
25 a[class$=-button],
26 span[class$=-button] {
27 > span {
28 @include margin-left(5px);
29 }
30 }
31
32 .action-button {
33 @include peertube-button-link;
34 @include button-with-icon(21px);
35
36 width: 100%; // useful for ellipsis, allow to define a max-width on host component
37 }
38
39 .orange-button {
40 @include peertube-button;
41 @include orange-button;
42 }
43
44 .orange-button-link {
45 @include peertube-button-link;
46 @include orange-button;
47 }
48
49 .grey-button {
50 @include peertube-button;
51 @include grey-button;
52 }
53
54 .grey-button-link {
55 @include peertube-button-link;
56 @include grey-button;
57 }
58
59 .button-label {
60 @include ellipsis;
61 }
62
63 // In a table, try to minimize the space taken by this button
64 @media screen and (max-width: 1400px) {
65 :host-context(td) {
66 @include responsive-label;
67 }
68 }
69
70 @media screen and (max-width: $small-view) {
71 .responsive-label {
72 @include responsive-label;
73 }
74 }