mirror of https://github.com/hashicorp/consul
06ff4228b4
* update red color variables to hds * change background red to be one step lighter * map oranges * map greens * map blues * map greys * delete themes, colours: lemon, magenta, strawberry, and vault color aliases * add unmapped rainbow colours * replace white and transparent vars, remove unused semantic vars and frame placeholders * small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour * add unmapped grays, remove dark theme, manually set nav bar to use dark colours * map consul pink colour * map yellows * add unmapped oranges, delete light theme * remove readme, base variables, clean up dangling colours * Start working on the nav disclosure menus * Update main-nav-horizontal dropdowns * Format template * Update box-shadow tokens * Replace --tone- usage with tokens * Update nav disabled state and panel border colour * Replace rgb usage on tile * Fix permissions modal overlay * More fixes * Replace orange-500 with amber-200 * Update badge colors * Update vertical sidebar colors * Remove top border on consul peer list ul --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com> |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.scss | ||
| layout.scss | ||
| skin.scss | ||
README.mdx
---
class: css
---
# inline-code
All `p code` within `main` and any `ModalLayer`s default to use the following
inline code CSS component.
```hbs preview-template
<p>
This is so we can highlight code <code>inline</code> in paragraphs and such-like.
</p>
```
It can also be added to any additional elements using the following
placeholder.
```css
p code {
@extend %inline-code;
}
```
We also have a `%block-code` that is currently contained in the same CSS files here as it shares so much of this (this should potentially be thought about and reorganized at some stage)
At the time of writing we only use this in the docs for all `<pre><code>`s.
```hbs preview-template
<pre><code>{
"Code": true
}</code></pre>
```
```css
pre code {
@extend %block-code;
}
```