@chatui/core/es/components/Form/style.less

The React library for Chatbot UI

.Form {
  background: var(--color-fill-1);

  &.is-light {
    // background: var(--gray-7);

    .FormItem {
      padding: 0;
    }
    .Label,
    .HelpText {
      padding: 0 var(--gutter);
    }
  }
}

.FormItem {
  position: relative;
  padding: 0 var(--gutter);

  & + & {
    margin-top: 20px;
  }
  &.required {
    .Label:after {
      content: '*';
      display: inline-block;
      color: var(--red);
      font-size: @font-size-sm;
      font-family: SimSun,sans-serif;
      line-height: 1;
      vertical-align: middle;
    }
  }
  &.is-invalid {
    .Label,
    .HelpText {
      color: var(--red);
    }
    .Input {
      border-color: var(--red);
    }
  }
  .RadioGroup,
  .CheckboxGroup {
    margin-top: 10px;
  }
  .Label + .Input {
    margin-top: 5px;
  }
}

.FormActions {
  display: flex;
  padding: 10px var(--gutter);
  background: var(--color-fill-1);

  .Btn {
    flex: 1;
  }
  .Btn + .Btn {
    margin-left: 6px;
  }
}