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

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

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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 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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698