mikit-framework
Version:
A web framework for professional developers and designers alike.
197 lines (168 loc) • 7.82 kB
HTML
<html>
<head>
<title>Mikit</title>
<!-- Mikit core CSS -->
<link rel="stylesheet" type="text/css" href="../dist/css/mikit.min.css"/>
<script type="text/javascript" src="../dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/mikit.min.js"></script>
<style>
.component-index-box {
counter-reset: count;
max-width: 400px;
margin: 30px auto 60px auto;
padding: 32px;
background: #fbfbfb;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.component-index-box li {
line-height: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 24px;
counter-increment: count;
}
.component-index-box li a {
display: block;
text-decoration: none;
position: relative;
padding-left: 10px;
}
.component-show {
width: 1180px;
margin: 0 auto;
}
.example {
border: 1px solid rgba(0, 0, 0, 0.07);
padding: 32px;
margin-bottom: 16px;
}
.example-inverted-box {
display: inline-block;
padding: 6px 8px 6px 8px;
line-height: 1;
vertical-align: middle;
background: #d4d4d4;
}
</style>
</head>
<body>
<div class="component-index-box">
<ol>
<li><a href="#h-base">Base</a></li>
<li><a href="#h-outline">Outline</a></li>
<li><a href="#h-upper">Upper</a></li>
<li><a href="#h-custom">Custom</a></li>
</ol>
</div>
<div class="component-show">
<!------------------------------------------------------------------>
<h3 class="section-head" id="h-base">Base</h3>
<div class="example">
<span class="mi-badge">Default</span>
<span class="mi-badge mi-badge-success">Success</span>
<span class="mi-badge mi-badge-error">Error</span>
<span class="mi-badge mi-badge-warning">Warning</span>
<span class="mi-badge mi-badge-focus">Focus</span>
<span class="mi-badge mi-badge-black">Black</span>
<span class="example-inverted-box"><span class="mi-badge mi-badge-inverted">Inverted</span></span>
<div class="demo-code">
<pre>
<span class="mi-badge">Default</span>
<span class="mi-badge mi-badge-success">Success</span>
<span class="mi-badge mi-badge-error">Error</span>
<span class="mi-badge mi-badge-warning">Warning</span>
<span class="mi-badge mi-badge-focus">Focus</span>
<span class="mi-badge mi-badge-black">Black</span>
<span class="mi-badge mi-badge-inverted">inverted</span>
</pre>
</div>
</div>
<!------------------------------------------------------------------>
<h3 class="section-head" id="h-outline">Outline</h3>
<div class="example">
<span class="mi-badge mi-badge-outline">Default</span>
<span class="mi-badge mi-badge-success mi-badge-outline">Success</span>
<span class="mi-badge mi-badge-error mi-badge-outline">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-outline">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-outline">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-outline">Black</span>
<span class="example-inverted-box"><span class="mi-badge mi-badge-inverted mi-badge-outline">Inverted</span></span>
<div class="demo-code">
<pre>
<span class="mi-badge mi-badge-outline">Default</span>
<span class="mi-badge mi-badge-success mi-badge-outline">Success</span>
<span class="mi-badge mi-badge-error mi-badge-outline">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-outline">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-outline">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-outline">Black</span>
<span class="mi-badge mi-badge-inverted mi-badge-outline">inverted</span>
</pre>
</div>
</div>
<!------------------------------------------------------------------>
<h3 class="section-head" id="h-upper">Upper</h3>
<div class="example">
<span class="mi-badge mi-badge-upper">Default</span>
<span class="mi-badge mi-badge-success mi-badge-upper">Success</span>
<span class="mi-badge mi-badge-error mi-badge-upper">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-upper">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-upper">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-upper">Black</span>
<span class="example-inverted-box"><span class="mi-badge mi-badge-inverted mi-badge-upper">Inverted</span></span>
<div class="demo-code">
<pre>
<span class="mi-badge mi-badge-upper">Default</span>
<span class="mi-badge mi-badge-success mi-badge-upper">Success</span>
<span class="mi-badge mi-badge-error mi-badge-upper">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-upper">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-upper">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-upper">Black</span>
<span class="mi-badge mi-badge-inverted mi-badge-upper">Inverted</span>
</pre>
</div>
</div>
<!------------------------------------------------------------------>
<h3 class="section-head" id="h-custom">Custom</h3>
<p>You can use mixins to customize your labels and badges.</p>
<div class="example">
<style>
.mi-badge.mi-badge-custom {
background: #ea48a7;
color: #fff;
}
</style>
<span class="mi-badge mi-badge-custom">Label</span>
<span class="mi-badge mi-badge-custom">1</span>
<pre class="code skip"><span class="hljs-comment"><!-- scss --></span>
.mi-badge.mi-badge-custom {
// $text-color, $back-color
@include label(#fff, #ea48a7);
}
<span class="hljs-comment"><!-- html --></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-badge mi-badge-custom"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-badge mi-badge-custom"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-badge mi-badge-tag mi-badge-custom"</span>></span>Tag<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
</pre>
</div>
</div>
</body>
</html>