xdesign-vue-next/es/form/style/index.css

XDesign Component for vue-next

.x-form {
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--td-font-body-medium);
}
.x-form:not(.x-form-inline) .x-form__item:last-of-type {
  margin: 0;
}
.x-form__item {
  margin-bottom: var(--td-comp-margin-xxl);
}
.x-form__item.x-form__item-with-help {
  margin-bottom: var(--td-comp-margin-xs);
}
.x-form__item.x-form__item-with-extra {
  margin-bottom: var(--td-comp-margin-xxl);
}
.x-form__label {
  float: left;
  padding-right: var(--td-comp-paddingLR-xl);
  vertical-align: middle;
  line-height: var(--td-comp-margin-xxxl);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  white-space: nowrap;
}
.x-form__label--top {
  float: none;
  min-height: var(--td-comp-margin-xxxl);
}
.x-form__label--left {
  text-align: left;
}
.x-form__label--right {
  text-align: right;
}
.x-form__label--required label::before {
  display: inline-block;
  margin-right: var(--td-comp-margin-xs);
  color: var(--td-error-color);
  line-height: var(--td-line-height-body-medium);
  content: "*";
}
.x-form__label--colon label::after {
  content: ":";
  position: relative;
  margin: 0 var(--td-comp-margin-xxs);
}
.x-form__controls {
  min-height: var(--td-comp-margin-xxxl);
  display: flow-root;
  position: relative;
}
.x-form__controls-content {
  display: flex;
  align-items: center;
  min-height: var(--td-comp-margin-xxxl);
}
.x-form__controls .x-form__item {
  margin-bottom: 0;
  margin-right: var(--td-comp-margin-xxl);
}
.x-form__controls.x-is-success .x-form__status .x-icon {
  color: var(--td-success-color);
}
.x-form__controls.x-is-success .x-input__extra {
  color: var(--td-success-color);
}
.x-form__controls.x-form--success-border.x-is-success .x-input__extra {
  color: var(--td-success-color);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-input,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-radio-button,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-cascader,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-range-input,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-textarea__inner {
  border-color: var(--td-success-color);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-input--focused,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select--focused,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-radio-button--focused,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-cascader--focused,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-range-input--focused,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-input .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-radio-button .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-cascader .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-range-input .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-textarea__inner .x-icon,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-input .x-fake-arrow,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select .x-fake-arrow,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-radio-button .x-fake-arrow,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-cascader .x-fake-arrow,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-range-input .x-fake-arrow,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-textarea__inner .x-fake-arrow {
  color: var(--td-success-color);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select > .x-select__right-icon:not(.x-select__right-icon-clear) {
  color: var(--td-success-color);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-textarea__inner.x-is-focused {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-cascader.x-is-active,
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-select.x-is-active {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.x-form__controls.x-form--success-border.x-is-success .x-form__controls-content .x-form__status .x-icon {
  color: var(--td-success-color);
}
.x-form__status {
  display: flex;
  margin: 0 var(--td-comp-margin-s);
}
.x-form__status > .x-icon {
  font-size: var(--td-comp-size-xxxs);
}
.x-form__status-without-icon {
  width: 25px;
  height: 25px;
}
.x-form__status button {
  width: var(--td-comp-size-m);
}
.x-form__status button + button {
  margin-left: var(--td-comp-margin-s);
}
.x-form-inline {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--td-comp-margin-l);
}
.x-form-inline .x-form__item {
  margin: 0;
  min-width: 200px;
  display: inline-block;
  margin-right: var(--td-comp-margin-xxl);
}
.x-input__extra,
.x-input__help {
  margin: 0;
  width: 100%;
  height: auto;
  min-height: var(--td-line-height-body-small);
  font: var(--td-font-body-small);
  color: var(--td-text-color-placeholder);
}
.x-input__extra {
  position: absolute;
  bottom: calc(0px - var(--td-line-height-body-small));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x-is-warning .x-input__extra {
  color: var(--td-warning-color);
}
.x-is-warning .x-form__controls-content .x-input,
.x-is-warning .x-form__controls-content .x-select,
.x-is-warning .x-form__controls-content .x-radio-button,
.x-is-warning .x-form__controls-content .x-cascader,
.x-is-warning .x-form__controls-content .x-range-input,
.x-is-warning .x-form__controls-content .x-textarea__inner {
  border-color: var(--td-warning-color);
}
.x-is-warning .x-form__controls-content .x-input--focused,
.x-is-warning .x-form__controls-content .x-select--focused,
.x-is-warning .x-form__controls-content .x-radio-button--focused,
.x-is-warning .x-form__controls-content .x-cascader--focused,
.x-is-warning .x-form__controls-content .x-range-input--focused,
.x-is-warning .x-form__controls-content .x-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.x-is-warning .x-form__controls-content .x-input .x-icon,
.x-is-warning .x-form__controls-content .x-select .x-icon,
.x-is-warning .x-form__controls-content .x-radio-button .x-icon,
.x-is-warning .x-form__controls-content .x-cascader .x-icon,
.x-is-warning .x-form__controls-content .x-range-input .x-icon,
.x-is-warning .x-form__controls-content .x-textarea__inner .x-icon,
.x-is-warning .x-form__controls-content .x-input .x-fake-arrow,
.x-is-warning .x-form__controls-content .x-select .x-fake-arrow,
.x-is-warning .x-form__controls-content .x-radio-button .x-fake-arrow,
.x-is-warning .x-form__controls-content .x-cascader .x-fake-arrow,
.x-is-warning .x-form__controls-content .x-range-input .x-fake-arrow,
.x-is-warning .x-form__controls-content .x-textarea__inner .x-fake-arrow {
  color: var(--td-warning-color);
}
.x-is-warning .x-form__controls-content .x-select > .x-select__right-icon:not(.x-select__right-icon-clear) {
  color: var(--td-warning-color);
}
.x-is-warning .x-form__controls-content .x-textarea__inner.x-is-focused {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.x-is-warning .x-form__controls-content .x-cascader.x-is-active,
.x-is-warning .x-form__controls-content .x-select.x-is-active {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.x-is-warning .x-form__controls-content .x-form__status .x-icon {
  color: var(--td-warning-color);
}
.x-is-error .x-input__extra {
  color: var(--td-error-color);
}
.x-is-error .x-form__controls-content .x-input,
.x-is-error .x-form__controls-content .x-select,
.x-is-error .x-form__controls-content .x-radio-button,
.x-is-error .x-form__controls-content .x-cascader,
.x-is-error .x-form__controls-content .x-range-input,
.x-is-error .x-form__controls-content .x-textarea__inner {
  border-color: var(--td-error-color);
}
.x-is-error .x-form__controls-content .x-input--focused,
.x-is-error .x-form__controls-content .x-select--focused,
.x-is-error .x-form__controls-content .x-radio-button--focused,
.x-is-error .x-form__controls-content .x-cascader--focused,
.x-is-error .x-form__controls-content .x-range-input--focused,
.x-is-error .x-form__controls-content .x-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.x-is-error .x-form__controls-content .x-input .x-icon,
.x-is-error .x-form__controls-content .x-select .x-icon,
.x-is-error .x-form__controls-content .x-radio-button .x-icon,
.x-is-error .x-form__controls-content .x-cascader .x-icon,
.x-is-error .x-form__controls-content .x-range-input .x-icon,
.x-is-error .x-form__controls-content .x-textarea__inner .x-icon,
.x-is-error .x-form__controls-content .x-input .x-fake-arrow,
.x-is-error .x-form__controls-content .x-select .x-fake-arrow,
.x-is-error .x-form__controls-content .x-radio-button .x-fake-arrow,
.x-is-error .x-form__controls-content .x-cascader .x-fake-arrow,
.x-is-error .x-form__controls-content .x-range-input .x-fake-arrow,
.x-is-error .x-form__controls-content .x-textarea__inner .x-fake-arrow {
  color: var(--td-error-color);
}
.x-is-error .x-form__controls-content .x-select > .x-select__right-icon:not(.x-select__right-icon-clear) {
  color: var(--td-error-color);
}
.x-is-error .x-form__controls-content .x-textarea__inner.x-is-focused {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.x-is-error .x-form__controls-content .x-cascader.x-is-active,
.x-is-error .x-form__controls-content .x-select.x-is-active {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.x-is-error .x-form__controls-content .x-form__status .x-icon {
  color: var(--td-error-color);
}