Formatting by child level


#1

@jessegrosjean Is there any way of applying formatting according to the level or child dependency a task is?


#2

There is a depth attribute. For example:

item[depth=2] {
  color: green;
}

#3

That’s great, thanks. Does this apply within each element (as opposed to general statements to the editor) so I can say;

Project
color: blue;
item[depth=2] {
color: green;
}

Task
color: Purple;
item[depth=2] {
color: Orange;
}

Not using those colors but trying to clarify my question.


#4

I think you want this:

item[data-type=project][depth=2] {
  color: green;
}

item[data-type=task][depth=2] {
  color: green;
}

#5

OK, then it has to be two (or more) of them. For code efficiency I try to compact a statement once it is working.

// Changes the Task Font.
item[data-type=task] {
  font-size: 18;
  line-height-multiple: 1.2;
  color: mix(white,green, 50%);
  paragraph-spacing-before: 15;
}
item[data-type=task][depth=2] {
  color: red;
}
item[data-type=task][depth=3] {
  color: red;
}
item[data-type=task][depth=4] {
  color: red;
}