open-consul/ui/packages/consul-ui/app/components/csv-list
John Cowen af460dcd97
ui: Icon related fixups (#13183)
* ui: Use new icon-size and icon-color for popover-menus

* Remove the default currentColor plus add some more defaults

* Undo transparency overwrites now we don't need them

* Fixup discochain icons

* Undo a default icon rule for vert align

* Fixup expanded icon for meatball popovers

* Fixup intention permission labels/badges/icons

* Remove different res icon

* Remove icon resolutions
2022-05-25 14:28:42 +01:00
..
README.mdx
debug.scss
index.scss ui: Icon related fixups (#13183) 2022-05-25 14:28:42 +01:00

README.mdx

---
class: css
---
# csv-list

Easily create comma separated lists via CSS. Also contains a `%csv` if you don't want to use the `%csv-list`s display and only apply the commas to specific DOM elements.

```hbs preview-template
<p>
  <span>one</span>
  <span>two</span>
  <span>three</span>
  <span>four</span>
  <span>five</span>
  <span>six</span>
</p>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ol>
```


```css
  p, ul {
    @extend %csv-list;
  }
  ol li {
    @extend %csv;
  }
  ol {
    list-style-type: none;
  }
```

## Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--csv-list-separator` | `string` | `,` | The separator to use between the list items. |