| <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="../../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-active-color: var(--google-blue-600); |
| --cr-slider-container-color: rgba(var(--google-blue-600-rgb), .24); |
| --cr-slider-container-disabled-color: |
| rgba(var(--google-grey-600-rgb), .24); |
| --cr-slider-disabled-color: var(--google-grey-600); |
| --cr-slider-knob-color: var(--google-blue-600); |
| --cr-slider-knob-disabled-color: white; |
| --cr-slider-marker-active-color: rgba(255, 255, 255, 0.54); |
| --cr-slider-marker-color: rgba(26, 115, 232, 0.54); |
| --cr-slider-marker-disabled-color: rgba(128, 134, 139, 0.54); |
| --cr-slider-position-transition: 80ms ease; |
| /* --cr-slider-ripple-opacity is left at default in light mode. */ |
| |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| cursor: default; |
| height: 32px; |
| outline: none; |
| padding: 0 16px; |
| user-select: none; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :host { |
| --cr-slider-active-color: var(--google-blue-refresh-300); |
| --cr-slider-container-color: |
| rgba(var(--google-blue-refresh-500-rgb), .48); |
| --cr-slider-container-disabled-color: |
| rgba(var(--google-grey-600-rgb), .48); |
| /* --cr-slider-disabled-color is the same in dark mode (GG600). */ |
| --cr-slider-knob-color: var(--google-blue-refresh-300); |
| /* --google-grey-900 + 4% white blended together. */ |
| --cr-slider-knob-disabled-color: #28292c; |
| --cr-slider-marker-active-color: var(--google-blue-refresh-300); |
| --cr-slider-marker-color: var(--google-blue-refresh-300); |
| --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54); |
| --cr-slider-ripple-opacity: .4; |
| } |
| } |
| |
| :host([dragging]) { |
| touch-action: none; |
| } |
| |
| #container, |
| #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; |
| } |
| |
| #container { |
| border-top-color: var(--cr-slider-container-color); |
| position: relative; |
| top: 16px; |
| } |
| |
| #container > div { |
| position: absolute; |
| } |
| |
| #markers, |
| #bar { |
| top: -2px; |
| } |
| |
| #markers { |
| display: flex; |
| flex-direction: row; |
| left: 0; |
| pointer-events: none; |
| right: 0; |
| } |
| |
| .active-marker, |
| .inactive-marker { |
| flex: 1; |
| } |
| |
| #markers::before, |
| #markers::after, |
| .active-marker::after, |
| .inactive-marker::after { |
| border-radius: 50%; |
| content: ''; |
| display: block; |
| height: 2px; |
| margin-inline-start: -1px; |
| width: 2px; |
| } |
| |
| #markers::before, |
| .active-marker::after { |
| background-color: var(--cr-slider-marker-active-color); |
| } |
| |
| #markers::after, |
| .inactive-marker::after { |
| background-color: var(--cr-slider-marker-color); |
| } |
| |
| #bar { |
| border-top-color: var(--cr-slider-active-color); |
| } |
| |
| :host([transiting_]) #bar { |
| transition: width var(--cr-slider-position-transition); |
| } |
| |
| #knobAndLabel { |
| top: -1px; |
| } |
| |
| :host([transiting_]) #knobAndLabel { |
| transition: margin-inline-start var(--cr-slider-position-transition); |
| } |
| |
| #knob { |
| background-color: var(--cr-slider-knob-color); |
| border-radius: 50%; |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| height: 10px; |
| outline: none; |
| transform: translate(-50%, -50%); |
| width: 10px; |
| } |
| |
| :host([is-rtl_]) #knob { |
| transform: translate(50%, -50%); |
| } |
| |
| #label { |
| background: var(--cr-slider-knob-color); |
| border-radius: .75em; |
| bottom: 22px; |
| color: white; /* Same for dark and light mode. */ |
| font-size: 12px; |
| line-height: 1.5em; |
| opacity: 0; |
| /* TODO(crbug.com/980856): Remove workaround after rendering bug is |
| * fixed. */ |
| outline: 1px transparent solid; |
| padding: 0 .67em; |
| position: absolute; |
| transform: translateX(-50%); |
| transition: opacity 80ms ease-in-out; |
| white-space: nowrap; |
| } |
| |
| :host([is-rtl_]) #label { |
| transform: translateX(50%); |
| } |
| |
| :host(:hover) #label, |
| :host([show-label_]) #label { |
| opacity: 1; |
| } |
| |
| paper-ripple { |
| --paper-ripple-opacity: var(--cr-slider-ripple-opacity); |
| color: var(--cr-slider-knob-color); |
| height: 32px; |
| left: -11px; |
| pointer-events: none; |
| top: -11px; |
| transition: color linear 80ms; |
| width: 32px; |
| } |
| |
| :host([is-rtl_]) paper-ripple { |
| left: auto; |
| right: -11px; |
| } |
| |
| :host([disabled_]) { |
| pointer-events: none; |
| } |
| |
| :host([disabled_]) #container { |
| border-top-color: var(--cr-slider-container-disabled-color); |
| } |
| |
| :host([disabled_]) #bar { |
| border-top-color: var(--cr-slider-disabled-color); |
| } |
| |
| :host([disabled_]) .inactive-marker::after, |
| :host([disabled_]) #markers::after { |
| background-color: var(--cr-slider-marker-disabled-color); |
| } |
| |
| :host([disabled_]) #knob { |
| background-color: var(--cr-slider-disabled-color); |
| border: 2px solid var(--cr-slider-knob-disabled-color); |
| box-shadow: unset; |
| } |
| </style> |
| <div id="container" hidden> |
| <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 id="knobAndLabel" on-transitionend="onTransitionEnd_"> |
| <div id="knob"></div> |
| <div id="label">[[label_]]</div> |
| </div> |
| </div> |
| </template> |
| <script src="cr_slider.js"></script> |
| </dom-module> |