XF 2.2 Move CSS from extra.less to style property

[Opus X]

the site i purchased the guy that did the style made it off a the normal style.
most of the changes he made were done in extra.less.
he did document what they do but that is not the same as what it is called in the program style area.
i want to try to move those that can be into the style properties.
i know some of them have to be where they are but it seems that the more common would be easier to do in the style property?
when i try to do a search in the control panel for the code they do not show up.
something like .p-body-inner gives me no result.
is there an easy way to find where those type of codes are in the style properties other than going through each one at a time?
is there a developer mode that might work for this?

 

[Opus X]

guess nobody else knows either.
4 1/2 days and
i will try to continue to try to figure it out.

 

[Jeremy P]

If you create, for example. a value style property for a color you can reference it in a Less template like this:

.some-class
{
    color: @xf-someProperty;
}

If you create a CSS style property you can reference it in a Less template like this:

.some-class
{
    .xf-someProperty();
}

If you want to reference just a single value from a CSS style property, you can append two hyphens and the value name like this:

.some-class
{
    background-color: @xf-someProperty--background-color;
}

 

[Opus X]

thanks.
what I am trying to do is see if there is an easy way to find the associated style property for the existing entry in the extra.less.
stuff like
.p-nav-list .p-navEl.is-selected .p-navEl-link
.button.button--link, a.button.button--link
.memberOverviewBlock-seeMore
.menu-content
i was hoping there might be a development mode that would show what each area was in a property that could be easily found in the control panel when you hovered over it or similar.
i am slowly finding some but i kind of see why he did it how he did as some stuff is easy to figure out and others have no style property for them.
i was just hoping to try to clean up the extra.less and move some of it over into the options that were there.
will probably just leave it as is since does not appear to be an easy way.

 

[Jeremy P]

Unfortunately there's not really a 1:1 mapping like that in most cases. For example, the Less for .button--link is comprised of several distinct properties:

&.button--link
{
    // block colors
    background: @xf-contentBg;
    color: @xf-linkColor;
    .m-buttonBorderColorVariation(@xf-borderColor);

    &:hover,
    &:active,
    &:focus
    {
        text-decoration: none;
        background: @xf-contentHighlightBg;
    }
}

However if you search e.g. .menu-content, you'll find a property like this:

.menu-content
{
    // ...
    .xf-menu();
    // ...
}

This will expand the menu property in its entirety, so customizations or free-form CSS/LESS there will be applied as you expect.