zent/css/form.css

一套前端设计语言和基于React的实现

.zent-form-label {
  flex-grow: 0;
  flex-shrink: 0;
  display: inline-flex;
  flex-basis: 120px;
}
.zent-form-label.zent-form-label-required::before {
  color: #d42f15;
  color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
  content: "*";
  display: inline-block;
  font-size: 16px;
  margin-right: 6px;
}
.zent-form-error {
  color: #d42f15;
  color: var(--theme-danger-color, var(--theme-error-4, #d42f15));
  margin-top: 4px;
}
.zent-form-notice, .zent-form-description {
  color: #999;
  color: var(--theme-hint-color, var(--theme-stroke-3, #999));
  line-height: 14px;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 0;
}
.zent-form-notice ul li, .zent-form-description ul li {
  font-size: 12px;
  line-height: 12px;
}
.zent-form-notice a, .zent-form-description a {
  color: #114bae;
  color: var(--theme-primary-active-bg, var(--theme-primary-2, #114bae));
}
.zent-form-notice:empty, .zent-form-description:empty {
  margin-top: 0;
}
.zent-form-notice {
  background-color: #ffefe6;
  background-color: var(--theme-warning-bg, var(--theme-warn-5, #ffefe6));
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  display: inline-block;
  padding: 5px;
}
.zent-form-control {
  display: flex;
  line-height: 30px;
  margin-bottom: 24px;
}
.zent-form-control-content-inner {
  display: flex;
}
.zent-form-control-content-inner + .zent-form-notice, .zent-form-control-content-inner + .zent-form-description {
  margin-top: 12px;
}
.zent-form-control-content-inner + .zent-form-error {
  margin-top: 8px;
}
.zent-form-control.zent-form-checkbox-field, .zent-form-control.zent-form-checkbox-group-field, .zent-form-control.zent-form-radio-group-field, .zent-form-control.zent-form-single-upload-field {
  line-height: 20px;
}
.zent-form-control.zent-form-switch-field {
  line-height: 22px;
}
.zent-form-control.zent-form-switch-field .zent-form-control-content {
  display: flex;
  align-items: center;
}
.zent-form-vertical .zent-form-label {
  flex-basis: auto;
  line-height: 20px;
  margin-bottom: 12px;
}
.zent-form-vertical .zent-form-label-empty {
  margin-bottom: 0;
}
.zent-form-vertical .zent-form-control {
  flex-direction: column;
}
.zent-form-vertical .zent-form-control-content {
  flex: 0 0 auto;
}
.zent-form-horizontal .zent-form-label {
  flex-basis: 120px;
  justify-content: flex-end;
}
.zent-form-horizontal .zent-form-control {
  flex-direction: row;
}
.zent-form-horizontal .zent-form-control-content {
  flex: 1 1 100%;
  margin-left: 8px;
}
.zent-form-horizontal .zent-form-actions {
  padding: 0 0 0 130px;
  margin: 25px 0 10px;
  background: none;
  border: 0;
}
.zent-form-direction-row {
  display: flex;
  flex-wrap: wrap;
}
.zent-form-direction-row .zent-form-control {
  display: inline-flex;
  flex: 1;
}