Adding table

index.html

@@ -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>
 

package-lock.json

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

package.json

@@ -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": {

src/_maketheme.scss

@@ -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";

src/base.scss

@@ -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";

src/base/_list.scss

@@ -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%);
-//     // }
-// }
+}

src/base/_table.scss

@@ -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);
+   }
+}

src/theme/_table.scss

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