cc-ui-plus/theme-chalk/index.css

:root {
  --cc-button-text-color: #606266;
  --cc-button-font-weight: 500;
  ---cc-button-bg-color: #fff;
  --cc-button-border-color: #dcdfe6;
  --cc-button-hover-text-color: #409eff;
  --cc-button-hover-border-color: #c6e2ff;
  --cc-button-hover-bg-color: #ecf5ff;
  --cc-border-radius-round: 20px;
  --cc-button-disabled-text-color: var(--cc-disabled-text-color);
  --cc-button-disabled-bg-color: #fff;
  --cc-button-disabled-border-color: #e4e7ed;
}
.cc-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: var(--cc-button-font-weight);
  background: var(--cc-button-bg-color);
  color: var(--cc-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  padding: 8px 15px;
  font-size: var(--cc-text-base);
  border-radius: var(--cc-border-radius-base);
  border: 1px solid var(--cc-button-border-color);
}
.cc-button.is-round {
  border-radius: var(--cc-border-radius-round);
}
.cc-button.is-circle {
  border-radius: 50%;
  padding: 8px;
}
.cc-button.is-disabled,
.cc-button.is-disabled:hover {
  color: var(--cc-button-disabled-text-color);
  cursor: not-allowed;
  background-image: none;
  background-color: var(--cc-button-disabled-bg-color);
  border-color: var(--cc-button-disabled-border-color);
}
.cc-button--small {
  --cc-button-size: 24px;
  height: var(--cc-button-size);
  padding: 5px 11px;
  font-size: 12px;
  border-radius: calc(var(--cc-border-radius-base) - 1px);
}
.cc-button--large {
  --cc-button-size: 40px;
  height: var(--cc-button-size);
  padding: 12px 19px;
  font-size: var(--cc-font-size-base);
  border-radius: var(--cc-border-radius-base);
}
.cc-button--default:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background: var(--cc-button-hover-bg-color);
}
.cc-button--default.is-plain {
  --cc-button-hover-text-color: var(--cc-color-primary);
  --cc-button-hover-bg-color: var(--cc-color-white);
  --cc-button-hover-border-color: var(--cc-color-primary);
}
.cc-button--default.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--primary {
  --cc-button-text-color: var(--cc-color-white);
  --cc-button-bg-color: var(--cc-color-primary);
  --cc-button-border-color: var(--cc-color-primary);
  --cc-button-outline-color: var(--cc-color-primary-light-5);
  --cc-button-active-color: var(--cc-color-primary-dark-2);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-link-text-color: var(--cc-color-primary-light-5);
  --cc-button-hover-bg-color: var(--cc-color-primary-light-3);
  --cc-button-hover-border-color: var(--cc-color-primary-light-3);
  --cc-button-active-bg-color: var(--cc-color-primary-dark-2);
  --cc-button-disabled-text-color: var(--cc-color-white);
  --cc-button-disabled-bg-color: var(--cc-color-primary-light-5);
  --cc-button-disabled-border-color: var(--cc-color-primary-light-5);
}
.cc-button--primary:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--primary.is-plain {
  --cc-button-text-color: var(--cc-color-primary);
  --cc-button-bg-color: var(--cc-color-primary-light-9);
  --cc-button-border-color: var(--cc-color-primary-light-5);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-bg-color: var(--cc-color-primary);
  --cc-button-hover-border-color: var(--cc-color-primary);
}
.cc-button--primary.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--success {
  --cc-button-text-color: var(--cc-color-white);
  --cc-button-bg-color: var(--cc-color-success);
  --cc-button-border-color: var(--cc-color-success);
  --cc-button-outline-color: var(--cc-color-success-light-5);
  --cc-button-active-color: var(--cc-color-success-dark-2);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-link-text-color: var(--cc-color-success-light-5);
  --cc-button-hover-bg-color: var(--cc-color-success-light-3);
  --cc-button-hover-border-color: var(--cc-color-success-light-3);
  --cc-button-active-bg-color: var(--cc-color-success-dark-2);
  --cc-button-disabled-text-color: var(--cc-color-white);
  --cc-button-disabled-bg-color: var(--cc-color-success-light-5);
  --cc-button-disabled-border-color: var(--cc-color-success-light-5);
}
.cc-button--success:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--success.is-plain {
  --cc-button-text-color: var(--cc-color-success);
  --cc-button-bg-color: var(--cc-color-success-light-9);
  --cc-button-border-color: var(--cc-color-success-light-5);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-bg-color: var(--cc-color-success);
  --cc-button-hover-border-color: var(--cc-color-success);
}
.cc-button--success.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--warning {
  --cc-button-text-color: var(--cc-color-white);
  --cc-button-bg-color: var(--cc-color-warning);
  --cc-button-border-color: var(--cc-color-warning);
  --cc-button-outline-color: var(--cc-color-warning-light-5);
  --cc-button-active-color: var(--cc-color-warning-dark-2);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-link-text-color: var(--cc-color-warning-light-5);
  --cc-button-hover-bg-color: var(--cc-color-warning-light-3);
  --cc-button-hover-border-color: var(--cc-color-warning-light-3);
  --cc-button-active-bg-color: var(--cc-color-warning-dark-2);
  --cc-button-disabled-text-color: var(--cc-color-white);
  --cc-button-disabled-bg-color: var(--cc-color-warning-light-5);
  --cc-button-disabled-border-color: var(--cc-color-warning-light-5);
}
.cc-button--warning:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--warning.is-plain {
  --cc-button-text-color: var(--cc-color-warning);
  --cc-button-bg-color: var(--cc-color-warning-light-9);
  --cc-button-border-color: var(--cc-color-warning-light-5);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-bg-color: var(--cc-color-warning);
  --cc-button-hover-border-color: var(--cc-color-warning);
}
.cc-button--warning.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--danger {
  --cc-button-text-color: var(--cc-color-white);
  --cc-button-bg-color: var(--cc-color-danger);
  --cc-button-border-color: var(--cc-color-danger);
  --cc-button-outline-color: var(--cc-color-danger-light-5);
  --cc-button-active-color: var(--cc-color-danger-dark-2);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-link-text-color: var(--cc-color-danger-light-5);
  --cc-button-hover-bg-color: var(--cc-color-danger-light-3);
  --cc-button-hover-border-color: var(--cc-color-danger-light-3);
  --cc-button-active-bg-color: var(--cc-color-danger-dark-2);
  --cc-button-disabled-text-color: var(--cc-color-white);
  --cc-button-disabled-bg-color: var(--cc-color-danger-light-5);
  --cc-button-disabled-border-color: var(--cc-color-danger-light-5);
}
.cc-button--danger:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--danger.is-plain {
  --cc-button-text-color: var(--cc-color-danger);
  --cc-button-bg-color: var(--cc-color-danger-light-9);
  --cc-button-border-color: var(--cc-color-danger-light-5);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-bg-color: var(--cc-color-danger);
  --cc-button-hover-border-color: var(--cc-color-danger);
}
.cc-button--danger.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--info {
  --cc-button-text-color: var(--cc-color-white);
  --cc-button-bg-color: var(--cc-color-info);
  --cc-button-border-color: var(--cc-color-info);
  --cc-button-outline-color: var(--cc-color-info-light-5);
  --cc-button-active-color: var(--cc-color-info-dark-2);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-link-text-color: var(--cc-color-info-light-5);
  --cc-button-hover-bg-color: var(--cc-color-info-light-3);
  --cc-button-hover-border-color: var(--cc-color-info-light-3);
  --cc-button-active-bg-color: var(--cc-color-info-dark-2);
  --cc-button-disabled-text-color: var(--cc-color-white);
  --cc-button-disabled-bg-color: var(--cc-color-info-light-5);
  --cc-button-disabled-border-color: var(--cc-color-info-light-5);
}
.cc-button--info:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-button--info.is-plain {
  --cc-button-text-color: var(--cc-color-info);
  --cc-button-bg-color: var(--cc-color-info-light-9);
  --cc-button-border-color: var(--cc-color-info-light-5);
  --cc-button-hover-text-color: var(--cc-color-white);
  --cc-button-hover-bg-color: var(--cc-color-info);
  --cc-button-hover-border-color: var(--cc-color-info);
}
.cc-button--info.is-plain:hover {
  color: var(--cc-button-hover-text-color);
  border-color: var(--cc-button-hover-border-color);
  background-color: var(--cc-button-hover-bg-color);
  outline: 0;
}
.cc-input {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 100%;
}
.cc-input.is-disabled {
  cursor: not-allowed;
}
.cc-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #dcdfe6;
}
.cc-input__wrapper-disabled {
  background-color: var(--cc-disabled-bg-color);
  box-shadow: 0 0 0 1px var(--cc-disabled-border-color) inset;
}
.cc-input__wrapper-content {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  text-align: center;
}
.cc-input__wrapper-content span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cc-input__input {
  border-radius: 4px;
  outline: 0;
  width: 100%;
  border: none;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.cc-input__input-disabled {
  color: var(--cc-disabled-text-color);
  cursor: not-allowed;
}
.cc-input__input:focus {
  border-color: var(--cc-color-primary);
}
.cc-input__input-wrapper {
  display: inline-flex;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
}
.cc-input__input-wrapper span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cc-input__textarea {
  position: relative;
  display: block;
  resize: vertical;
  padding: 5px 11px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  min-height: 31px;
}
.cc-input__clear,
.cc-input__password {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  text-align: center;
  margin-left: 4px;
}
.cc-input__clear span,
.cc-input__password span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}
.cc-input__limit {
  position: absolute;
  color: #646566;
  font-size: 12px;
  bottom: 5px;
  right: 10px;
}
.cc-form-item {
  position: relative;
  margin-bottom: 20px;
  font-size: 14px;
}
.cc-form-item__label {
  position: relative;
  display: flex;
  align-items: center;
}
.cc-form-item__label-required.cc-form-item-label::before {
  content: '*';
  color: red;
  margin-right: 4px;
}
.cc-form-item__content {
  position: relative;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  line-height: 32px;
  font-size: 14px;
}
.cc-form-item__error {
  font-size: 12px;
  color: red;
  position: absolute;
  bottom: -20px;
  left: 0;
  line-height: 20px;
}
:root {
  --cc-message-border-color: #e1f3d8;
  --cc-message-bg-color: #fef9eb;
  --cc-message-text-color: #fff;
  --cc-message-close-icon-color: #a8abb2;
  --cc-message-close-icon-size: 16;
}
.cc-message {
  display: flex;
  align-items: center;
  color: var(--cc-text-white);
  position: fixed;
  border-radius: var(--cc-border-radius-base);
  height: 28px;
  left: 50%;
  min-width: 380px;
  padding: 20px;
  transform: translateX(-50%);
  z-index: var(--cc-z-index);
  box-sizing: border-box;
  border-color: var(--cc-message-border-color);
  background: var(--cc-message-bg-color);
  color: var(--cc-message-text-color);
}
.cc-message--center {
  justify-content: center;
}
.cc-message__close-btn {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
}
.cc-message__icon {
  position: relative;
  top: 3px;
  margin-right: 10px;
}
.cc-message.bg-success {
  --cc-message-bg-color: var(--cc-color-success-light-9);
  --cc-message-border-color: var(--cc-color-success-light-8);
  --cc-message-text-color: var(--cc-color-success);
}
.cc-message.bg-warning {
  --cc-message-bg-color: var(--cc-color-warning-light-9);
  --cc-message-border-color: var(--cc-color-warning-light-8);
  --cc-message-text-color: var(--cc-color-warning);
}
.cc-message.bg-danger {
  --cc-message-bg-color: var(--cc-color-error-light-9);
  --cc-message-border-color: var(--cc-color-error-light-8);
  --cc-message-text-color: var(--cc-color-error);
}
.cc-message.bg-info {
  --cc-message-bg-color: var(--cc-color-info-light-9);
  --cc-message-border-color: var(--cc-color-info-light-8);
  --cc-message-text-color: var(--cc-color-info);
}
.cc-message-enter-from,
.cc-message-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}
.cc-message-enter-active {
  transition: all 0.3s ease-in;
}
.cc-message-leave-active {
  transition: all 0.3s ease-out;
}
.cc-tabs {
  position: relative;
}
.cc-tabs.is-disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.cc-tabs__wrap {
  overflow: hidden;
  position: relative;
  display: flex;
}
.cc-tabs__icon-left {
  position: absolute;
  cursor: pointer;
  line-height: 44px;
  font-size: 12px;
  left: 0;
  z-index: 100;
}
.cc-tabs__icon-right {
  position: absolute;
  cursor: pointer;
  line-height: 44px;
  font-size: 12px;
  right: 0;
  z-index: 100;
}
.cc-tabs__label {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  white-space: nowrap;
  transition: all 0.3s linear;
}
.cc-tabs__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #eee;
  z-index: 100;
}
.cc-tabs__label-item {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 1;
  padding: 0 20px;
  line-height: 32px;
  cursor: pointer;
  font-size: var(--cc-text-base);
  display: flex;
  vertical-align: middle;
}
.cc-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--cc-color-primary);
  z-index: 101;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-tabs--card {
  border-left: 1px solid #e4e7ed;
  border-top: 1px solid #e4e7ed;
}
.cc-tabs--card.cc-tabs__label-item:last-child {
  border-right: 1px solid #e4e7ed;
}
.cc-tabs__close-btn {
  position: relative;
  top: 3px;
  margin-left: 6px;
}
:root {
  --cc-color-white: #ffffff;
  --cc-color-black: #000000;
  --cc-color-primary: #409eff;
  --cc-color-primary-light-3: #79bbff;
  --cc-color-primary-light-5: #a0cfff;
  --cc-color-primary-light-7: #c6e2ff;
  --cc-color-primary-light-8: #d9ecff;
  --cc-color-primary-light-9: #ecf5ff;
  --cc-color-primary-dark-2: #337ecc;
  --cc-color-success: #67c23a;
  --cc-color-success-light-3: #95d475;
  --cc-color-success-light-5: #b3e19d;
  --cc-color-success-light-7: #d1edc4;
  --cc-color-success-light-8: #e1f3d8;
  --cc-color-success-light-9: #f0f9eb;
  --cc-color-success-dark-2: #529b2e;
  --cc-color-warning: #e6a23c;
  --cc-color-warning-light-3: #eebe77;
  --cc-color-warning-light-5: #f3d19e;
  --cc-color-warning-light-7: #f8e3c5;
  --cc-color-warning-light-8: #faecd8;
  --cc-color-warning-light-9: #fdf6ec;
  --cc-color-warning-dark-2: #b88230;
  --cc-color-danger: #f56c6c;
  --cc-color-danger-light-3: #f89898;
  --cc-color-danger-light-5: #fab6b6;
  --cc-color-danger-light-7: #fcd3d3;
  --cc-color-danger-light-8: #fde2e2;
  --cc-color-danger-light-9: #fef0f0;
  --cc-color-danger-dark-2: #c45656;
  --cc-color-error: #f56c6c;
  --cc-color-error-light-3: #f89898;
  --cc-color-error-light-5: #fab6b6;
  --cc-color-error-light-7: #fcd3d3;
  --cc-color-error-light-8: #fde2e2;
  --cc-color-error-light-9: #fef0f0;
  --cc-color-error-dark-2: #c45656;
  --cc-color-info: #909399;
  --cc-color-info-light-3: #b1b3b8;
  --cc-color-info-light-5: #c8c9cc;
  --cc-color-info-light-7: #dedfe0;
  --cc-color-info-light-8: #e9e9eb;
  --cc-color-info-light-9: #f4f4f5;
  --cc-color-info-dark-2: #73767a;
  --cc-bg-color: #ffffff;
  --cc-text-white: #ffffff;
  --cc-bg-color-page: #f2f3f5;
  --cc-bg-color-overlay: #ffffff;
  --cc-text-color-primary: #303133;
  --cc-text-color-regular: #606266;
  --cc-border-radius-base: 4px;
  --cc-border-radius-md: 8px;
  --cc-border-radius-large: 12px;
  --cc-text-base: 14px;
  --cc-text-md: 16px;
  --cc-text-large: 18px;
  --cc-disabled-text-color: #a8abb2;
  --cc-z-index: 2022;
  --cc-disabled-bg-color: #f7f5fa;
  --cc-disabled-border-color: #e4e7ed;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}