blob: 06960d473a7381a29554547555b9257ceebf9aa7 [file] [log] [blame]
<!-- Copyright 2015 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.
`files-icon-button` implements common behaviors among icon buttons in file
manager, video player, and audio player.
If the button has |toggles| attributes, this element uses files-toggle-ripple
to indicate the active state. Otherwise, this element uses files-ripple to
show circle burst on click.
In addition, this element shows outline only when it is focused by keyboard
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-behaviors/iron-button-state.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
<dom-module id="files-icon-button">
:host {
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
cursor: pointer;
display: inline-block;
height: 32px;
outline: none; /* We use original outline for focused state. */
position: relative;
width: 32px;
:host(.keyboard-focus) {
/* We use box-shadow rather than outline to make it rounded. */
box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
files-toggle-ripple {
height: 28px;
left: 2px;
pointer-events: none;
position: absolute;
top: 2px;
width: 28px;
<files-ripple hidden="[[toggles]]"></files-ripple>
<files-toggle-ripple activated="[[active]]"></files-toggle-ripple>
<script src="files_icon_button.js"></script>