1

I'm writing a Lightning Component that renders an SLDS Path based on some custom configuration data (so I can't use the lightning:path component). A few weeks ago a colleague tried this out and couldn't get the arrow portion (pointed to by the feint red arrow in the image below) to render in the correct color.

I am now also stuck on this; the image below includes the markup being output at the moment. (I've been through various permutations starting from the sample HTML provided by the Lightning Design System site.)

What am I doing wrong?

In the SLDS CSS I see this that is probably relevant:

.slds-path__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: -1rem;
  width: calc(2rem - (2px * 2));
  height: calc(2rem - (2px * 2));
  border: 2px solid white;
  border-left: 0;
  border-bottom: 0;
  background-clip: padding-box;
  transform: scale3d(0.8, 1.1, 1) rotate(45deg);
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-path__item:first-child:before {
  display: none; }

.slds-path__item + .slds-is-complete:before,
.slds-path__item + .slds-is-current:before {
  background-color: #4bca81; }

Path and markup

3 Answers 3

1

We had the same issue a while ago and I was struggling with the same thing. Let me explain how I solved it. This is your selector:

.slds-path__item + .slds-is-complete:before,

What means as much as: Select :before of is-complete stages that come after a path__item.

What you need is the :before of the element that comes after the is-complete.

.THIS .slds-is-complete + li.slds-path__item:before {
    background-color: rgb(75, 202, 129);
}

This is what you need in case it gets hovered:

.THIS .slds-is-complete:hover + li.slds-path__item:before {
    background-color: rgb(4, 132, 75);
}
6
  • Thanks - though others might have hit this. So you found that you had to add your own CSS i.e. the "out of the box" CSS is incomplete?
    – Keith C
    Nov 26, 2017 at 21:34
  • Yes, I think so. At the end, we decided to define it for every case cause we had styling issues again and again in different scenarios.
    – itsmebasti
    Nov 26, 2017 at 21:37
  • I can get it to work as plain HTML but inside a component I can't. Will look a bit longer but may have to use your work-around...
    – Keith C
    Nov 26, 2017 at 21:42
  • Interesting, I'm curious about some new findings :)
    – itsmebasti
    Nov 26, 2017 at 21:47
  • Not having both "incomplete" and "current" helps. But I think there may be a built in assumption that "current" always precedes "complete" and so has the green triangle wired in. –
    – Keith C
    Nov 26, 2017 at 22:01
0

Based on Basti's advice, this is what I ended up adding to the component to support arbitrary ordering of path items of these classes:

  • slds-is-incomplete
  • slds-is-complete
  • slds-is-current

The CSS:

/* Incomplete followed by current: style the arrow before current grey (incomplete color) */
.THIS .slds-is-incomplete + .slds-is-current:before {
    background-color: #ecebea;
}
.THIS .slds-is-incomplete:hover + .slds-is-current:before {
    background-color: #dddbda;
}

/* Incomplete followed by complete: style the arrow before complete grey (incomplete color) */
.THIS .slds-is-incomplete + .slds-is-complete:before {
    background-color: #ecebea;
}
.THIS .slds-is-incomplete:hover + .slds-is-complete:before {
    background-color: #dddbda;
}

/* Complete followed by incomplete: style the arrow before incomplete green (complete color) */
.THIS .slds-is-complete + .slds-is-incomplete:before {
    background-color: #4bca81;
}
.THIS .slds-is-complete:hover + .slds-is-incomplete:before {
    background-color: #04844b;
}

/* Current followed by complete: style the arrow before complete blue (current color) */
.THIS .slds-is-current + .slds-is-complete:before {
    background-color: #0070d2;
}
.THIS .slds-is-current:hover + .slds-is-complete:before {
    background-color: #005fb2;
}

PS

This is now broken in Winter '19 - yet to investigate what has changed.

0

based on all the comments and in a spring '19 org, I was able to fully customize the colors by (e.g. for current):

.THIS .slds-path__nav .slds-is-current {
    background-color: #04844b;
}
.THIS .slds-path__nav .slds-is-current::before {
    background-color: #04844b;
}
.THIS .slds-path__nav .slds-is-current::after {
    background-color: #04844b;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .