Hi all,
I am having difficulties in implementing SCSS which I found on codepen into OutSystems. I tried with InlineSVG to display my button, trying to replicate it but it doesn't work.
I also copied their css into my application.
Instead of showing
It shows
Checked the element as well as the code is there but it doesn't reflect the polygon or whatnot (not good in CSS)
Reference: codepen
Hope to get guidance on SCSS/CSS. I have attached my .oml as well. Thanks and have a pleasant day ahead.
Regards,
Kenny
Ok So the red color is also removed now.
Outsystems is taking style of progress class so you have to reset it using background-color.
.button-hold > div svg.progress { width: 20px; height: 20px; transform: rotate(-90deg) scale(var(--progress-scale, 1)); transition: transform 0.5s ease; background-color: transparent;}
You have to wrap all SVGs in Container widget which will create <div> as per codepen.
I can see that red mark so try to fix the oml by removing that as well if you want. Else this below structure with give you above result.
Hope it helps.
Please find attached updated oml. Added Javascript as well.
If this helped please mark the question resolved.
Hi Pradnya,
Thanks for the solution, I guess I missed out the <div> as per codepen. As for the Javascript, I'll make some changes on my own as there's a little bit of tweak required to fully replicate the look and feel.
Thanks again and I really appreciate your help. Have a pleasant day ahead!
Update: I've placed the JS in OnReady and refactored "progress" to others and it worked.
To convert SCSS to CSS you could use https://www.sassmeister.com/ This is an easy online tool that compiles the SCCS