UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

66 lines (63 loc) 5.96 kB
<module-tabgroup> <div role="tablist"> <button type="button" role="tab" id="trigger_section-hero.css" aria-controls="panel_section-hero.css" aria-selected="true" tabindex="0" >CSS</button> </div> <div role="tabpanel" id="panel_section-hero.css" aria-labelledby="trigger_section-hero.css"> <module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="file">section-hero.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">section-hero</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">grid</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-column</span><span style="color:#F8F8F2">: fullwidth;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-template-columns</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">inherit</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-primary);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-primary-text);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> margin-block</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> padding-block</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xxl);</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26; h1 {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-column</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">content</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:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xl);</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"> div</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-column</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">content</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:#A6E22E"> .lead</span><span style="color:#F8F8F2"> {</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-l);</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:#66D9EF"> screen</span><span style="color:#F92672"> and</span><span style="color:#F8F8F2"> (</span><span style="color:#66D9EF;font-style:italic">min-width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">48</span><span style="color:#F92672">em</span><span style="color:#F8F8F2">) {</span></span> <span class="line"><span style="color:#F92672"> section-hero</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#F8F8F2"> &#x26; h1 {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-column</span><span style="color:#F8F8F2">: breakout;</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"> div</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">grid</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-column</span><span style="color:#F8F8F2">: breakout;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> grid-template-columns</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">2</span><span style="color:#F92672">fr</span><span style="color:#AE81FF"> 1</span><span style="color:#F92672">fr</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> gap</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xl);</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>