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