chameleon/elements.html at master · openSUSE/chameleon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Chameleon - openSUSE Design System for Web</title><link href="https://static.opensuse.org/favicon-32.png" rel="icon" sizes="32x32" type="image/png"><link href="https://static.opensuse.org/favicon-48.png" rel="icon" sizes="48x48" type="image/png"><link href="https://static.opensuse.org/favicon-64.png" rel="icon" sizes="64x64" type="image/png"><link href="https://static.opensuse.org/favicon-96.png" rel="icon" sizes="96x96" type="image/png"><link href="https://static.opensuse.org/favicon-144.png" rel="icon" sizes="144x144" type="image/png"><link href="https://static.opensuse.org/favicon-192.png" rel="icon" sizes="192x192" type="image/png"><link href="./dist/css/chameleon.css" rel="stylesheet"><link href="./docs/css/doc.css" rel="stylesheet"></head><body class="d-flex flex-column" style="min-height:100vh;"><nav class="navbar navbar-expand-lg sticky-top"><a class="navbar-brand" href="./"><img src="https://static.opensuse.org/favicon.svg" width="30" height="30" class="d-inline-block align-top" alt="🦎" title="openSUSE">
Chameleon</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"><svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path></svg></button><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="navbar-nav mr-auto"><li class="nav-item"><a class="nav-link" href="./">Home</a></li><li class="nav-item"><a class="nav-link" href="./elements.html">Elements</a></li><li class="nav-item"><a class="nav-link" href="./components.html">Components</a></li><li class="nav-item"><a class="nav-link" href="./changelog.html">Changelog</a></li><li class="nav-item"><a class="nav-link" href="https://github.com/openSUSE/chameleon">GitHub</a></li></ul></div><button class="navbar-toggler megamenu-toggler" type="button" data-toggle="collapse" data-target="#megamenu"><svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path></svg></button></nav><div class="megamenu collapse" id="megamenu"></div><div class="flex-fill py-5"><div class="container"><div class="row"><div class="col-lg-9 toc-scope"><h1>Elements</h1><h2 id="colors">Colors</h2><div class="row"><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#73ba25;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$green</div><div class="mb-2">var(--green)</div><div class="mb-2">#73ba25</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#173f4f;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$teal</div><div class="mb-2">var(--teal)</div><div class="mb-2">#173f4f</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#35b9ab;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$turquoise</div><div class="mb-2">var(--turquoise)</div><div class="mb-2">#35b9ab</div></div></div></div></div><hr class="my-4"><div class="row"><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#21a4df;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$blue</div><div class="mb-2">var(--blue)</div><div class="mb-2">#21a4df</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#ffc107;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$yellow</div><div class="mb-2">var(--yellow)</div><div class="mb-2">#ffc107</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#dc3545;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$red</div><div class="mb-2">var(--red)</div><div class="mb-2">#dc3545</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#fe7f2d;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$orange</div><div class="mb-2">var(--orange)</div><div class="mb-2">#fe7f2d</div></div></div></div></div><hr class="my-4"><div class="row"><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#ffffff;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$white</div><div class="mb-2">var(--white)</div><div class="mb-2">#ffffff</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#f8f9fa;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-100</div><div class="mb-2">var(--gray-100)</div><div class="mb-2">#f8f9fa</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#e9ecef;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-200</div><div class="mb-2">var(--gray-200)</div><div class="mb-2">#e9ecef</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#dee2e6;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-300</div><div class="mb-2">var(--gray-300)</div><div class="mb-2">#dee2e6</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#ced4da;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-400</div><div class="mb-2">var(--gray-400)</div><div class="mb-2">#ced4da</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#adb5bd;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-500</div><div class="mb-2">var(--gray-500)</div><div class="mb-2">#adb5bd</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#6c757d;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-600</div><div class="mb-2">var(--gray-600)</div><div class="mb-2">#6c757d</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#495057;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-700</div><div class="mb-2">var(--gray-700)</div><div class="mb-2">#495057</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#343a40;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-800</div><div class="mb-2">var(--gray-800)</div><div class="mb-2">#343a40</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#212529;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$gray-900</div><div class="mb-2">var(--gray-900)</div><div class="mb-2">#212529</div></div></div></div><div class="col-sm-6 col-lg-4"><div class="media my-2"><div class="mr-3" style="background:#000000;width:6rem;height:6rem;border:1px solid #adb5bd"></div><div class="media-body"><div class="mb-2">$black</div><div class="mb-2">var(--black)</div><div class="mb-2">#000000</div></div></div></div></div><h2 id="fonts">Fonts</h2><p>All fonts are pre-installed in all openSUSE desktop distributions. So we can
maximize the loading experience of openSUSE users.</p><h3 style="font-family:'Source Sans Pro';font-weight:normal;">Source Sans Pro</h3><p>Source Sans Pro is used in all normal texts.</p><h3 style="font-family:'Source Sans Pro';font-weight:bold;">Source Sans Pro Bold</h3><p>Source Sans Pro Bold is used in headings, strong text.</p><div class="px-5"><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6><p>This is an
<strong>important</strong>
thing.</p></div><h3 style="font-family:'Source Code Pro';font-weight:normal;">Source Code Pro</h3><p>Source Code Pro is used in code examples.</p><pre>sudo zypper install retroarch</pre><h2 id="icons">Icons</h2><div class="row"><div class="col-6 col-sm-4 col-md-3 col-lg-2 text-center"><svg class="icon icon-2x"><use xlink:href="#opensuse"></use></svg><p>opensuse</p></div><div class="col-6 col-sm-4 col-md-3 col-lg-2 text-center"><svg class="icon icon-2x"><use xlink:href="#opensuse-button"></use></svg><p>opensuse-button</p></div><div class="col-6 col-sm-4 col-md-3 col-lg-2 text-center"><svg class="icon icon-2x"><use xlink:href="#leap"></use></svg><p>leap</p></div><div class="col-6 col-sm-4 col-md-3 col-lg-2 text-center"><svg class="icon icon-2x"><use xlink:href="#tumbleweed"></use></svg><p>tumbleweed</p></div></div><pre><code class="language-html">&lt;svg class="icon"&gt;
  &lt;use xlink:href="#leap"&gt;
&lt;/svg&gt;</code></pre><div class="alert alert-info">More icons can be found at
<a href="https://remixicon.com">Remix Icon</a>. Note: you need append
<code>-fill</code>
or
<code>-line</code>
to the name of icons from Remix Icon.</div><pre><code class="language-html">&lt;svg class="icon"&gt;
  &lt;use xlink:href="#home"&gt;
&lt;/svg&gt;</code></pre></div><div class="toc-sidebar col-lg-3 d-none d-lg-block"><div class="toc"></div></div></div></div></div><footer class="footer"><div class="container">&copy; 2017&ndash;2021 openSUSE contributors</div></footer><script src="./dist/js/jquery.slim.js"></script><script src="./dist/js/bootstrap.bundle.js"></script><script src="./dist/js/chameleon.js"></script><script src="./docs/js/doc.js"></script></body></html>