d2-ui
Version:
671 lines • 357 kB
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>React Color</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet">
</head>
<body>
<div id="root">
<div style="font-family:Roboto;" data-reactid=".0" data-react-checksum="-322216145"><style data-reactid=".0.0">
html, body {
background: #eee;
overflow-x: hidden;
}
.flexbox-fix {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
</style><div data-reactid=".0.1"><div style="height:580px;background:#ddd url("docs/images/bg-2.jpg");background-position:center center;background-size:cover;" data-reactid=".0.1.0"><div style="max-width:780px;padding:0 20px;margin:0 auto;" data-reactid=".0.1.0.0"><div style="position:relative;" data-reactid=".0.1.0.0.0"><div style="width:auto;position:relative;padding-right:260px;" data-reactid=".0.1.0.0.0.0"><div data-reactid=".0.1.0.0.0.0.0"><div style="padding-top:40px;" data-reactid=".0.1.0.0.0.0.0.0"><div style="width:24px;height:24px;background:url("docs/images/react-color.svg");" data-reactid=".0.1.0.0.0.0.0.0.0"></div></div><div style="padding-top:30px;font-size:52px;color:#253727;" data-reactid=".0.1.0.0.0.0.0.1">React Color</div><div style="font-size:20px;line-height:27px;color:#425655;padding-top:15px;font-weight:300;max-width:320px;" data-reactid=".0.1.0.0.0.0.0.2">A Collection of Color Pickers from Sketch, Photoshop, Chrome & more</div><div style="padding-top:25px;padding-bottom:20px;" data-reactid=".0.1.0.0.0.0.0.3"><iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=react-color&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameborder="0" data-reactid=".0.1.0.0.0.0.0.3.0"></iframe></div></div></div><div style="position:absolute;right:0px;top:0px;width:225px;" data-reactid=".0.1.0.0.0.1"><div style="padding-top:50px;position:relative;" data-reactid=".0.1.0.0.0.1.0"><div style="opacity:0;-ms-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transition:all 400ms cubic-bezier(.55,0,.1,1);-moz-transition:all 400ms cubic-bezier(.55,0,.1,1);-o-transition:all 400ms cubic-bezier(.55,0,.1,1);-webkit-transition:all 400ms cubic-bezier(.55,0,.1,1);transition:all 400ms cubic-bezier(.55,0,.1,1);" class="foobarbaz" data-reactid=".0.1.0.0.0.1.0.0"><div data-reactid=".0.1.0.0.0.1.0.0.0"><div data-reactid=".0.1.0.0.0.1.0.0.0.0"><div style="background:#fff;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-moz-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-o-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-webkit-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-sizing:initial;width:225px;font-family:Menlo;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0"><div style="width:100%;padding-bottom:55%;position:relative;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.1"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-o-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff;-ms-transform:translate(-6px, -6px);-moz-transform:translate(-6px, -6px);-o-transform:translate(-6px, -6px);-webkit-transform:translate(-6px, -6px);transform:translate(-6px, -6px);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.1.0"></div></div></div></div></div><div style="padding:16px 16px 12px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1"><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0"><div style="width:32px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0"><div style="margin-top:6px;width:16px;height:16px;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;position:relative;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:2;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);background:rgba(25, 77, 51, 1);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0.1"></div></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1"><div style="height:10px;position:relative;margin-bottom:8px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0"><div style="z-index:2;position:absolute;left:41.666666666666664%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0.0.0"></div></div></div></div></div><div style="height:10px;position:relative;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(25, 77, 51, 0) 0%, rgba(25, 77, 51, 1) 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2.0.0"></div></div></div></div></div></div></div><div style="padding-top:16px;display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1"><div style="width:32px;text-align:right;position:relative;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1"><div style="margin-right:-4px;margin-top:12px;cursor:pointer;position:relative;z-index:2;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0.0"><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0.0.0"></path></svg></div><div style="position:absolute;width:24px;height:28px;background:#eee;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;top:10px;left:12px;display:none;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.1"></div></div></div></div></div></div><div data-reactid=".0.1.0.0.0.1.0.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(255,255,255,.7);font-size:12px;margin-top:10px;" data-reactid=".0.1.0.0.0.1.0.0.1">Chrome</div></div></div></div></div><div style="position:absolute;width:100%;margin-top:40px;" data-reactid=".0.1.0.0.1"><div style="opacity:0;-ms-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transition:all 400ms cubic-bezier(.55,0,.1,1);-moz-transition:all 400ms cubic-bezier(.55,0,.1,1);-o-transition:all 400ms cubic-bezier(.55,0,.1,1);-webkit-transition:all 400ms cubic-bezier(.55,0,.1,1);transition:all 400ms cubic-bezier(.55,0,.1,1);" class="foobarbaz" data-reactid=".0.1.0.0.1.0"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0"><div style="width:220px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.0"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0"><div style="width:200px;padding:10px 10px 0;box-sizing:initial;background:#fff;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0"><div style="width:100%;padding-bottom:75%;position:relative;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.1"><div style="width:4px;height:4px;-ms-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-o-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;cursor:hand;-ms-transform:translate(-2px, -2px);-moz-transform:translate(-2px, -2px);-o-transform:translate(-2px, -2px);-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.1.0"></div></div></div></div></div><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1"><div style="padding:4px 0;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0"><div style="position:relative;height:10px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0"><div style="z-index:2;position:absolute;left:41.666666666666664%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0.0"><div style="margin-top:1px;width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0.0.0"></div></div></div></div></div><div style="position:relative;height:10px;margin-top:4px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(25, 77, 51, 0) 0%, rgba(25, 77, 51, 1) 100%);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2.0"><div style="width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;margin-top:1px;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2.0.0"></div></div></div></div></div></div><div style="width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:rgba(25, 77, 51, 1);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);z-index:2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1.1"></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2"><div style="display:flex;padding-top:4px;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0"><div style="-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="194D33" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0.0"/><span style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0.1">hex</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="25" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0.1">r</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="77" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0.1">g</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="51" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0.1">b</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="100" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0.1">a</span></div></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3"><div style="margin-right:-10px;margin-left:-10px;padding-left:10px;padding-top:10px;border-top:1px solid #eee;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0"><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B"><div style="background:#D0021B;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623"><div style="background:#F5A623;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C"><div style="background:#F8E71C;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A"><div style="background:#8B572A;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321"><div style="background:#7ED321;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505"><div style="background:#417505;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0"><div style="background:#BD10E0;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE"><div style="background:#9013FE;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2"><div style="background:#4A90E2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2"><div style="background:#50E3C2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986"><div style="background:#B8E986;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000"><div style="background:#000000;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A"><div style="background:#4A4A4A;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B"><div style="background:#9B9B9B;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF"><div style="background:#FFFFFF;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.2"> </span></div></div></div></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.0.0.1.0.0.0.0.1">Sketch</div></div></div><div style="padding-left:267px;" data-reactid=".0.1.0.0.1.0.0.1"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0.0"><div style="background:#DCDCDC;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);box-sizing:initial;width:513px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0"><div style="background-image:linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);border-bottom:1px solid #B1B1B1;-ms-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-o-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);height:23px;line-height:24px;-ms-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;font-size:13px;color:#4D4D4D;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.0">Color Picker</div><div style="padding:15px 15px 0;display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1"><div style="width:256px;height:256px;position:relative;border:2px solid #B3B3B3;border-bottom:2px solid #F0F0F0;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.1"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-o-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff;-ms-transform:translate(-6px, -6px);-moz-transform:translate(-6px, -6px);-o-transform:translate(-6px, -6px);-webkit-transform:translate(-6px, -6px);transform:translate(-6px, -6px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.1.0"></div></div></div></div></div><div style="position:relative;height:256px;width:19px;margin-left:10px;border:2px solid #B3B3B3;border-bottom:2px solid #F0F0F0;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0"><div style="z-index:2;position:absolute;left:0px;top:58.333333333333336%;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0"><div style="width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #555;-ms-transform:translate(-13px, -4px);-moz-transform:translate(-13px, -4px);-o-transform:translate(-13px, -4px);-webkit-transform:translate(-13px, -4px);transform:translate(-13px, -4px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.0"><div style="width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;position:absolute;top:1px;left:1px;-ms-transform:translate(-8px, -5px);-moz-transform:translate(-8px, -5px);-o-transform:translate(-8px, -5px);-webkit-transform:translate(-8px, -5px);transform:translate(-8px, -5px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.0.0"></div></div><div style="width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #555;-ms-transform:translate(20px, -14px) rotate(180deg);-moz-transform:translate(20px, -14px) rotate(180deg);-o-transform:translate(20px, -14px) rotate(180deg);-webkit-transform:translate(20px, -14px) rotate(180deg);transform:translate(20px, -14px) rotate(180deg);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.1"><div style="width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;position:absolute;top:1px;left:1px;-ms-transform:translate(-8px, -5px);-moz-transform:translate(-8px, -5px);-o-transform:translate(-8px, -5px);-webkit-transform:translate(-8px, -5px);transform:translate(-8px, -5px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.1.0"></div></div></div></div></div></div></div><div style="width:180px;margin-left:10px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2"><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0"><div style="width:60px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0"><div style="font-size:14px;color:#000;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.0">new</div><div style="border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1"><div style="height:34px;background:rgb(25, 77, 51);-ms-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-moz-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-o-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-webkit-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1.0"></div><div style="height:34px;background:#194d33;-ms-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-moz-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-o-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-webkit-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1.1"></div></div><div style="font-size:14px;color:#000;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.2">current</div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:20px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1"><div style="background-image:linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);border:1px solid #878787;border-radius:2px;height:20px;box-shadow:0 0 0 1px #878787;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;-ms-box-shadow:0 0 0 1px #878787;-moz-box-shadow:0 0 0 1px #878787;-o-box-shadow:0 0 0 1px #878787;-webkit-box-shadow:0 0 0 1px #878787;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.0">OK</div><div style="background-image:linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);border:1px solid #878787;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;height:20px;-ms-box-shadow:0 1px 0 0 #EAEAEA;-moz-box-shadow:0 1px 0 0 #EAEAEA;-o-box-shadow:0 1px 0 0 #EAEAEA;-webkit-box-shadow:0 1px 0 0 #EAEAEA;box-shadow:0 1px 0 0 #EAEAEA;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.1">Cancel</div><div style="padding-top:5px;padding-bottom:9px;width:80px;position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="150" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0.1">h</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="67" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1.1">s</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="30" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2.1">v</span></div><div style="height:5px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.3"></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.4"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="25" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.4.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.4.1">r</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.5"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="77" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.5.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.5.1">g</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.6"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="51" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.6.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.6.1">b</span></div><div style="height:5px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.7"></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.8"><input style="margin-left:20%;width:80%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:6px;font-size:13px;padding-left:3px;" value="194D33" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.8.0"/><span style="position:absolute;top:0px;left:0px;width:14px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.8.1">#</span></div><div style="position:absolute;top:5px;right:-7px;font-size:13px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.9"><div style="height:20px;line-height:22px;padding-bottom:7px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.9.0">°</div><div style="height:20px;line-height:22px;padding-bottom:7px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.9.1">%</div><div style="height:20px;line-height:22px;padding-bottom:7px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.9.2">%</div></div></div></div></div></div></div></div></div><div data-reactid=".0.1.0.0.1.0.0.1.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.0.0.1.0.0.1.0.1">Photoshop</div></div></div></div></div></div></div></div><div style="padding-top:130px;" data-reactid=".0.1.1"><div style="max-width:780px;padding:0 20px;margin:0 auto;" data-reactid=".0.1.1.0"><div style="opacity:0;-ms-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transition:all 400ms cubic-bezier(.55,0,.1,1);-moz-transition:all 400ms cubic-bezier(.55,0,.1,1);-o-transition:all 400ms cubic-bezier(.55,0,.1,1);-webkit-transition:all 400ms cubic-bezier(.55,0,.1,1);transition:all 400ms cubic-bezier(.55,0,.1,1);" class="foobarbaz" data-reactid=".0.1.1.0.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0"><div style="width:410px;position:absolute;height:100%;" data-reactid=".0.1.1.0.0.0.0"><div data-reactid=".0.1.1.0.0.0.0.0"><div style="padding-top:10px;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.0"><div data-reactid=".0.1.1.0.0.0.0.0.0.0"><div data-reactid=".0.1.1.0.0.0.0.0.0.0.0"><div data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0"><div style="height:12px;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.0.0.0"><div style="z-index:2;position:absolute;left:41.666666666666664%;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.0.0.0.0"><div style="width:14px;height:14px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-7px, -1px);-moz-transform:translate(-7px, -1px);-o-transform:translate(-7px, -1px);-webkit-transform:translate(-7px, -1px);transform:translate(-7px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.0.0.0.0.0"></div></div></div></div></div><div data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1"><div style="margin-right:-4px;margin-top:20px;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0"><div style="width:19.65%;margin-right:1px;float:left;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.0"><div style="height:12px;background:hsl(150, 50%, 80%);cursor:pointer;-ms-border-radius:2px 0 0 2px;-moz-border-radius:2px 0 0 2px;-o-border-radius:2px 0 0 2px;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.0.0"></div></div><div style="width:19.65%;margin-right:1px;float:left;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.1"><div style="height:12px;background:hsl(150, 50%, 65%);cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.1.0"></div></div><div style="width:19.65%;margin-right:1px;float:left;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.2"><div style="height:12px;background:hsl(150, 50%, 50%);cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.2.0"></div></div><div style="width:19.65%;margin-right:1px;float:left;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.3"><div style="height:12px;background:hsl(150, 50%, 35%);cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.3.0"></div></div><div style="width:19.65%;margin-right:1px;float:left;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.4"><div style="height:12px;background:hsl(150, 50%, 20%);cursor:pointer;-ms-transform:scaleY(1.8);-moz-transform:scaleY(1.8);-o-transform:scaleY(1.8);-webkit-transform:scaleY(1.8);transform:scaleY(1.8);-ms-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;-o-border-radius:0 2px 2px 0;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.4.0"></div></div><div style="clear:both;" data-reactid=".0.1.1.0.0.0.0.0.0.0.0.0.1.0.5"></div></div></div></div></div><div data-reactid=".0.1.1.0.0.0.0.0.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.1.0.0.0.0.0.0.1">Slider</div></div><div style="display:flex;-webkit-justify-content:space-between;justify-content:space-between;align-items:flex-end;position:absolute;bottom:0px;width:100%;" class="flexbox-fix" data-reactid=".0.1.1.0.0.0.0.0.1"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0"><div data-reactid=".0.1.1.0.0.0.0.0.1.0.0"><div data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background:#f6f6f6;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.0"></div><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1"><div style="padding-top:5px;padding-left:5px;box-sizing:initial;width:240px;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0"><div data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0"><div style="background:#4D4D4D;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#4D4D4D"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#4D4D4D.0"></div></div><div style="background:#999999;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#999999"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#999999.0"></div></div><div style="background:#FFFFFF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;-ms-box-shadow:inset 0 0 0 1px #ddd;-moz-box-shadow:inset 0 0 0 1px #ddd;-o-box-shadow:inset 0 0 0 1px #ddd;-webkit-box-shadow:inset 0 0 0 1px #ddd;box-shadow:inset 0 0 0 1px #ddd;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FFFFFF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#000;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FFFFFF.0"></div></div><div style="background:#F44E3B;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#F44E3B"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#F44E3B.0"></div></div><div style="background:#FE9200;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FE9200"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FE9200.0"></div></div><div style="background:#FCDC00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FCDC00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FCDC00.0"></div></div><div style="background:#DBDF00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#DBDF00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#DBDF00.0"></div></div><div style="background:#A4DD00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#A4DD00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#A4DD00.0"></div></div><div style="background:#68CCCA;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#68CCCA"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#68CCCA.0"></div></div><div style="background:#73D8FF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#73D8FF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#73D8FF.0"></div></div><div style="background:#AEA1FF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#AEA1FF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#AEA1FF.0"></div></div><div style="background:#FDA1FF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FDA1FF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FDA1FF.0"></div></div><div style="background:#333333;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#333333"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#333333.0"></div></div><div style="background:#808080;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#808080"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#808080.0"></div></div><div style="background:#cccccc;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#cccccc"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#cccccc.0"></div></div><div style="background:#D33115;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#D33115"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#D33115.0"></div></div><div style="background:#E27300;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#E27300"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#E27300.0"></div></div><div style="background:#FCC400;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FCC400"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FCC400.0"></div></div><div style="background:#B0BC00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#B0BC00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#B0BC00.0"></div></div><div style="background:#68BC00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#68BC00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#68BC00.0"></div></div><div style="background:#16A5A5;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#16A5A5"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#16A5A5.0"></div></div><div style="background:#009CE0;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#009CE0"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#009CE0.0"></div></div><div style="background:#7B64FF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#7B64FF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#7B64FF.0"></div></div><div style="background:#FA28FF;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FA28FF"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FA28FF.0"></div></div><div style="background:#000000;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#000000"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#000000.0"></div></div><div style="background:#666666;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#666666"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#666666.0"></div></div><div style="background:#B3B3B3;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#B3B3B3"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#B3B3B3.0"></div></div><div style="background:#9F0500;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#9F0500"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#9F0500.0"></div></div><div style="background:#C45100;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#C45100"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#C45100.0"></div></div><div style="background:#FB9E00;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FB9E00"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#FB9E00.0"></div></div><div style="background:#808900;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#808900"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#808900.0"></div></div><div style="background:#194D33;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#194D33"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:1;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#194D33.0"></div></div><div style="background:#0C797D;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#0C797D"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#0C797D.0"></div></div><div style="background:#0062B1;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#0062B1"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#0062B1.0"></div></div><div style="background:#653294;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#653294"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#653294.0"></div></div><div style="background:#AB149E;width:15px;height:15px;float:left;margin-right:5px;margin-bottom:5px;position:relative;cursor:pointer;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#AB149E"><div style="position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;opacity:0;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.0:$#AB149E.0"></div></div><div style="clear:both;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.0.1"></div></div><div style="display:flex;padding-bottom:6px;padding-right:5px;position:relative;" class="flexbox-fix" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1"><div style="position:absolute;top:6px;left:5px;height:9px;width:9px;background:#194d33;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.0"></div><div style="-webkit-box-flex:6;-moz-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.1"><input style="width:80%;padding:0px;padding-left:20%;border:none;outline:none;background:none;font-size:12px;color:#333;height:16px;" value="#194D33" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.1.0"/><span style="display:none;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.1.1">hex</span></div><div style="-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.2"><input style="width:70%;padding:0px;padding-left:30%;border:none;outline:none;background:none;font-size:12px;color:#333;height:16px;" value="25" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.2.0"/><span style="position:absolute;top:3px;left:0px;line-height:16px;text-transform:uppercase;font-size:12px;color:#999;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.2.1">r</span></div><div style="-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.3"><input style="width:70%;padding:0px;padding-left:30%;border:none;outline:none;background:none;font-size:12px;color:#333;height:16px;" value="77" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.3.0"/><span style="position:absolute;top:3px;left:0px;line-height:16px;text-transform:uppercase;font-size:12px;color:#999;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.3.1">g</span></div><div style="-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.4"><input style="width:70%;padding:0px;padding-left:30%;border:none;outline:none;background:none;font-size:12px;color:#333;height:16px;" value="51" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.4.0"/><span style="position:absolute;top:3px;left:0px;line-height:16px;text-transform:uppercase;font-size:12px;color:#999;" data-reactid=".0.1.1.0.0.0.0.0.1.0.0.0.0.1.0.1.4.1">b</span></div></div></div></div></div></div><div data-reactid=".0.1.1.0.0.0.0.0.1.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.1.0.0.0.0.0.1.0.1">Compact</div></div><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1"><div data-reactid=".0.1.1.0.0.0.0.0.1.1.0"><div data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.0"></div><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1"><div style="width:98px;height:98px;padding:16px;font-family:Roboto;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.0"><input style="width:100%;margin-top:12px;font-size:15px;color:#333;padding:0px;border:0px;border-bottom:2px solid #194d33;outline:none;height:30px;" value="#194D33" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.0.0"/><span style="position:absolute;top:0px;left:0px;font-size:11px;color:#999999;text-transform:capitalize;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.0.1">hex</span></div><div style="display:flex;margin-right:-10px;padding-top:11px;" class="flexbox-fix" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1"><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-right:10px;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.0.0"><input style="width:100%;margin-top:12px;font-size:15px;color:#333;padding:0px;border:0px;border-bottom:1px solid #eee;outline:none;height:30px;" value="25" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.0.0.0"/><span style="position:absolute;top:0px;left:0px;font-size:11px;color:#999999;text-transform:capitalize;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.0.0.1">r</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-right:10px;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.1"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.1.0"><input style="width:100%;margin-top:12px;font-size:15px;color:#333;padding:0px;border:0px;border-bottom:1px solid #eee;outline:none;height:30px;" value="77" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.1.0.0"/><span style="position:absolute;top:0px;left:0px;font-size:11px;color:#999999;text-transform:capitalize;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.1.0.1">g</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-right:10px;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.2"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.2.0"><input style="width:100%;margin-top:12px;font-size:15px;color:#333;padding:0px;border:0px;border-bottom:1px solid #eee;outline:none;height:30px;" value="51" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.2.0.0"/><span style="position:absolute;top:0px;left:0px;font-size:11px;color:#999999;text-transform:capitalize;" data-reactid=".0.1.1.0.0.0.0.0.1.1.0.0.0.1.0.1.2.0.1">b</span></div></div></div></div></div></div></div><div data-reactid=".0.1.1.0.0.0.0.0.1.1.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.1.0.0.0.0.0.1.1.1">Material</div></div></div></div></div><div style="padding-left:455px;" data-reactid=".0.1.1.0.0.0.1"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.1.0"><div data-reactid=".0.1.1.0.0.0.1.0.0"><div data-reactid=".0.1.1.0.0.0.1.0.0.0"><div style="width:320px;height:240px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0"><div style="position:relative;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.0"></div><div style="position:relative;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1"><div style="height:240px;overflow-y:scroll;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0"><div style="padding:16px 0 6px 16px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0"><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2"><div style="width:40px;height:24px;cursor:pointer;background:#b71c1c;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#b71c1c"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#b71c1c.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#b71c1c.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#b71c1c.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#d32f2f;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#d32f2f"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#d32f2f.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#d32f2f.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#d32f2f.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#f44336;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#f44336"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#f44336.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#f44336.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#f44336.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#e57373;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#e57373"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#e57373.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#e57373.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#e57373.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffcdd2;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#ffcdd2"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#ffcdd2.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#ffcdd2.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#b71c1c,#d32f2f,#f44336,#e57373,#ffcdd2.$#ffcdd2.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0"><div style="width:40px;height:24px;cursor:pointer;background:#880e4f;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#880e4f"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#880e4f.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#880e4f.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#880e4f.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#c2185b;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#c2185b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#c2185b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#c2185b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#c2185b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#e91e63;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#e91e63"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#e91e63.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#e91e63.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#e91e63.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#f06292;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f06292"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f06292.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f06292.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f06292.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#f8bbd0;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f8bbd0"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f8bbd0.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f8bbd0.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#880e4f,#c2185b,#e91e63,#f06292,#f8bbd0.$#f8bbd0.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7"><div style="width:40px;height:24px;cursor:pointer;background:#4a148c;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#4a148c"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#4a148c.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#4a148c.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#4a148c.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#7b1fa2;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#7b1fa2"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#7b1fa2.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#7b1fa2.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#7b1fa2.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#9c27b0;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#9c27b0"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#9c27b0.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#9c27b0.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#9c27b0.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ba68c8;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#ba68c8"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#ba68c8.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#ba68c8.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#ba68c8.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#e1bee7;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#e1bee7"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#e1bee7.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#e1bee7.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#4a148c,#7b1fa2,#9c27b0,#ba68c8,#e1bee7.$#e1bee7.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9"><div style="width:40px;height:24px;cursor:pointer;background:#311b92;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#311b92"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#311b92.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#311b92.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#311b92.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#512da8;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#512da8"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#512da8.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#512da8.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#512da8.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#673ab7;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#673ab7"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#673ab7.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#673ab7.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#673ab7.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#9575cd;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#9575cd"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#9575cd.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#9575cd.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#9575cd.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#d1c4e9;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#d1c4e9"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#d1c4e9.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#d1c4e9.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#311b92,#512da8,#673ab7,#9575cd,#d1c4e9.$#d1c4e9.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9"><div style="width:40px;height:24px;cursor:pointer;background:#1a237e;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#1a237e"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#1a237e.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#1a237e.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#1a237e.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#303f9f;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#303f9f"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#303f9f.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#303f9f.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#303f9f.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#3f51b5;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#3f51b5"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#3f51b5.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#3f51b5.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#3f51b5.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#7986cb;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#7986cb"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#7986cb.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#7986cb.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#7986cb.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#c5cae9;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#c5cae9"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#c5cae9.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#c5cae9.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#1a237e,#303f9f,#3f51b5,#7986cb,#c5cae9.$#c5cae9.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb"><div style="width:40px;height:24px;cursor:pointer;background:#0d47a1;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#0d47a1"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#0d47a1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#0d47a1.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#0d47a1.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#1976d2;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#1976d2"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#1976d2.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#1976d2.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#1976d2.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#2196f3;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#2196f3"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#2196f3.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#2196f3.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#2196f3.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#64b5f6;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#64b5f6"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#64b5f6.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#64b5f6.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#64b5f6.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#bbdefb;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#bbdefb"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#bbdefb.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#bbdefb.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#0d47a1,#1976d2,#2196f3,#64b5f6,#bbdefb.$#bbdefb.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc"><div style="width:40px;height:24px;cursor:pointer;background:#01579b;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#01579b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#01579b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#01579b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#01579b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#0288d1;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#0288d1"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#0288d1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#0288d1.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#0288d1.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#03a9f4;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#03a9f4"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#03a9f4.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#03a9f4.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#03a9f4.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#4fc3f7;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#4fc3f7"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#4fc3f7.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#4fc3f7.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#4fc3f7.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#b3e5fc;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#b3e5fc"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#b3e5fc.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#b3e5fc.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#01579b,#0288d1,#03a9f4,#4fc3f7,#b3e5fc.$#b3e5fc.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2"><div style="width:40px;height:24px;cursor:pointer;background:#006064;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#006064"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#006064.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#006064.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#006064.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#0097a7;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#0097a7"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#0097a7.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#0097a7.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#0097a7.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#00bcd4;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#00bcd4"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#00bcd4.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#00bcd4.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#00bcd4.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#4dd0e1;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#4dd0e1"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#4dd0e1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#4dd0e1.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#4dd0e1.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#b2ebf2;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#b2ebf2"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#b2ebf2.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#b2ebf2.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#006064,#0097a7,#00bcd4,#4dd0e1,#b2ebf2.$#b2ebf2.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb"><div style="width:40px;height:24px;cursor:pointer;background:#004d40;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#004d40"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#004d40.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#004d40.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#004d40.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#00796b;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#00796b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#00796b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#00796b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#00796b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#009688;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#009688"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#009688.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#009688.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#009688.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#4db6ac;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#4db6ac"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#4db6ac.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#4db6ac.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#4db6ac.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#b2dfdb;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#b2dfdb"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#b2dfdb.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#b2dfdb.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#004d40,#00796b,#009688,#4db6ac,#b2dfdb.$#b2dfdb.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9"><div style="width:40px;height:24px;cursor:pointer;background:#194D33;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#194D33"><div style="fill:#fff;margin-left:8px;display:block;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#194D33.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#194D33.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#194D33.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#388e3c;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#388e3c"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#388e3c.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#388e3c.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#388e3c.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#4caf50;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#4caf50"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#4caf50.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#4caf50.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#4caf50.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#81c784;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#81c784"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#81c784.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#81c784.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#81c784.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#c8e6c9;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#c8e6c9"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#c8e6c9.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#c8e6c9.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#194D33,#388e3c,#4caf50,#81c784,#c8e6c9.$#c8e6c9.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8"><div style="width:40px;height:24px;cursor:pointer;background:#33691e;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#33691e"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#33691e.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#33691e.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#33691e.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#689f38;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#689f38"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#689f38.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#689f38.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#689f38.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#8bc34a;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#8bc34a"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#8bc34a.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#8bc34a.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#8bc34a.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#aed581;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#aed581"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#aed581.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#aed581.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#aed581.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#dcedc8;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#dcedc8"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#dcedc8.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#dcedc8.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#33691e,#689f38,#8bc34a,#aed581,#dcedc8.$#dcedc8.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3"><div style="width:40px;height:24px;cursor:pointer;background:#827717;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#827717"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#827717.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#827717.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#827717.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#afb42b;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#afb42b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#afb42b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#afb42b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#afb42b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#cddc39;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#cddc39"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#cddc39.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#cddc39.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#cddc39.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#dce775;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#dce775"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#dce775.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#dce775.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#dce775.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#f0f4c3;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#f0f4c3"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#f0f4c3.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#f0f4c3.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#827717,#afb42b,#cddc39,#dce775,#f0f4c3.$#f0f4c3.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4"><div style="width:40px;height:24px;cursor:pointer;background:#f57f17;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#f57f17"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#f57f17.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#f57f17.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#f57f17.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#fbc02d;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fbc02d"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fbc02d.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fbc02d.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fbc02d.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffeb3b;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#ffeb3b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#ffeb3b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#ffeb3b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#ffeb3b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#fff176;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff176"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff176.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff176.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff176.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#fff9c4;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff9c4"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff9c4.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff9c4.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#f57f17,#fbc02d,#ffeb3b,#fff176,#fff9c4.$#fff9c4.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3"><div style="width:40px;height:24px;cursor:pointer;background:#ff6f00;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ff6f00"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ff6f00.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ff6f00.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ff6f00.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffa000;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffa000"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffa000.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffa000.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffa000.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffc107;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffc107"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffc107.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffc107.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffc107.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffd54f;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffd54f"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffd54f.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffd54f.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffd54f.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffecb3;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffecb3"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffecb3.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffecb3.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#ff6f00,#ffa000,#ffc107,#ffd54f,#ffecb3.$#ffecb3.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2"><div style="width:40px;height:24px;cursor:pointer;background:#e65100;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#e65100"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#e65100.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#e65100.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#e65100.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#f57c00;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#f57c00"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#f57c00.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#f57c00.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#f57c00.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ff9800;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ff9800"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ff9800.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ff9800.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ff9800.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffb74d;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffb74d"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffb74d.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffb74d.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffb74d.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffe0b2;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffe0b2"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffe0b2.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffe0b2.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#e65100,#f57c00,#ff9800,#ffb74d,#ffe0b2.$#ffe0b2.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc"><div style="width:40px;height:24px;cursor:pointer;background:#bf360c;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#bf360c"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#bf360c.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#bf360c.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#bf360c.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#e64a19;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#e64a19"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#e64a19.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#e64a19.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#e64a19.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ff5722;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff5722"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff5722.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff5722.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff5722.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ff8a65;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff8a65"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff8a65.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff8a65.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ff8a65.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#ffccbc;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ffccbc"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ffccbc.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ffccbc.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#bf360c,#e64a19,#ff5722,#ff8a65,#ffccbc.$#ffccbc.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8"><div style="width:40px;height:24px;cursor:pointer;background:#3e2723;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#3e2723"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#3e2723.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#3e2723.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#3e2723.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#5d4037;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#5d4037"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#5d4037.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#5d4037.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#5d4037.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#795548;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#795548"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#795548.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#795548.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#795548.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#a1887f;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#a1887f"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#a1887f.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#a1887f.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#a1887f.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#d7ccc8;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#d7ccc8"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#d7ccc8.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#d7ccc8.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#3e2723,#5d4037,#795548,#a1887f,#d7ccc8.$#d7ccc8.0.0.0"></path></svg></div></div></div><div style="padding-bottom:10px;width:40px;float:left;margin-right:10px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc"><div style="width:40px;height:24px;cursor:pointer;background:#263238;margin-bottom:1px;overflow:hidden;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#263238"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#263238.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#263238.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#263238.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#455a64;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#455a64"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#455a64.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#455a64.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#455a64.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#607d8b;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#607d8b"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#607d8b.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#607d8b.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#607d8b.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#90a4ae;margin-bottom:1px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#90a4ae"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#90a4ae.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#90a4ae.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#90a4ae.0.0.0"></path></svg></div></div><div style="width:40px;height:24px;cursor:pointer;background:#cfd8dc;margin-bottom:1px;overflow:hidden;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#cfd8dc"><div style="fill:#fff;margin-left:8px;display:none;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#cfd8dc.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#cfd8dc.0.0"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.0:$#263238,#455a64,#607d8b,#90a4ae,#cfd8dc.$#cfd8dc.0.0.0"></path></svg></div></div></div><div style="clear:both;" data-reactid=".0.1.1.0.0.0.1.0.0.0.0.0.1.0.0.1"></div></div></div></div></div></div></div><div data-reactid=".0.1.1.0.0.0.1.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.1.0.0.0.1.0.1">Swatches</div></div></div></div></div></div></div></div><div style="padding-top:50px;padding-bottom:50px;" data-reactid=".0.2"><div style="max-width:780px;padding:0 20px;margin:0 auto;" data-reactid=".0.2.0"><div data-reactid=".0.2.0.0"><style data-reactid=".0.2.0.0.0">
.rendered{
color: #607D8B; // blue grey 500
}
.rendered .hljs-comment {
color: #B0BEC5; // blue grey 200
}
.rendered .hljs-keyword{
color: #EF9A9A; // red 200
}
.rendered .hljs-string{
color: #689F38; // light green 700
}
.rendered .hljs-title{
}
.text code{
background: #ddd;
padding: 1px 5px 3px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
font-size: 85%;
vertical-align: bottom;
}
.markdown p{
margin: 15px 24px 15px 0;
}
.markdown h1{
font-size: 38px;
font-weight: 200;
color: rgba(0,0,0,.77);
margin: 0;
padding-top: 54px;
padding-bottom: 5px;
}
.markdown h2{
font-size: 26px;
line-height: 32px;
font-weight: 200;
color: rgba(0,0,0,.57);
padding-top: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.markdown h3{
font-weight: normal;
font-size: 20px;
padding-top: 20px;
margin-top: 20px;
color: rgba(0,0,0,.67);
}
</style><div style="position:relative;" data-reactid=".0.2.0.0.1"><div style="position:absolute;width:170px;" data-reactid=".0.2.0.0.1.0"><div data-reactid=".0.2.0.0.1.0.0"><div style="padding-top:20px;position:relative;width:170px;" data-reactid=".0.2.0.0.1.0.0.0"><div style="display:none;position:absolute;" data-reactid=".0.2.0.0.1.0.0.0.0"><iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=react-color&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameborder="0" data-reactid=".0.2.0.0.1.0.0.0.0.0"></iframe></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0.0.$sidebar-#{ sidebar }.0">01</div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0.0.$content-#{ content }"><a href="#about" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;font-weight:bold;padding-top:14px;display:block;" data-reactid=".0.2.0.0.1.0.0.0.1:$01-about.0.0.$content-#{ content }.0">About</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0.0.$sidebar-#{ sidebar }.0">02</div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0.0.$content-#{ content }"><a href="#getting-started" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;font-weight:bold;padding-top:14px;display:block;" data-reactid=".0.2.0.0.1.0.0.0.1:$02-getting-started.0.0.$content-#{ content }.0">Getting Started</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0.0.$content-#{ content }"><a href="#usage-install" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=101-install.0.0.$content-#{ content }.0">Install</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0.0.$content-#{ content }"><a href="#usage-include" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=102-include.0.0.$content-#{ content }.0">Include the Component</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0.0.$content-#{ content }"><a href="#usage-display" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$02=103-display.0.0.$content-#{ content }.0">Display It</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0.0.$sidebar-#{ sidebar }.0">03</div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0.0.$content-#{ content }"><a href="#api" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;font-weight:bold;padding-top:14px;display:block;" data-reactid=".0.2.0.0.1.0.0.0.1:$03-api.0.0.$content-#{ content }.0">Component API</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0.0.$content-#{ content }"><a href="#api-type" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=101-type.0.0.$content-#{ content }.0">type</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0.0.$content-#{ content }"><a href="#api-onChange" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=102-onChange.0.0.$content-#{ content }.0">onChange</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0.0.$content-#{ content }"><a href="#api-onChangeComplete" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=103-onChangeComplete.0.0.$content-#{ content }.0">onChangeComplete</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0.0.$content-#{ content }"><a href="#api-color" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=104-color.0.0.$content-#{ content }.0">color</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0.0.$content-#{ content }"><a href="#api-display" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=105-display.0.0.$content-#{ content }.0">display</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0.0.$content-#{ content }"><a href="#api-onClose" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=106-onClose.0.0.$content-#{ content }.0">onClose</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0.0.$content-#{ content }"><a href="#api-position" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=107-position.0.0.$content-#{ content }.0">position</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0.0.$content-#{ content }"><a href="#api-positionCSS" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$03=108-positionCSS.0.0.$content-#{ content }.0">positionCSS</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0.0.$sidebar-#{ sidebar }.0">04</div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0.0.$content-#{ content }"><a href="#create" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;font-weight:bold;padding-top:14px;display:block;" data-reactid=".0.2.0.0.1.0.0.0.1:$04-create.0.0.$content-#{ content }.0">Create Your Own</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0.0.$content-#{ content }"><a href="#create-parent" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=101-parent.0.0.$content-#{ content }.0">Parent Component</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0.0.$sidebar-#{ sidebar }.0"></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0.0.$content-#{ content }"><a href="#create-helpers" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;" data-reactid=".0.2.0.0.1.0.0.0.1:$04=102-helpers.0.0.$content-#{ content }.0">Helper Components</a></div></div></div></div><div style="padding-bottom:8px;" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:0px;padding-top:0px;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0.0"><div style="min-width:28px;max-width:28px;-webkit-flex-basis:28px;flex-basis:28px;" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;color:rgba(0, 0, 0, .27);font-weight:bold;padding-top:14px;" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0.0.$sidebar-#{ sidebar }.0">05</div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0.0.$content-#{ content }"><a href="#examples" style="font-size:14px;text-decoration:none;color:rgba(0, 0, 0, .57);-ms-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;-webkit-transition:all 200ms linear;transition:all 200ms linear;font-weight:bold;padding-top:14px;display:block;" data-reactid=".0.2.0.0.1.0.0.0.1:$05-examples.0.0.$content-#{ content }.0">More Examples</a></div></div></div></div></div></div></div><div style="padding-left:190px;" data-reactid=".0.2.0.0.1.1"><div data-reactid=".0.2.0.0.1.1.0"><div id="about" class="markdown" data-reactid=".0.2.0.0.1.1.0.$01-about"><div data-reactid=".0.2.0.0.1.1.0.$01-about.0"><h1 data-reactid=".0.2.0.0.1.1.0.$01-about.0.0"><span data-reactid=".0.2.0.0.1.1.0.$01-about.0.0.0">About</span><span data-reactid=".0.2.0.0.1.1.0.$01-about.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#about" data-reactid=".0.2.0.0.1.1.0.$01-about.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h1></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$01-about.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$0"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$1"><p><strong>7 Different Pickers</strong> - Sketch, Photoshop, Chrome and many more</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$2"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$3"><p><strong>Popup or Block</strong> - It can be used it as a popup or always visible</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$4"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$5"><p><strong>Make Your Own</strong> - Use the building block components to make your own</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$01-about.1.$6"></div></div></div><div id="getting-started" class="markdown" data-reactid=".0.2.0.0.1.1.0.$02-getting-started"><div data-reactid=".0.2.0.0.1.1.0.$02-getting-started.0"><h1 data-reactid=".0.2.0.0.1.1.0.$02-getting-started.0.0"><span data-reactid=".0.2.0.0.1.1.0.$02-getting-started.0.0.0">Getting Started</span><span data-reactid=".0.2.0.0.1.1.0.$02-getting-started.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#getting-started" data-reactid=".0.2.0.0.1.1.0.$02-getting-started.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h1></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$02-getting-started.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02-getting-started.1.$0"></div></div></div><div id="usage-install" class="markdown" data-reactid=".0.2.0.0.1.1.0.$02=101-install"><div data-reactid=".0.2.0.0.1.1.0.$02=101-install.0"><h2 data-reactid=".0.2.0.0.1.1.0.$02=101-install.0.0"><span data-reactid=".0.2.0.0.1.1.0.$02=101-install.0.0.0">Install</span><span data-reactid=".0.2.0.0.1.1.0.$02=101-install.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#usage-install" data-reactid=".0.2.0.0.1.1.0.$02=101-install.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$0"><p>Start by installing <code>react-color</code> via npm:</p>
</div><div data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$1.0.1.0.0.$content-#{ content }.0.1"><pre><code>npm install react-color --save
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=101-install.1.$2"></div></div></div><div id="usage-include" class="markdown" data-reactid=".0.2.0.0.1.1.0.$02=102-include"><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.0"><h2 data-reactid=".0.2.0.0.1.1.0.$02=102-include.0.0"><span data-reactid=".0.2.0.0.1.1.0.$02=102-include.0.0.0">Include the Component</span><span data-reactid=".0.2.0.0.1.1.0.$02=102-include.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#usage-include" data-reactid=".0.2.0.0.1.1.0.$02=102-include.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$0"><p>Require <code>react-color</code> at the top of a component and then use <code>ColorPicker</code> in the render function:</p>
</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$1.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> <ColorPicker type="sketch" />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=102-include.1.$2"></div></div></div><div id="usage-display" class="markdown" data-reactid=".0.2.0.0.1.1.0.$02=103-display"><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.0"><h2 data-reactid=".0.2.0.0.1.1.0.$02=103-display.0.0"><span data-reactid=".0.2.0.0.1.1.0.$02=103-display.0.0.0">Display It</span><span data-reactid=".0.2.0.0.1.1.0.$02=103-display.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#usage-display" data-reactid=".0.2.0.0.1.1.0.$02=103-display.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$0"><p>Display the color picker popup on click, or don't define <code>display</code> and it will always be visible.</p>
</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$22">22</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$23">23</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$24">24</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$25">25</div><div data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$sidebar-#{ sidebar }.0.$26">26</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$1.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
displayColorPicker: <span class="hljs-literal">false</span>,
};
<span class="hljs-keyword">this</span>.handleClick = <span class="hljs-keyword">this</span>.handleClick.bind(<span class="hljs-keyword">this</span>);
}
handleClick() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: !<span class="hljs-keyword">this</span>.state.displayColorPicker });
}
render() {
<span class="hljs-keyword">return</span> (
<div>
<button onClick={ this.handleClick }>Pick Color</button>
<ColorPicker display={ this.state.displayColorPicker } type="sketch" />
</div>
);
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$02=103-display.1.$2"></div></div></div><div id="api" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03-api"><div data-reactid=".0.2.0.0.1.1.0.$03-api.0"><h1 data-reactid=".0.2.0.0.1.1.0.$03-api.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03-api.0.0.0">Component API</span><span data-reactid=".0.2.0.0.1.1.0.$03-api.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api" data-reactid=".0.2.0.0.1.1.0.$03-api.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h1></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03-api.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03-api.1.$0"></div></div></div><div id="api-type" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=101-type"><div data-reactid=".0.2.0.0.1.1.0.$03=101-type.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=101-type.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=101-type.0.0.0">type</span><span data-reactid=".0.2.0.0.1.1.0.$03=101-type.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-type" data-reactid=".0.2.0.0.1.1.0.$03=101-type.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=101-type.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=101-type.1.$0"><p>A string that defines the type of color picker theme to display. Types include: <code>sketch</code> <code>chrome</code> <code>photoshop</code> <code>slider</code> <code>compact</code> <code>material</code> <code>swatches</code></p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=101-type.1.$1"></div></div></div><div id="api-onChange" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange"><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.0.0.0">onChange</span><span data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-onChange" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$0"><p>Pass a function to call every time the color is changed. Use this to store the color in the state of a parent component or to make other transformations.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$1"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$2"><p>Keep in mind this is called on drag events that can happen quite frequently. If you just need to get the color once use <code>onChangeComplete</code>.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$3"></div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$22">22</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$23">23</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$24">24</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$25">25</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$26">26</div><div data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$27">27</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$4.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
handleChange(color) {
<span class="hljs-comment">// color = {</span>
<span class="hljs-comment">// hex: '#333',</span>
<span class="hljs-comment">// rgb: {</span>
<span class="hljs-comment">// r: 51,</span>
<span class="hljs-comment">// g: 51,</span>
<span class="hljs-comment">// b: 51,</span>
<span class="hljs-comment">// a: 1,</span>
<span class="hljs-comment">// },</span>
<span class="hljs-comment">// hsl: {</span>
<span class="hljs-comment">// h: 0,</span>
<span class="hljs-comment">// s: 0,</span>
<span class="hljs-comment">// l: .20,</span>
<span class="hljs-comment">// a: 1,</span>
<span class="hljs-comment">// },</span>
<span class="hljs-comment">// }</span>
}
render() {
<span class="hljs-keyword">return</span> <ColorPicker onChange={ this.handleChange } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=102-onChange.1.$5"></div></div></div><div id="api-onChangeComplete" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete"><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.0.0.0">onChangeComplete</span><span data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-onChangeComplete" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$0"><p>Pass a function to call once a color change is complete.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
background: <span class="hljs-string">'#fff'</span>,
};
<span class="hljs-keyword">this</span>.handleChangeComplete = <span class="hljs-keyword">this</span>.handleChangeComplete.bind(<span class="hljs-keyword">this</span>);
}
handleChangeComplete(color) {
<span class="hljs-keyword">this</span>.setState({ background: color.hex });
}
render() {
<span class="hljs-keyword">return</span> <ColorPicker onChangeComplete={ this.handleChangeComplete } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=103-onChangeComplete.1.$3"></div></div></div><div id="api-color" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=104-color"><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=104-color.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=104-color.0.0.0">color</span><span data-reactid=".0.2.0.0.1.1.0.$03=104-color.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-color" data-reactid=".0.2.0.0.1.1.0.$03=104-color.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$0"><p>Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$1"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$2"><p>Color accepts either a string of a hex color <code>'#333'</code> or a object of rgb or hsl values <code>{ r: 51, g: 51, b: 51 }</code> or <code>{ h: 0, s: 0, l: .10 }</code>. Both rgb and hsl will also take a <code>a: 1</code> value for alpha.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$3"></div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$4.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
background: <span class="hljs-string">'#fff'</span>,
};
<span class="hljs-keyword">this</span>.handleChangeComplete = <span class="hljs-keyword">this</span>.handleChangeComplete.bind(<span class="hljs-keyword">this</span>);
}
handleChangeComplete(color) {
<span class="hljs-keyword">this</span>.setState({ background: color.hex });
}
render() {
<span class="hljs-keyword">return</span> <ColorPicker color={ this.state.background } type="sketch" onChangeComplete={ this.handleChangeComplete } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$5"><p>In this case, the color picker will initialize with the color <code>#fff</code>. When the color is changed, <code>handleChangeComplete</code> will fire and set the new color to state.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=104-color.1.$6"></div></div></div><div id="api-display" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=105-display"><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=105-display.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=105-display.0.0.0">display</span><span data-reactid=".0.2.0.0.1.1.0.$03=105-display.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-display" data-reactid=".0.2.0.0.1.1.0.$03=105-display.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$0"><p>By default, the color picker is a block element that is always visible. To display the popup programmatically, pass <code>display</code> a boolean value:</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$22">22</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$23">23</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$24">24</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$25">25</div><div data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$26">26</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
displayColorPicker: <span class="hljs-literal">false</span>,
};
<span class="hljs-keyword">this</span>.handleClick = <span class="hljs-keyword">this</span>.handleClick.bind(<span class="hljs-keyword">this</span>);
}
handleClick() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: !<span class="hljs-keyword">this</span>.state.displayColorPicker });
}
render() {
<span class="hljs-keyword">return</span> (
<div>
<button onClick={ this.handleClick }>Pick Color</button>
<ColorPicker display={ this.state.displayColorPicker } type="sketch" />
</div>
);
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=105-display.1.$3"></div></div></div><div id="api-onClose" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose"><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.0.0.0">onClose</span><span data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-onClose" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$0"><p>If you are using the ColorPicker as a popup, you can pass a function to <code>onClose</code> that will fire when the popup is closed. The callback gets called with the latest color information as the first argument.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
handleClose(color) {
...
}
render() {
<span class="hljs-keyword">return</span> <ColorPicker display={ true } onClose={ this.handleClose } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=106-onClose.1.$3"></div></div></div><div id="api-position" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=107-position"><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=107-position.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=107-position.0.0.0">position</span><span data-reactid=".0.2.0.0.1.1.0.$03=107-position.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-position" data-reactid=".0.2.0.0.1.1.0.$03=107-position.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$0"><p>Use <code>position</code> alongside <code>display</code> to position the popup relative to the container. It takes <code>left</code> <code>right</code> and <code>below</code> as options.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> <ColorPicker position="below" display={ true } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=107-position.1.$3"></div></div></div><div id="api-positionCSS" class="markdown" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS"><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.0"><h2 data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.0.0"><span data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.0.0.0">positionCSS</span><span data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#api-positionCSS" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$0"><p>Use <code>positionCSS</code> alongside <code>display</code> to declare a custom position for the color picker with a CSS object:</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">var</span> popupPosition = {
position: <span class="hljs-string">'absolute'</span>,
top: <span class="hljs-string">'100px'</span>,
left: <span class="hljs-string">'20px'</span>,
};
<span class="hljs-keyword">return</span> <ColorPicker positionCSS={ popupPosition } display={ true } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$03=108-positionCSS.1.$3"></div></div></div><div id="create" class="markdown" data-reactid=".0.2.0.0.1.1.0.$04-create"><div data-reactid=".0.2.0.0.1.1.0.$04-create.0"><h1 data-reactid=".0.2.0.0.1.1.0.$04-create.0.0"><span data-reactid=".0.2.0.0.1.1.0.$04-create.0.0.0">Create Your Own</span><span data-reactid=".0.2.0.0.1.1.0.$04-create.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#create" data-reactid=".0.2.0.0.1.1.0.$04-create.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h1></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$04-create.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04-create.1.$0"></div></div></div><div id="create-parent" class="markdown" data-reactid=".0.2.0.0.1.1.0.$04=101-parent"><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.0"><h2 data-reactid=".0.2.0.0.1.1.0.$04=101-parent.0.0"><span data-reactid=".0.2.0.0.1.1.0.$04=101-parent.0.0.0">Parent Component</span><span data-reactid=".0.2.0.0.1.1.0.$04=101-parent.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#create-parent" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$0"><p>To make a custom color picker, create a top-level component that will act as the bridge with the ColorPicker component. Pass that component down on the custom property:</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$1"></div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$2.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-keyword">var</span> CustomColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./CustomColorPicker'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Component</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> <ColorPicker custom={ CustomColorPicker } />;
}
}
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$3"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$4"><p>This component will be passed <code>hex</code>, <code>rgb</code> and <code>hsl</code> values as props for the current color. It is also provided an <code>onChange</code> prop that should be called to propagate a new color. Pass it a hex string, or an rgb or hsl object.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=101-parent.1.$5"></div></div></div><div id="create-helpers" class="markdown" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers"><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.0"><h2 data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.0.0"><span data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.0.0.0">Helper Components</span><span data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#create-helpers" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h2></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$0"><p>Every color picker provided is made up of a collection of helper components. Those components are accessible for you to use to make a custom color picker.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$1"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$2"><h3><Alpha /></h3>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$3"><p>Use Alpha to display a slider to toggle the alpha value. Make sure to wrap it in a div that's the size you want the slider to be and that it is <code>position: relative</code>.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$4"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$5"><ul>
<li><strong>...this.props</strong> - Pass down all the color props from your top-most component.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$6"><ul>
<li><strong>pointer</strong> - Define a custom pointer component for the slider pointer.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$7"><ul>
<li><strong>onChange</strong> - Function callback. Make sure this calls the onChange function of the parent to make it change.</li>
</ul>
</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$8.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> { Alpha } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color/src/components/common'</span>);
<Alpha
{...this.props}
pointer={ CustomPointer }
onChange={ this.handleChange } />
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$9"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$10"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$11"><h3><EditableInput /></h3>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$12"><p>Use EditableInput to display an input / label that acts as the single source of truth until the input is blurred.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$13"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$14"><ul>
<li><strong>label</strong> - Used to put a label on the input.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$15"><ul>
<li><strong>value</strong> - The value to be passed down to the input.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$16"><ul>
<li><strong>onChange</strong> - Function callback. Use this to call the onChange function of the parent. Returns an object where the key is the label and the value is the new value.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$17"><ul>
<li><strong>style</strong> - Inline css to style the children elements: <code>{ wrap: {}, input: {}, label: {} }</code></li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$18"></div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$19.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> { EditableInput } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color/src/components/common'</span>);
<span class="hljs-keyword">var</span> inputStyles = {
input: {
border: none,
},
label: {
fontSize: <span class="hljs-string">'12px'</span>,
color: <span class="hljs-string">'#999'</span>,
},
};
<EditableInput
style={ inputStyles }
label="hex"
value={ this.props.hex }
onChange={ this.handleChange } />
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$20"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$21"><h3><Hue /></h3>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$22"><p>Use Hue to display a slider to toggle the hue value. Make sure to wrap it in a div that's the size you want the slider to be and that it is <code>position: relative</code>.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$23"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$24"><ul>
<li><strong>...this.props</strong> - Pass down all the color props from your top-most component.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$25"><ul>
<li><strong>pointer</strong> - Define a custom pointer component for the slider pointer.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$26"><ul>
<li><strong>onChange</strong> - Function callback. Make sure this calls the onChange function of the parent to make it change.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$27"><ul>
<li><strong>direction</strong> - Display direction of the slider. Horizontal by default.</li>
</ul>
</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$28.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> { Alpha } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color/src/components/common'</span>);
<Hue
{...this.props}
pointer={ CustomPointer }
onChange={ this.handleChange }
direction={ 'horizontal' || 'vertical' } />
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$29"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$30"><h3><Saturation /></h3>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$31"><p>Use Saturation to display a saturation block that users can drag to change the value. Make sure to wrap it in a div that's the size you want the block to be and that it is <code>position: relative</code>.</p>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$32"></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$33"><ul>
<li><strong>...this.props</strong> - Pass down all the color props from your top-most component.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$34"><ul>
<li><strong>pointer</strong> - Define a custom pointer component for the slider pointer.</li>
</ul>
</div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$35"><ul>
<li><strong>onChange</strong> - Function callback. Make sure this calls the onChange function of the parent to make it change.</li>
</ul>
</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36"><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$36.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> { Alpha } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color/src/components/common'</span>);
<Saturation
{...this.props}
pointer={ CustomPointer }
onChange={ this.handleChange } />
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$04=102-helpers.1.$37"></div></div></div><div id="examples" class="markdown" data-reactid=".0.2.0.0.1.1.0.$05-examples"><div data-reactid=".0.2.0.0.1.1.0.$05-examples.0"><h1 data-reactid=".0.2.0.0.1.1.0.$05-examples.0.0"><span data-reactid=".0.2.0.0.1.1.0.$05-examples.0.0.0">More Examples</span><span data-reactid=".0.2.0.0.1.1.0.$05-examples.0.0.1"> </span><a style="opacity:0;text-decoration:none;fill:#194D33;-ms-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;-webkit-transition:opacity 200ms linear;transition:opacity 200ms linear;" href="#examples" data-reactid=".0.2.0.0.1.1.0.$05-examples.0.0.2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
</svg>
</a></h1></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.0.1.1.0.$05-examples.1"><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.0.1.1.0.$05-examples.1.$0"></div></div></div></div></div></div></div><div style="position:relative;" data-reactid=".0.2.0.1"><div style="position:absolute;width:170px;" data-reactid=".0.2.0.1.0"><div data-reactid=".0.2.0.1.0.0"></div></div><div style="padding-left:190px;" data-reactid=".0.2.0.1.1"><div style="padding-top:30px;" data-reactid=".0.2.0.1.1.0"><div style="padding-bottom:40px;" data-reactid=".0.2.0.1.1.0.0"><div style="background:#ddd;-ms-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-o-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);box-shadow:inset 0 2px 3px rgba(0,0,0,.1);position:relative;height:200px;-ms-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;" data-reactid=".0.2.0.1.1.0.0.0"><div style="width:90px;height:24px;margin:-12px 0 0 -45px;position:absolute;left:50%;top:50%;" data-reactid=".0.2.0.1.1.0.0.0.0"><div data-reactid=".0.2.0.1.1.0.0.0.0.0"><button data-reactid=".0.2.0.1.1.0.0.0.0.0.0">Pick Color</button><div style="left:100%;margin-left:20px;top:0px;z-index:999;position:absolute;display:none;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1"><div data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0"><div style="background:#fff;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-moz-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-o-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-webkit-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-sizing:initial;width:225px;font-family:Menlo;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0"><div style="width:100%;padding-bottom:55%;position:relative;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;overflow:hidden;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(249.99999999999994,100%, 50%);-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0.0.0.1"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-o-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff;-ms-transform:translate(-6px, -6px);-moz-transform:translate(-6px, -6px);-o-transform:translate(-6px, -6px);-webkit-transform:translate(-6px, -6px);transform:translate(-6px, -6px);" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.0.0.0.1.0"></div></div></div></div></div><div style="padding:16px 16px 12px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1"><div style="display:flex;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0"><div style="width:32px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.0"><div style="margin-top:6px;width:16px;height:16px;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;position:relative;overflow:hidden;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:2;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);background:rgba(34, 25, 77, 1);" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.0.0.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.0.0.1"></div></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1"><div style="height:10px;position:relative;margin-bottom:8px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.0.0.0"><div style="z-index:2;position:absolute;left:69.44444444444443%;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.0.0.0.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.0.0.0.0.0"></div></div></div></div></div><div style="height:10px;position:relative;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(34, 25, 77, 0) 0%, rgba(34, 25, 77, 1) 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.2.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.0.1.1.0.2.0.0"></div></div></div></div></div></div></div><div style="padding-top:16px;display:flex;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1"><div style="width:32px;text-align:right;position:relative;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1.1"><div style="margin-right:-4px;margin-top:12px;cursor:pointer;position:relative;z-index:2;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1.1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1.1.0.0"><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1.1.0.0.0"></path></svg></div><div style="position:absolute;width:24px;height:28px;background:#eee;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;top:10px;left:12px;display:none;" data-reactid=".0.2.0.1.1.0.0.0.0.0.1.0.0.1.1.1.1"></div></div></div></div></div></div><div data-reactid=".0.2.0.1.1.0.0.0.0.0.1.1"></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.1.1.0.0.1"><div data-reactid=".0.2.0.1.1.0.0.1.$0"><div style="position:relative;" data-reactid=".0.2.0.1.1.0.0.1.$0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.1.1.0.0.1.$0.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$22">22</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$23">23</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$24">24</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$25">25</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$26">26</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$27">27</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$28">28</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$29">29</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$30">30</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$31">31</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$32">32</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$33">33</div><div data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$34">34</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.1.1.0.0.1.$0.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ButtonExample</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
displayColorPicker: <span class="hljs-literal">false</span>,
};
<span class="hljs-keyword">this</span>.handleClick = <span class="hljs-keyword">this</span>.handleClick.bind(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">this</span>.handleClose = <span class="hljs-keyword">this</span>.handleClose.bind(<span class="hljs-keyword">this</span>);
}
handleClick() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: !<span class="hljs-keyword">this</span>.state.displayColorPicker });
}
handleClose() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: <span class="hljs-literal">false</span> });
}
render() {
<span class="hljs-keyword">return</span> (
<div>
<button onClick={ this.handleClick }>Pick Color</button>
<ColorPicker
display={ this.state.displayColorPicker }
onClose={ this.handleClose }
type="chrome" />
</div>
);
}
};
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.1.1.0.0.1.$1"></div></div></div><div style="padding-bottom:40px;" data-reactid=".0.2.0.1.1.0.1"><div style="background:#ddd;-ms-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-o-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.1);box-shadow:inset 0 2px 3px rgba(0,0,0,.1);position:relative;height:200px;-ms-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;" data-reactid=".0.2.0.1.1.0.1.0"><div style="width:46px;height:24px;margin:-12px 0 0 -23px;position:absolute;left:50%;top:50%;" data-reactid=".0.2.0.1.1.0.1.0.0"><div data-reactid=".0.2.0.1.1.0.1.0.0.0"><div style="padding:5px;background:#fff;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-o-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.0"><div style="width:36px;height:14px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#F17013;" data-reactid=".0.2.0.1.1.0.1.0.0.0.0.0"></div></div><div style="left:0px;margin-left:0px;top:100%;margin-top:20px;z-index:999;position:absolute;display:none;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0"><div style="width:200px;padding:10px 10px 0;box-sizing:initial;background:#fff;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0"><div style="width:100%;padding-bottom:75%;position:relative;overflow:hidden;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(25.135135135135133,100%, 50%);-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0.0.0.0"></div><div style="position:absolute;top:5.4901960784313815%;left:92.11618257261411%;cursor:default;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0.0.0.1"><div style="width:4px;height:4px;-ms-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-o-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;cursor:hand;-ms-transform:translate(-2px, -2px);-moz-transform:translate(-2px, -2px);-o-transform:translate(-2px, -2px);-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.0.0.0.1.0"></div></div></div></div></div><div style="display:flex;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1"><div style="padding:4px 0;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0"><div style="position:relative;height:10px;overflow:hidden;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.0.0.0"><div style="z-index:2;position:absolute;left:6.981981981981981%;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.0.0.0.0"><div style="margin-top:1px;width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.0.0.0.0.0"></div></div></div></div></div><div style="position:relative;height:10px;margin-top:4px;overflow:hidden;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(241, 112, 19, 0) 0%, rgba(241, 112, 19, 1) 100%);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.2.0"><div style="width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;margin-top:1px;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.0.1.0.2.0.0"></div></div></div></div></div></div><div style="width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:rgba(241, 112, 19, 1);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);z-index:2;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.1.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.1.1.1"></div></div></div><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2"><div style="display:flex;padding-top:4px;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0"><div style="-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.0"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.0.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="F17013" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.0.0.0"/><span style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.0.0.1">hex</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.1"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.1.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="241" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.1.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.1.0.1">r</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.2"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.2.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="112" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.2.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.2.0.1">g</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.3"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.3.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="19" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.3.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.3.0.1">b</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.4"><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.4.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="100" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.4.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.2.0.4.0.1">a</span></div></div></div></div><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3"><div style="margin-right:-10px;margin-left:-10px;padding-left:10px;padding-top:10px;border-top:1px solid #eee;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0"><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#D0021B"><div style="background:#D0021B;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#D0021B.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#D0021B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#D0021B.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#D0021B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F5A623"><div style="background:#F5A623;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F5A623.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F5A623.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F5A623.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F5A623.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F8E71C"><div style="background:#F8E71C;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F8E71C.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F8E71C.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F8E71C.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#F8E71C.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#8B572A"><div style="background:#8B572A;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#8B572A.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#8B572A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#8B572A.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#8B572A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#7ED321"><div style="background:#7ED321;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#7ED321.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#7ED321.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#7ED321.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#7ED321.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#417505"><div style="background:#417505;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#417505.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#417505.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#417505.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#417505.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#BD10E0"><div style="background:#BD10E0;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#BD10E0.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#BD10E0.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#BD10E0.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#BD10E0.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9013FE"><div style="background:#9013FE;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9013FE.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9013FE.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9013FE.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9013FE.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A90E2"><div style="background:#4A90E2;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A90E2.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A90E2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A90E2.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A90E2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#50E3C2"><div style="background:#50E3C2;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#50E3C2.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#50E3C2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#50E3C2.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#50E3C2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#B8E986"><div style="background:#B8E986;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#B8E986.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#B8E986.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#B8E986.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#B8E986.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#000000"><div style="background:#000000;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#000000.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#000000.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#000000.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#000000.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A4A4A"><div style="background:#4A4A4A;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A4A4A.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A4A4A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A4A4A.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#4A4A4A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9B9B9B"><div style="background:#9B9B9B;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9B9B9B.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9B9B9B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9B9B9B.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#9B9B9B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#FFFFFF"><div style="background:#FFFFFF;" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#FFFFFF.0"><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#FFFFFF.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#FFFFFF.0.1"></div><span data-reactid=".0.2.0.1.1.0.1.0.0.0.1.0.0.3.0.$#FFFFFF.0.2"> </span></div></div></div></div></div></div><div data-reactid=".0.2.0.1.1.0.1.0.0.0.1.1"></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" data-reactid=".0.2.0.1.1.0.1.1"><div data-reactid=".0.2.0.1.1.0.1.1.$0"><div style="position:relative;" data-reactid=".0.2.0.1.1.0.1.1.$0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-moz-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-o-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);box-shadow:0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;" data-reactid=".0.2.0.1.1.0.1.1.$0.0.0"></div><div style="position:relative;" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1"><div style="font-size:16px;padding:16px;display:flex;-webkit-justify-content:space-between;justify-content:space-between;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0"><div style="display:flex;width:100%;" class="flexbox-fix" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0"><div style="min-width:56px;max-width:56px;-webkit-flex-basis:56px;flex-basis:56px;" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }"><div style="font-size:14px;line-height:19px;display:inline-block;text-align:right;color:rgba(0,0,0,.20);-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding-left:7px;" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0"><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$1">1</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$2">2</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$3">3</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$4">4</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$5">5</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$6">6</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$7">7</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$8">8</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$9">9</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$10">10</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$11">11</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$12">12</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$13">13</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$14">14</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$15">15</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$16">16</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$17">17</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$18">18</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$19">19</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$20">20</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$21">21</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$22">22</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$23">23</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$24">24</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$25">25</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$26">26</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$27">27</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$28">28</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$29">29</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$30">30</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$31">31</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$32">32</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$33">33</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$34">34</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$35">35</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$36">36</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$37">37</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$38">38</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$39">39</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$40">40</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$41">41</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$42">42</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$43">43</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$44">44</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$45">45</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$46">46</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$47">47</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$48">48</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$49">49</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$50">50</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$51">51</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$52">52</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$53">53</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$54">54</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$55">55</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$56">56</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$57">57</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$58">58</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$59">59</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$60">60</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$61">61</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$62">62</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$63">63</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$64">64</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$65">65</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$66">66</div><div data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$sidebar-#{ sidebar }.0.$67">67</div></div></div><div style="background:none;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:95%;" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$content-#{ content }"><div style="font-family:Monaco;font-size:14px;line-height:19px;color:rgba(0,0,0,.77);" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$content-#{ content }.0"><style data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$content-#{ content }.0.0">
.rendered pre{
margin: 0;
}
.rendered p{
margin: 0;
}
</style><div class="rendered" data-reactid=".0.2.0.1.1.0.1.1.$0.0.1.0.0.$content-#{ content }.0.1"><pre><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ReactCSS = <span class="hljs-built_in">require</span>(<span class="hljs-string">'reactcss'</span>);
<span class="hljs-keyword">var</span> ColorPicker = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-color'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SketchExample</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactCSS</span>.<span class="hljs-title">Component</span> </span>{
constructor() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.state = {
displayColorPicker: <span class="hljs-literal">false</span>,
color: <span class="hljs-string">'#F17013'</span>,
};
<span class="hljs-keyword">this</span>.handleClick = <span class="hljs-keyword">this</span>.handleClick.bind(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">this</span>.handleClose = <span class="hljs-keyword">this</span>.handleClose.bind(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">this</span>.handleChange = <span class="hljs-keyword">this</span>.handleChange.bind(<span class="hljs-keyword">this</span>);
}
classes() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'default'</span>: {
color: {
width: <span class="hljs-string">'36px'</span>,
height: <span class="hljs-string">'14px'</span>,
borderRadius: <span class="hljs-string">'2px'</span>,
background: <span class="hljs-keyword">this</span>.state.color,
},
swatch: {
padding: <span class="hljs-string">'5px'</span>,
background: <span class="hljs-string">'#fff'</span>,
borderRadius: <span class="hljs-string">'1px'</span>,
boxShadow: <span class="hljs-string">'0 0 0 1px rgba(0,0,0,.1)'</span>,
display: <span class="hljs-string">'inline-block'</span>,
cursor: <span class="hljs-string">'pointer'</span>,
},
},
};
}
handleClick() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: !<span class="hljs-keyword">this</span>.state.displayColorPicker });
}
handleClose() {
<span class="hljs-keyword">this</span>.setState({ displayColorPicker: <span class="hljs-literal">false</span> });
}
handleChange(color) {
<span class="hljs-keyword">this</span>.setState({ color: <span class="hljs-string">'#'</span> + color.hex });
}
render() {
<span class="hljs-keyword">return</span> (
<div>
<div is="swatch" onClick={ this.handleClick }>
<div is="color" />
</div>
<ColorPicker
color={ this.state.color }
position="below"
display={ this.state.displayColorPicker }
onChange={ this.handleChange }
onClose={ this.handleClose }
type="sketch" />
</div>
);
}
};
</code></pre></div></div></div></div></div></div></div></div><div style="font-size:17px;line-height:24px;color:rgba(0,0,0,.47);" class="markdown text" data-reactid=".0.2.0.1.1.0.1.1.$1"></div></div></div></div></div></div></div></div></div>
</div>
</body>
<script src="build/bundle.js" type="text/javascript"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66334162-1', 'auto');
ga('send', 'pageview');
</script>
</html>