/*! * jQuery ClassyColor * vox.SPACE * * Written by Marius Stanciu - Sergiu * Licensed under the MIT license https://vox.SPACE/LICENSE-MIT * Version 1.1.0 * */ .ClassyColor{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;font-size:15px;width:2.8em;height:2.8em;-webkit-perspective:25em;perspective:25em;position:relative;transition:transform .5s;font-family:monospace}.ClassyColor .maximize-wrapper{position:absolute;border-radius:.3em;background:#fff;padding:.4em;box-shadow:0 .1em .2em rgba(0,0,0,.2);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation:collapse-animation .5s;animation:collapse-animation .5s;cursor:pointer}.ClassyColor .display,.ClassyColor .slider{box-shadow:0 .1em .15em 0 rgba(0,0,0,.2)inset}.ClassyColor.expanded .maximize-wrapper{-webkit-animation:expand-animation .5s;animation:expand-animation .5s;cursor:default}@-webkit-keyframes expand-animation{0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}}@keyframes expand-animation{0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}}@-webkit-keyframes collapse-animation{0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}}@keyframes collapse-animation{0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}}.ClassyColor .inner-maximize-wrapper{position:relative;width:2em;height:2em;overflow:hidden;transition:height .5s,width .5s}.ClassyColor .ui-wrapper{white-space:nowrap;display:inline-block}.ClassyColor .ui-wrapper>*{display:inline-block;vertical-align:top}.ClassyColor .display-wrapper{margin-right:.4em;background-size:41%;-webkit-transform-origin:top left;transform-origin:top left;transition:transform .5s}.ClassyColor.componentcount-3 .display-wrapper{-webkit-transform:scale(.6);transform:scale(.6);width:3.4em;height:3.4em}.ClassyColor.componentcount-4 .display-wrapper{-webkit-transform:scale(.45);transform:scale(.45);width:4.6em;height:4.6em}.ClassyColor.expanded .display-wrapper{-webkit-transform:scale(1);transform:scale(1)}.ClassyColor .display-wrapper,.ClassyColor .slider.a:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjIiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjAiIHk9IjAiIHN0eWxlPSJmaWxsOiNjYWNhY2EiIC8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMSIgc3R5bGU9ImZpbGw6I2NhY2FjYSIgLz48L3N2Zz4=)}.ClassyColor .display{width:100%;height:100%}.ClassyColor .slider-container{opacity:0;transition:transform .5s,opacity .5s}.ClassyColor.componentcount-3 .slider-container{-webkit-transform:translateX(-1.4em);transform:translateX(-1.4em)}.ClassyColor.componentcount-4 .slider-container{-webkit-transform:translateX(-2.6em);transform:translateX(-2.6em)}.ClassyColor.expanded .slider-container{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.ClassyColor .slider{box-sizing:border-box;position:relative;display:block;width:12em;height:1em;background:rgba(128,128,128,.12);overflow:hidden;margin-bottom:.2em;cursor:col-resize}.ClassyColor .slider.a:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-position:left center;background-size:auto 27%;z-index:-1}.ClassyColor.show-labels .slider .handle:after{content:attr(data-component);text-transform:uppercase;position:absolute;left:100%;color:#fff;font-size:.8em;top:.2em;margin-left:.2em;text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);-moz-text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);-webkit-text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25)}.ClassyColor .slider:last-child{margin-bottom:0}.ClassyColor .slider .handle{display:inline-block;position:relative;content:'';margin-top:-.1em;margin-left:-.2em;width:.4em;height:100%;padding-bottom:.2em;background:rgba(255,255,255,.6);box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;-moz-box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;-webkit-box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;pointer-events:none;z-index:1}.ClassyColor .display,.ClassyColor .display-wrapper,.ClassyColor .inner-maximize-wrapper,.ClassyColor .slider{border-radius:.2em}.ClassyColor .output-wrapper{font-size:.8em;height:1.2em;margin-top:.4em;color:#333;-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}