blob: 603efbbcb8497c187ae5b9896fb901b92fb6d5a1 [file] [log] [blame]
<link rel="import" href="../../html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../shared_vars_css.html">
<!--
List of customizable styles:
--cr-checkbox-border-size
--cr-checkbox-checked-box-color
--cr-checkbox-label-color
--cr-checkbox-label-container (CSS mixin)
--cr-checkbox-mark-color
--cr-checkbox-ripple-checked-color
--cr-checkbox-ripple-size
--cr-checkbox-ripple-unchecked-color
--cr-checkbox-size
--cr-checkbox-unchecked-box-color
-->
<dom-module id="cr-checkbox">
<template>
<style>
:host {
-webkit-tap-highlight-color: transparent;
align-items: center;
cursor: pointer;
display: flex;
outline: none;
user-select: none;
--cr-checkbox-size: 16px;
--cr-checkbox-border-size: 2px;
--cr-checkbox-ripple-size: 40px;
--cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));
}
:host([disabled]) {
cursor: initial;
opacity: var(--cr-disabled-opacity);
pointer-events: none;
}
#checkbox {
background: none;
border: var(--cr-checkbox-border-size) solid
var(--cr-checkbox-unchecked-box-color, var(--google-grey-refresh-700));
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: block;
flex-shrink: 0;
height: var(--cr-checkbox-size);
margin: 0;
outline: none;
padding: 0;
position: relative;
transform: none; /* Checkboxes shouldn't flip even in RTL. */
width: var(--cr-checkbox-size);
}
#checkmark {
border-color: var(--cr-checkbox-mark-color, white);
border-style: solid;
border-width: 0 2px 2px 0;
content: '';
display: block;
height: 73%;
transform: scale(0) rotate(45deg);
transform-origin: 100% 80%;
width: 36%;
}
:host-context([dir='rtl']) #checkmark {
transform-origin: 50% 14%;
}
:host([checked]) #checkbox {
background: var(--cr-checkbox-checked-box-color,
var(--google-blue-600));
border-color: var(--cr-checkbox-checked-box-color,
var(--google-blue-600));
}
:host([checked]) #checkmark {
transform: scale(1) rotate(45deg);
/* Only animate when showing checkmark. */
transition: transform 140ms ease-out;
}
paper-ripple {
--paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.15);
color: var(--cr-checkbox-ripple-unchecked-color, var(--google-grey-600));
height: var(--cr-checkbox-ripple-size);
left: var(--cr-checkbox-ripple-offset);
pointer-events: none;
top: var(--cr-checkbox-ripple-offset);
transition: color linear 80ms;
width: var(--cr-checkbox-ripple-size);
}
:host([checked]) paper-ripple {
--paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.2);
color: var(--cr-checkbox-ripple-checked-color, var(--google-blue-600));
}
:host-context([dir=rtl]) paper-ripple {
left: auto;
right: var(--cr-checkbox-ripple-offset);
}
#label-container {
color: var(--cr-checkbox-label-color, var(--google-grey-900));
padding-inline-start: 20px;
white-space: normal;
@apply --cr-checkbox-label-container;
}
:host(.no-label) #label-container {
display: none;
}
</style>
<!-- Mousing down then moving cursor out of this element should not trigger
click on the parent. With <button> this works as expected, while <div>
does not. -->
<button id="checkbox" tabindex="-1" on-focus="onButtonFocus_"
aria-hidden="true">
<span id="checkmark"></span>
</button>
<div id="label-container"><slot></slot></div>
</template>
<script src="cr_checkbox.js"></script>
</dom-module>