Skip to content
This repository has been archived by the owner on Sep 5, 2019. It is now read-only.

Commit

Permalink
Added new styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@accgit
accgit committed Mar 29, 2017
1 parent ba01299 commit 3e2fc09
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 11 deletions.
83 changes: 76 additions & 7 deletions src/css/style.tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,87 @@
/*
style tables
*/
table {
border-collapse: collapse;
}

table td,
table th {
padding: 5px;
padding: 5px 8px;
}

table tr:nth-child(even) { background-color: white; }
table tr:nth-child(odd) { background-color: #f4f4f4; }

table th:first-child,
table td:first-child {
padding-left: 20px;
padding-left: 8px;
}

/*
default
*/
table tr.default:nth-child(even) {
background-color: white;
}

table tr.default:nth-child(odd) {
background-color: #f4f4f4;
}

/*
primary
*/
table tr.primary th {
border-color: #7cbae2;
}

table tr.primary td {
border-color: #7cbae2;
color: #1f4259;
}

table tr.primary:nth-child(even) td {
background-color: #a0d3f4;
}

table tr.primary:nth-child(odd) td {
background-color: #89c8f1;
}

table tr.tr.hover:hover { background-color: #e0e0e0; }
table tr.tr.hover span { color: #2976c6; }
/*
success
*/
table tr.success th {
border-color: #80c75f;
}

table tr.success td {
border-color: #80c75f;
color: #315620;
}

table tr.success:nth-child(even) td {
background-color: #aaea8d;
}

table tr.success:nth-child(odd) td {
background-color: #8edc6b;
}

/*
danger
*/
table tr.danger th {
border-color: #d46a6a;
}

table tr.danger td {
border-color: #d46a6a;
color: #542121;
}

table tr.danger:nth-child(even) td {
background-color: #f19f9f;
}

table tr.danger:nth-child(odd) td {
background-color: #e37b7b;
}
95 changes: 91 additions & 4 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,111 @@
<!-- container -->
<div class="container">
<div class="wrapping box">
<h4>Table style</h4>
<h4>Table default style</h4>
<table class="full width">
<tr>
<th>#</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr class="tr hover">
<tr class="default">
<td>1</td>
<td>Root</td>
<td>root@domain.com</td>
</tr>
<tr class="tr hover">
<tr class="default">
<td>2</td>
<td>Admin</td>
<td>admin@domain.com</td>
</tr>
<tr>
<tr class="default">
<td>3</td>
<td>User</td>
<td>user@domain.com</td>
</tr>
</table>
</div>
</div>

<!-- container -->
<div class="container">
<div class="wrapping box">
<h4>Table primary style</h4>
<table class="full width">
<tr class="primary">
<th>#</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr class="primary">
<td>1</td>
<td>Root</td>
<td>root@domain.com</td>
</tr>
<tr class="primary">
<td>2</td>
<td>Admin</td>
<td>admin@domain.com</td>
</tr>
<tr class="primary">
<td>3</td>
<td>User</td>
<td>user@domain.com</td>
</tr>
</table>
</div>
</div>

<!-- container -->
<div class="container">
<div class="wrapping box">
<h4>Table success style</h4>
<table class="full width">
<tr class="success">
<th>#</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr class="success">
<td>1</td>
<td>Root</td>
<td>root@domain.com</td>
</tr>
<tr class="success">
<td>2</td>
<td>Admin</td>
<td>admin@domain.com</td>
</tr>
<tr class="success">
<td>3</td>
<td>User</td>
<td>user@domain.com</td>
</tr>
</table>
</div>
</div>

<!-- container -->
<div class="container">
<div class="wrapping box">
<h4>Table danger style</h4>
<table class="full width">
<tr class="danger">
<th>#</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr class="danger">
<td>1</td>
<td>Root</td>
<td>root@domain.com</td>
</tr>
<tr class="danger">
<td>2</td>
<td>Admin</td>
<td>admin@domain.com</td>
</tr>
<tr class="danger">
<td>3</td>
<td>User</td>
<td>user@domain.com</td>
Expand Down

0 comments on commit 3e2fc09

Please sign in to comment.