Add Orders page and update menu with new Orders link

core/scss/ui/_buttons.scss

@@ -179,6 +179,10 @@
   @include elements-list;
 }
 
+.btn-list-nowrap {
+  flex-wrap: nowrap;
+}
+
 //
 // Button floating
 //

core/scss/ui/_cards.scss

@@ -404,18 +404,19 @@ Card table
  */
 .card-table {
   margin-bottom: 0 !important;
+  border-bottom-width: 0;
 
   tr {
     td,
     th {
       &:first-child {
         padding-left: $card-spacer-x;
-        border-left: 0;
+        border-left-width: 0;
       }
 
       &:last-child {
         padding-right: $card-spacer-x;
-        border-right: 0;
+        border-right-width: 0;
       }
     }
   }
@@ -425,11 +426,20 @@ Card table
   tfoot {
     tr {
       &:first-child {
-        border-top: 0;
+        border-top-width: 0;
 
         td,
         th {
-          border-top: 0;
+          border-top-width: 0;
+        }
+      }
+
+      &:last-child {
+        border-bottom-width: 0;
+
+        td,
+        th {
+          border-bottom-width: 0;
         }
       }
     }

preview/pages/_data/menu.json

@@ -295,6 +295,11 @@
         "title": "Music",
         "url": "music.html"
       },
+      "orders": {
+        "title": "Orders",
+        "url": "orders.html",
+        "badge": "New"
+      },
       "page-loader": {
         "title": "Page loader",
         "url": "page-loader.html"

preview/pages/orders.html

@@ -0,0 +1,43 @@
+---
+title: Orders
+page-header: Orders
+page-menu: extra.orders
+layout: default
+permalink: orders.html
+---
+
+<div class="card">
+	<table class="table table-vcenter card-table">
+		<thead>
+			<tr>
+				<th class="w-1">
+					<input type="checkbox" class="form-check-input" />
+				</th>
+				<th>Order ID</th>
+				<th>Customer</th>
+				<th>Amount</th>
+				<th>Status</th>
+				<th class="w-1">Actions</th>
+			</tr>
+		</thead>
+		<tbody>
+			{% for i in (1..15) %}
+			<tr>
+				<th>
+					<input type="checkbox" class="form-check-input" />
+				</th>
+				<td>{{ '96039' | plus: i }}</td>
+				<td>John Doe</td>
+				<td>$100</td>
+				<td><span class="badge badge-success">Completed</span></td>
+				<td>
+					<div class="btn-list btn-list-nowrap">
+						<a href="#" class="btn">View</a>
+						<a href="#" class="btn btn-danger">Delete</a>
+					</div>
+				</td>
+			</tr>
+			{% endfor %}
+		</tbody>
+	</table>
+</div>