Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(945)

Side by Side Diff: third_party/polymer/v1_0/components/paper-slider/paper-slider.css

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /**
2 @license
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.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
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/PATEN TS.txt
9 */
10
11 :host {
12 display: inline-block;
13 width: 200px;
14 cursor: default;
15 -webkit-user-select: none;
16 -moz-user-select: none;
17 -ms-user-select: none;
18 user-select: none;
19 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
20 }
21
22 :host(:not([disabled])) #sliderBar::shadow #activeProgress {
23 background-color: var(--paper-slider-active-color, --google-blue-700);
24 }
25
26 :host(:not([disabled])) #sliderBar::shadow #secondaryProgress {
27 background-color: var(--paper-slider-secondary-color, --google-blue-300);
28 }
29
30 :host([disabled]) #sliderBar::shadow #activeProgress {
31 background-color: var(--paper-slider-disabled-active-color, --google-grey-500) ;
32 }
33
34 :host([disabled]) #sliderBar::shadow #secondaryProgress {
35 background-color: var(--paper-slider-disabled-secondary-color, --google-grey-3 00);
36 }
37
38 :host(:focus) {
39 outline: none;
40 }
41
42 #sliderContainer {
43 position: relative;
44 width: calc(100% - 32px);
45 height: 32px;
46 }
47
48 #sliderContainer.editable {
49 float: left;
50 width: calc(100% - 72px);
51 margin: 12px 0;
52 }
53
54 .bar-container {
55 position: absolute;
56 top: 0;
57 left: 16px;
58 height: 100%;
59 width: 100%;
60 overflow: hidden;
61 }
62
63 .ring > .bar-container {
64 left: 20px;
65 width: calc(100% - 4px);
66 transition: left 0.18s ease, width 0.18s ease;
67 }
68
69 .ring.expand:not(.pin) > .bar-container {
70 left: 30px;
71 width: calc(100% - 14px);
72 }
73
74 .ring.expand.dragging > .bar-container {
75 transition: none;
76 }
77
78 #sliderBar {
79 position: absolute;
80 top: 15px;
81 left: 0;
82 height: 2px;
83 width: 100%;
84 padding: 8px 0;
85 margin: -8px 0;
86 background-color: var(--paper-slider-bar-color, transparent);
87 }
88
89 .ring #sliderBar {
90 left: -4px;
91 width: calc(100% + 4px);
92 }
93
94 .ring.expand:not(.pin) #sliderBar {
95 left: -14px;
96 width: calc(100% + 14px);
97 }
98
99 .slider-markers {
100 position: absolute;
101 top: 15px;
102 left: 15px;
103 height: 2px;
104 width: calc(100% + 2px);
105 box-sizing: border-box;
106 pointer-events: none;
107 }
108
109 .slider-markers::after,
110 .slider-marker::after {
111 content: "";
112 display: block;
113 width: 2px;
114 height: 2px;
115 border-radius: 50%;
116 background-color: black;
117 }
118
119 .transiting #sliderBar::shadow #activeProgress {
120 -webkit-transition: -webkit-transform 0.08s ease;
121 transition: transform 0.08s ease;
122 }
123
124 #sliderKnob {
125 @apply(--layout-center-justified);
126 @apply(--layout-center);
127 @apply(--layout-horizontal);
128
129 position: absolute;
130 left: 0;
131 top: 0;
132 width: 32px;
133 height: 32px;
134 }
135
136 .transiting > #sliderKnob {
137 transition: left 0.08s ease;
138 }
139
140 #sliderKnob:focus {
141 outline: none;
142 }
143
144 #sliderKnob.dragging {
145 transition: none;
146 }
147
148 .snaps > #sliderKnob.dragging {
149 transition: -webkit-transform 0.08s ease;
150 transition: transform 0.08s ease;
151 }
152
153 #sliderKnobInner {
154 width: 12px;
155 height: 12px;
156 box-sizing: border-box;
157 -moz-box-sizing: border-box;
158 border-radius: 50%;
159 background-color: var(--paper-slider-knob-color, --google-blue-700);
160 transition-property: height, width, background-color, border;
161 transition-duration: 0.1s;
162 transition-timing-function: ease;
163 }
164
165 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
166 width: 100%;
167 height: 100%;
168 -webkit-transform: translateZ(0);
169 transform: translateZ(0);
170 }
171
172 .ring > #sliderKnob > #sliderKnobInner {
173 background-color: transparent;
174 border: 2px solid #c8c8c8;
175 }
176
177 #sliderKnobInner::before {
178 background-color: var(--paper-slider-pin-color, --google-blue-700);
179 }
180
181 .pin > #sliderKnob > #sliderKnobInner::before {
182 content: "";
183 position: absolute;
184 top: 0;
185 left: 0;
186 width: 26px;
187 height: 26px;
188 margin-left: 3px;
189 border-radius: 50% 50% 50% 0;
190 -webkit-transform: rotate(-45deg) scale(0) translate(0);
191 transform: rotate(-45deg) scale(0) translate(0);
192 }
193
194 #sliderKnobInner::before,
195 #sliderKnobInner::after {
196 transition: -webkit-transform .2s ease, background-color .18s ease;
197 transition: transform .2s ease, background-color .18s ease;
198 }
199
200 .pin.ring > #sliderKnob > #sliderKnobInner::before {
201 background-color: #c8c8c8;
202 }
203
204 .pin.expand > #sliderKnob > #sliderKnobInner::before {
205 -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
206 transform: rotate(-45deg) scale(1) translate(17px, -17px);
207 }
208
209 .pin > #sliderKnob > #sliderKnobInner::after {
210 content: attr(value);
211 position: absolute;
212 top: 0;
213 left: 0;
214 width: 32px;
215 height: 26px;
216 text-align: center;
217 color: var(--paper-slider-font-color, #fff);
218 font-size: 10px;
219 -webkit-transform: scale(0) translate(0);
220 transform: scale(0) translate(0);
221 }
222
223 .pin.expand > #sliderKnob > #sliderKnobInner::after {
224 -webkit-transform: scale(1) translate(0, -17px);
225 transform: scale(1) translate(0, -17px);
226 }
227
228 /* editable: paper-input */
229 .slider-input {
230 width: 40px;
231 float: right;
232 overflow: hidden;
233 }
234
235 .slider-input::shadow input {
236 /* FIXME(ffu): should one be able set text-align directly on paper-input? */
237 text-align: center;
238 }
239
240 /* disabled state */
241 #sliderContainer.disabled {
242 pointer-events: none;
243 }
244
245 .disabled > #sliderKnob > #sliderKnobInner {
246 width: 8px;
247 height: 8px;
248 background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
249 }
250
251 .disabled.ring > #sliderKnob > #sliderKnobInner {
252 background-color: transparent;
253 }
254
255 paper-ripple {
256 color: var(--paper-slider-knob-color, --google-blue-700);
257 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698