CSSing custom buttons

0
Hello eveyone,   I am facing a challenge trying to style the buttons on my app. First of all, they are not regular buttons but dropdown container elements instead.     On the SASS the Custom class is defined as it follows:   But while running the aplication, is not working as I expected. I might be wrong (i am a newbie customizing via css), but shouldn’t the text be colored as green and the background colored as yellow ($brand-warning is #FFFF29)? (Also added !important after color: and background on the custom class but is not working neither)   It seems to be using the mx-button configuration by default until the button is selected or at least hovered.         This are the buttons without hover over them: This are the buttons with the Test0 hovered:   I hace discovered that if i customize the .btn-default (which is the button type selected on Mendix), the values work correctly, but i do not want to change those values because i am already using it on other parts of the proyect.   Any help/tip/advice will be really usefull, because i feel kinda stuck at this point.   Thanks in advance. Javi
asked
3 answers
1

Hello Javier, 

I think if you use these structure you can target the buttons the correct way:

.btn-custom-javi {
   .btn-default {
      //Your custom styles here
   }
}

 

answered
1

I hope this will help you 

.btn-custom-javi {
	.btn-default {
          color:#2d2d;
	  background-color:$brand-warning;
	  :hover {
	    color:#d60e0e;
   }
}

 

answered
0

Hi Javier,

I checked your post a bit more in depth, did you try applying the class to the individual buttons instead of to the dropdown container?

I see you're using Mx version 8.6.5, you probably still need to compile your SCSS to CSS.

Check out the following documentation on how to setup Calypso to do this for you:

https://docs.mendix.com/howto8/front-end/calypso

 

answered