OLD | NEW |
(Empty) | |
| 1 <!-- Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 -- Use of this source code is governed by a BSD-style license that can be |
| 3 -- found in the LICENSE file. |
| 4 --> |
| 5 |
| 6 <!-- |
| 7 `files-icon-button` implements common behaviors among icon buttons in file |
| 8 manager, video player, and audio player. |
| 9 If the button has |toggles| attributes, this element uses files-toggle-ripple |
| 10 to indicate the active state. Otherwise, this element uses files-ripple to |
| 11 show circle burst on click. |
| 12 In addition, this element shows outline only when it is focused by keyboard |
| 13 operation. |
| 14 --> |
| 15 |
| 16 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
| 17 <link rel="import" href="chrome://resources/polymer/v1_0/iron-behaviors/iron-but
ton-state.html"> |
| 18 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/for
eground/elements/files_ripple.html"> |
| 19 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/for
eground/elements/files_toggle_ripple.html"> |
| 20 |
| 21 <dom-module id="files-icon-button"> |
| 22 <template> |
| 23 <style> |
| 24 :host { |
| 25 background-position: center; |
| 26 background-repeat: no-repeat; |
| 27 border-radius: 2px; |
| 28 cursor: pointer; |
| 29 display: inline-block; |
| 30 height: 32px; |
| 31 outline: none; /* We use original outline for focused state. */ |
| 32 position: relative; |
| 33 width: 32px; |
| 34 } |
| 35 |
| 36 :host(.keyboard-focus) { |
| 37 /* We use box-shadow rather than outline to make it rounded. */ |
| 38 box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5); |
| 39 } |
| 40 |
| 41 files-toggle-ripple { |
| 42 height: 28px; |
| 43 left: 2px; |
| 44 pointer-events: none; |
| 45 position: absolute; |
| 46 top: 2px; |
| 47 width: 28px; |
| 48 } |
| 49 |
| 50 files-toggle-ripple::shadow .ripple.activated { |
| 51 opacity: 0.1; |
| 52 } |
| 53 </style> |
| 54 |
| 55 <files-ripple hidden="[[toggles]]"></files-ripple> |
| 56 <files-toggle-ripple activated="[[active]]"></files-toggle-ripple> |
| 57 <!-- TODO(fukino): Make it possible to insert user-defined element to show t
hem on top of ripple effect. --> |
| 58 </template> |
| 59 |
| 60 <script src="files_icon_button.js"></script> |
| 61 </dom-module> |
OLD | NEW |