mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 14:56:28 +02:00
Code Issues Releases Wiki Activity

Minor fix in base module's fonts, added demos for buttons and labels

Browse Source
This commit is contained in:
Angelos Chalaris
2016-09-15 14:10:56 +03:00
parent 54fd3d467d
commit 6b3db97a89
4 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/modules.html
View File

@@ -450,6 +450,48 @@
&lt;/form&gt;</pre>
</div><br>
<h2 id="button">Buttons</h2>
<p>Use the <code>.btn</code> class on <code>&lt;button&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;label&gt;</code> or similar elements to give them a unique style. Color variants are provided (<code>.red</code>, <code>.green</code> and <code>.blue</code>), as well as size variants (<code>.sm</code> and <code>.lg</code>).</p>
<h3>Button styles and variants</h3>
<div class="panel" ><h4 class="head">Example</h4><br>
&nbsp;&nbsp;<button class="btn">Default button</button>
&nbsp;&nbsp;<button class="btn red">Red button</button>
&nbsp;&nbsp;<button class="btn green">Green button</button>
&nbsp;&nbsp;<button class="btn blue">Blue button</button>
&nbsp;&nbsp;<button class="btn sm">Small button</button>
&nbsp;&nbsp;<button class="btn lg">Large button</button><br><br>
<pre class="panelcode">&lt;button class=&quot;btn&quot;&gt;Default button&lt;/button&gt;
&lt;button class=&quot;btn red&quot;&gt;Red button&lt;/button&gt;
&lt;button class=&quot;btn green&quot;&gt;Green button&lt;/button&gt;
&lt;button class=&quot;btn blue&quot;&gt;Blue button&lt;/button&gt;
&lt;button class=&quot;btn sm&quot;&gt;Small button&lt;/button&gt;
&lt;button class=&quot;btn lg&quot;&gt;Large button&lt;/button&gt;</pre>
</div><br>
<h2 id="label">Labels &amp; Badges</h2>
<p>Use the <code>.lbl</code> or <code>.bdg</code> class on any elements to style them like labels or badges. Color variants are provided (<code>.red</code>, <code>.green</code> and <code>.blue</code>) for both of these styles.</p>
<h3>Labels and badge styles</h3>
<div class="panel" ><h4 class="head">Example</h4><br>
&nbsp;&nbsp;<span class="lbl">Label</span>
<span class="lbl red">Red label</span>
<span class="lbl green">Green label</span>
<span class="lbl blue">Blue label</span>
<span class="bdg">12</span>
<span class="bdg red">3</span>
<span class="bdg green">45</span>
<span class="bdg blue">6</span><br><br>
<pre class="panelcode">&lt;span class=&quot;lbl&quot;&gt;Label&lt;/span&gt;
&lt;span class=&quot;lbl red&quot;&gt;Red label&lt;/span&gt;
&lt;span class=&quot;lbl green&quot;&gt;Green label&lt;/span&gt;
&lt;span class=&quot;lbl blue&quot;&gt;Blue label&lt;/span&gt;
&lt;span class=&quot;bdg&quot;&gt;12&lt;/span&gt;
&lt;span class=&quot;bdg red&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;bdg green&quot;&gt;45&lt;/span&gt;
&lt;span class=&quot;bdg blue&quot;&gt;6&lt;/span&gt;</pre>
</div><br>
</div>
</div>