components/proximity_auth/webui/resources/content-panel.html

   1 <link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import">
   2 <link href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html" rel="import">
   3 <link href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html" rel="import">
   4 <link href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html" rel="import">
   5 <link href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html" rel="import">
   6 <link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import">
   7 <link href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html" rel="import">
   8 <link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import">
   9 <link href="device-list.html" rel="import">
  10 <link href="eligible-devices.html" rel="import">
  11 <link href="local-state.html" rel="import">
  12 <link href="reachable-devices.html" rel="import">
  13
  14 <dom-module id="content-panel">
  15   <style>
  16     :host {
  17       background-color: #ececec;
  18       display: flex;
  19       flex-direction: column;
  20     }
  21
  22     #pages {
  23       overflow-y: auto;
  24     }
  25
  26     paper-tabs {
  27       background-color: rgb(3, 169, 244);
  28       box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2);
  29       color: white;
  30       font-size: 14px;
  31       font-weight: 500;
  32       width: 100%;
  33     }
  34
  35     local-state,
  36     eligible-devices,
  37     reachable-devices {
  38       width: 80%;
  39     }
  40   </style>
  41
  42   <template>
  43     <paper-tabs id="tabs" selected="{{selected_}}">
  44       <paper-tab>LOCAL STATE</paper-tab>
  45       <paper-tab>ELIGIBLE PHONES</paper-tab>
  46       <paper-tab>REACHABLE PHONES</paper-tab>
  47     </paper-tabs>
  48
  49     <neon-animated-pages id="pages" selected="[[selected_]]"
  50         entry-animation="fade-in-animation"
  51         exit-animation="fade-out-animation"
  52         on-selected-item-changed="onSelectedPageChanged_"
  53         class="flex">
  54       <neon-animatable class="layout vertical center">
  55         <local-state id="local-state" class="flex"></local-state>
  56       </neon-animatable>
  57
  58       <neon-animatable class="layout vertical center">
  59         <eligible-devices id="eligible-devices" class="flex"></eligible-devices>
  60         </eligible-devices>
  61       </neon-animatable>
  62
  63       <neon-animatable class="layout vertical center">
  64         <reachable-devices id="reachable-devices" class="flex">
  65         </reachable-devices>
  66       </neon-animatable>
  67     </neon-animated-pages>
  68   </template>
  69   <script src="content-panel.js"></script>
  70 </dom-module>