2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
11 display: inline-block;
18 width: calc(100% - 32px);
22 :host([editable]) #sliderContainer {
24 width: calc(100% - 72px);
42 width: calc(100% + 2px);
43 box-sizing: border-box;
45 /* background-image: -webkit-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent);
46 background-size: 10%; */
49 .slider-markers::after, .slider-marker::after {
55 background-color: black;
58 #sliderBar::shadow #activeProgress {
59 background-color: #3f51b5;
70 #sliderKnob.transiting {
71 transition: left 0.08s ease;
78 #sliderKnob.dragging {
82 #sliderKnob.snaps.dragging {
83 transition: -webkit-transform 0.08s ease;
84 transition: transform 0.08s ease;
90 box-sizing: border-box;
91 -moz-box-sizing: border-box;
93 background-color: #3f51b5;
94 /* FIXME(ffu): can't use the following. https://github.com/Polymer/platform/issues/53 */
95 /* transition-property: height, width, background-color, border;
96 transition-duration: 0.1s;
97 transition-timing-function: ease; */
98 transition: height 0.18s ease, width 0.18s ease, background-color 0.28s ease, border 0.18s ease;
101 #sliderKnob.expand:not(.pin) > #sliderKnobInner {
104 -webkit-transform: translateZ(0);
105 transform: translateZ(0);
108 #sliderKnob.ring > #sliderKnobInner {
109 background-color: #fff;
110 border: 2px solid #c8c8c8;
113 #sliderKnobInner::before {
114 background-color: #3f51b5;
117 #sliderKnob.pin > #sliderKnobInner::before {
125 border-radius: 50% 50% 50% 0;
126 -webkit-transform: rotate(-45deg) scale(0) translate(0);
127 transform: rotate(-45deg) scale(0) translate(0);
130 #sliderKnobInner::before, #sliderKnobInner::after {
131 transition: -webkit-transform .2s ease, background-color .18s ease;
132 transition: transform .2s ease, background-color .18s ease;
135 #sliderKnob.pin.ring > #sliderKnobInner::before {
136 background-color: #c8c8c8;
139 #sliderKnob.pin.expand > #sliderKnobInner::before {
140 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
141 transform: rotate(-45deg) scale(1) translate(17px, -17px);
144 #sliderKnob.pin > #sliderKnobInner::after {
145 /* FIXME(ffu): add dummy quotes to workaround https://github.com/Polymer/platform/issues/57 */
146 content: attr(value) "";
155 -webkit-transform: scale(0) translate(0);
156 transform: scale(0) translate(0);
159 #sliderKnob.pin.expand > #sliderKnobInner::after {
160 -webkit-transform: scale(1) translate(0, -17px);
161 transform: scale(1) translate(0, -17px);
170 .slider-input::shadow input {
171 /* FIXME(ffu): should one be able set text-align directly on paper-input? */
176 :host([disabled]) #sliderContainer {
177 pointer-events: none;
181 pointer-events: none;
184 :host([disabled]) #sliderKnob > #sliderKnobInner {
187 background-color: #c8c8c8;
188 border: 2px solid #fff;
191 :host([disabled]) #sliderContainer > #sliderBar::shadow #activeProgress {
192 background-color: #c8c8c8;