-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin responsive-label {
+ .action-button {
+ padding: 0 13px;
+ }
+
+ .button-label {
+ display: none;
+ }
+
+ my-global-icon {
+ margin: 0 !important;
+ }
+}
+
+:host {
+ outline: none;
+ display: inline-block;
+}
my-small-loader ::ng-deep .root {
display: inline-block;
width: 20px;
}
+a[class$=-button],
+span[class$=-button] {
+ > span {
+ @include margin-left(5px);
+ }
+}
+
.action-button {
- @include peertube-button-link;
- @include button-with-icon(21px, 0, -1px);
+ width: 100%; // useful for ellipsis, allow to define a max-width on host component
+
+ &.has-icon {
+ @include button-with-icon(21px);
+ }
- > span:nth-child(2) {
- margin-left: 5px;
+ &.icon-only my-global-icon {
+ margin: 0 !important;
}
}
-.orange-button {
+.orange-button,
+.grey-button {
@include peertube-button;
- @include orange-button;
}
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
@include peertube-button-link;
- @include orange-button;
}
-.grey-button {
- @include peertube-button;
- @include grey-button;
+.orange-button,
+.orange-button-link {
+ @include orange-button;
}
+.grey-button,
.grey-button-link {
- @include peertube-button-link;
@include grey-button;
}
+.button-label {
+ @include ellipsis;
+}
+
// In a table, try to minimize the space taken by this button
@media screen and (max-width: 1400px) {
:host-context(td) {
- .action-button {
- padding: 0 13px;
- }
+ @include responsive-label;
+ }
+}
- .button-label {
- display: none;
- }
+@media screen and (max-width: $small-view) {
+ .responsive-label {
+ @include responsive-label;
}
}