mirror of https://github.com/Chocobozzz/PeerTube
85 lines
1.2 KiB
SCSS
85 lines
1.2 KiB
SCSS
@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 {
|
|
display: inline-block;
|
|
}
|
|
|
|
a[class$=-button],
|
|
span[class$=-button] {
|
|
> span {
|
|
@include margin-left(5px);
|
|
}
|
|
}
|
|
|
|
.action-button {
|
|
width: 100%; // useful for ellipsis, allow to define a max-width on host component
|
|
|
|
my-loader.displayed {
|
|
@include margin-right(3px);
|
|
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.has-icon {
|
|
@include button-with-icon(21px);
|
|
}
|
|
|
|
&.icon-only my-global-icon {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
.orange-button,
|
|
.grey-button {
|
|
@include peertube-button;
|
|
}
|
|
|
|
.orange-button-link,
|
|
.grey-button-link {
|
|
@include peertube-button-link;
|
|
}
|
|
|
|
.orange-button,
|
|
.orange-button-link {
|
|
@include orange-button;
|
|
}
|
|
|
|
.grey-button,
|
|
.grey-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) {
|
|
@include responsive-label;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $small-view) {
|
|
.responsive-label {
|
|
@include responsive-label;
|
|
}
|
|
}
|