mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-02-17 18:08:41 +00:00
Fix old standard elements visualization test
This commit is contained in:
parent
cef1144ab0
commit
329516fd91
|
|
@ -6,33 +6,92 @@
|
|||
</head>
|
||||
<body>
|
||||
<div style="width: 900px; padding: 20px; border: 1px solid #ff0000;" class="center">
|
||||
<h1>Boxes</h1>
|
||||
<h2>Simple</h2>
|
||||
<section class="box center">This is some test text.</section>
|
||||
<section class="box center"><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center"><h1>Headline</h1><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
|
||||
<h2>Colored</h2>
|
||||
<section class="box center red"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center green"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center blue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center purple"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center orange"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center darkblue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
|
||||
<h2>Article</h2>
|
||||
<section class="box center">
|
||||
<article>
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
<h1>Headline1</h1>
|
||||
<h2>Headline2</h2>
|
||||
<h3>Headline3</h3>
|
||||
<h4>Headline4</h4>
|
||||
<h5>Headline5</h5>
|
||||
<h6>Headline6</h6>
|
||||
<h7>Headline7</h7>
|
||||
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
||||
ante placerat, tempus
|
||||
orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
||||
cubilia
|
||||
Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
||||
ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
||||
cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
||||
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
|
||||
ipsum,
|
||||
ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
||||
sagittis
|
||||
elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis
|
||||
lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
||||
ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
||||
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
||||
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
||||
consectetur
|
||||
dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
||||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
|
||||
<table>
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<h1>Buttons</h1>
|
||||
<h2>Normal</h2>
|
||||
<section class="box-container center">
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
|
|
@ -43,6 +102,8 @@
|
|||
<button class="blue">Test Button</button>
|
||||
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</section>
|
||||
|
||||
<h2>Connected</h2>
|
||||
<section class="box-container">
|
||||
<ul class="btns">
|
||||
<li><a href="">One</a>
|
||||
|
|
@ -51,6 +112,8 @@
|
|||
<li><a href="">Four</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h1>Tags</h1>
|
||||
<section class="box-container center">
|
||||
<span class="tag green">Test Tag</span>
|
||||
<span class="tag red">Test Tag</span>
|
||||
|
|
@ -65,58 +128,65 @@
|
|||
<span class="tag darkgreen">Test Tag</span>
|
||||
<span class="tag darkblue">Test Tag</span>
|
||||
</section>
|
||||
<section class=" w-100 floatLeft">
|
||||
|
||||
<h1>Tooltips</h1>
|
||||
<section class="box center wf-100"><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span></section>
|
||||
|
||||
<h1>Widths</h1>
|
||||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-75 floatLeft">
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-66 floatLeft">
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Icons</h1>
|
||||
<section class="center">
|
||||
<i class="fa fa-lg infoIcon fa-envelope">
|
||||
<span class="badge">777</span>
|
||||
|
|
@ -134,12 +204,9 @@
|
|||
<span class="badge">33</span>
|
||||
</i>
|
||||
</section>
|
||||
<section class="box">
|
||||
<h1>This is H1</h1>
|
||||
|
||||
<h2>This is H2</h2>
|
||||
</section>
|
||||
<section class="box w-100">
|
||||
<h1>Form</h1>
|
||||
<section class="box wf-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout">
|
||||
|
|
@ -260,6 +327,9 @@
|
|||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h1>Navigation</h1>
|
||||
<h2>Content</h2>
|
||||
<section class="wf-100">
|
||||
<ul class="nav-top">
|
||||
<li><a>About</a></li>
|
||||
|
|
@ -275,7 +345,10 @@
|
|||
<li><a>Contact</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
|
||||
<h1>Tables</h1>
|
||||
<h2>Neutral</h2>
|
||||
<section class="box-container wf-100">
|
||||
<table class="table">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
|
|
@ -335,7 +408,10 @@
|
|||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
|
||||
<h1>Tabs</h1>
|
||||
<h2>With Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabular">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab-1">TAAAB</label></li>
|
||||
|
|
@ -354,6 +430,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Without Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabular-2">
|
||||
<ul class="tab-links">
|
||||
|
|
@ -373,6 +450,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Accordion</h2>
|
||||
<section class="box-container ac-container">
|
||||
<input type="checkbox" name="About us" id="ac-1">
|
||||
<label for="ac-1">About us</label>
|
||||
|
|
@ -418,7 +496,8 @@
|
|||
</section>
|
||||
</section>
|
||||
|
||||
<section class="box-container w-50 floatLeft">
|
||||
<h1>Breadcrumbs</h1>
|
||||
<section class="box-container wf-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
|
|
@ -426,7 +505,8 @@
|
|||
<li><a>Four</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="box-container w-50 floatLeft">
|
||||
|
||||
<section class="box-container wf-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
|
|
@ -436,28 +516,34 @@
|
|||
</ul>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert ok"><i class="fa fa-check"></i>This is ok</div>
|
||||
|
||||
<h1>Alerts</h1>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert info"><i class="fa fa-bell"></i>This is a info</div>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert error"><i class="fa fa-times"></i>This is an error</div>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-1" width="100" height="100">
|
||||
|
||||
<h1>Images</h1>
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1" width="200">
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-2" width="100" height="100">
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2" width="200">
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-3" width="100" height="100">
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3" width="200">
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Ranges</h1>
|
||||
<section class="box">
|
||||
<section class="inner center">
|
||||
<input type="range">
|
||||
|
|
@ -468,40 +554,43 @@
|
|||
<progress value="33" max="100"></progress>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter orange">
|
||||
<span style="width: 75%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter red">
|
||||
<span style="width: 100%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Spinner</h1>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-1"></div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<div class="spinner-2">
|
||||
|
|
@ -512,7 +601,8 @@
|
|||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-3">
|
||||
<div class="sk-circle1 sk-circle"></div>
|
||||
|
|
@ -530,12 +620,15 @@
|
|||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-4"></div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Slider</h1>
|
||||
<h2>Automatic</h2>
|
||||
<section class="box">
|
||||
<div class="slider-1">
|
||||
<figure>
|
||||
|
|
@ -547,7 +640,9 @@
|
|||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="">
|
||||
|
||||
<h2>Clickable</h2>
|
||||
<section>
|
||||
<div class="slider-2">
|
||||
<input type="radio" name="slide_switch" id="id1"/>
|
||||
<label for="id1">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user