OLD | NEW |
(Empty) | |
| 1 /* |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.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/is
sues/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/platf
orm/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 } |
OLD | NEW |