@ykcl/smart-ui-oversea/packages/theme-chalk/lib/color-picker.css

A Component Library for Vue.js.

.yk-color-picker__color.is-alpha,.yk-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.yk-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.yk-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.yk-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.yk-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.yk-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px #2E63FD}.yk-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.yk-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.yk-color-hue-slider__bar{position:relative;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.yk-color-alpha-slider__thumb,.yk-color-hue-slider__thumb{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.6);left:0;top:0;z-index:1;box-sizing:border-box}.yk-color-hue-slider__thumb{position:absolute;cursor:pointer;width:4px;height:100%;border-radius:1px;border:1px solid #f0f0f0}.yk-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.yk-color-hue-slider.is-vertical .yk-color-hue-slider__bar{background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.yk-color-hue-slider.is-vertical .yk-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.yk-color-svpanel{position:relative;width:280px;height:180px}.yk-color-svpanel__black,.yk-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.yk-color-svpanel__white{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.yk-color-svpanel__black{background:linear-gradient(to top,#000,rgba(0,0,0,0))}.yk-color-svpanel__cursor{position:absolute}.yk-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;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);border-radius:50%;-ms-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.yk-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.yk-color-alpha-slider__bar{position:relative;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);height:100%}.yk-color-alpha-slider__thumb{position:absolute;cursor:pointer;width:4px;height:100%;border-radius:1px;border:1px solid #f0f0f0}.yk-color-alpha-slider.is-vertical{width:20px;height:180px}.yk-color-alpha-slider.is-vertical .yk-color-alpha-slider__bar{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.yk-color-alpha-slider.is-vertical .yk-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.yk-color-dropdown{width:300px}.yk-color-dropdown__main-wrapper{margin-bottom:6px}.yk-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.yk-color-dropdown__btns{margin-top:6px;text-align:right}.yk-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.yk-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.yk-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.yk-color-dropdown__btn:hover{color:#2E63FD;border-color:#2E63FD}.yk-color-dropdown__link-btn{cursor:pointer;color:#2E63FD;text-decoration:none;padding:15px;font-size:12px}.yk-color-dropdown__link-btn:hover{color:tint(#2E63FD,12%)}.yk-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.yk-color-picker.is-disabled .yk-color-picker__trigger{cursor:not-allowed}.yk-color-picker--medium{height:36px}.yk-color-picker--medium .yk-color-picker__trigger{height:36px;width:36px}.yk-color-picker--medium .yk-color-picker__mask{height:34px;width:34px}.yk-color-picker--small{height:32px}.yk-color-picker--small .yk-color-picker__trigger{height:32px;width:32px}.yk-color-picker--small .yk-color-picker__mask{height:30px;width:30px}.yk-color-picker--small .yk-color-picker__empty,.yk-color-picker--small .yk-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.yk-color-picker--mini{height:28px}.yk-color-picker--mini .yk-color-picker__trigger{height:28px;width:28px}.yk-color-picker--mini .yk-color-picker__mask{height:26px;width:26px}.yk-color-picker--mini .yk-color-picker__empty,.yk-color-picker--mini .yk-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.yk-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.yk-color-picker__trigger{display:inline-block;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.yk-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid #999;border-radius:4px;width:100%;height:100%;text-align:center}.yk-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.yk-color-picker__empty,.yk-color-picker__icon{top:50%;left:50%;transform:translate3d(-50%,-50%,0);font-size:12px;position:absolute}.yk-color-picker__empty{color:#999}.yk-color-picker__icon{display:inline-block;width:100%;color:#FFF;text-align:center}.yk-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#FFF;border:1px solid #EBEEF5;border-radius:4px;box-shadow:4px 4px 8px 0 rgba(111,144,194,.04),-4px 4px 8px 0 rgba(111,144,194,.04),4px 4px 8px 0 rgba(60,102,165,.04),-4px 4px 8px 0 rgba(60,102,165,.04)}