mirror of https://github.com/hashicorp/consul
75 lines
1.9 KiB
Plaintext
75 lines
1.9 KiB
Plaintext
|
# Iconography
|
||
|
|
|
||
|
|
Please prefer our Constructable `%placeholder` styles over singular CSS
|
||
|
|
properties. If you need to drop back, to something not covered there then you
|
||
|
|
can also use CSS properties directly.
|
||
|
|
|
||
|
|
All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
|
||
|
|
`%with-alert-circle-fill-mask`. We mostly use the `-mask` suffix and also use
|
||
|
|
the `%as-pseudo` placeholder to tell CSS that we are using the background on a
|
||
|
|
pseudo element:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.selector::before {
|
||
|
|
@extend %with-alert-circle-fill-mask, %as-pseudo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
If you are not using a pseudo element for whatever reason, then you do not need
|
||
|
|
to use `%as-pseudo`.
|
||
|
|
|
||
|
|
When using `-mask` icons, color will use the `currentColor` of the element. If
|
||
|
|
you need the color of the icon to be different to the text you can define the
|
||
|
|
color of the icon itself via the `color` CSS property (preferred) but you can
|
||
|
|
also use `background-color`.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.selector::before {
|
||
|
|
@extend %with-alert-circle-fill-mask, %as-pseudo;
|
||
|
|
color: rgb(var(--tone-strawberry-500));
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
If you need to use a colored icon (usually an existing brand icon) then don't
|
||
|
|
use `-mask`, use `-icon` instead:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.selector::before {
|
||
|
|
@extend %with-logo-consul-color-icon, %as-pseudo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Structure Icons + Consul Specific Icons
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<ul>
|
||
|
|
{{#each (icons-debug 'structure') as |prop|}}
|
||
|
|
<li>
|
||
|
|
<figure
|
||
|
|
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
|
||
|
|
class={{concat 'debug-' prop.placeholder '-before'}}
|
||
|
|
>
|
||
|
|
<figcaption>{{prop.name}}</figcaption>
|
||
|
|
</figure>
|
||
|
|
</li>
|
||
|
|
{{/each}}
|
||
|
|
</ul>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Flight Icons
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<ul>
|
||
|
|
{{#each (icons-debug 'flight') as |prop|}}
|
||
|
|
<li>
|
||
|
|
<figure
|
||
|
|
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
|
||
|
|
class={{concat 'debug-' prop.placeholder '-before'}}
|
||
|
|
>
|
||
|
|
<figcaption>{{prop.name}}</figcaption>
|
||
|
|
</figure>
|
||
|
|
</li>
|
||
|
|
{{/each}}
|
||
|
|
</ul>
|
||
|
|
```
|