1/*
2 * Copyright (C) 2014 Apple Inc.  All rights reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions
6 * are met:
7 *
8 * 1.  Redistributions of source code must retain the above copyright
9 *     notice, this list of conditions and the following disclaimer.
10 * 2.  Redistributions in binary form must reproduce the above copyright
11 *     notice, this list of conditions and the following disclaimer in the
12 *     documentation and/or other materials provided with the distribution.
13 * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
14 *     its contributors may be used to endorse or promote products derived
15 *     from this software without specific prior written permission.
16 *
17 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
22 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
23 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
24 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27 */
28
29.gradient-slider {
30    position: absolute;
31
32    left: 26px;
33    width: 238px;
34    height: 21px;
35
36    border: 1px solid rgb(146, 146, 146);
37}
38
39.gradient-slider > canvas {
40    position: absolute;
41    width: 100%;
42    height: 100%;
43
44    background-image: url(../Images/Checkers.svg);
45    background-size: 6px 6px;
46}
47
48.gradient-slider > .add-area {
49    position: absolute;
50
51    top: 14px;
52    left: 0;
53    height: 20px;
54    width: 100%;
55}
56
57.gradient-slider-knob {
58    position: absolute;
59
60    left: -11px;
61    top: 10px;
62    width: 20px;
63    height: 26px;
64
65    background-image: -webkit-image-set(url(../Images/GradientStop.png) 1x, url(../Images/GradientStop@2x.png) 2x);
66
67    transition: opacity 350ms;
68}
69
70.gradient-slider-knob.shadow {
71    opacity: 0.5;
72    pointer-events: none;
73}
74
75.gradient-slider-knob.selected {
76    background-image: -webkit-image-set(url(../Images/GradientStopSelected.png) 1x, url(../Images/GradientStopSelected@2x.png) 2x);
77}
78
79.gradient-slider-knob.detaching {
80    opacity: 0.75;
81}
82
83.gradient-slider-knob.fade-out {
84    transition: opacity 0.35s;
85    opacity: 0;
86}
87
88.gradient-slider-knob > img,
89.gradient-slider-knob > div {
90    position: absolute;
91
92    left: 5px;
93    top: 12px;
94    width: 10px;
95    height: 10px;
96}
97
98.gradient-slider-knob > img {
99    content: url(../Images/Checkers.svg);
100}
101
102.gradient-slider-knob > div {
103    border: 1px solid rgba(0, 0, 0, 0.25);
104
105    background-color: white;
106}
107