| <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="../shared_vars_css.html"> |
| |
| <dom-module id="cr-toggle"> |
| <template> |
| <style> |
| :host { |
| --cr-toggle-checked-bar-color: var(--google-blue-600); |
| --cr-toggle-checked-button-color: var(--google-blue-600); |
| --cr-toggle-checked-ripple-color: |
| rgba(var(--google-blue-600-rgb), .2); |
| --cr-toggle-unchecked-bar-color: var(--google-grey-400); |
| --cr-toggle-unchecked-button-color: white; |
| --cr-toggle-unchecked-ripple-color: |
| rgba(var(--google-grey-600-rgb), .15); |
| -webkit-tap-highlight-color: transparent; |
| cursor: pointer; |
| display: block; |
| min-width: 34px; |
| outline: none; |
| position: relative; |
| width: 34px; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :host { |
| --cr-toggle-checked-bar-color: var(--google-blue-300); |
| --cr-toggle-checked-button-color: var(--google-blue-300); |
| --cr-toggle-checked-ripple-color: |
| rgba(var(--google-blue-300-rgb), .4); |
| --cr-toggle-unchecked-bar-color: var(--google-grey-500); |
| --cr-toggle-unchecked-button-color: var(--google-grey-300); |
| --cr-toggle-unchecked-ripple-color: |
| rgba(var(--google-grey-300-rgb), .4); |
| } |
| } |
| /* Keep the prefers-color-scheme and [dark] rules the same. */ |
| :host([dark]) { |
| --cr-toggle-checked-bar-color: var(--google-blue-300); |
| --cr-toggle-checked-button-color: var(--google-blue-300); |
| --cr-toggle-checked-ripple-color: |
| rgba(var(--google-blue-300-rgb), .4); |
| --cr-toggle-unchecked-bar-color: var(--google-grey-500); |
| --cr-toggle-unchecked-button-color: var(--google-grey-300); |
| --cr-toggle-unchecked-ripple-color: |
| rgba(var(--google-grey-300-rgb), .4); |
| } |
| |
| :host([disabled]) { |
| cursor: initial; |
| opacity: var(--cr-disabled-opacity); |
| pointer-events: none; |
| } |
| |
| #bar { |
| background-color: var(--cr-toggle-unchecked-bar-color); |
| border-radius: 8px; |
| height: 12px; |
| left: 3px; |
| 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); |
| opacity: var(--cr-toggle-checked-bar-opacity, 0.5); |
| } |
| |
| #knob { |
| background-color: var(--cr-toggle-unchecked-button-color); |
| border-radius: 50%; |
| box-shadow: var(--cr-toggle-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .4)); |
| display: block; |
| height: 16px; |
| position: relative; |
| transition: transform linear 80ms, background-color linear 80ms; |
| width: 16px; |
| z-index: 1; |
| } |
| |
| :host([checked]) #knob { |
| background-color: var(--cr-toggle-checked-button-color); |
| transform: translate3d(18px, 0, 0); |
| } |
| |
| :host-context([dir=rtl]):host([checked]) #knob { |
| transform: translate3d(-18px, 0, 0); |
| } |
| |
| paper-ripple { |
| --paper-ripple-opacity: 1; |
| color: var(--cr-toggle-unchecked-ripple-color); |
| height: var(--cr-toggle-ripple-diameter, 40px); |
| left: 50%; |
| outline: var(--cr-toggle-ripple-ring, none); |
| pointer-events: none; |
| position: absolute; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| transition: color linear 80ms; |
| width: var(--cr-toggle-ripple-diameter, 40px); |
| } |
| |
| :host([checked]) paper-ripple { |
| color: var(--cr-toggle-checked-ripple-color); |
| } |
| |
| :host-context([dir=rtl]) paper-ripple { |
| left: auto; |
| right: 50%; |
| transform: translate(50%, -50%); |
| } |
| </style> |
| <span id="bar"></span> |
| <span id="knob"></span> |
| </template> |
| <script src="cr_toggle.js"></script> |
| </dom-module> |
