@arco-design/web-react
Version:
Arco Design React UI Library.
1 lines • 6.67 kB
CSS
.arco-color-picker{display:inline-flex;background-color:var(--color-fill-2);align-items:center;border-radius:2px;box-sizing:border-box}.arco-color-picker-preview{border:1px solid var(--color-border-2);box-sizing:border-box;flex:none}.arco-color-picker-value{margin-left:6px;font-weight:400;color:var(--color-text-1)}.arco-color-picker-input{display:none}.arco-color-picker:hover{cursor:pointer;background-color:var(--color-fill-3)}.arco-color-picker-size-default{min-height:32px;padding:4px 4px}.arco-color-picker-size-default .arco-color-picker-preview{height:24px;width:24px}.arco-color-picker-size-default .arco-color-picker-value{font-size:14px}.arco-color-picker-size-mini{min-height:24px;padding:4px 4px}.arco-color-picker-size-mini .arco-color-picker-preview{height:16px;width:16px}.arco-color-picker-size-mini .arco-color-picker-value{font-size:12px}.arco-color-picker-size-small{min-height:28px;padding:3px 4px}.arco-color-picker-size-small .arco-color-picker-preview{height:22px;width:22px}.arco-color-picker-size-small .arco-color-picker-value{font-size:14px}.arco-color-picker-size-large{min-height:36px;padding:5px 5px}.arco-color-picker-size-large .arco-color-picker-preview{height:26px;width:26px}.arco-color-picker-size-large .arco-color-picker-value{font-size:14px}.arco-color-picker.arco-color-picker-disabled{background-color:var(--color-fill-2);cursor:not-allowed}.arco-color-picker.arco-color-picker-disabled .arco-color-picker-value{color:var(--color-text-4)}.arco-color-picker-panel{width:260px;border-radius:2px;background-color:var(--color-bg-1);box-shadow:0 8px 20px 0 rgba(0,0,0,.1)}.arco-color-picker-panel .arco-color-picker-palette{width:100%;height:178px;position:relative;cursor:pointer;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,rgba(255,255,255,0));overflow:hidden;border-left:1px solid var(--color-border-2);border-top:1px solid var(--color-border-2);border-right:1px solid var(--color-border-2);box-sizing:border-box}.arco-color-picker-panel .arco-color-picker-palette .arco-color-picker-handler{width:16px;height:16px;border-radius:50%;position:absolute;background-color:transparent;transform:translate(-50%,-50%);border:2px solid var(--color-bg-white);box-sizing:border-box}.arco-color-picker-panel .arco-color-picker-panel-control{padding:12px}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper{display:flex;align-items:center}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper .arco-color-picker-preview{margin-left:auto;width:40px;height:40px;border-radius:4px;border:1px solid var(--color-border-2);box-sizing:border-box}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper .arco-color-picker-control-bar-alpha{margin-top:12px}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper{margin-top:12px;display:flex}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-color-picker-group-wrapper{margin-left:12px;display:flex;flex:1}.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-inner-wrapper,.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-select-view{padding:0 6px}.arco-color-picker-panel .arco-color-picker-panel-control-gradient{padding:12px 12px 0}.arco-color-picker-panel .arco-color-picker-panel-control-gradient .arco-color-picker-control-bar-gradient{margin:0 8px 12px}.arco-color-picker-panel .arco-color-picker-panel-control-gradient .arco-color-picker-control-bar-gradient .arco-color-picker-control-bar{width:100%}.arco-color-picker-panel .arco-color-picker-panel-control-gradient .arco-color-picker-panel-control-gradient-tag{margin-bottom:12px}.arco-color-picker-panel .arco-color-picker-panel-colors{padding:12px;border-top:1px solid var(--color-border-2)}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-section:not(:first-child){margin-top:12px}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-text{font-size:12px;font-weight:400;color:var(--color-text-1)}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-empty{margin:12px 0;font-size:12px;color:var(--color-text-3)}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-wrapper{margin-top:8px}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-list{display:flex;flex-wrap:wrap;margin:-8px -4px 0}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block{margin:6px 3px 0;width:16px;height:16px;cursor:pointer;border-radius:2px;transition:transform ease-out 60ms;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:8px 8px;overflow:hidden}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block .arco-color-picker-block{width:100%;height:100%}.arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block:hover{transform:scale(1.1)}.arco-color-picker-panel .arco-color-picker-control-bar-bg{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:8px 8px}.arco-color-picker-panel .arco-color-picker-control-bar{width:182px;height:14px;position:relative;border-radius:10px;cursor:pointer;border:1px solid var(--color-border-2);box-sizing:border-box}.arco-color-picker-panel .arco-color-picker-control-bar .arco-color-picker-handler{width:16px;height:16px;border-radius:50%;position:absolute;top:-2px;background-color:var(--color-bg-white);transform:translateX(-50%);border:1px solid var(--color-border-2);box-sizing:border-box}.arco-color-picker-panel .arco-color-picker-control-bar .arco-color-picker-handler-center{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(3px,3px)}.arco-color-picker-panel .arco-color-picker-control-bar-hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.arco-color-picker-panel .arco-color-picker-select-type{width:58px}.arco-color-picker-panel .arco-color-picker-input-group{display:flex}.arco-color-picker-panel .arco-color-picker-input-group>*{flex:1}.arco-color-picker-panel .arco-color-picker-input-alpha{width:52px;flex:0 0 auto}.arco-color-picker-panel .arco-color-picker-input-hex .arco-input{padding-left:4px}.arco-color-picker-type-dropdown .arco-select-option{font-size:12px;line-height:24px}