ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1 lines • 4.78 kB
CSS
.ant-color-picker{position:absolute;z-index:1;display:block;width:max-content;min-width:250px;visibility:visible}.ant-color-picker-hidden{display:none}.ant-color-picker-panel{display:flex;flex-direction:column;width:250px;border-radius:2px}.ant-color-picker-panel-disabled{cursor:not-allowed}.ant-color-picker-gradient{position:absolute;inset:0}.ant-color-picker-palette{position:relative}.ant-color-picker-select{margin-bottom:12px}.ant-color-picker-select .ant-color-picker-palette{min-height:160px;overflow:hidden;border-radius:2px}.ant-color-picker-select .ant-color-picker-palette>.ant-color-picker-gradient{border-top-left-radius:5px}.ant-color-picker-saturation{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0));border-radius:inherit}.ant-color-picker-transform{position:absolute;z-index:1}.ant-color-picker-handler{box-sizing:border-box;width:16px;height:16px;border:1px solid #fff;border-radius:50%}.ant-color-picker-handler-sm{width:12px;height:12px}.ant-color-picker-slider{width:100%;border-radius:2px}.ant-color-picker-slider .ant-color-picker-palette{height:8px}.ant-color-picker-slider .ant-color-picker-gradient{border-radius:2px}.ant-color-picker-slider-hue{margin-bottom:12px}.ant-color-picker-slider-alpha{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}.ant-color-picker-trigger{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:3px;border:1px solid #f0f0f0;border-radius:2px;cursor:pointer;transition:all .2s}.ant-color-picker-trigger:hover{border-color:#1890ff}.ant-color-picker-trigger-text{margin:0 4px 0 8px;font-size:14px}.ant-color-picker-sm{min-width:24px;height:24px}.ant-color-picker-lg{min-width:40px;height:40px}.ant-color-picker-lg .ant-color-picker-trigger-text{font-size:16px}.ant-color-picker-color-block{position:relative;width:28px;height:28px;overflow:hidden;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:50% 50%;border-radius:2px}.ant-color-picker-color-block-inner{box-sizing:border-box;width:100%;height:100%;border:1px solid #f0f0f0}.ant-color-picker-slider-container{display:flex;gap:12px;margin-bottom:12px}.ant-color-picker-slider-container .ant-color-picker-slider-group{flex:1}.ant-color-picker-slider-container .ant-color-picker-slider-group-disabled-alpha{display:flex;align-items:center}.ant-color-picker-slider-container .ant-color-picker-slider-group-disabled-alpha .ant-color-picker-slider{margin-bottom:0}.ant-color-picker-title{display:flex}.ant-color-picker-title-content{flex:1;margin-bottom:8px}.ant-color-picker-title .ant-color-picker-clear{flex:0 0 18px;margin-left:8px}.ant-color-picker-clear{position:relative;width:18px;height:18px;margin-bottom:8px;overflow:hidden;border:1px solid #f0f0f0;border-radius:2px;cursor:pointer}.ant-color-picker-clear::after{position:absolute;top:0;display:block;width:40px;height:2px;background-color:#f5222d;transform:rotate(-45deg);transform-origin:right;content:'';inset-inline-end:1px}.ant-color-picker-input-container{display:flex}.ant-color-picker-input-container .ant-select{font-size:12px}.ant-color-picker-input-container .ant-input{font-size:12px}.ant-color-picker-input-container .ant-input-number{width:auto;font-size:12px}.ant-color-picker-input-container .ant-input-number-sm input{padding:0 0 0 4px}.ant-color-picker-input-container .ant-select-selector{padding:0}.ant-color-picker-input-container .ant-color-picker-format-select{width:auto}.ant-color-picker-input-container .ant-color-picker-input{flex:1}.ant-color-picker-input-container .ant-color-picker-input .ant-color-picker-hex-input{margin-right:4px;padding:0}.ant-color-picker-input-container .ant-color-picker-input .ant-color-picker-hsb-input{display:flex;gap:4px;align-items:center}.ant-color-picker-input-container .ant-color-picker-input .ant-color-picker-rgb-input{display:flex;gap:4px;align-items:center}.ant-color-picker-input-container .ant-color-picker-steppers{flex:1}.ant-color-picker-input-container .ant-color-picker-alpha-input{flex:0 0 44px;margin-left:4px}.ant-color-picker-disabled{color:rgba(0,0,0,.25);background:#f5f5f5;cursor:not-allowed}.ant-color-picker-disabled .ant-color-picker-trigger{cursor:not-allowed}.ant-color-picker-disabled .ant-color-picker-trigger:hover{border-color:#f0f0f0}.ant-color-picker-inline{display:inline-block}.ant-color-picker-inline .ant-color-picker-color-block{width:24px;height:24px;margin:0}.ant-color-picker-inline-lg .ant-color-picker-color-block{width:32px;height:32px}.ant-color-picker-inline-sm .ant-color-picker-color-block{width:16px;height:16px}