piquinikis-color-picker/dist/mdColorPicker.min.css

Angular-Material inspired color picker.

/**
 * piquinikis-color-picker - Angular-Material inspired color picker.
 * @version v0.2.9
 * @link https://github.com/brianpkelley/md-color-picker
 * @license MIT
 */
.md-color-picker-panel{width:350px;border-radius:3px;background:#fff;width:325px;height:419px;overflow:hidden;-webkit-transition:height .15s cubic-bezier(.25,.8,.25,1),width .15s cubic-bezier(.25,.8,.25,1);transition:height .15s cubic-bezier(.25,.8,.25,1),width .15s cubic-bezier(.25,.8,.25,1)}.md-color-picker-panel>*>*{border-top-left-radius:3px;border-top-right-radius:3px}.md-color-picker-panel.md-pane-open{width:350px;height:444px;opacity:1;-webkit-transition:none;transition:none}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:350px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1);transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:10px;left:10px;right:10px;color:#eee;outline:none;opacity:0;margin:auto;width:75%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;top:10px;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input:focus,.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input:hover{background:hsla(0,0%,100%,.1)}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input:focus{border:2px solid hsla(0,0%,100%,.1)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input:focus,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input:hover{background:rgba(0,0,0,.1)}.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input:focus{border:2px solid rgba(0,0,0,.1)}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 0;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:256px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:256px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum],.md-color-picker-container .md-color-picker-colors [md-color-picker-wheel]{position:relative;cursor:crosshair;overflow:hidden;height:256px;width:256px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-wheel] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue],.md-color-picker-container .md-color-picker-colors [md-color-picker-value]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-value].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-value] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1);transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-history{position:relative}.md-color-picker-container .md-color-picker-history>div>div{border-radius:50%;border:1px solid #fff;box-shadow:0 0 3px 0 #999;height:29px;width:29px;margin:2px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQYV2M8c+bMfwYkYGxsjMxlYKSDgv///6O44ezZs6huoL0CAHomKYWYrWVpAAAAAElFTkSuQmCC) repeat 50%}.md-color-picker-container .md-color-picker-history>div>div>div{border-radius:50%;width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{position:absolute;bottom:8px;right:8px;margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQYV2M8c+bMfwYkYGxsjMxlYKSDgv///6O44ezZs6huoL0CAHomKYWYrWVpAAAAAElFTkSuQmCC) repeat 50%}[md-color-picker-preview],md-color-picker-preview{display:inline-block}[layout=row]>[md-color-picker-preview],[layout=row]>md-color-picker-preview{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}[md-color-picker-preview] .md-color-picker-preview,md-color-picker-preview .md-color-picker-preview{box-sizing:border-box;border:2px solid #fff;display:inline-block;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);overflow:hidden;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQYV2M8c+bMfwYkYGxsjMxlYKSDgv///6O44ezZs6huoL0CAHomKYWYrWVpAAAAAElFTkSuQmCC) repeat 50%;margin:0;height:26px;width:26px;min-width:0;line-height:24px;padding:0;border-radius:50%;vertical-align:middle}[md-color-picker-preview] .md-color-picker-preview .md-color-picker-result,md-color-picker-preview .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}.md-color-picker-input-container>[md-color-picker-preview],.md-color-picker-input-container>md-color-picker-preview{position:absolute;top:23px;left:2px;right:auto}md-color-picker .md-color-picker-input-container{position:relative}md-color-picker .md-color-picker-input-container>.md-color-picker-input::-ms-clear{display:none}md-color-picker .md-color-picker-input-container>.md-color-picker-clear,md-color-picker .md-color-picker-input-container>[md-color-picker-clear],md-color-picker .md-color-picker-input-container>md-color-picker-clear{box-sizing:border-box;position:absolute;right:-8px;top:20px}md-color-picker .md-color-picker-input-container>.md-color-picker-clear .md-button,md-color-picker .md-color-picker-input-container>[md-color-picker-clear] .md-button,md-color-picker .md-color-picker-input-container>md-color-picker-clear .md-button{margin-bottom:16px}