Perspective Theming ---> Can I nest a class inside another class to override properties in that class?

Module Development
1

For the last few hours of searching and reading on the Internet I think the answer is “No, you’re SOL.”. You can work around this in HTML but I need to do it in CSS. Is this true, not possible? I thought I’d ask the forum folks to be sure.

I’m making my own theme by extending the IA light theme. I have myClass and I want it to override the properties in the IA button classes. I know the code below doesn’t work…so is there another way to do it without having to change all the IA class properties? This is a simple thing for one class but I have to do it for all the IA components. Any suggestions?

.myClass {
    font-size: 2rem;
    font-weight: 321;
}

.ia_button--primary, ia_button--secondary {
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--borderRadius);
    -webkit-border-radius: var(--borderRadius);
    cursor: pointer;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    transition-property: box-shadow, background-color;
    myClass;  /* <---- I want to override the IA button properties */
}

Thanks again!

2

no that requires scss instead of css to do it like that what you can do tho is just copy the selector (underneath the previous one)

.ia_button--primary, ia_button--secondary {
    font-size: 2rem;
    font-weight: 321;
}

You shouldnt adjust the theme.css tho as these change after upgrading versions… you should create a new theme that inhertis light.css.
that way it will always overwrite the classes aswell and no worries of it dissapearing after an update.

you can do that by makeing a new file.css in the same folder and put
@import "light"; on top

3

Thanks for replying Victor.
I’m already doing as you suggested…importing everything from Ignition’s light theme and overriding the definitions…the last one loaded wins :slight_smile: I’ve already looked at the SCSS option (stackoverflow, other forums and programming blogs), they all say it isn’t possible. I was hoping there was a hidden gem I hadn’t found hence me posting the question. I found several examples of people saying the same thing…do it in SCSS and compile to CSS…all that seems to do is output a reformatted class definition and with a modified class name. That’d be fine if we were building the component from scratch and creating the element where we control what goes into the render return, but not for changing the style of an Ignition component. So I guess I’ll just have to do as I was doing (the same as you suggested), import and override. I was hoping for an easy what out…I already have a load of class definitions from another source and was hoping for an easy insert of the class name in the override definition instead of overriding each property of all the Ignition class definitions…looks like I have to do it the hard way (not really hard just tedious and slow) :roll_eyes:

BTW…I did find something on the web that said what I’m trying to do will be available in CSS4. How true that is I don’t know…can’t trust everything on the web :slight_smile:

4

The thing you mention in css4 is removed due to bugs CSS @apply Rule - Chrome Platform Status unless you apply an experimantal feature in google chrome flags…
chrome://flags/#enable-experimental-web-platform-features
(not sure if the hyperlink works but just copy this into the header xd)
probably not very usefull since users have to apply this themselves. And easy to forget xd

Tobad the devs have to do the tedious work instead of the clients :stuck_out_tongue:

1 Like