Code changing to nonsense

This topic contains 2 replies, has 2 voices, and was last updated by  Sebastian 3 weeks, 3 days ago.

Author Posts

paulryder17

Hi! When I use combined transform properties via the code editor on a selector, not only do they not work as expected, but when I switch selectors then come back to it, the properties that aren’t working, separate and turn into jibber-jabber.
Eg.
transform: translate3d(-525%, 0, 0) rotate(35deg);
becomes
translate3d: -525%, 0, 0;
rotatez-function: 35deg;
Is this because I am using the same selector for :after and :hover? Must we create seperate selectors for each? Basic :hover properties usually work fine.

Here is the code i’m trying to enter

button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
overflow: hidden;
cursor: pointer;
}

button::after {
content: ”;
z-index: -1;
background-color: hsla(0, 0%, 100%, 0.2);
position: absolute;
top: -50%;
bottom: -50%;
width: 1.25em;
transform: translate3d(-525%, 0, 0) rotate(35deg);
}

button:hover::after {
transition: transform 0.45s ease-in-out;
transform: translate3d(200%, 0, 0) rotate(35deg);
}

I’m using chrome and the latest version of MT

Edit – Even if I do write the transform properties separately, they still change to ” translate3d: -525%, 0, 0;
rotatez-function: 35deg;”
There is also a bug when this happens, that creates another scrollbar
MT bug

Another edit – So it does indeed seem I have to create a new selector for every pseudo class in this instance – That will have it’s advantages tbf, and I can see why it would have to be the case, taking the MT controls into consideration.

I never use the gui. I think of MT as a handy way of tapping into and organising additional CSS. It would be pretty cool if a future update had the option to detatch the controls, and let you just write straight up CSS in nicely organised chunks. This might also solve an issue I had before, where only one google font can be used at a time.


Sebastian

Hey, sorry to hear you encountered this issue with transforms. It should be fully interchangeable with the UI (the first selector in the custom code editor at least). I will do some tests at my end and get back to you on that one. And your feature request is already on the todo list, and will be implemented after some improvements to the element selection process.

Also sorry about the delay, I’ve been having some issue with forum post notifications, which I though I had fixed, but it seems not fully.

Cheers,
Sebastian


Sebastian

Just to let you know, this issue is now fixed in version 6.3.2.3.

MT only syncs styles in the first selector with the UI fields. But you should be able write any custom CSS you like without running into formatting issues. So if you notice any similar issues, please let me know and I will fix ASAP.

Thanks,
Sebastian

You must login or register to reply to this topic.