Button: Force content (icon + text) to be on 1 line

This commit is contained in:
Molkobain
2021-04-04 22:23:50 +02:00
parent 0bc2f2c818
commit 54b718e7cd

View File

@@ -461,12 +461,14 @@ $ibo-button-colors: (
} }
.ibo-button { .ibo-button {
padding: $ibo-button--padding-y $ibo-button--padding-x; display: inline-flex; /* Used to allow truncated text on .ibo-button--label */
border: $ibo-button--border; padding: $ibo-button--padding-y $ibo-button--padding-x;
border-radius: $ibo-button--border-radius; border: $ibo-button--border;
cursor: pointer; border-radius: $ibo-button--border-radius;
cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
@extend %ibo-font-ral-sembol-100; white-space: nowrap; /* To force sub elements to be on 1 line */
@extend %ibo-font-ral-sembol-100;
& ~ .ibo-button { & ~ .ibo-button {
margin-left: $ibo-button--sibling-spacing; margin-left: $ibo-button--sibling-spacing;
@@ -477,6 +479,10 @@ $ibo-button-colors: (
} }
} }
.ibo-button--label {
@extend %ibo-text-truncated-with-ellipsis;
}
/* Only when a button has both an icon and a label */ /* Only when a button has both an icon and a label */
.ibo-button--icon + .ibo-button--label { .ibo-button--icon + .ibo-button--label {
margin-left: $ibo-button--label--margin-left; margin-left: $ibo-button--label--margin-left;