State driven Stylus

bank-accounts.css

.visible-empty {
  display: block;
}
.is-empty .visible-empty,
.has-empty .visible-empty {
  display: none;
}
.is-empty .hidden-empty,
.has-empty .hidden-empty {
  display: none;
}
.bank-accounts .visible-pending {
  display: block;
}
.bank-accounts .is-pending .visible-pending,
.bank-accounts .has-pending .visible-pending {
  display: none;
}
.bank-accounts .is-pending .hidden-pending,
.bank-accounts .has-pending .hidden-pending {
  display: none;
}
.bank-accounts .visible-verified {
  display: block;
}
.bank-accounts .is-verified .visible-verified,
.bank-accounts .has-verified .visible-verified {
  display: none;
}
.bank-accounts .is-verified .hidden-verified,
.bank-accounts .has-verified .hidden-verified {
  display: none;
}

bank-accounts.html

<div class="bank-accounts-pending-verify">
    <span class="empty-message visible-empty">Det er ingenting her</span>
    <table class="bank-accounts hidden-empty">
        <tr>
            <td>01234566789</td>
            <td class="actions">
                <!-- Ny konto -->
                <button class="transfer hidden-pending hidden-verified">Verifiser</button>

                <!-- Konto under verifisering -->
                <span class="pending-message visible-pending">Venter på bekreftelse...</span>
                
                <!-- Verifisert konto -->
                <button class="transfer visible-verified">Overfør</button>
            </td>
        </tr>
    </table>
</div>

bank-accounts.scss

states(states...) {
    for state in states {
        .visible-{state} {
            display: none
        }

        .is-{state},
        .has-{state} {
            .visible-{state} {
                display: block
            }

            // Include this to support table rows
            /*
            tr.visible-{state} {
                display: table-row
            }
            */
        }

        .is-{state},
        .has-{state} {
            .hidden-{state} {
                display: none
            }
        }
    }
}

// Global states
states(empty)

.bank-accounts {
    // Local states
    states: pending verified
}