@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
136 lines (131 loc) • 13.8 kB
HTML
<module-tabgroup>
<div role="tablist">
<button
type="button"
role="tab"
id="trigger_card-callout.html"
aria-controls="panel_card-callout.html"
aria-selected="false"
tabindex="-1"
>HTML</button>
<button
type="button"
role="tab"
id="trigger_card-callout.css"
aria-controls="panel_card-callout.css"
aria-selected="true"
tabindex="0"
>CSS</button>
</div>
<div role="tabpanel" id="panel_card-callout.html" aria-labelledby="trigger_card-callout.html" hidden>
<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
<p class="meta">
<span class="file">card-callout.html</span>
<span class="language">html</span>
</p>
<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">>This is an informational message.</</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">card-callout</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"tip"</span><span style="color:#F8F8F2">>Remember to hydrate while coding!</</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">card-callout</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"caution"</span><span style="color:#F8F8F2">>Be careful with this operation.</</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">card-callout</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"danger"</span><span style="color:#F8F8F2">>This action is irreversible!</</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">card-callout</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"note"</span><span style="color:#F8F8F2">>This is just a side note.</</span><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2">></span></span></code></pre>
<basic-button class="copy">
<button type="button" class="secondary small">
<span class="label">Copy</span>
</button>
</basic-button>
</module-codeblock>
</div>
<div role="tabpanel" id="panel_card-callout.css" aria-labelledby="trigger_card-callout.css">
<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
<p class="meta">
<span class="file">card-callout.css</span>
<span class="language">css</span>
</p>
<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">card-callout</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">relative</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xl);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-l);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--line-height-l);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-blue-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xxs) </span><span style="color:#66D9EF">solid</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-blue-50);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &::before {</span></span>
<span class="line"><span style="color:#F8F8F2"> position: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"ℹ️"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672"> ></span><span style="color:#F92672"> *</span><span style="color:#A6E22E">:last-child</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.tip</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-green-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-green-50);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &::before {</span></span>
<span class="line"><span style="color:#66D9EF"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"💡"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.note</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-neutral-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-neutral-50);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &::before {</span></span>
<span class="line"><span style="color:#66D9EF"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"💬"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.caution</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-orange-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-orange-50);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &::before {</span></span>
<span class="line"><span style="color:#66D9EF"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"⚠️"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.danger</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-pink-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-pink-50);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &::before {</span></span>
<span class="line"><span style="color:#66D9EF"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"🚨"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">@media</span><span style="color:#F8F8F2"> (prefers-color-scheme: dark) {</span></span>
<span class="line"><span style="color:#F92672"> card-callout</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-blue-80);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &.tip {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-green-80);</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.note</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-neutral-80);</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.caution</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-orange-80);</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2"> &</span><span style="color:#A6E22E">.danger</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic"> background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-pink-80);</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2"> }</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
<basic-button class="copy">
<button type="button" class="secondary small">
<span class="label">Copy</span>
</button>
</basic-button>
</module-codeblock>
</div>
</module-tabgroup>