third_party/polymer/v0_8/components-chromium/paper-toast/paper-toast.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/typography.html">
  11 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
  12
  13 <!--
  14 `paper-toast` provides a subtle notification toast.
  15
  16 @group Paper Elements
  17 @element paper-toast
  18 @demo demo/index.html
  19 @hero hero.svg
  20 -->
  21 </head><body><dom-module id="paper-toast">
  22   <style>
  23     :host {
  24       display: inline-block;
  25       position: fixed;
  26
  27       background: #323232;
  28       color: #f1f1f1;
  29       min-height: 48px;
  30       min-width: 288px;
  31       padding: 16px 24px 12px;
  32       box-sizing: border-box;
  33       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  34       border-radius: 2px;
  35       bottom: 12px;
  36       left: 12px;
  37       font-size: 14px;
  38       cursor: default;
  39
  40       -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
  41       transition: visibility 0.3s, transform 0.3s;
  42
  43       -webkit-transform: translateY(100px);
  44       transform: translateY(100px);
  45
  46       visibility: hidden;
  47     }
  48
  49     :host(.capsule) {
  50       border-radius: 24px;
  51     }
  52
  53     :host(.fit-bottom) {
  54       bottom: 0;
  55       left: 0;
  56       width: 100%;
  57       min-width: 0;
  58       border-radius: 0;
  59     }
  60
  61     :host(.paper-toast-open){
  62       visibility: visible;
  63
  64       -webkit-transform: translateY(0px);
  65       transform: translateY(0px);
  66     }
  67   </style>
  68   <template>
  69     <span id="label">{{text}}</span>
  70     <content></content>
  71   </template>
  72 </dom-module>
  73 <script src="paper-toast-extracted.js"></script></body></html>