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