112 lines
3.3 KiB
HTML
112 lines
3.3 KiB
HTML
|
<!-- Testing the module -->
|
||
|
|
<h2 id="stack">Stack</h2>
|
||
|
|
|
||
|
|
<h3>Buttons stack</h3>
|
||
|
|
|
||
|
|
<div class="flex four">
|
||
|
|
<div>
|
||
|
|
<span class="stack button icon-puzzle">Plugins</span>
|
||
|
|
<span class="stack button icon-picture">Demo</span>
|
||
|
|
<span class="stack button icon-help-circled">Test</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="radio" name="stack" checked />
|
||
|
|
<span class="button toggle"><span class="icon-puzzle"></span>Plugins</span>
|
||
|
|
</label>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="radio" name="stack" />
|
||
|
|
<span class="button toggle"><span class="icon-picture"></span>Demo</span>
|
||
|
|
</label>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="radio" name="stack" />
|
||
|
|
<span class="button toggle"><span class="icon-help-circled"></span>Test</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="checkbox" checked />
|
||
|
|
<span class="button toggle"><span class="icon-puzzle"></span>Plugins</span>
|
||
|
|
</label>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="checkbox" checked />
|
||
|
|
<span class="button toggle"><span class="icon-picture"></span>Demo</span>
|
||
|
|
</label>
|
||
|
|
<label class="stack">
|
||
|
|
<input type="checkbox" />
|
||
|
|
<span class="button toggle"><span class="icon-help-circled"></span>Test</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="stack pseudo button icon-puzzle">Plugins</span>
|
||
|
|
<span class="stack pseudo button icon-picture">Demo</span>
|
||
|
|
<span class="stack pseudo button icon-help-circled">Test</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Image stack</h3>
|
||
|
|
|
||
|
|
<div class="flex four">
|
||
|
|
<div>
|
||
|
|
<img class="stack" src="img/forest.jpg" />
|
||
|
|
<a class="stack button">Forest</a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img class="stack" src="img/balloon.jpg" />
|
||
|
|
<a class="stack button">Balloon</a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img class="stack" src="img/lake.jpg" /> <a class="stack button">Lake</a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img class="stack" src="img/halong.jpg" />
|
||
|
|
<a class="stack button">Halong bay</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Form stack</h3>
|
||
|
|
|
||
|
|
<div class="flex four">
|
||
|
|
<div>
|
||
|
|
<input class="stack" placeholder="Name" />
|
||
|
|
<input class="stack" type="email" placeholder="Email" />
|
||
|
|
<input class="stack" type="password" placeholder="Password" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<select class="stack">
|
||
|
|
<option>Select an option</option>
|
||
|
|
<option>Good option</option>
|
||
|
|
<option>Nice option</option>
|
||
|
|
<option>Cheap option</option>
|
||
|
|
</select>
|
||
|
|
<select class="stack">
|
||
|
|
<option>Select an option</option>
|
||
|
|
<option>Good option</option>
|
||
|
|
<option>Nice option</option>
|
||
|
|
<option>Cheap option</option>
|
||
|
|
</select>
|
||
|
|
<select class="stack">
|
||
|
|
<option>Select an option</option>
|
||
|
|
<option>Good option</option>
|
||
|
|
<option>Nice option</option>
|
||
|
|
<option>Cheap option</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<textarea class="stack" placeholder="Textarea"></textarea>
|
||
|
|
<textarea class="stack" placeholder="Textarea"></textarea>
|
||
|
|
<textarea class="stack" placeholder="Textarea"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="dropimage stack">
|
||
|
|
<input name="filea" title="Drop image or click me" type="file" />
|
||
|
|
</label>
|
||
|
|
<label class="dropimage stack">
|
||
|
|
<input name="filea" title="Drop image or click me" type="file" />
|
||
|
|
</label>
|
||
|
|
<label class="dropimage stack">
|
||
|
|
<input name="filea" title="Drop image or click me" type="file" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|