consul

History

John Cowen 2f9e968d38 ui: %horizontal-kv-list CSS component (and related) (#10285 ) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge		2021-06-21 10:45:38 +00:00
..
README.mdx	ui: %horizontal-kv-list CSS component (and related) (#10285 )	2021-06-21 10:45:38 +00:00
debug.scss	ui: %horizontal-kv-list CSS component (and related) (#10285 )	2021-06-21 10:45:38 +00:00
index.scss	ui: %horizontal-kv-list CSS component (and related) (#10285 )	2021-06-21 10:45:38 +00:00

README.mdx

---
class: css
---
# badge

`%badge` is a slightly rounded pill (also `%badge-with-icon` for badges that need icons), made to easily fit inside a `%horizontal-kv-list` along with other key/values, or on its own as a single badge. Colors default to grays, but can be overridden via selectors.

```hbs preview-template
<figure>
  <figcaption>Can be used as part of a horizontal-kv-list</figcaption>

  <dl>
    <dt class="kind-terminating-gateway">Kind</dt>
    <dd>
      Terminating Gateway
    </dd>
    <dt class="service-identity">
      Service Identity
    </dt>
    <dd>service-0</dd>
    <dt class>Something</dt>
    <dd>else, here</dd>
  </dl>

</figure>
<figure>
  <figcaption>...or as a single `dl` element on its own</figcaption>

  <dl class="kind-terminating-gateway">
    <dt>Kind</dt>
    <dd>
      Terminating Gateway
    </dd>
  </dl><!--
    Collapse the whitespace whilst maintaining indentation
--><dl>
    <dt
      class="service-identity"
    >
      Service Identity
    </dt>
    <dd>service-0</dd>
  </dl>
</figure>
```


```css
/* part of a kv list */
dl {
  @extend %horizontal-kv-list;
}
dt.service-identity {
  @extend %badge;
}
dt.kind-terminating-gateway {
  @extend %badge, %badge-with-icon;
}
dt.kind-terminating-gateway::before {
  @extend %with-gateway-mask, %as-pseudo;
}
/* element on its own */
dl.service-identity,
dl.kind-terminating-gateway {
  @extend %horizontal-kv-list;
}
dl.service-identity dt {
  @extend %badge;
}
dl.kind-terminating-gateway dt {
  @extend %badge, %badge-with-icon;
}
dl.kind-terminating-gateway dt::before {
  @extend %with-gateway-mask, %as-pseudo;
}
```