Html structure

1
2
3
4
5
td.sm-down-hidden
  - if payment?
    span.badge.badge-pill.badge-payment--verified = 'verified'
  - else
    span.badge.badge-pill.badge-payment--pending = 'pending'

What does not work

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.badge-payment {
  &--verified {
    background: $verified-background;
    color: $verified-color;
  }

  &--pending {
    background: $pending-background;
    color: $pending-color;
  }
}

What work

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.badge-pill {
  &.badge-payment {
    &--verified {
      background: $verified-background;
      color: $verified-color;
    }

    &--pending {
      background: $pending-background;
      color: $pending-color;
    }
  }
}

What is BEM?

https://css-tricks.com/bem-101/

What are the Building Blocks?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance