ui/webui/resources/cr_elements/cr_toast/cr_toast.html

<link rel="import" href="../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<dom-module id="cr-toast">
  <template>
    <style>
      :host {
        align-items: center;
        background-color: #323232;
        border-radius: 4px;
        bottom: 0;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
        box-sizing: border-box;
        display: flex;
        margin: 24px;
        max-width: 568px;
        min-height: 52px;
        min-width: 288px;
        opacity: 0;
        padding: 0 24px;
        position: fixed;
        transform: translateY(100px);
        transition: opacity 300ms, transform 300ms, visibility 300ms;
        visibility: hidden;
        white-space: nowrap;
        z-index: 1;
      }

      :host([open]) {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }

      :host ::slotted(paper-button) {
        background-color: transparent;
        border: none;
        color: var(--google-blue-300);
        margin-inline-start: 32px;
        min-width: 52px;
        padding: 8px;
      }

      :host ::slotted(paper-button:hover) {
        background-color: transparent;
      }
    </style>
    <slot></slot>
  </template>
  <script src="cr_toast.js"></script>
</dom-module>