X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-main%2Fbuttons%2Fbutton.component.scss;h=09b5f95d7cfdfb0b9b4880f60e3877a40735cc19;hb=faf7eab7d9528451570a26e27093159045346064;hp=f73b7b8087ad903809fd02ce00edbafd243e0594;hpb=f6e98f0a4e812cd7de3227faaa9555c6a03bbd4e;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss index f73b7b808..09b5f95d7 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -1,6 +1,16 @@ @import '_variables'; @import '_mixins'; +@mixin responsive-label { + .action-button { + padding: 0 13px; + } + + .button-label { + display: none; + } +} + :host { outline: none; } @@ -46,12 +56,12 @@ span[class$=-button] { // 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; } }