Inline

This module defines the appearance of inline tags such as mark, code, var, time, etc.

Usage #

Here are all the inline tags for which default styles are defined in the framework.

CSS

Variable

Code

Mark

Shortcut

~~Deleted~~

Italic

Emphasis

Strong

Bold

x^superscript

x_subscript

Time


<abbr title="Cascading Style Sheets">CSS</abbr>
<var>Variable</var>
<code>Code</code>
<mark>Mark</mark>
<kbd>Shortcut</kbd>
<del>Deleted</del>
<i>Italic</i>
<em>Emphasis</em>
<strong>Strong</strong>
<b>Bold</b>
x<sup>superscript</sup>
x<sub>subscript</sub>
<time>Time</time>

Variables #

There are global CSS variables defined for inline tags.


--inline-var-color: var(--palette-black-80);
--inline-border-color: transparent;
--inline-background-color: transparent;

--inline-kbd-color: var(--palette-black-80);
--inline-kbd-border-color: var(--palette-black-15);
--inline-kbd-background-color: transparent;

--inline-code-color: var(--palette-black-80);
--inline-code-border-color: transparent;
--inline-code-background-color: var(--palette-neutral-lightest);

--inline-cite-color: var(--palette-black-70);

You can change them by extending $colors map:


// =Colors
$colors: map-extend($colors, (
    inline: (
        code: (
           color: var(--palette-white-80),
           border-color: var(--palette-black)
        )
    )
));

Or by specifying a rule for a particular tag.


code {
    --inline-code-color: var(--palette-white-80);
    --inline-code-border-color: var(--palette-black);
}