STEINNI
311 lines
10 KiB
HTML
Executable File
311 lines
10 KiB
HTML
Executable File
<style type="text/css">
|
|
article.styleguide .icon-list {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
article.styleguide .icon-list li {
|
|
list-style: none;
|
|
display: grid;
|
|
justify-items: center;
|
|
margin: 10px;
|
|
font-family: var(--eicui-base-font-family);
|
|
width: 100px;
|
|
}
|
|
article.styleguide .icon-list li i {
|
|
padding: 10px 10px;
|
|
margin: 3px;
|
|
border: 1px solid gray;
|
|
width: 30px;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
font-size: var(--eicui-base-font-size-2xl);
|
|
}
|
|
article.styleguide .icon-list li label { font-size: var(--eicui-base-font-size-xs); }
|
|
article.styleguide .styleguide > header { background: url('/app/assets/images/cards/styleguide.jpg'); }
|
|
article.styleguide .grid-hilite span {
|
|
display: block;
|
|
min-height: 30px;
|
|
border: 1px solid var(--eicui-base-color-primary-100);
|
|
}
|
|
article.styleguide article[eiccard] > header h1 { text-align: left; }
|
|
</style>
|
|
<article eiccard media class="styleguide">
|
|
<header>
|
|
<h1>Style guide</h1>
|
|
</header>
|
|
<section>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Typography</h1>
|
|
<h2>Utility classes available for text formatting</h2>
|
|
<nav></nav>
|
|
</header>
|
|
<section>
|
|
<h3>Font definition</h3>
|
|
<a href="https://myeic.dev.eismea.eu/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test1</a>
|
|
<a href="/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test2</a>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="eui-u-width-20">preview</th>
|
|
<th>Name</th>
|
|
<th>Value</th>
|
|
<th>Utility class</th>
|
|
<th>CSS variable</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-2xs">Sample text</p>
|
|
</td>
|
|
<td>2xs</td>
|
|
<td>0.625rem</td>
|
|
<td>eui-u-font-2xs</td>
|
|
<td>--eicui-base-font-2xs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-xs">Sample text</p>
|
|
</td>
|
|
<td>xs</td>
|
|
<td>0.75rem</td>
|
|
<td>eui-u-font-xs</td>
|
|
<td>--eicui-base-font-xs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-s">Sample text</p>
|
|
</td>
|
|
<td>s</td>
|
|
<td>0.875rem</td>
|
|
<td>eui-u-font-s</td>
|
|
<td>--eicui-base-font-s</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-m">Sample text</p>
|
|
</td>
|
|
<td>m</td>
|
|
<td>1rem</td>
|
|
<td>eui-u-font-m</td>
|
|
<td>--eicui-base-font-m</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-l">Sample text</p>
|
|
</td>
|
|
<td>l</td>
|
|
<td>1.125rem</td>
|
|
<td>eui-u-font-l</td>
|
|
<td>--eicui-base-font-l</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-xl">Sample text</p>
|
|
</td>
|
|
<td>xl</td>
|
|
<td>1.25rem</td>
|
|
<td>eui-u-font-xl</td>
|
|
<td>--eicui-base-font-xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-2xl">Sample text</p>
|
|
</td>
|
|
<td>2xl</td>
|
|
<td>1.5rem</td>
|
|
<td>eui-u-font-2xl</td>
|
|
<td>--eicui-base-font-2xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-3xl">Sample text</p>
|
|
</td>
|
|
<td>3xl</td>
|
|
<td>1.75rem</td>
|
|
<td>eui-u-font-3xl</td>
|
|
<td>--eicui-base-font-3xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-4xl">Sample text</p>
|
|
</td>
|
|
<td>4xl</td>
|
|
<td>2rem</td>
|
|
<td>eui-u-font-4xl</td>
|
|
<td>--eicui-base-font-4xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-5xl">Sample text</p>
|
|
</td>
|
|
<td>5xl</td>
|
|
<td>2.25rem</td>
|
|
<td>eui-u-font-5xl</td>
|
|
<td>--eicui-base-font-5xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p class="eui-u-font-6xl">Sample text</p>
|
|
</td>
|
|
<td>6xl</td>
|
|
<td>2.675rem</td>
|
|
<td>eui-u-font-6xl</td>
|
|
<td>--eicui-base-font-6xl</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Grid system</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>You can organize your contents in columns. The amount of columns to be used is defined through a class entry in the contents container.</p>
|
|
<p>Note that when using this grid system, the app will track interface resizing an adapt the column in order to keep a fluid display.</p>
|
|
<div class="grid-hilite">
|
|
<h6>2 columns (<code>class="cols-2"</code>)</h6>
|
|
<div class="cols-2">
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<h6>3 columns (<code>class="cols-3"</code>)</h6>
|
|
<div class="cols-3">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<h6>4 columns (<code>class="cols-4"</code>)</h6>
|
|
<div class="cols-4">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<h6>5 columns (<code>class="cols-5"</code>)</h6>
|
|
<div class="cols-5">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<h6>6 columns (<code>class="cols-6"</code>)</h6>
|
|
<div class="cols-6">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<h6>8 columns (<code>class="cols-8"</code>)</h6>
|
|
<div class="cols-8">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Color system</h1>
|
|
<h2>Normalized color coding</h2>
|
|
</header>
|
|
<section>
|
|
<h6>Severity</h6>
|
|
<p>EUI provides a reduced set of colors providing a semantic information to the user.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Meaning</th>
|
|
<th>Color</th>
|
|
<th>Attribute*</th>
|
|
<th>css variable name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Primary</td>
|
|
<td><button eicbutton primary></button></td>
|
|
<td>primary</td>
|
|
<td>--eicui-base-color-primary-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Secondary</td>
|
|
<td><button eicbutton ></button></td>
|
|
<td>(used as default)</td>
|
|
<td>--eicui-base-color-secondary-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Success</td>
|
|
<td><button eicbutton success></button></td>
|
|
<td>success</td>
|
|
<td>--eicui-base-color-success-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Warning</td>
|
|
<td><button eicbutton warning></button></td>
|
|
<td>warning</td>
|
|
<td>--eicui-base-color-warning-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Danger/failure</td>
|
|
<td><button eicbutton danger></button></td>
|
|
<td>danger</td>
|
|
<td>--eicui-base-color-danger-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Info</td>
|
|
<td><button eicbutton info></button></td>
|
|
<td>info</td>
|
|
<td>--eicui-base-color-info-100</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Accent</td>
|
|
<td><button eicbutton accent></button></td>
|
|
<td>accent</td>
|
|
<td>--eicui-base-color-accent-100</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>* See components tagged with <span eicchip xsmall info>severity</span>, indicating they support severity color system</p>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Headings</h1>
|
|
<h2>Styles available for title formatting</h2>
|
|
</header>
|
|
<section>
|
|
<h1>This is heading 1</h1>
|
|
<h2>This is heading 2</h2>
|
|
<h3>This is heading 3</h3>
|
|
<h4>This is heading 4</h4>
|
|
<h5>This is heading 5</h5>
|
|
<h6>This is heading 6</h6>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Icons</h1>
|
|
<h2>Set of UI icons</h2>
|
|
</header>
|
|
<section>
|
|
<ul class="icon-list"></ul>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
</article>
|