LESS & FuelUX Tree - Change width of steps list

Question

I'm not sure if this is a LESS question or FuelUX question but I'll post it as both...

I am trying to change the width of the ul.steps element depending on how many child elements have class="complete".

Is this possible to do with LESS or would I have to do some custom jQuery?

The current width is 224px and I want to reduce it by 56px for each class that exists.

Answer 1

The LESS pre-processor won't be any help once the CSS is already compiled, since it gets compiled before you load the page.

You need to know the number of $('.complete') on the page and then set the width. The number of complete steps would be changed based on user interaction.

Answer 2

With Less you can use something like that shown below:

.reduceWidth(@width: 224px; @step:56px; @list:'li'; @listItem:'li') {
@selector: ~"@{list}";
@{selector} {
width: ~"@{width}";
}
& when ((@width - @step) > 0) {
.reduceWidth((@width - @step); @step; ~"@{list} @{listItem}");
}
}

ul.steps {
.reduceWidth();
}

Outputs:

ul.steps li {
  width: 224px;
}
ul.steps li li {
  width: 168px;
}
ul.steps li li li {
  width: 112px;
}
ul.steps li li li li {
  width: 56px;
}