Adapt Learning Community: Small styling question

Hello all!

Can someone explain me what ".component-background;" does in the component.less file in Vanilla theme?

The code looks like this:

.component {
    .component-inner {
        .component-background;
&.blank-inner { // don't apply styling to blank component
background-color: transparent;
padding: 0;
}
    }

I don't understand what the:

.component-background;

inside the .component-inner class does. It looks like a class with no attributes to me...

Thanks in advance

It's actually a mixin defined in theme-extras.less as

.component-background {
   background-color: @component-background-color;
   padding: @component-padding;
}

You won't need to edit the theme-extras file though because as you can see it consists of two properies with variables defined in colors.less and paddings.less respectively.

Hope that helps!

Show parent | Reply

Thanks Dan!

Does that mean that .component-inner gets these attributes:

background-color: @component-background-color;

padding: @component-padding;

Show parent | Reply

Yes - exactly

Show parent | Reply