-
Notifications
You must be signed in to change notification settings - Fork 843
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
beta badges on panels #884
Conversation
cc @ruflin who also requested this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There were just a couple of issues with just pulling out the css into a mixin.
}], | ||
text: ( | ||
<p> | ||
Similar to <Link to="/display/card">EuiCard</Link> panels can also accept |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add comma before 'panels'
@@ -0,0 +1,30 @@ | |||
|
|||
/** | |||
* 1. Extend beta badges to at least 40% of the card's width |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'card's width' -> 'container's width'
max-width: calc(100% - #{$euiCardSpacing*2}); | ||
} | ||
|
||
.euiToolTipAnchor, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will now cause problems because it needs to be inside &--hasBetaBadge
or else it will target any tooltips inside the container.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch.
transform: translateX(-50%); | ||
z-index: 3; // get above abs positioned image | ||
min-width: 40%; /* 1 */ | ||
max-width: calc(100% - #{$euiCardSpacing*2}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This line is specific to cards and their padding.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
Closing for #888 |
Feature request of @nreese.
EuiCard
to a more generic mixin, then imported into cards.EuiPanel