3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
12 display: inline-block
;
15 -webkit-user-select: none
;
16 -moz-user-select: none
;
17 -ms-user-select: none
;
19 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
22 :host
(:not
([disabled
])) #
sliderBar::shadow #activeProgress
{
23 background-color: var
(--paper-slider-active-color
, --google-blue-700
);
26 :host
(:not
([disabled
])) #
sliderBar::shadow #secondaryProgress
{
27 background-color: var
(--paper-slider-secondary-color
, --google-blue-300
);
30 :host
([disabled
]) #
sliderBar::shadow #activeProgress
{
31 background-color: var
(--paper-slider-disabled-active-color
, --google-grey-500
);
34 :host
([disabled
]) #
sliderBar::shadow #secondaryProgress
{
35 background-color: var
(--paper-slider-disabled-secondary-color
, --google-grey-300
);
44 width: calc
(100% - 32px);
48 #sliderContainer.editable
{
50 width: calc
(100% - 72px);
63 .ring > .bar-container {
65 width: calc
(100% - 4px);
66 transition: left
0.18s ease
, width
0.18s ease
;
69 .ring.expand:not(.pin) > .bar-container {
71 width: calc
(100% - 14px);
74 .ring.expand.dragging > .bar-container {
90 width: calc
(100% + 4px);
93 .ring.expand:not(.pin) #sliderBar {
95 width: calc
(100% + 14px);
103 width: calc
(100% + 2px);
104 box-sizing: border-box
;
105 pointer-events: none
;
108 .slider-markers::after
,
109 .slider-marker::after {
115 background-color: black
;
118 .transiting #sliderBar::shadow #activeProgress {
119 transition: -webkit-transform
0.08s ease
;
120 transition: transform
0.08s ease
;
124 @apply
(--layout-center-justified
);
125 @apply
(--layout-center
);
126 @apply
(--layout-horizontal
);
135 .transiting > #sliderKnob {
136 transition: left
0.08s ease
;
143 #sliderKnob.dragging
{
147 .snaps > #sliderKnob.dragging {
148 transition: -webkit-transform
0.08s ease
;
149 transition: transform
0.08s ease
;
155 box-sizing: border-box
;
156 -moz-box-sizing: border-box
;
158 background-color: var
(--paper-slider-knob-color
, --google-blue-700
);
159 transition-property: height
, width
, background-color
, border
;
160 transition-duration: 0.1s;
161 transition-timing-function: ease
;
164 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
167 -webkit-transform: translateZ
(0);
168 transform: translateZ
(0);
171 .ring > #sliderKnob > #sliderKnobInner {
172 background-color: transparent
;
173 border: 2px solid
#c8c8c8;
176 #sliderKnobInner::before
{
177 background-color: var
(--paper-slider-pin-color
, --google-blue-700
);
180 .pin > #sliderKnob > #sliderKnobInner::before {
188 border-radius: 50% 50% 50% 0;
189 -webkit-transform: rotate
(-45deg) scale
(0) translate
(0);
190 transform: rotate
(-45deg) scale
(0) translate
(0);
193 #sliderKnobInner::before
,
194 #sliderKnobInner::after
{
195 transition: -webkit-transform
.2s ease
, background-color
.18s ease
;
196 transition: transform
.2s ease
, background-color
.18s ease
;
199 .pin.ring > #sliderKnob > #sliderKnobInner::before {
200 background-color: #c8c8c8;
203 .pin.expand > #sliderKnob > #sliderKnobInner::before {
204 -webkit-transform: rotate
(-45deg) scale
(1) translate
(17px, -17px);
205 transform: rotate
(-45deg) scale
(1) translate
(17px, -17px);
208 .pin > #sliderKnob > #sliderKnobInner::after {
209 content: attr
(value
);
216 color: var
(--paper-slider-font-color
, #fff);
218 -webkit-transform: scale
(0) translate
(0);
219 transform: scale
(0) translate
(0);
222 .pin.expand > #sliderKnob > #sliderKnobInner::after {
223 -webkit-transform: scale
(1) translate
(0, -17px);
224 transform: scale
(1) translate
(0, -17px);
227 /* editable: paper-input */
234 .slider-input::shadow input {
235 /* FIXME(ffu): should one be able set text-align directly on paper-input? */
240 #sliderContainer.disabled
{
241 pointer-events: none
;
244 .disabled > #sliderKnob > #sliderKnobInner {
247 background-color: var
(--paper-slider-disabled-knob-color
, --google-grey-500
);
250 .disabled.ring > #sliderKnob > #sliderKnobInner {
251 background-color: transparent
;