From db129781cabca2c66d18cd1dcdfe40f87e9ec030 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 10 Jun 2022 10:04:23 +0200 Subject: Fix button icon margin --- client/src/app/shared/shared-main/buttons/button.component.html | 2 +- client/src/app/shared/shared-main/buttons/button.component.scss | 6 ++++++ client/src/app/shared/shared-main/buttons/button.component.ts | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) (limited to 'client/src/app/shared/shared-main/buttons') diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html index 11c8ffedd..d1a4215e6 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.html +++ b/client/src/app/shared/shared-main/buttons/button.component.html @@ -1,6 +1,6 @@ - + {{ label }} 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 c782ac3ef..c53b8f2e5 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -34,6 +34,12 @@ span[class$=-button] { @include button-with-icon(21px); width: 100%; // useful for ellipsis, allow to define a max-width on host component + + &.icon-only { + my-global-icon { + margin: 0; + } + } } .orange-button { diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts index b97012d9a..52936a4d4 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.ts +++ b/client/src/app/shared/shared-main/buttons/button.component.ts @@ -20,6 +20,7 @@ export class ButtonComponent { return { [this.className]: true, disabled: this.disabled, + 'icon-only': !this.label, 'responsive-label': this.responsiveLabel } } -- cgit v1.2.3