bluetooth: Add device list UI for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

Index: chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
diff --git a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
index 1cd2375dae567b4ff8df989b1872fafa42f74625..dafafe1b300272fbf6dbf70c0122e5a825d3ae6f 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -13,11 +13,89 @@ body {
   padding: 0;
 }
 
+/* Header bar */
+
 header {
-  background-color: blue;
-  padding: 2px;
+  align-items: center;
+  background-color: cornflowerblue;
+  display: flex;
+  flex-direction: row;
+  font-size: 20pt;
+  height: 56px;
+  justify-content: flex-start;
+  padding: 0 16px;
+}
+
+header .menu-button a {
+  color: white;
+  margin-right: 16px;
+  text-decoration: none;

[scheib, 2016/10/15 03:51:45]

text-decoration necessary?

[mbrunson, 2016/10/18 00:21:25]

I meant to remove this rule. This was for a menu button but I haven't added it
yet.

 }
 
-header * {
+header .title {
   color: white;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+
+/* Device table */
+
+#device-table {

[scheib, 2016/10/15 03:51:45]

You'll likely have other tables? Perhaps use a class for .table instead of being
id based #device-table? 

[mbrunson, 2016/10/18 00:21:25]

Done.

+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  border-spacing: 0;

[scheib, 2016/10/15 03:51:45]

border-spacing necessary if collapse is used?

[mbrunson, 2016/10/18 00:21:25]

Removed.

+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#device-table tr {
+  border: 1px solid #ddd;
+  padding: 5px;
+}
+
+#device-table th,
+#device-table td {
+  padding: 10px;
+  text-align: center;
+}
+
+#device-table th {
+  font-size: 14px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: 600px) {
+  #device-table {
+    border: 0;
+  }
+
+  #device-table thead {
+    display: none;
+  }
+
+  #device-table tr {
+    border-bottom: 2px solid #ddd;
+    display: block;
+  }
+
+  #device-table td {
+    border-bottom: 1px dotted #ccc;
+    display: block;
+    font-size: 13px;
+    text-align: right;
+  }
+
+  #device-table td:last-child {
+    border-bottom: 0;
+  }
+
+  #device-table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
 }