| <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/iron-flex-layout/iron-flex-layout.html"> |
| <link rel="import" href="../../html/cr.html"> |
| <link rel="import" href="../../html/event_tracker.html"> |
| <link rel="import" href="../hidden_style_css.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| |
| <dom-module id="cr-slider"> |
| <template> |
| <style include="cr-hidden-style"> |
| :host { |
| --cr-slider-bar-height: 2px; |
| --cr-slider-position-transition: 80ms ease; |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| cursor: default; |
| outline: none; |
| user-select: none; |
| } |
| |
| :host([dragging]) { |
| touch-action: none; |
| } |
| |
| #container { |
| height: 32px; |
| position: relative; |
| } |
| |
| #barContainer, |
| #bar { |
| /* Using border instead of background-color to address pixel rounding |
| at low zoom levels (e.g. 33%). The browser will round border widths |
| to a minimum of 1px.*/ |
| border-top-style: solid; |
| border-top-width: 2px; |
| } |
| |
| #barContainer { |
| border-top-color: var(--cr-slider-container-color, |
| var(--google-blue-600-opacity-24)); |
| height: var(--cr-slider-bar-height); |
| margin: 0 16px; |
| position: absolute; |
| top: 15px; |
| width: calc(100% - 32px); |
| } |
| |
| #barContainer div { |
| top: calc(-1 * var(--cr-slider-bar-height)); |
| } |
| |
| #bar { |
| border-top-color: var(--cr-slider-active-color, var(--google-blue-600)); |
| position: absolute; |
| width: 0; |
| } |
| |
| :host([transiting_]) #bar { |
| transition: width var(--cr-slider-position-transition); |
| } |
| |
| #knobContainer { |
| margin-inline-start: 12px; |
| position: absolute; |
| top: 11px; |
| width: calc(100% - 32px); |
| } |
| |
| #knob { |
| background-color: var(--cr-slider-knob-color, var(--google-blue-600)); |
| border: 0; |
| border-radius: 50%; |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| height: 10px; |
| margin-inline-start: 0; |
| outline: none; |
| position: absolute; |
| width: 10px; |
| } |
| |
| :host([transiting_]) #knob { |
| transition: margin-inline-start var(--cr-slider-position-transition); |
| } |
| |
| paper-ripple { |
| color: var(--cr-slider-knob-color, var(--google-blue-600)); |
| height: 32px; |
| left: -11px; |
| pointer-events: none; |
| top: -11px; |
| transition: color linear 80ms; |
| width: 32px; |
| } |
| |
| :host([is-rtl_]) paper-ripple { |
| left: auto; |
| right: -11px; |
| } |
| |
| #markers { |
| left: 0; |
| pointer-events: none; |
| position: absolute; |
| right: 0; |
| @apply --layout-horizontal; |
| } |
| |
| .active-marker, |
| .inactive-marker { |
| @apply --layout-flex; |
| } |
| #markers::before, |
| #markers::after, |
| .active-marker::after, |
| .inactive-marker::after { |
| border-radius: 50%; |
| content: ''; |
| display: block; |
| height: 2px; |
| margin-left: -1px; |
| width: 2px; |
| } |
| |
| #markers::before, |
| .active-marker::after { |
| background-color: rgba(255, 255, 255, 0.54); |
| } |
| |
| #markers::after, |
| .inactive-marker::after { |
| background-color: rgba(26, 115, 232, 0.54); |
| } |
| |
| #labelContainer { |
| cursor: default; |
| margin-inline-start: 1px; |
| opacity: 0; |
| transition: opacity 80ms ease-in-out; |
| user-select: none; |
| width: calc(100% - 32px); |
| } |
| |
| #container:hover #labelContainer, |
| .hover #labelContainer, |
| :host([hold-down_]) #labelContainer { |
| opacity: 1; |
| } |
| |
| #label { |
| background: var(--google-blue-600); |
| border-radius: 14px; |
| bottom: 28px; |
| color: white; |
| font-size: 12px; |
| line-height: 1.5em; |
| padding: 0 8px; |
| position: absolute; |
| white-space: nowrap; |
| } |
| |
| :host([transiting_]) #label { |
| transition: margin-inline-start var(--cr-slider-position-transition); |
| } |
| |
| :host([disabled_]) { |
| pointer-events: none; |
| } |
| |
| :host([disabled_]) #barContainer { |
| border-top-color: var(--google-grey-600-opacity-24); |
| } |
| |
| :host([disabled_]) #bar { |
| border-top-color: var(--google-grey-600); |
| } |
| |
| :host([disabled_]) .inactive-marker::after, |
| :host([disabled_]) #markers::after { |
| background-color: rgba(128, 134, 139, 0.54); |
| } |
| |
| :host([disabled_]) #knobContainer { |
| margin-inline-start: 10px; |
| top: 9px; |
| } |
| :host([disabled_]) #knob { |
| background-color: var(--google-grey-600); |
| border: 2px solid white; |
| box-shadow: unset; |
| } |
| </style> |
| <div id="container"> |
| <div id="barContainer"> |
| <div id="bar"></div> |
| <div id="markers" hidden$="[[!markerCount]]"> |
| <template is="dom-repeat" items="[[getMarkers_(markerCount)]]"> |
| <div class$="[[getMarkerClass_(index, value, min, max, |
| markerCount)]]"></div> |
| </template> |
| </div> |
| </div> |
| <div id="knobContainer"> |
| <div id="knob" on-transitionend="onKnobTransitionEnd_" |
| on-keydown="onKnobKeydown_"></div> |
| </div> |
| <div id="labelContainer" aria-label="[[label_]]"> |
| <div id="label">[[label_]]</div> |
| </div> |
| </div> |
| </template> |
| <script src="cr_slider.js"></script> |
| </dom-module> |