1/*
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8*/
9
10:host {
11  display: inline-block;
12  width: 200px;
13  cursor: default;
14}
15
16#sliderContainer {
17  position: relative;
18  width: calc(100% - 32px);
19  height: 32px;
20}
21
22:host([editable]) #sliderContainer {
23  float: left;
24  width: calc(100% - 72px);
25}
26
27#sliderBar {
28  position: absolute;
29  top: 15px;
30  left: 16px;
31  height: 2px;
32  width: 100%;
33  padding: 8px 0;
34  margin: -8px 0;
35}
36
37.slider-markers {
38  position: absolute;
39  top: 15px;
40  left: 15px;
41  height: 2px;
42  width: calc(100% + 2px);
43  box-sizing: border-box;
44  pointer-events: none;
45  /* background-image: -webkit-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent);
46  background-size: 10%; */
47}
48
49.slider-markers::after, .slider-marker::after {
50  content: "";
51  display: block;
52  width: 2px;
53  height: 2px;
54  border-radius: 50%;
55  background-color: black;
56}
57
58#sliderBar::shadow #activeProgress {
59  background-color: #3f51b5;
60}
61
62#sliderKnob {
63  position: absolute;
64  left: 0;
65  top: 0;
66  width: 32px;
67  height: 32px;
68}
69
70#sliderKnob.transiting {
71  transition: left 0.08s ease;
72}
73
74#sliderKnob:focus {
75  outline: none;
76}
77
78#sliderKnob.dragging {
79  transition: none;
80}
81
82#sliderKnob.snaps.dragging {
83  transition: -webkit-transform 0.08s ease;
84  transition: transform 0.08s ease;
85}
86
87#sliderKnobInner {
88  width: 12px;
89  height: 12px;
90  box-sizing: border-box;
91  -moz-box-sizing: border-box;
92  border-radius: 50%;
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;
99}
100
101#sliderKnob.expand:not(.pin) > #sliderKnobInner {
102  width: 100%;
103  height: 100%;
104  -webkit-transform: translateZ(0);
105  transform: translateZ(0);
106}
107
108#sliderKnob.ring > #sliderKnobInner {
109  background-color: #fff;
110  border: 2px solid #c8c8c8;
111}
112
113#sliderKnobInner::before {
114  background-color: #3f51b5;
115}
116
117#sliderKnob.pin > #sliderKnobInner::before {
118  content: "";
119  position: absolute;
120  top: 0;
121  left: 0;
122  width: 26px;
123  height: 26px;
124  margin-left: 3px;
125  border-radius: 50% 50% 50% 0;
126  -webkit-transform: rotate(-45deg) scale(0) translate(0);
127  transform: rotate(-45deg) scale(0) translate(0);
128}
129
130#sliderKnobInner::before, #sliderKnobInner::after {
131  transition: -webkit-transform .2s ease, background-color .18s ease;
132  transition: transform .2s ease, background-color .18s ease;
133}
134
135#sliderKnob.pin.ring > #sliderKnobInner::before {
136  background-color: #c8c8c8;
137}
138
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);
142}
143
144#sliderKnob.pin > #sliderKnobInner::after {
145  /* FIXME(ffu): add dummy quotes to workaround https://github.com/Polymer/platform/issues/57 */
146  content: attr(value) "";
147  position: absolute;
148  top: 0;
149  left: 0;
150  width: 32px;
151  height: 26px;
152  text-align: center;
153  color: #fff;
154  font-size: 10px;
155  -webkit-transform: scale(0) translate(0);
156  transform: scale(0) translate(0);
157}
158
159#sliderKnob.pin.expand > #sliderKnobInner::after {
160  -webkit-transform: scale(1) translate(0, -17px);
161  transform: scale(1) translate(0, -17px);
162}
163
164.slider-input {
165  width: 40px;
166  height: 32px;
167  float: right;
168}
169
170.slider-input::shadow input {
171  /* FIXME(ffu): should one be able set text-align directly on paper-input? */
172  text-align: center;
173}
174
175/* disabled state */
176:host([disabled]) #sliderContainer {
177  pointer-events: none;
178}
179
180:host([disabled]) {
181  pointer-events: none;
182}
183
184:host([disabled]) #sliderKnob > #sliderKnobInner {
185  width: 12px;
186  height: 12px;
187  background-color: #c8c8c8;
188  border: 2px solid #fff;
189}
190
191:host([disabled]) #sliderContainer > #sliderBar::shadow #activeProgress {
192  background-color: #c8c8c8;
193}
194