dashing-framework
Version:
Style framework for Dash
73 lines (67 loc) • 2.74 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/example.css" rel="stylesheet">
<title>Lists</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<script src="../../scripts/prism.js"></script>
</head>
<body class="example-body">
<div class="main-content">
<div id="sidebarNavigation" class="example-sidebar"></div>
<div class="sidebar--overlay is-hidden"></div>
<div class="main">
<div class="page-header">
<button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button>
<h1>Lists</h1>
</div>
<div class="app-content">
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Ordered Lists <button class="button button--transparent button--copy-link" data-id="copyurl" id="ordered-lists"></h2>
<div class="row example-container">
<div class="column column--full" style="overflow: auto;">
<ol class="ordered-list--custom">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
</ol>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><ol class="ordered-list--custom">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
</ol></code>
</pre>
</div>
<div class="column column--full">
<h2 class="example-header no-margin--top">Custom Colored Lists <button class="button button--transparent button--copy-link" data-id="copyurl" id="ordered-lists"></h2>
<div class="row example-container">
<div class="column column--full" style="overflow: auto;">
<ol class="ordered-list--custom ordered-list--sharing-blue">
<li>This is a custom colored list item</li>
</ol>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><ol class="ordered-list--custom ordered-list--sharing-blue">
<li>This is a custom colored list item</li>
</ol></code>
</pre>
<pre><code class="language-scss">//Example: Custom Colored Lists
.ordered-list--sharing-blue {
@include ordered-list($sharing-blue, $white);
}</code>
</pre>
</div>
</div>
</div>
</body>
</html>