Hi @alexander
I have a button with no margins or padding, and line height is set to 1, yet it is picking up a line height of 1.8 from the body
Hi @scotbaston,
The top level element with x-anchor would still have the body line-height but it shouldnât be applied to the text. The nestedx-anchor-text-primary element should have all the text styles including line-height. can you try inspecting that span and see if it is applied there?
It appears that if I turned on flexbox for the column, the problem of too much spacing goes away.
Maybe the line-height isnât the cause but the too much space between text and button (with no margins or padding) is problematic
Gotcha, I think part of that spacing might also be the line-height coming from the text element above. And I just did some testing and noticed that the button changes behavior slightly because it is set to display: inline-flex all the time. This helps it to behave nicely in flex containers.
If youâre trying to just make a text link, Iâd recommend using the Headline element and turning on the Link option. This will give you a starting point that flows better with base typography rather than having to turn everything off in a Button.
Good call on Headline, although I think my brain is still wired to say button haha⌠I must be more open minded
display: inline-flex helps to understand it a little⌠just a case of turning on flex settings then (or using a heading)
No worries, weâre just trying to make elements more versatile. At this point with just a few core elements (Div, Headline, Icon, Image) you can recreate so many different things like buttons, quotes/testimonials - maybe even cards with enough tinkering.
Thatâs it! Very nice combination of effects there! Loving the border color continuity as well.
1 Like
A combination of Grid, Divs, and element effectsâŚ
what would be nice is if the element effects also included z-index as one of the transitions. I had to do a hover css hack but feel this would be better in the effects section
1 Like
Iâm not sure weâll ever add z-index to effects since itâs not really a CSS property that can be transitioned/animated but I see what you mean when it comes to more complicated setups like this. Element CSS might be the best option. Just in case it helps, hereâs something you can do to make custom hover code jive with other Effects features like scrolling, and Link Child Interactions:
body:not(.tco-disable-effects) $el:hover,
body:not(.tco-disable-effects) [data-x-effect-provider*="effects"]:hover $el:not(.x-effect-exit) {
/* do something on hover
}
Thanks for that @alexander,
is there a way of keeping the z-index for the period that the animation is still âplayingâ. currently as soon as the cursor leaves the cell, the z-index reverts to default. it would be nicer to keep the hover z-index till the animation has completed
Scot, Iâm sorry, I mispoke before - looks like z-index is transition-able as a property in CSS but isnât setup in our static CSS base to work that way. Different elements have different transition properties set. Some of this is for performance, some of if is to prevent undesired changes. However, most of them are in this static CSS bundled with every stack:
.x-div, .x-row, .x-col, .x-grid, .x-cell, .x-section, .x-image, .x-anchor, .x-text-headline {
transition-property: border-color,background-color,box-shadow,opacity,filter,transform
}
If you inspect an element in your browserâs developer tools you can probably find this pretty quickly. Then add some Global CSS that inserts z-index to the property list
.x-div, .x-row, .x-col, .x-grid, .x-cell, .x-section, .x-image, .x-anchor, .x-text-headline {
transition-property: z-index, border-color,background-color,box-shadow,opacity,filter,transform
}
Or maybe use a custom class and set it to all like this:
.my-element {
transition-property: all;
}
That should allow the z-index to honor the transition duration.
Also, if your effect is an Animation we have a x-effect-animated class that is one the element for the duration of that animation.
That works beautifully! although I had to add the transition duration to the custom class as it wasnât picking that up for the z-index for some reason
Ok awesome! Glad to hear that.
So I was chatting with Kory about potentially adding it as a property and he says we probably wonât add it to the static styles because of some weird things that can happen with advanced backgrounds. Weâre refactoring some parts advanced backgrounds for an upcoming release (more layers) so weâll definitely keep it in mind in case thereâs room for it without creating conflicts.
He mentioned that in this video he brings up a few points about how z-index plays with effects. Maybe youâve seen it already, but if not it might be worth a watch: https://www.youtube.com/watch?v=dxMoZtdYOOg
Thereâs also a Design Cloud asset called âEffect Deconstructionâ you can import to get the content he uses in the video.
Thanks for that @alexander, and thanks to Kory too for his input.
I did see that video before ( but had forgotten all about it)⌠interesting solutions to problems, although in my case with the image backgrounds I donât believe it would have worked
Iâm including the preset in case you want to have a look/see. hopefully the css etc will be included
Thanks! I unfortunately wonât be able to check it out for a bit with having to support the official release, but appreciate you sharing it and Iâll have a look when things slow down.
Ha I can only imagine how busy you are going to be for the next quarter and thatâs not taking into consideration the latest release
haha youâre telling me 