Tidying CSS a bit and fixing IE and responsiveness #8
Conversation
|
|
||
| .euiCommentEvent__header { |
There was a problem hiding this comment.
I mainly moved a lot of unnecessary nesting to ensure we don't create too much specificity.
| } | ||
| } | ||
| .euiCommentEvent__header { | ||
| line-height: $euiLineHeight; |
There was a problem hiding this comment.
This ensures proper line-height when the items wrap
| (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) | ||
| */ | ||
| // sass-lint:disable-block mixins-before-declarations | ||
| @include internetExplorerOnly { |
There was a problem hiding this comment.
Wrapping the IE fix so it is only applied to IE browsers instead of all browsers. This means we drop support for IE, we can remove all of these.
| &::after { | ||
| content: ''; | ||
| min-height: inherit; | ||
| // Calculates the minimum height based on full header's min-height minus the vertical padding | ||
| min-height: $euiSizeXXL - $euiSizeS; |
There was a problem hiding this comment.
Basically the fix for IE creates a new pseudo element "child" flex-item and applies the minimum height to that child to force the height we want. But since it's nested within the __header which has top and bottom padding, if we don't subtract that padding, it increases the overall min-height.
Sometimes it's good to try to understand what the CSS fix is doing so you know better how to tweak it to your implementation.
| // Push the actions far right | ||
| flex-grow: 1; |
There was a problem hiding this comment.
This replaces what you were originally doing with justify-content: space-between to push the actions to the right. This fixes the the fix for IE 😆 ... Since when the fix was in it was creating a third child of the flex group, so it was putting space between the actions and the pseudo element, causing the actions to become more centered.
I'll comment what I did in the diff, but essentially the flex and padding changes also fix mobile so you don't need special small screen styles.
All screenshots are IE, but look the same in Chrome
Without actions
With actions
Small screens