Skip to content

Commit

Permalink
Updates generated files 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@claudiopro
claudiopro committed Sep 9, 2024
1 parent 71865d7 commit 12847f7
Show file tree
Hide file tree
Showing 13 changed files with 1,412 additions and 550 deletions.
2 changes: 1 addition & 1 deletion css/aoi.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/aoi_guide.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/aoi.min.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/aoi_guide.min.css
View file

Large diffs are not rendered by default.

324 changes: 324 additions & 0 deletions docs/buttons.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@
<!doctype html>
<html>
<head>
<title>Aoi (青い) style guide - buttons</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#298597" />
<meta property="og:url" content="https://emeraldion.github.io/aoi/docs/buttons.html" />
<meta property="og:title" content="Aoi (青い) style guide"/>
<meta property="og:description" content="Aoi (Japanese: Blue, Green) is a design language for Emeraldion UX" />
<meta property="og:image" content="https://emeraldion.github.io/aoi/aoi_og.jpg" />
<meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="../css/aoi.css" />
<link type="text/css" rel="stylesheet" href="../css/aoi_guide.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/zenburn.min.css" />
<link type="image/png" rel="icon" href="../favicon.png" />
</head>
<body>
<!-- generated with Fork me on GitHub [animated corner style generator] http://codepen.io/Rplus/pen/wKZOBo -->
<a class="github-corner" href="https://github.com/emeraldion/aoi" title="Fork me on GitHub"><svg width="68" height="68" viewbox="0 0 250 250"><title>Fork me on GitHub</title><path d="M0 0h250v250"></path><path class="octo-arm" d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px"></path><path class="octo-body" d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor"></path></svg><style> .github-corner svg{position:absolute;right:0;top:0;color:#ffffff;fill:#000000;}.github-corner:hover .octo-arm{animation:octocat-wave .56s;}@keyframes octocat-wave{0%, 100%{transform:rotate(0);}20%, 60%{transform:rotate(-20deg);}40%, 80%{transform:rotate(10deg);}}</style></a>
<nav class="sg">

<a href="index.html"><span id="logo">青い</span></a>
<ul>

<li><a href="buttons.html"><span class="txt">buttons</span><i class="fa fa-check-square"></i></a></li>

<li><a href="controls.html"><span class="txt">controls</span><i class="fa fa-font"></i></a></li>

<li><a href="forms.html"><span class="txt">forms</span><i class="fa fa-i-cursor"></i></a></li>

<li><a href="messages.html"><span class="txt">messages</span><i class="fa fa-warning"></i></a></li>

<li><a href="navigation.html"><span class="txt">navigation</span><i class="fa fa-map-signs"></i></a></li>

<li><a href="layout.html"><span class="txt">layout</span><i class="fa fa-th"></i></a></li>

<li><a href="tables.html"><span class="txt">tables</span><i class="fa fa-table"></i></a></li>

</ul>
</nav>

<main>
<h1>Aoi (青い) style guide</h1>
<section class="content">
<ul>

<li><a href="#1-buttons">Buttons</a></li>

<li><a href="#2-small-buttons">Small buttons</a></li>

<li><a href="#3-large-buttons">Large buttons</a></li>

<li><a href="#4-huge-buttons">Huge buttons</a></li>

<li><a href="#5-colorful-buttons">Colorful buttons</a></li>

</ul>
<h1 id="1-buttons" class="styleguide">Buttons</h1>
<p class="styleguide">Use the <code class="styleguide">btn</code> class on <code class="styleguide">&lt;button&gt;</code> or <code class="styleguide">&lt;input type=&quot;button&quot;&gt;</code> elements.</p><div class="codeTable">
<table>
<tbody>

<tr>
<th>
<div class="exampleOutput">
<input type="button" class="btn" value="Button"/>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">value=</span><span class="s">"Button"</span><span class="nt">/&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn">Button</button>

</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>

<h1 id="2-small-buttons" class="styleguide">Small buttons</h1>
<p class="styleguide">Add the <code class="styleguide">btn-small</code> class to other button classes to obtain a smaller affordance.</p><div class="codeTable">
<table>
<tbody>

<tr>
<th>
<div class="exampleOutput">
<input type="button" class="btn btn-small" value="Button"/>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-small"</span> <span class="na">value=</span><span class="s">"Button"</span><span class="nt">/&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn btn-small">Button</button>

</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-small"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>

<h1 id="3-large-buttons" class="styleguide">Large buttons</h1>
<p class="styleguide">Add the <code class="styleguide">btn-large</code> class to other button classes to obtain a larger affordance.</p><div class="codeTable">
<table>
<tbody>

<tr>
<th>
<div class="exampleOutput">
<input type="button" class="btn btn-large" value="Button"/>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-large"</span> <span class="na">value=</span><span class="s">"Button"</span><span class="nt">/&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn btn-large">Button</button>

</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-large"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>

<h1 id="4-huge-buttons" class="styleguide">Huge buttons</h1>
<p class="styleguide">Add the <code class="styleguide">btn-huge</code> class to other button classes to obtain an even larger affordance.</p><div class="codeTable">
<table>
<tbody>

<tr>
<th>
<div class="exampleOutput">
<input type="button" class="btn btn-huge" value="Button"/>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-huge"</span> <span class="na">value=</span><span class="s">"Button"</span><span class="nt">/&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn btn-huge">Button</button>

</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-huge"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>

<h1 id="5-colorful-buttons" class="styleguide">Colorful buttons</h1>
<p class="styleguide">Add the <code class="styleguide">accent</code>, <code class="styleguide">danger</code>, <code class="styleguide">warning</code>, <code class="styleguide">info</code>, or <code class="styleguide">success</code> classes to a button
to give the button a special semantic cue.</p><div class="codeTable">
<table>
<tbody>

<tr>
<th>
<div class="exampleOutput">
<button class="btn accent">Button</button>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn accent"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn danger">Button</button>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn danger"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn warning">Button</button>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn warning"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn info">Button</button>
</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn info"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

<tr>
<th>
<div class="exampleOutput">
<button class="btn success">Button</button>

</div>
</th>
<td>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn success"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></pre>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>
</section>
</main>
<footer>
<p>Made with <i class="fa fa-heart"></i> by <a href="http://www.emeraldion.it">Emeraldion</a>. Generated with <a href="http://github.com/trulia/hologram">Hologram</a></p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script>
$(document).ready(function() {
$('pre').each(function(i, block) {
$(block).addClass('html');
hljs.highlightBlock(block);
});
});
</script>
</body>
</html>
Loading

0 comments on commit 12847f7

Please sign in to comment.