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

Side by Side Diff: Source/devtools/front_end/elements/spectrum.css

Issue 1324533005: Devtools Color: Drag to delete custom color in palettes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 3 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
« no previous file with comments | « Source/devtools/front_end/elements/Spectrum.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* https://github.com/bgrins/spectrum */ 1 /* https://github.com/bgrins/spectrum */
2 :host { 2 :host {
3 width: 232px; 3 width: 232px;
4 height: 240px; 4 height: 240px;
5 -webkit-user-select: none; 5 -webkit-user-select: none;
6 } 6 }
7 7
8 :host(.palettes-enabled) { 8 :host(.palettes-enabled) {
9 height: 271px; 9 height: 271px;
10 } 10 }
(...skipping 191 matching lines...) Expand 10 before | Expand all | Expand 10 after
202 display: inline-block; 202 display: inline-block;
203 border-radius: 2px; 203 border-radius: 2px;
204 margin: 6px; 204 margin: 6px;
205 cursor: pointer; 205 cursor: pointer;
206 } 206 }
207 207
208 .spectrum-palette > .spectrum-palette-color { 208 .spectrum-palette > .spectrum-palette-color {
209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
210 border: 1px solid rgba(0, 0, 0, 0.1); 210 border: 1px solid rgba(0, 0, 0, 0.1);
211 will-change: transform; 211 will-change: transform;
212 z-index: 13;
212 } 213 }
213 214
214 .spectrum-palette > .spectrum-palette-color.empty-color { 215 .spectrum-palette > .spectrum-palette-color.empty-color {
215 border-color: transparent; 216 border-color: transparent;
216 } 217 }
217 218
218 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { 219 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover {
219 transform: scale(1.15); 220 transform: scale(1.15);
220 } 221 }
221 222
222 .add-color-toolbar { 223 .add-color-toolbar {
223 position: absolute; 224 margin-left: -3px;
224 right: 29px; 225 margin-top: -1px;
225 bottom: 5px;
226 } 226 }
227 227
228 .spectrum-palette-switcher { 228 .spectrum-palette-switcher {
229 right: 10px; 229 right: 10px;
230 top: 235px; 230 top: 235px;
231 margin-top: 9px; 231 margin-top: 9px;
232 position: absolute; 232 position: absolute;
233 } 233 }
234 234
235 .palette-panel { 235 .palette-panel {
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
305 width: 100%; 305 width: 100%;
306 height: 100%; 306 height: 100%;
307 } 307 }
308 308
309 .spectrum-contrast-line { 309 .spectrum-contrast-line {
310 fill: none; 310 fill: none;
311 stroke: white; 311 stroke: white;
312 opacity: 0.7; 312 opacity: 0.7;
313 stroke-width: 1.5px; 313 stroke-width: 1.5px;
314 } 314 }
315
316 .delete-color-toolbar {
317 position: absolute;
318 right: 0;
319 top: 0;
320 height: 100%;
321 background-color: #EFEFEF;
322 visibility: hidden;
323 z-index: 3;
324 width: 36px;
325 display: flex;
326 align-items: center;
327 padding-left: 5px;
328 }
329
330 @keyframes showDeleteToolbar {
331 from {
332 opacity: 0;
333 }
334 to {
335 opacity: 1;
336 }
337 }
338
339 .delete-color-toolbar.dragging {
340 visibility: visible;
341 animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backward s;
342 }
343
344 .delete-color-toolbar-active {
345 background-color: #ddd;
346 color: white;
347 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/elements/Spectrum.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698