tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

doc: Add toc to design guidelines

This commit is contained in:
Eric Lippmann 2015-11-20 11:22:27 +01:00
parent 5b898d5f3b
commit c0f1d6da33
2 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
modules/doc/application/views/scripts/style/guide.phtml
View File

@ -1,37 +1,65 @@
<div class="controls"> <div class="controls">
<?= $this->tabs ?> <?= $this->tabs ?>
</div> </div>
<div class="content styleguide"> <div class="content styleguide">
<h1>Header h1</h1> <div class="section">
<h2>Header h2</h2> <h1>Icinga Web 2 Design Guidelines</h1>
<h3>Header h3</h3>
<h4>Header h4</h4>
<h5>Header h5</h5>
<h6>Header h6</h6>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. A <a href="#">link pointing somewhere</a>. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <ul class="toc">
<li><a href="#headings">Headings</a></li>
<li><a href="#block-content">Block Content</a></li>
<li><a href="#tables">Tables</a></li>
</ul>
</div>
<table class="avp"> <div class="section">
<thead> <h2 id="headings">Headings</h2>
<tr> <h1>Header h1</h1>
<th>Table Head - th in thead</th> <h2>Header h2</h2>
<td>td in thead<td> <h3>Header h3</h3>
</tr> <h4>Header h4</h4>
</thead> <h5>Header h5</h5>
<tbody> <h6>Header h6</h6>
<tr> </div>
<th>Tbody - th</th>
<td>Tbody - td</td> <div class="section">
</tr> <h2 id="block-content">Block Content</h2>
<tr> <h3>Paragraph</h3>
<th>Tbody - th</th> <p>
<td>Tbody - td</td> This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</tr> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
<tr> dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<th>Tbody - th</th> A <a href="#">link inside a paragraph</a>.
<td>Tbody - td</td> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
</tr> dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</tbody> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</table> </p>
</div>
<div class="section">
<h2 id="tables">Tables</h2>
<table class="common-table">
<thead>
<tr>
<th>Table Head - th in thead</th>
<td>td in thead<td>
</tr>
</thead>
<tbody>
<tr>
<th>Tbody - th</th>
<td>Tbody - td</td>
</tr>
<tr>
<th>Tbody - th</th>
<td>Tbody - td</td>
</tr>
<tr>
<th>Tbody - th</th>
<td>Tbody - td</td>
</tr>
</tbody>
</table>
</div>
</div> </div>

4
public/css/icinga/main.less
View File

@ -52,6 +52,10 @@
} }
} }
.section {
margin-bottom: 2em;
}
a:hover > .icon-cancel { a:hover > .icon-cancel {
color: @color-critical; color: @color-critical;
} }