blob: 1d542c9bceab293ae0c3cb88078f201d2db92e50 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
<dom-module id="cr-toggle">
<template>
<style>
:host {
cursor: pointer;
display: block;
outline: none;
}
:host([disabled]) {
cursor: initial;
pointer-events: none;
}
#container {
position: relative;
width: 34px;
z-index: 0;
}
#bar {
background-color: var(--cr-toggle-unchecked-bar-color, black);
border-radius: 8px;
height: 12px;
left: 3px;
opacity: 0.4;
position: absolute;
top: 2px;
transition: background-color linear 80ms;
width: 28px;
z-index: 0;
}
:host([checked]) #bar {
background-color: var(
--cr-toggle-checked-bar-color, var(--google-blue-500));
}
:host([disabled]) #bar {
background-color: black;
opacity: 0.12;
}
#button {
background-color: var(
--cr-toggle-unchecked-button-color, var(--paper-grey-50));
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
height: 16px;
position: relative;
transition: transform linear 80ms, background-color linear 80ms;
width: 16px;
z-index: 1;
}
:host([checked]) #button {
background-color: var(
--cr-toggle-checked-button-color, var(--google-blue-500));
transform: translate3d(18px, 0, 0);
}
:host-context([dir=rtl]):host([checked]) #button {
transform: translate3d(-18px, 0, 0);
}
:host([disabled]) #button {
background-color: #bdbdbd;
opacity: 1;
}
paper-ripple {
color: var(--cr-toggle-unchecked-ink-color, var(--primary-text-color));
height: 40px;
left: -12px;
opacity: 0.5;
pointer-events: none;
top: -12px;
transition: color linear 80ms;
width: 40px;
}
:host-context([dir=rtl]) paper-ripple {
left: auto;
right: -12px;
}
:host([checked]) paper-ripple {
color: var(--cr-toggle-checked-ink-color, var(--primary-color));
}
</style>
<div id="container">
<div id="bar"></div>
<div id="button"></div>
</div>
</template>
<script src="cr_toggle.js"></script>
</dom-module>