bluetooth: Add notification system to internals page.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 :root {
+  --fade-duration: 225ms;
   --md-timing-function: cubic-bezier(.4, 0, .6, 1);
   --sidebar-width: 155px;
   --sidebar-neg-width: calc(var(--sidebar-width) * -1);
 }
 
 html,
 body {
   margin: 0;
   padding: 0;
 }
@@ skipping 113 matching lines @@
   -webkit-border-start: 6px solid rgb(78, 87, 100);
   -webkit-padding-start: 10px;
   color: rgb(70, 78, 90);
 }
 
 .sidebar-content button:hover {
   background-color: #E0E0E0;
 }
 
 .overlay {
-  --fade-duration: 225ms;
   background-color: rgba(0, 0, 0, .5);
   bottom: 0;
   left: 0;
   opacity: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: visibility var(--fade-duration),
       opacity var(--fade-duration) var(--md-timing-function);
   visibility: hidden;
@@ skipping 48 matching lines @@
     display: block;
     text-align: end;
   }
 
   table td::before {
     content: attr(data-label);
     float: left;
     font-weight: bold;
   }
 }
+
+/* Snackbar */
+.snackbar {
+  background-color: #323232;
+  border-radius: 2px;
+  bottom: 0;
+  color: #F1F1F1;

[Dan Beam, 2016/12/16 21:54:40]

nit: html/css style guide generally prefers lower-case hex colors i think (i.e.
#f1f1f1)

[mbrunson, 2016/12/17 02:21:58]

Hmm ok. I fixed them all here. Done.

+  display: flex;
+  font-size: 1.5em;
+  justify-content: center;
+  left: 0;
+  margin: 0 auto;

[Dan Beam, 2016/12/16 21:54:40]

could we change this to margin: 12px; to position like paper-toast?

[mbrunson, 2016/12/17 02:21:58]

I was wondering why they have that margin. The material design spec for
snackbars doesn't specify that. I guess there's a style difference between
toasts and snackbars.

I had to move some things around, but it's like paper-toast now. Done.

+  max-width: 568px;
+  min-height: 20px;
+  min-width: 288px;
+  padding: 14px 24px;
+  position: fixed;
+  right: 0;
+  transform: translate3d(0, 48px, 0);
+  transition: transform var(--fade-duration), visibility var(--fade-duration);
+  transition-timing-function: var(--md-timing-function);
+  visibility: hidden;
+}
+
+.snackbar a {
+  -webkit-margin-start: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: 600px) {
+  .snackbar {
+    border-radius: 0;
+    max-width: unset;
+    min-width: unset;

[Dan Beam, 2016/12/16 21:54:40]

rather than setting and unsetting, maybe just set in a @media query?

[mbrunson, 2016/12/17 02:21:59]

Done.

+  }
+}
+
+.snackbar div {
+  align-self: flex-start;
+}
+
+.snackbar a {
+  color: rgb(238, 255, 65);
+}
+
+.snackbar.success {
+  background-color: rgb(76, 175, 80);
+}
+
+.snackbar.warning {
+  background-color: rgb(255, 152, 0);
+}
+
+.snackbar.warning a {
+  color: rgb(17, 85, 204);
+}
+
+.snackbar.error {
+  background-color: rgb(244, 67, 54);
+}
+
+.snackbar.open {
+  transform: translate3d(0, 0, 0);

[Dan Beam, 2016/12/16 21:54:40]

if 2 snackbars show at once, does the more recent one cover the other?

[mbrunson, 2016/12/17 02:21:58]

The most recent one would be on top since they're appended to
#snackbar-container and have the same z index.

+  visibility: visible;
+}