V8: fix umb-form-check icon z-index to bring icon to top#10872
V8: fix umb-form-check icon z-index to bring icon to top#10872nathanwoulfe wants to merge 1 commit intoumbraco:v8/contribfrom
Conversation
| .icon, | ||
| .umb-icon { | ||
| font-size: 1.2rem; | ||
| z-index: 1; |
There was a problem hiding this comment.
@nathanwoulfe alternatively just z-index: 1 to umb-form-check__icon or position: relative to ng-include here: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less#L41
There was a problem hiding this comment.
@nathanwoulfe maybe we should add this to umb-form-check__icon which also set opacity: 1;
//cc @nul800sebastiaan
|
@bjarnef well spotted, I'll look at those too - some of the SVG icons may be slightly different sizes to the icon-font equivalent. The block icon one will be due to setting color rather than fill/stroke |
|
@nathanwoulfe that is taken care of here: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less#L10 A workaround, but there might be a better way to handle this 😅 Usually in inherits the color from the color class, but in this specific case it use inline style, but not inherited to the nested SVG here. Another workaround is to remove the color class in this scenario passed in as part of the icon name: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html#L6 |
|
Hi there @nathanwoulfe! Thanks for the contribution here and apologies if it has been a while since you heard from us. We have been in the very fortunate position of having lots of work to do. With this in mind, we are writing to let you know that with the release of the Long Term Support (LTS) version, 8.18, we have now moved into the support phase of Umbraco 8. You can read all about that here but to surmise, we will be keeping Umbraco 8 safe and well by releasing patching for security or regression issues if they arise but no longer will we do that for bug fixes. The same is still true for features, although we stopped merging those some time ago. We'd love for you to keep contributing and while we are not able to merge this to Umbraco 8, if this is still something you'd like to see in Umbraco 9, please take a look and either create an issue to say so or find an issue that already exists. We'll be happy to give you some input around how you can adjust your pull request to target Umbraco 9. Even better, it might be something that Umbraco 9 already does or has. In which case, enjoy! Once again, a huge thank you for the time you have spent working with us. #H5YR |






Prerequisites
Relates to #10805
Description
The tick icon in the umb-form-check was sitting underneath the ::before pseudo element, so was not visible. Setting the z-index to a non-zero value bumps it back to the top.
@nul800sebastiaan given this was introduced in #10805, it should be included in the same release, being 8.17.