acud/es/color-picker/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.colorpicker-dropdowns-con {
  width: 240px !important;
  padding: 8px !important;
}
.colorpicker-dropdowns-con.custom {
  padding: 12px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color {
  border-radius: 4px;
  margin: 1px 2px 1px 1px;
  padding: 1px;
  cursor: pointer;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0);
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color:nth-child(8n + 1) {
  margin-left: 0 !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color:nth-child(8n) {
  margin-right: 0 !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color.white {
  box-sizing: border-box;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color.white.colorpicker-dropdowns-color-selected {
  border-color: #2468F2;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color.white .colorpicker-dropdowns-color-block {
  border: 1px solid #E8E9EB;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color.none {
  box-sizing: border-box;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color.none .colorpicker-dropdowns-color-block {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, transparent 49.5%, #F33E3E 49.5%, #F33E3E 50.5%, transparent 50.5%);
  border: 1px solid #E8E9EB;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color-block {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color:hover {
  border: 1px solid #D4D6D9;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-color-selected {
  border: 1px solid #2468F2;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker {
  box-shadow: none !important;
  width: 216px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 8px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child {
  flex-direction: row-reverse;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child > div:nth-child(1) {
  width: 28px !important;
  margin-left: 4px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child > div:nth-child(1) > div:nth-child(1) {
  width: 28px !important;
  height: 28px !important;
  border-radius: 14px !important;
  margin-top: 0 !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child > div:nth-child(2) {
  width: 184px !important;
  border-radius: 6px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child > div:nth-child(2) div {
  border-radius: 6px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child .hue-horizontal {
  border-radius: 6px !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .chrome-picker > div:nth-child(2) > .flexbox-fix:not(:first-child) {
  display: none !important;
}
.colorpicker-dropdowns-con .colorpicker-dropdowns-custom .colorpicker-input {
  margin: 0 0 8px 0;
  height: 24px;
  border-radius: 2px;
}
.acud-colorpicker-default .acud-select-selector,
.acud-colorpicker-custom .acud-select-selector {
  min-width: 134px !important;
}
.acud-colorpicker-simple .acud-select-selector {
  min-width: 74px !important;
}
.acud-colorpicker .acud-select.acud-select-disabled .colorpicker-dropdowns-render-text {
  color: #B8BABF;
}
.acud-colorpicker .acud-select .colorpicker-dropdowns-render {
  display: flex;
  align-items: center;
}
.acud-colorpicker .acud-select .colorpicker-dropdowns-render-block {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 2px;
}
.acud-colorpicker .acud-select .colorpicker-dropdowns-render-block.none {
  background: linear-gradient(45deg, transparent 49.5%, #F33E3E 49.5%, #F33E3E 50.5%, transparent 50.5%);
  border: 1px solid #E8E9EB;
}
.acud-colorpicker .acud-select .colorpicker-dropdowns-render-block.white {
  border: 1px solid #E8E9EB;
}
.acud-colorpicker .acud-select .colorpicker-dropdowns-render-text {
  margin-left: 8px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #151B26;
  line-height: 20px;
  font-weight: 400;
}