Adding table

This commit is contained in:
Fabian 2019-09-17 22:43:36 +02:00
parent d687d260d5
commit c37137805e
8 changed files with 60 additions and 12 deletions

View File

@ -217,6 +217,36 @@
</div>
</div>
</div>
<div class="margin prev">
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Sanna</td>
<td>Castillo</td>
<td>65</td>
</tr>
<tr>
<td>Petra</td>
<td>Serrano</td>
<td>26</td>
</tr>
</table>
</div>
</div>
</body>

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@hibas123/theme",
"version": "1.2.4",
"version": "1.2.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,11 +1,13 @@
{
"name": "@hibas123/theme",
"version": "1.2.6",
"version": "1.2.7",
"description": "",
"main": " ",
"files": [
"out/*.css",
"src/*",
"index.html",
"ipsum.js",
"Roboto-Regular.woff2"
],
"scripts": {

View File

@ -49,4 +49,5 @@ $button-color: #CCCCCC !default;
@import "./theme/_input.scss";
@import "./theme/_list.scss";
@import "./theme/_header.scss";
@import "./theme/_card.scss";
@import "./theme/_card.scss";
@import "./theme/table.scss";

View File

@ -34,4 +34,5 @@ $on-error: var(--on-error) !default;
@import "./base/_list.scss";
@import "./base/_header.scss";
@import "./base/_card.scss";
@import "./base/_grid.scss";
@import "./base/_grid.scss";
@import "./base/table.scss";

View File

@ -11,11 +11,4 @@
li:nth-child(n+2) {
border-top: 1px solid rgb(128, 128, 128);
}
}
// .list-clickable {
// // li:hover {
// // background: darken-brighten-color($background, 5%);
// // }
// }
}

16
src/base/_table.scss Normal file
View File

@ -0,0 +1,16 @@
.table {
border-collapse: collapse;
width: 100%;
th,
td {
text-align: left;
padding: 8px;
}
tr:first-child {
background-color: $primary;
color: var(--on-primary);
}
}

5
src/theme/_table.scss Normal file
View File

@ -0,0 +1,5 @@
.table {
tr:nth-child(odd):not(:first-child) {
background: darken-brighten-color($background, 10%)
}
}