Google Git
Sign in
webkit / WebKit / 517e03d89fa20a8f371610b7aa35e8b0bf7b411d / . / Tools / Scripts / libraries / resultsdbpy / resultsdbpy / view / static / library / css / index.html
blob: 3310c19087340659107cc1d9e156285c7e88627b [file] [log] [blame]
<!-- This file is auto generated, please do not modify it directly -->
<!DOCTYPE html>
<html>
<head>
<title>A Shared CSS library for webkit services</title>
<link rel="stylesheet" href="webkit.css"></link>
<link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="https://webkit.org/favicon.ico">
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
<meta charset="UTF-8">
</head>
<body>
<!-- example topbar -->
<div id="topbar" class="topbar fixed" style="display:none">
<div class="title">
Topbar
</div>
<div class="actions">
<div class="list">
<div class="item">
<a>item 1</a>
</div>
<div class="item">
<a>item 2</a>
</div>
<div class="item">
<a>item 3</a>
</div>
</div>
</div>
</div>
<!-- end of example topbar -->
<!-- Sidebar -->
<div class="sidebar">
<div class="header">
<div class="title">
<h2>Webkit.css</h2>
</div>
</div>
<div class="list">
<div class="item">
<h3><a href="#Typography">Typography</a></h3>
</div>
<div class="item">
<div class="list">
<div class="item sub">
<a href="#Typography-Headings">Headings</a>
</div>
<div class="item sub">
<a href="#Typography-Text">Text</a>
</div>
<div class="item sub">
<a href="#Typography-Text block">Text block</a>
</div>
<div class="item sub">
<a href="#Typography-Quote">Quote</a>
</div>
</div>
</div>
<div class="divider"></div>
<div class="item">
<h3><a href="#Layout">Layout</a></h3>
</div>
<div class="item">
<div class="list">
</div>
</div>
<div class="divider"></div>
<div class="item">
<h3><a href="#Elements">Elements</a></h3>
</div>
<div class="item">
<div class="list">
<div class="item sub">
<a href="#Elements-Topbar">Topbar</a>
</div>
<div class="item sub">
<a href="#Elements-Section">Section</a>
</div>
<div class="item sub">
<a href="#Elements-Placeholder">Placeholder</a>
</div>
<div class="item sub">
<a href="#Elements-Loader">Loader</a>
</div>
<div class="item sub">
<a href="#Elements-Progress bar">Progress bar</a>
</div>
<div class="item sub">
<a href="#Elements-List">List</a>
</div>
<div class="item sub">
<a href="#Elements-Sidebar">Sidebar</a>
</div>
<div class="item sub">
<a href="#Elements-Drawer">Drawer</a>
</div>
<div class="item sub">
<a href="#Elements-Table">Table</a>
</div>
<div class="item sub">
<a href="#Elements-Inputs">Inputs</a>
</div>
<div class="item sub">
<a href="#Elements-Button">Button</a>
</div>
<div class="item sub">
<a href="#Elements-Switch">Switch</a>
</div>
<div class="item sub">
<a href="#Elements-Badge">Badge</a>
</div>
<div class="item sub">
<a href="#Elements-Dot">Dot</a>
</div>
<div class="item sub">
<a href="#Elements-chip">chip</a>
</div>
<div class="item sub">
<a href="#Elements-Tabs">Tabs</a>
</div>
<div class="item sub">
<a href="#Elements-Timeline">Timeline</a>
</div>
<div class="item sub">
<a href="#Elements-Lengend">Lengend</a>
</div>
<div class="item sub">
<a href="#Elements-Popover">Popover</a>
</div>
</div>
</div>
<div class="divider"></div>
</div>
</div>
<!-- End of sidebar -->
<!-- content -->
<div class="main">
<div id="Typography" class="section article">
<div class="header">
<div class="title">
<h1>Typography</h1>
</div>
</div>
<div class="header" id="Typography-Headings">
<div class="title">
<h2>Headings</h2>
</div>
</div>
<div class="content">
<pre><xmp><h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4></xmp></pre>
</div>
<div class="content">
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
</div>
<div class="header" id="Typography-Text">
<div class="title">
<h2>Text</h2>
</div>
</div>
<div class="content">
Use class "text" along with different size class to control the font size.
</div>
<div class="content">
<pre><xmp><div class="text">Default</div>
<div class="text huge">This is Huge</div>
<div class="text large">This is Large</div>
<div class="text medium">This is medium</div>
<div class="text small">This is small</div>
<div class="text tiny">This is tiny</div></xmp></pre>
</div>
<div class="content">
<div class="text">Default</div>
<div class="text huge">This is Huge</div>
<div class="text large">This is Large</div>
<div class="text medium">This is medium</div>
<div class="text small">This is small</div>
<div class="text tiny">This is tiny</div>
</div>
<div class="header" id="Typography-Text-block">
<div class="title">
<h2>Text block</h2>
</div>
</div>
<div class="content">
Use class "text" along with "block" to make inline-block text blocks.
</div>
<div class="content">
<pre><xmp><div class="text block">
<div class="text tiny">iMac 27" (Late 2012)</div>
<div class="text small">iMac 13,2</div>
</div>
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2012)</div>
<div class="text small">iMac 13,2</div>
</div>
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div>
</div>
<div class="header" id="Typography-Quote">
<div class="title">
<h2>Quote</h2>
</div>
</div>
<div class="content">
<pre><xmp><pre>
I am a quote
</pre></xmp></pre>
</div>
<div class="content">
<pre>
I am a quote
</pre>
</div>
</div>
<div id="Layout" class="section article">
<div class="header">
<div class="title">
<h1>Layout</h1>
</div>
</div>
<div class="content">
<pre><xmp><div class="row">
<div class="col-12">
<div class="placeholder dimmer tiny"><p class="loader">col-12</p></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
</div>
<div class="col-6">
<div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="placeholder dimmer tiny"><p class="loader">col-4</p></div>
</div>
<div class="col-8">
<div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
</div>
<div class="col-2">
<div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
</div>
<div class="col-8">
<div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
</div>
</div>
<div class="row">
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
</div>
<div class="row">
<div class="col-s-12">
<div class="placeholder dimmer tiny"><p class="loader">col-s-12</p></div>
</div>
</div>
<div class="row">
<div class="col-s-6">
<div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
</div>
<div class="col-s-6">
<div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
</div>
</div>
<div class="row">
<div class="col-s-4">
<div class="placeholder dimmer tiny"><p class="loader">col-s-4</p></div>
</div>
<div class="col-s-8">
<div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
</div>
</div>
<div class="row">
<div class="col-s-2">
<div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
</div>
<div class="col-s-2">
<div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
</div>
<div class="col-s-8">
<div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="row">
<div class="col-12">
<div class="placeholder dimmer tiny"><p class="loader">col-12</p></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
</div>
<div class="col-6">
<div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="placeholder dimmer tiny"><p class="loader">col-4</p></div>
</div>
<div class="col-8">
<div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
</div>
<div class="col-2">
<div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
</div>
<div class="col-8">
<div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
</div>
</div>
<div class="row">
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
<div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
</div>
<div class="row">
<div class="col-s-12">
<div class="placeholder dimmer tiny"><p class="loader">col-s-12</p></div>
</div>
</div>
<div class="row">
<div class="col-s-6">
<div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
</div>
<div class="col-s-6">
<div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
</div>
</div>
<div class="row">
<div class="col-s-4">
<div class="placeholder dimmer tiny"><p class="loader">col-s-4</p></div>
</div>
<div class="col-s-8">
<div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
</div>
</div>
<div class="row">
<div class="col-s-2">
<div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
</div>
<div class="col-s-2">
<div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
</div>
<div class="col-s-8">
<div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
</div>
</div>
</div>
</div>
<div id="Elements" class="section article">
<div class="header">
<div class="title">
<h1>Elements</h1>
</div>
</div>
<div class="header" id="Elements-Topbar">
<div class="title">
<h2>Topbar</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="topbar">
<div class="title">My App</div>
<div class="actions">
<div class="list">
<div class="item">
<a>link 1</a>
</div>
<div class="item">
<a>link 2</a>
</div>
<div class="item">
<a>link 3</a>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="topbar">
<div class="title">My App</div>
<div class="actions">
<div class="list">
<div class="item">
<a>link 1</a>
</div>
<div class="item">
<a>link 2</a>
</div>
<div class="item">
<a>link 3</a>
</div>
</div>
</div>
</div>
</div>
<div class="header" id="Elements-Section">
<div class="title">
<h2>Section</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="content">
<div class="section">
<div class="header">
<div class="title">
Title
</div>
<div class="actions">
<div class="list">
<div class="item">
action 1
</div>
<div class="item">
action 2
</div>
</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="actions">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="content">
<div class="section">
<div class="header">
<div class="title">
Title
</div>
<div class="actions">
<div class="list">
<div class="item">
action 1
</div>
<div class="item">
action 2
</div>
</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="actions">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
</div>
</div>
</div>
</div>
<div class="content">
Use "article" modifier to get rid of the border:
</div>
<div class="content">
<pre><xmp><div class="content">
<div class="section article">
<div class="header">
<div class="title">
Title
</div>
<div class="actions">
<div class="list">
<div class="item">
action 1
</div>
<div class="item">
action 2
</div>
</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="actions">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="content">
<div class="section article">
<div class="header">
<div class="title">
Title
</div>
<div class="actions">
<div class="list">
<div class="item">
action 1
</div>
<div class="item">
action 2
</div>
</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="actions">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
</div>
</div>
</div>
</div>
<div class="header" id="Elements-Placeholder">
<div class="title">
<h2>Placeholder</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="placeholder"> <p class="loader">placeholder</p> </div>
<div class="placeholder small"><p class="loader">placeholder small</p> </div>
<div class="placeholder tiny"><p class="loader">placeholder tiny</p></div></xmp></pre>
</div>
<div class="content">
<div class="placeholder"> <p class="loader">placeholder</p> </div>
<div class="placeholder small"><p class="loader">placeholder small</p> </div>
<div class="placeholder tiny"><p class="loader">placeholder tiny</p></div>
</div>
<div class="content">
Use "dimmer" modifier to make the placeholder dark
</div>
<div class="content">
<pre><xmp><div class="placeholder dimmer"> <p class="loader">placeholder</p> </div></xmp></pre>
</div>
<div class="content">
<div class="placeholder dimmer"> <p class="loader">placeholder</p> </div>
</div>
<div class="header" id="Elements-Loader">
<div class="title">
<h2>Loader</h2>
</div>
</div>
<div class="content">
Size
</div>
<div class="content">
<pre><xmp><div class="loader">
<div class="spinner huge">
</div>
<div class="spinner large">
</div>
<div class="spinner">
</div>
<div class="spinner small">
</div>
<div class="spinner tiny">
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="loader">
<div class="spinner huge">
</div>
<div class="spinner large">
</div>
<div class="spinner">
</div>
<div class="spinner small">
</div>
<div class="spinner tiny">
</div>
</div>
</div>
<div class="content">
Color
</div>
<div class="content">
<pre><xmp><div class="loader">
<div class="spinner">
</div>
<div class="spinner blue">
</div>
<div class="spinner purple">
</div>
<div class="spinner green">
</div>
<div class="spinner orange">
</div>
<div class="spinner red">
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="loader">
<div class="spinner">
</div>
<div class="spinner blue">
</div>
<div class="spinner purple">
</div>
<div class="spinner green">
</div>
<div class="spinner orange">
</div>
<div class="spinner red">
</div>
</div>
</div>
<div class="content">
With Placeholder
</div>
<div class="content">
<pre><xmp><div class="placeholder dimmer">
<div class="loader">
<div class="spinner">
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="placeholder dimmer">
<div class="loader">
<div class="spinner">
</div>
</div>
</div>
</div>
<div class="header" id="Elements-Progress-bar">
<div class="title">
<h2>Progress bar</h2>
</div>
</div>
<div class="content">
Different colors with mixin
</div>
<div class="content">
<pre><xmp><div>
<div class="progress-bar-container">
<div class="progress-bar" style="width:25%">25%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar success" style="width:50%">50%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar failed" style="width:75%">75%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar error" style="width:100%">100%</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div>
<div class="progress-bar-container">
<div class="progress-bar" style="width:25%">25%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar success" style="width:50%">50%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar failed" style="width:75%">75%</div>
</div>
</div>
<hr>
<div>
<div class="progress-bar-container">
<div class="progress-bar error" style="width:100%">100%</div>
</div>
</div>
</div>
<div class="content">
Mulit bar
</div>
<div class="content">
<pre><xmp><div>
<div class="progress-bar-container">
<div class="progress-bar" style="width:25%">25%</div>
<div class="progress-bar error" style="width:75%">75%</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div>
<div class="progress-bar-container">
<div class="progress-bar" style="width:25%">25%</div>
<div class="progress-bar error" style="width:75%">75%</div>
</div>
</div>
</div>
<div class="header" id="Elements-List">
<div class="title">
<h2>List</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="list">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="divider"></div>
<div class="item">
<div class="list">
<div class="item">item 1 lv2</div>
<div class="item">item 2 lv2</div>
<div class="divider"></div>
<div class="item">
<div class="list">
<div class="item">item 1 lv3</div>
<div class="item">item 2 lv3</div>
</div>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="list">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="divider"></div>
<div class="item">
<div class="list">
<div class="item">item 1 lv2</div>
<div class="item">item 2 lv2</div>
<div class="divider"></div>
<div class="item">
<div class="list">
<div class="item">item 1 lv3</div>
<div class="item">item 2 lv3</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header" id="Elements-Sidebar">
<div class="title">
<h2>Sidebar</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="sidebar">
<div class="header">
<div class="title">
Title
</div>
</div>
</div>
<div class="main">
</div></xmp></pre>
</div>
<div class="content">
<div class="sidebar">
<div class="header">
<div class="title">
Title
</div>
</div>
</div>
<div class="main">
</div>
</div>
<div class="header" id="Elements-Drawer">
<div class="title">
<h2>Drawer</h2>
</div>
</div>
<div class="content">
<pre><xmp><div id="bottom-drawer" class="drawer">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('bottom-drawer')()">Close</a>
</div>
</div>
</div>
<div id="left-drawer" class="drawer left">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer')()">Close</a>
</div>
</div>
</div>
<div id="right-drawer" class="drawer right">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('right-drawer')()">Close</a>
</div>
</div>
</div>
<div id="left-drawer-under-toolbar" class="drawer left under-topbar-with-actions">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer-under-toolbar')();closeTopbar()">Close</a>
</div>
</div>
</div>
<div>
<button class="button" onclick="openDrawerFactory('bottom-drawer')()">Open bottom</button>
<button class="button" onclick="openDrawerFactory('left-drawer')()">Open left</button>
<button class="button" onclick="openDrawerFactory('right-drawer')()">Open right</button>
<button class="button" onclick="openDrawerFactory('left-drawer-under-toolbar')();openTopbar()">Open left under topbar</button>
</div>
<script>
const closeDrawerFactory = (id) => (e) => document.getElementById(id).classList.remove("display");
const openDrawerFactory = (id) => (e) => document.getElementById(id).classList.add("display");
const closeTopbar = () => { document.getElementById("topbar").style.display = "none" };
const openTopbar = () => {
document.getElementById("topbar").style.display = "flex";
};
</script></xmp></pre>
</div>
<div class="content">
<div id="bottom-drawer" class="drawer">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('bottom-drawer')()">Close</a>
</div>
</div>
</div>
<div id="left-drawer" class="drawer left">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer')()">Close</a>
</div>
</div>
</div>
<div id="right-drawer" class="drawer right">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('right-drawer')()">Close</a>
</div>
</div>
</div>
<div id="left-drawer-under-toolbar" class="drawer left under-topbar-with-actions">
<div class="header">
<div class="actions">
<a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer-under-toolbar')();closeTopbar()">Close</a>
</div>
</div>
</div>
<div>
<button class="button" onclick="openDrawerFactory('bottom-drawer')()">Open bottom</button>
<button class="button" onclick="openDrawerFactory('left-drawer')()">Open left</button>
<button class="button" onclick="openDrawerFactory('right-drawer')()">Open right</button>
<button class="button" onclick="openDrawerFactory('left-drawer-under-toolbar')();openTopbar()">Open left under topbar</button>
</div>
<script>
const closeDrawerFactory = (id) => (e) => document.getElementById(id).classList.remove("display");
const openDrawerFactory = (id) => (e) => document.getElementById(id).classList.add("display");
const closeTopbar = () => { document.getElementById("topbar").style.display = "none" };
const openTopbar = () => {
document.getElementById("topbar").style.display = "flex";
};
</script>
</div>
<div class="header" id="Elements-Table">
<div class="title">
<h2>Table</h2>
</div>
</div>
<div class="content">
<pre><xmp><table class="table">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table></xmp></pre>
</div>
<div class="content">
<table class="table">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table>
</div>
<div class="content">
full-width
</div>
<div class="content">
<pre><xmp><table class="table full-width">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table></xmp></pre>
</div>
<div class="content">
<table class="table full-width">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table>
</div>
<div class="content">
Stripped
</div>
<div class="content">
<pre><xmp><table class="table full-width stripped">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table></xmp></pre>
</div>
<div class="content">
<table class="table full-width stripped">
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table>
</div>
<div class="header" id="Elements-Inputs">
<div class="title">
<h2>Inputs</h2>
</div>
</div>
<div class="content">
Input
</div>
<div class="content">
<pre><xmp><div class="input">
<input type="text" required/>
<label>Text field1</label>
</div>
<div class="row">
<div class="col-6">
<div class="input">
<input type="text" required/>
<label>Text field2</label>
</div>
</div>
<div class="col-6">
<div class="input">
<div class="prefix"><p>+1</p></div>
<input type="text" required/>
<label>Text field3</label>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="input">
<input type="text" required/>
<label>Text field1</label>
</div>
<div class="row">
<div class="col-6">
<div class="input">
<input type="text" required/>
<label>Text field2</label>
</div>
</div>
<div class="col-6">
<div class="input">
<div class="prefix"><p>+1</p></div>
<input type="text" required/>
<label>Text field3</label>
</div>
</div>
</div>
</div>
<div class="content">
Sliders
</div>
<div class="content">
<pre><xmp><div class="row">
<div class="col-6">
<div class="input">
<label>Range slider</label>
<input type="range" min="0" max="100" value="0"/>
<input type="number" min="0" max="100" value="0"/>
</div>
</div>
<div class="col-6">
<div class="input">
<input type="range" min="0" max="100" value="80"/>
<input type="number" min="0" max="100" value="80"/>
</div>
</div>
</div>
<div class="input">
<label>Double range input</label>
<div class="double-range">
<input type="number" min="0" max="100" value="20"/>
<div class="range">
<input type="range" min="0" max="100" value="20"/>
<input type="range" min="0" max="100" value="70"/>
</div>
<input type="number" min="0" max="100" value="70"/>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="row">
<div class="col-6">
<div class="input">
<label>Range slider</label>
<input type="range" min="0" max="100" value="0"/>
<input type="number" min="0" max="100" value="0"/>
</div>
</div>
<div class="col-6">
<div class="input">
<input type="range" min="0" max="100" value="80"/>
<input type="number" min="0" max="100" value="80"/>
</div>
</div>
</div>
<div class="input">
<label>Double range input</label>
<div class="double-range">
<input type="number" min="0" max="100" value="20"/>
<div class="range">
<input type="range" min="0" max="100" value="20"/>
<input type="range" min="0" max="100" value="70"/>
</div>
<input type="number" min="0" max="100" value="70"/>
</div>
</div>
</div>
<div class="content">
Number
</div>
<div class="content">
<pre><xmp><div class="input">
<input type="number" required min="0" max="100"/>
<label>Number</label>
</div>
<div class="input">
<input type="number" required min="0" max="10" value="11"/>
<label>Number out of range</label>
</div></xmp></pre>
</div>
<div class="content">
<div class="input">
<input type="number" required min="0" max="100"/>
<label>Number</label>
</div>
<div class="input">
<input type="number" required min="0" max="10" value="11"/>
<label>Number out of range</label>
</div>
</div>
<div class="content">
Select
</div>
<div class="content">
<pre><xmp><div class="input">
<select required>
<option></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<label>Select</label>
</div></xmp></pre>
</div>
<div class="content">
<div class="input">
<select required>
<option></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<label>Select</label>
</div>
</div>
<div class="content">
Switch
</div>
<div class="content">
<pre><xmp><div class="input">
<label>Switch1</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="input">
<label>Switch2</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div></xmp></pre>
</div>
<div class="content">
<div class="input">
<label>Switch1</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="input">
<label>Switch2</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>
<div class="content">
Mixin
</div>
<div class="content">
<pre><xmp><div class="input">
<input type="text" required disabled/>
<label>Disabled</label>
</div>
<div class="input">
<input type="text" required disabled value="I am disabled"/>
<label>Disabled with existing value</label>
</div>
<div class="input">
<input class="invalid" type="text" required value="use invalid mixin to force invalid style"/>
<label>Invalid</label>
</div>
<div class="input">
<label>Invalid Range slider</label>
<input class="invalid" type="range" min="0" max="100" value="101"/>
<input type="number" min="0" max="100" value="101"/>
</div></xmp></pre>
</div>
<div class="content">
<div class="input">
<input type="text" required disabled/>
<label>Disabled</label>
</div>
<div class="input">
<input type="text" required disabled value="I am disabled"/>
<label>Disabled with existing value</label>
</div>
<div class="input">
<input class="invalid" type="text" required value="use invalid mixin to force invalid style"/>
<label>Invalid</label>
</div>
<div class="input">
<label>Invalid Range slider</label>
<input class="invalid" type="range" min="0" max="100" value="101"/>
<input type="number" min="0" max="100" value="101"/>
</div>
</div>
<div class="header" id="Elements-Button">
<div class="title">
<h2>Button</h2>
</div>
</div>
<div class="content">
<pre><xmp><button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button danger">Danger</button></xmp></pre>
</div>
<div class="content">
<button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button danger">Danger</button>
</div>
<div class="content">
Size
</div>
<div class="content">
<pre><xmp><button class="button huge">huge</button>
<button class="button large">large</button>
<button class="button medium">medium</button>
<button class="button">small</button>
<button class="button tiny">tiny</button></xmp></pre>
</div>
<div class="content">
<button class="button huge">huge</button>
<button class="button large">large</button>
<button class="button medium">medium</button>
<button class="button">small</button>
<button class="button tiny">tiny</button>
</div>
<div class="content">
Disabled
</div>
<div class="content">
<pre><xmp><button class="button" disabled>Default</button>
<button class="button primary" disabled>Primary</button>
<button class="button danger" disabled>Danger</button></xmp></pre>
</div>
<div class="content">
<button class="button" disabled>Default</button>
<button class="button primary" disabled>Primary</button>
<button class="button danger" disabled>Danger</button>
</div>
<div class="header" id="Elements-Switch">
<div class="title">
<h2>Switch</h2>
</div>
</div>
<div class="content">
<pre><xmp><label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label></xmp></pre>
</div>
<div class="content">
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="header" id="Elements-Badge">
<div class="title">
<h2>Badge</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="badge">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2012)</div>
<div class="text small">iMac 13,2</div>
</div>
</div>
<div class="badge outline">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div>
</div>
<div class="badge active">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="badge">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2012)</div>
<div class="text small">iMac 13,2</div>
</div>
</div>
<div class="badge outline">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div>
</div>
<div class="badge active">
<div class="text block">
<div class="text tiny">iMac 27" (Late 2013)</div>
<div class="text small">iMac 14,2</div>
</div>
</div>
</div>
<div class="header" id="Elements-Dot">
<div class="title">
<h2>Dot</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="dot"></div>
<div class="dot success"></div>
<div class="dot failed"></div>
<div class="dot error"></div></xmp></pre>
</div>
<div class="content">
<div class="dot"></div>
<div class="dot success"></div>
<div class="dot failed"></div>
<div class="dot error"></div>
</div>
<div class="content">
Size
</div>
<div class="content">
<pre><xmp><div class="dot small"></div>
<div class="dot medium"></div>
<div class="dot large"></div></xmp></pre>
</div>
<div class="content">
<div class="dot small"></div>
<div class="dot medium"></div>
<div class="dot large"></div>
</div>
<div class="content">
With string inside
</div>
<div class="content">
<pre><xmp><div class="dot success">
<div class="text">&#10003</div>
</div>
<div class="dot failed">
<div class="text">&#120247</div>
</div>
<div class="dot error">
<div class="text">!</div>
</div>
<div class="dot success large">
<div class="text">&#10003</div>
</div>
<div class="dot failed large">
<div class="text">&#120247</div>
</div>
<div class="dot error large">
<div class="text">!</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="dot success">
<div class="text">&#10003</div>
</div>
<div class="dot failed">
<div class="text">&#120247</div>
</div>
<div class="dot error">
<div class="text">!</div>
</div>
<div class="dot success large">
<div class="text">&#10003</div>
</div>
<div class="dot failed large">
<div class="text">&#120247</div>
</div>
<div class="dot error large">
<div class="text">!</div>
</div>
</div>
<div class="content">
With image inside
</div>
<div class="content">
<pre><xmp><div class="dot error">
<img src="../icons/clock.svg">
</div></xmp></pre>
</div>
<div class="content">
<div class="dot error">
<img src="../icons/clock.svg">
</div>
</div>
<div class="content">
Blink
</div>
<div class="content">
<pre><xmp><div class="dot blink"></div>
<div class="dot success blink"></div>
<div class="dot failed blink"></div>
<div class="dot error blink"></div></xmp></pre>
</div>
<div class="content">
<div class="dot blink"></div>
<div class="dot success blink"></div>
<div class="dot failed blink"></div>
<div class="dot error blink"></div>
</div>
<div class="content">
Dot selector
</div>
<div class="content">
<pre><xmp><div class="dot selector">
<label>
<input type="radio" name="selector">
<div class="dot success"></div>
</label>
<label>
<input type="radio" name="selector">
<div class="dot failed"></div>
</label>
<label>
<input type="radio" name="selector">
<div class="dot error"></div>
</label>
</div></xmp></pre>
</div>
<div class="content">
<div class="dot selector">
<label>
<input type="radio" name="selector">
<div class="dot success"></div>
</label>
<label>
<input type="radio" name="selector">
<div class="dot failed"></div>
</label>
<label>
<input type="radio" name="selector">
<div class="dot error"></div>
</label>
</div>
</div>
<div class="header" id="Elements-chip">
<div class="title">
<h2>chip</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="chip">
<div class="dot small blink"></div>
<div class="text block">
<p>iPone</p>
</div>
</div>
<div class="chip">
<div class="dot small blink failed"></div>
<div class="text block">
<p>iPad</p>
</div>
</div>
<div class="chip">
<div class="dot small success"></div>
<div class="text block">
<p>Mac</p>
</div>
</div>
<div class="chip">
<div class="text block">
<p>macOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div>
<div class="chip">
<div class="text block">
<p>iOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div>
<div class="chip">
<div class="text block">
<p>watchOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="chip">
<div class="dot small blink"></div>
<div class="text block">
<p>iPone</p>
</div>
</div>
<div class="chip">
<div class="dot small blink failed"></div>
<div class="text block">
<p>iPad</p>
</div>
</div>
<div class="chip">
<div class="dot small success"></div>
<div class="text block">
<p>Mac</p>
</div>
</div>
<div class="chip">
<div class="text block">
<p>macOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div>
<div class="chip">
<div class="text block">
<p>iOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div>
<div class="chip">
<div class="text block">
<p>watchOS</p>
</div>
<div class="text block">
<a>X</a>
</div>
</div>
</div>
<div class="header" id="Elements-Tabs">
<div class="title">
<h2>Tabs</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="tabs">
<div class="title">
Title
</div>
<div class="tab active">
<a class="link">Tab 1</a>
</div>
<div class="tab">
<a class="link">Tab 2</a>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="tabs">
<div class="title">
Title
</div>
<div class="tab active">
<a class="link">Tab 1</a>
</div>
<div class="tab">
<a class="link">Tab 2</a>
</div>
</div>
</div>
<div class="header" id="Elements-Timeline">
<div class="title">
<h2>Timeline</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="timeline">
<div class="header">
<div class="series">
time line 1
</div>
<div class="series">
time line 2
</div>
</div>
<div class="content">
<div class="series">
<div class="dot">
<div class="tag">1231</div>
</div>
<div class="dot success">
<div class="tag">456</div>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot error">
<div class="tag">123</div>
</div>
<div class="dot empty"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="series">
<div class="dot empty"></div>
<div class="dot empty"></div>
<div class="dot">
<div class="tag">3533</div>
</div>
<div class="dot">
<div class="tag">3532</div>
</div>
<div class="dot">
<div class="tag">352</div>
</div>
<div class="dot">
<div class="tag">351</div>
</div>
<div class="dot">
<div class="tag">1</div>
</div>
<div class="dot">
<div class="tag">456</div>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="x-axis">
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
</div>
<div class="x-axis">
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale group-10">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="timeline">
<div class="header">
<div class="series">
time line 1
</div>
<div class="series">
time line 2
</div>
</div>
<div class="content">
<div class="series">
<div class="dot">
<div class="tag">1231</div>
</div>
<div class="dot success">
<div class="tag">456</div>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot error">
<div class="tag">123</div>
</div>
<div class="dot empty"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="series">
<div class="dot empty"></div>
<div class="dot empty"></div>
<div class="dot">
<div class="tag">3533</div>
</div>
<div class="dot">
<div class="tag">3532</div>
</div>
<div class="dot">
<div class="tag">352</div>
</div>
<div class="dot">
<div class="tag">351</div>
</div>
<div class="dot">
<div class="tag">1</div>
</div>
<div class="dot">
<div class="tag">456</div>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="x-axis">
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r1234567
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
</div>
<div class="x-axis">
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
I am a tag
</div>
</div>
<div class="scale group-10">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
I am a tag
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
co-revision timeline top x-axis
</div>
<div class="content">
<pre><xmp><div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
Debug
</div>
<div class="series">
Release
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale">
<div class="line"></div>
<div class="text">
r244510
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244509
</div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244507
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244506
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244505
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244504
</div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
c3558d50
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
08637423
</div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
Debug
</div>
<div class="series">
Release
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale">
<div class="line"></div>
<div class="text">
r244510
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244509
</div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244507
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244506
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244505
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244504
</div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
c3558d50
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
08637423
</div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
Only Group Scale
</div>
<div class="content">
<pre><xmp><div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
Debug
</div>
<div class="series">
Release
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244510
</div>
<div class="border-line-right"></div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
Debug
</div>
<div class="series">
Release
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244510
</div>
<div class="border-line-right"></div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
Large Series Label
</div>
<div class="content">
<pre><xmp><div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
I am a very long and big series 1
</div>
<div class="series">
I am a very long and big series 2
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale">
<div class="line"></div>
<div class="text">
r244510
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244509
</div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244507
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244506
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244505
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244504
</div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
c3558d50
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
08637423
</div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="timeline">
<div class="header with-top-x-axis">
<div class="series">
I am a very long and big series 1
</div>
<div class="series">
I am a very long and big series 2
</div>
</div>
<div class="content">
<div class="x-axis top">
<div class="scale">
<div class="line"></div>
<div class="text">
r244510
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244509
</div>
</div>
<div class="scale group-4">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
r244508
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244507
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244506
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244505
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
r244504
</div>
</div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="series">
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
<div class="dot success"></div>
</div>
<div class="x-axis">
<div class="scale group-3">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
ac826a38
</div>
<div class="border-line-right"></div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
c3558d50
</div>
</div>
<div class="scale">
<div class="line"></div>
<div class="text">
08637423
</div>
</div>
<div class="scale group-5">
<div class="border-line-left"></div>
<div class="line"></div>
<div class="text">
c94feb63
</div>
<div class="border-line-right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="header" id="Elements-Lengend">
<div class="title">
<h2>Lengend</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="lengend">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="lengend">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
</div>
<div class="content">
With horizontal mixin
</div>
<div class="content">
<pre><xmp><div class="lengend horizontal">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="lengend horizontal">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
</div>
<div class="content">
With timeline mixin
</div>
<div class="content">
<pre><xmp><div class="lengend timeline">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="lengend timeline">
<div class="item">
<div class="dot success">
<div class="text">✓</div>
</div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
<div class="dot failed"></div>
<div class="label">Tests Failed</div>
</div>
<div class="item">
<div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
</div>
<div class="header" id="Elements-Popover">
<div class="title">
<h2>Popover</h2>
</div>
</div>
<div class="content">
<pre><xmp><div class="popover display">
<div class="arrow point-top" style="left: 106px;">
</div>
<div class="content" style="width:200px">
This is popover;
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- You can control the arrow pos by seting the left or top -->
<div class="popover display">
<div class="arrow point-bottom" style="left: 106px;">
</div>
<div class="content" style="width:200px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="popover display">
<div class="arrow point-left" style="top: 31px;">
</div>
<div class="content" style="height:50px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="popover display">
<div class="arrow point-right" style="top: 31px;">
</div>
<div class="content" style="height:50px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></xmp></pre>
</div>
<div class="content">
<div class="popover display">
<div class="arrow point-top" style="left: 106px;">
</div>
<div class="content" style="width:200px">
This is popover;
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- You can control the arrow pos by seting the left or top -->
<div class="popover display">
<div class="arrow point-bottom" style="left: 106px;">
</div>
<div class="content" style="width:200px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="popover display">
<div class="arrow point-left" style="top: 31px;">
</div>
<div class="content" style="height:50px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="popover display">
<div class="arrow point-right" style="top: 31px;">
</div>
<div class="content" style="height:50px">
This is a popover
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="placeholder"></div>
</div>
<!-- end of content-->
</body>
</html>